La collecte de données collecte de formulaires et de formulaires dans HTML

Ici, nous présenterons la connaissance des éléments de forme et de la soumission de la forme.

L'interface DOM de l'élément de formulaire est HTMLFormElement , qui hérite de HTMLElement , il a donc les mêmes attributs par défaut que les autres éléments HTML, mais il a plusieurs attributs et méthodes uniques: lui-même:

L'élément d'entrée est un élément de formulaire très largement utilisé.

Texte d'entrée <Type d'entrée = nom de texte =>

Soumettre l'entrée <type d'entrée = soumettre>

La seule entrée du bouton <Type d'entrée = Radio Name = doit avoir la même valeur de nom = la valeur du remplissage est préférable à correspondre>

Entrée <entrée Type = Checkbox Name = la même valeur de nom = Valeurs correspondantes différentes>

INPUT numérique <Type d'entrée = nombre min = max => La zone d'entrée ne peut entrer que des nombres et peut définir la valeur maximale et la valeur minimale.

La plage d'entrée <type d'entrée = plage min = max => similaire au nombre, mais il affiche une barre coulissante au lieu de la boîte d'entrée.

La couleur d'entrée <Type d'entrée = Color> apparaîtra dans un sélecteur de couleurs.

La date d'entrée <Type d'entrée = Date> apparaîtra d'un sélecteur de date.

Email Input <entrée Type = Email> s'affiche sous forme de zone de saisie de texte et un clavier personnalisé apparaîtra.

Tél Input <Type d'entrée = Tél> similaire à l'entrée par e-mail

Entrée d'URL <type d'entrée = URL> Similaire à l'entrée par e-mail, un clavier personnalisé apparaîtra également.

Les éléments de TextArea peuvent créer une zone de texte multi-lignes.

<textarea name = id = color = 30 lignes = 10> </ textarea>

Les valeurs d'attribut des cols et de la ligne représentent la largeur et la hauteur de la zone de texte.

Sélectionner des éléments et des éléments d'option peuvent être utilisés pour créer un menu Drop -Down.

<select name = id => <option value => </ option> <option value => </ option> <option value => </ oplct>

Comment grouper?

exemple:

<Type d'entrée = Radio Name = Favorite Value = Play Game> Play Games

<entrée Type = Radio Name = Favorite Value = Writing Code> Code d'écriture

<Type d'entrée = Radio Name = Sex Value = Man> Mâle

<Type d'entrée = Radio Name = Sex Value = Woman> Femme, Femme,

Ce sont les deux groupes de radio

Fournir une information rapide (indice) qui peut décrire la valeur attendue du champ de saisie.

L'invite sera affichée lorsque le champ de saisie est vide, et il disparaîtra lorsque le champ obtiendra le foyer.

Définissez l'entrée cachée. Les champs cachés ne sont pas visibles pour les utilisateurs. Les champs cachés stockent généralement une valeur par défaut et leurs valeurs peuvent également être modifiées par JavaScript.

Par exemple, pour la sécurité, les valeurs de nom et de valeur qui ne sont pas visibles pour les utilisateurs en arrière-plan peuvent être utilisées pour vérifier l'arrière-plan pour vérifier et empêcher les pages de contrefaçon.

Ajoutez un bouton de soumission pour permettre aux utilisateurs de soumettre des formulaires.

Les trois boutons suivants peuvent déclencher l'événement de soumission du formulaire lors du clic:

 <input type = soumed /> <Button Type = soumed> </ Button> <entrée type = image />

La valeur par défaut de type de l'élément bouton dans la spécification est soumise, mais la valeur de méditation est le bouton sous IE678, il est donc nécessaire d'ajouter manuellement la propriété Type = Soumettre à l'élément bouton de la compatibilité.

La personne initiale peut penser que la soumission du formulaire est déclenchée par l'événement de clic du bouton de soumission.

 Form.addeventListener ('soumi', fonction (e) {if (valid ()) {...} e.preventDefault ()})

