Analyser les différences entre la soumission d'entrée, le bouton et la touche Entrée pour soumettre des données

De nombreuses soumissions de formulaires ont été utilisées dans des projets récents, et j'ai trouvé que la saisie, le bouton, la soumission et même la touche Entrée peuvent déclencher la soumission du formulaire. Ci-dessous, je vais vous parler des différences dans leur utilisation.

<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 la méthode GET sera utilisée pour accéder à la page après la soumission.
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 :

d3e09144a8405cbdb0ef9fabbbc69061

L'URL soumise 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 input peut également être un bouton, auquel cas il s'agit simplement d'un bouton et ne déclenchera pas la soumission du formulaire.

2. La sémantique du button[tpe=submit]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é du navigateur IE, veuillez rappelez-vous La valeur par défaut de bouton[type] dans IE 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 Enter 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 empêcher sa soumission. Si vous souhaitez appeler une méthode pour décider de bloquer ou non un commit, pensez à 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>

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!