Fermer

juin 24, 2019

Enregistrer pour une fonctionnalité ultérieure dans les formulaires à l'aide de LocalStorage


Les formulaires font partie intégrante du Web, mais leur remplissage peut s'avérer fastidieux, notamment avec les formulaires longs. Apprenons à créer une fonctionnalité "Enregistrer pour plus tard" pour les formulaires à l'aide de HTML5 LocalStorage. Les utilisateurs pourront continuer à remplir un formulaire là où ils l'avaient laissé même après l'avoir fermé, et lorsqu'ils reviennent à la page, le formulaire est pré-rempli avec les informations saisies précédemment.

Les formulaires font partie intégrante du Web. . C’est l’un des principaux moyens d’acquérir des données de tout type.

Bien que les formulaires soient excellents, il existe plusieurs raisons pour lesquelles les utilisateurs hésitent à remplir des formulaires, en particulier avec les longs formulaires d’enregistrement et les enquêtes.

Encourager les utilisateurs à remplir des formulaires afin que nous puissions obtenir les données nécessaires, nous devons rendre le remplissage des formulaires plus pratique pour les utilisateurs. Une façon d'y parvenir consiste à implémenter une fonctionnalité «enregistrer pour plus tard» dans les formulaires.

Il s'agit d'une technique permettant de garantir que les utilisateurs ne perdent pas par erreur les données de formulaire déjà remplies et peuvent également remplir de manière pratique des formulaires longs.

article, nous allons implémenter une fonctionnalité «enregistrer pour plus tard» en utilisant LocalStorage. Voici un aperçu de ce que nous allons construire:

Notre application de démonstration

Prérequis

Pour suivre ce didacticiel, des connaissances de base en HTML, CSS et JavaScript sont nécessaires.

Configuration de l'application

19659009] Pour configurer notre application, créez un répertoire et créez-y trois fichiers:

  • index.html
  • form.css
  • form.js

Lancez votre éditeur favori et ajoutez les éléments suivants. balisage pour votre index.html fichier:


 
  < html   lang  =  " en "  > [19659021] < head > 
  < meta   charset  =  " UTF-8 "   /> 
  <>  meta   name  =  " viewport "    content  =  " width = largeur du périphérique, initial- scale = 1.0  "  /> 
  < meta   http-equiv  = "  Compatible X-UA  "   content  = "  ie = bord  "  /> 
  < lien [19659017] rel  =  " feuille de style "    href  =  " form.css "   /> [19659023] < titre >  Enregistrer plus tard  </  titre > 
  </  tête > 
  < corps > 
  < div   class  =  " alert "  >   </  div > 
  < form   id  =  " sous" forme ""  > 
        < h3 >  Forme simple, sauvegardez plus tard  </  h3 > 
        < label   pour  =  " nom complet "  >  nom complet  </  étiquette > 
        < input   type  =  " texte "    nom  =  " nom complet  "   id  = "  nom complet  "  /> 
        < label   pour  =  " email "  >  Email  </  label  ]> 
        < input   type  =  " email "    nom  =  " email
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link