Lorsqu'il n'y a aucun des trois boutons mentionnés ci-dessus dans l'élément de formulaire, l'utilisateur ne sera pas en mesure de soumettre le formulaire (la clé ENTER est également invalide submit() . submit()

 if (value ()) {form.submit ()}

Sur la base de la technologie AJAX + Cross-domain (CORS) populaire actuelle, nous ne devons probablement pas utiliser un élément de formulaire pour soumettre directement les données au serveur. Bien que cela soit possible, il existe un phénomène de dégradation dans la plupart des cas.

JavaScript peut être utilisé pour vérifier ces données d'entrée dans le formulaire HTML avant l'envoi des données au serveur.

Ces données de formulaire typiques vérifiées par JavaScript sont:

L'utilisateur a-t-il rempli les éléments requis dans le formulaire?

L'adresse postale entrée par l'utilisateur est-elle légale?

L'utilisateur a-t-il saisi une date légale?

Les utilisateurs entrent-ils du texte dans un champ numérique?

Les fonctions suivantes sont utilisées pour vérifier si l'utilisateur a rempli l'élément requis (ou requis) dans le formulaire. Si le doit être rempli ou l'option est vide, alors la boîte d'avertissement apparaîtra et la valeur de retour de la fonction est fausse, sinon la valeur de retour de la fonction est vraie (signifie que les données ne sont pas un problème):

 Fonction Value_Required (champ, alerttxt) {avec (champ) {if (valeur == null || value ==) {alerttxt);

Vous trouverez ci-dessous le code avec le formulaire HTML:

 <html> <éadfr> <script type = text / javascript> function value_required (champ, alerttxt) {avec (champ) {if (value == null || value ==) {alert (alert lerttxt); {Return true}} fonction value_form (this) {with (this) {if (value_required (e-mail, e-mail doit être rempli!) {Email.foc us (); return false}}} </cript> </adf> <body> <formulaire Action = soumetspage.htm onSubmit = return validate_form (this) Method = Post> e-mail: <entrée type = nom de texte = 30> <Type d'entrée = soumettre Value = soumed> </ form> </body> < / html>

Les fonctions suivantes vérifient si les données d'entrée sont conformes à la syntaxe de base de l'adresse e-mail.

Cela signifie que les données d'entrée doivent contenir @ symboles et numéros de points (.). En même temps, @ pas le premier caractère de l'adresse e-mail, et au moins un numéro de point après @ 同时:

 Fonction Value_Email (champ, alerttxt) {avec (champ) {apos = value.indexof (@) dotpos = value.lastIndexof (.) If (apos <1 || dotpos-apos <2) lert (alerttxt); Else {return true}}}

Vous trouverez ci-dessous le code complet avec le formulaire HTML:

 <html> <éadf> <script type = text / javascript> function value_email (champ, alerttxt) {avec (champ) {apos = value.indexof (@) dotpos = value .lastIndexof (.) if (apos <1 || dotpos-apos <2) {alert (alerttxt); = False) {email.focus (); return false}} </ script> </ head> <body> <formulaire d'action = soumidepage.htmonsubmit = return valide_form (this); Nom du texte = Taille de messagerie = 30> <Type d'entrée = Soumider Value = Soumider> </ Form> </ Body> </Html>

En l'absence du package de l'élément de formulaire, même si la page actuelle est sur l'élément de formulaire, appuyez sur les touches Entrée ne déclenchera pas le formulaire du formulaire. , détruisant le flux d'origine d'origine. La solution la plus simple consiste à l'envelopper avec un élément de forme sur la couche externe et à déterminer qu'il y a au moins un bouton de soumission dans l'élément de forme. À l'heure actuelle, lorsque le domaine d'entrée du formulaire est concentré, l'utilisateur appuie sur la touche Entrée pour déclencher la soumission.

Lors de la soumission d'un formulaire, le navigateur de haut niveau, y compris le navigateur mobile, demandera aux utilisateurs si vous devez vous souvenir du mot de passe du compte utilisateur pour les utilisateurs généraux, il s'agit d'une fonctionnalité très utile. En l'absence d'élément de forme, le navigateur n'apparaîtra pas la fenêtre d'enquête.

Lorsque nous développons une application de formulaire, nous ne devons pas essayer de supprimer les éléments de formulaire et de le soumettre directement. Traitement des incidents soumis dans l'événement Soumettre de l'élément de formulaire, pas l'événement de clic du bouton de soumission.

se référer à:

Élément de formulaire et soumission de formulaire