Exemple d'analyse de la différence entre la saisie, la soumission, le bouton et la touche Entrée pour soumettre des données

Cet article utilisera des exemples pour analyser les différences entre la saisie, la soumission, le bouton et la touche Entrée pour soumettre des données. Récemment, de nombreuses soumissions de formulaires ont été utilisées dans des projets, et il s'avère que la saisie, le bouton, la soumission et la saisie. même la touche Entrée peut déclencher la soumission du formulaire. Ce qui suit sera expliqué séparément. Parlons des différences d'utilisation entre eux, j'espère que cela pourra aider tout le monde.

<form>
  <input name="name">
  <input type="submit" value="提交">
</form>

Soumis de cette manière, lorsque la valeur d'entrée est 22222222, l'url soumise plus tard deviendra localhost:3980/input.html?name=222222
Il y a quelques détails remarquables :

Après avoir défini type=submit, le contrôle de saisie deviendra un bouton et le texte affiché sera sa valeur. La valeur par défaut est Submit.
La valeur par défaut de form[method] est GET, donc après la soumission, la méthode GET sera utilisée pour accéder à la page.
La valeur par défaut de input[type] est le texte, donc la première entrée est affichée sous forme de zone de texte.

La saisie est en fait un bouton modifié à partir d'un contrôle de saisie, issu de la conception brute des premiers jours du Web. Nous pouvons le vérifier en lui attribuant un nom :

Soumettre L'URL finale deviendra localhost:3980/input.html?name=222222&btn=submit

Notez que l'URL est /?key=foo&btn=ok. Le contrôle de saisie sous forme de bouton est également soumis au serveur sous forme de saisie de formulaire. S'agit-il d'un contrôle interactif ou d'un contrôle de données ? Le positionnement est un peu flou. De plus, son style est difficile à personnaliser et ne peut pas être utilisé comme conteneur pour d'autres balises, il est donc recommandé de ne pas utiliser la saisie comme bouton d'envoi de formulaire.

Remarque : L'attribut type de saisie peut également être un bouton. Dans ce cas, il s'agit simplement d'un bouton et ne déclenchera pas la soumission du formulaire.

2. bouton[tpe=submit] La sémantique du bouton est très claire, c'est-à-dire qu'un bouton ne contient pas de données et sa fonction est l'interaction de l'utilisateur. Mais il possède également des attributs de type et de valeur. La valeur par défaut du type est submit, donc cliquer sur un bouton entraînera la soumission du formulaire :

<form>
 <input name=&#39;key&#39;>
 <button>确定</button>
</form>

Si vous effectuez la compatibilité avec le navigateur IE, n'oubliez pas la valeur par défaut du bouton[type] dans IE, la valeur est bouton, ce qui signifie qu'il s'agit simplement d'un bouton et ne déclenche pas la soumission d'un formulaire.

De plus, nous spécifions le texte du bouton en définissant le contenu de l'élément. Cela signifie que le bouton est un contrôle conteneur, qui peut contenir des balises HTML arbitraires, et que le style est plus facile à personnaliser. C'est l'une des raisons pour lesquelles les boutons sont largement utilisés comme exemples dans la documentation Bootstrap.

Cependant, les boutons seront en désordre. Le bouton peut définir le nom et la valeur. Lorsque le formulaire est soumis, la valeur sera soumise au serveur en tant que données de formulaire. Dans IE, le contenu entre les balises de début et de fin du bouton sera même soumis au serveur en tant que valeur correspondant au nom. Les similitudes entre le bouton et l'entrée ne s'arrêtent pas là. Button peut également être défini avec type=reset. Cliquer sur le bouton entraînera la réinitialisation du formulaire (c'est très utile). w3school donne l'exemple suivant :

<form action="form_action.asp" method="get">
 First name: <input type="text" name="fname" />
 Last name: <input type="text" name="lname" />
 <button type="submit" value="Submit">Submit</button>
 <button type="reset" value="Reset">Reset</button>
</form>

Pas grand chose à dire sur les boutons Il est recommandé d'utiliser les boutons comme boutons interactifs pour soumettre des formulaires. Veuillez également faire attention au paramètre type=submit pour être compatible avec IE.

Touche Entrée pour soumettre le formulaire

Touche Entrée pour soumettre le formulaire ! Mais vous avez peut-être remarqué que tous les formulaires ne peuvent pas être soumis avec la touche Entrée. Regardons la norme HTML2.0 :

Lorsqu'il n'y a qu'un seul champ de saisie de texte sur une seule ligne dans un formulaire, l'agent utilisateur doit accepter la saisie dans ce champ comme une demande de soumission du formulaire.

Lorsqu'il n'y a qu'un contrôle de saisie de texte sur une seule ligne dans le formulaire, l'agent utilisateur doit accepter la touche Entrée pour soumettre le formulaire.

"Une seule ligne" fait référence au type texte plutôt qu'à une zone de texte. Évidemment, il est inacceptable d'appuyer sur Entrée pour soumettre le formulaire dans une zone de texte. En fait, dans la pratique, plusieurs entrées sur une seule ligne peuvent également être soumises à l'aide de Entrée, comme la page de connexion.

4. Empêcher la soumission de formulaire

Empêcher la soumission de formulaire est également un sujet courant et est généralement utilisé pour la validation de formulaire côté client. La méthode générale consiste à définir onsubmit :

<form onsubmit="return false;">
 <input name=&#39;key&#39;>
 <input value=&#39;ok&#39; type=&#39;submit&#39;>
</form>

Il vous suffit de renvoyer false à la fin d'une série d'instructions onsubmit pour éviter qu'elle ne soit soumise. Si vous souhaitez appeler une méthode pour décider d'empêcher ou non la soumission, n'oubliez pas de renvoyer la valeur de retour de la méthode ici :

<form onsubmit="return false;">
 <input name=&#39;key&#39;>
 <input value=&#39;ok&#39; type=&#39;submit&#39;>
</form>

Recommandations associées :

Données de soumission du formulaire de formulaire problèmes

Questions sur la soumission des données

Exemple de la façon de contrôler le format d'entrée en html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!