La différence entre le bouton et la saisie dans un formulaire

Cette fois, je vais vous présenter la différence entre le bouton et la saisie dans le formulaire. Quelles sont les précautions lors de l'utilisation du bouton et de la saisie dans le formulaire. Ce qui suit est un cas pratique, jetons un coup d'œil.

Parlons d'abord des définitions du bouton et de la saisie :

1 , à l'intérieur de l'élément , vous pouvez placer n'importe quel contenu, tel que du texte ou des images. C'est la différence entre cet élément et le bouton créé à l'aide de l'élément

2. Le contrôle le contenu entre les balises et est le contenu du bouton, y compris tout contenu de corps acceptable, tel que du texte ou du contenu

multimédia

.

La balise spécifie un champ de saisie dans lequel les utilisateurs peuvent saisir des données.

L'élément un contrôle de saisie qui permet aux utilisateurs de saisir des données ; le type de saisie spécifique dépend de l'attribut de type

Ce qui suit décrit les quatre boutons en détail : , < ;type d'entrée= "bouton"/>, ,

1.  : lorsque l'utilisateur clique sur ce bouton, le formulaire enverra le contenu du formulaire en fonction du paramètre d'attribut d'action de la balise

. Lorsque vous cliquez dessus, la page sera actualisée

Si vous souhaitez vérifier les données du formulaire avant de soumettre les données : Renvoyer false dans la fonction de vérification empêchera le comportement par défaut de submit , c'est-à-dire empêcher la soumission des données du formulaire (empêchant l'actualisation de la page)

<form action="#">
    <input type="text" name="username"/><br/>
    <input type="password" name="password"/><br/>
    <input type="submit" value="登录"/></form>

Remarque :

onsubmit=

"

return check()

"

Le retour ne peut être omis 2. Les boutons ordinaires doivent être associés à JS pour être utile, comme

onclickÉvénements, etc.3.

<form action="#" onsubmit="return check()">
    用户名：<input type="text" name="username"/><br/>
    密码：<input type="password" name="password"/><br/>
    <input type="submit" value="登录"/>
    <input type="button" value="提醒" onclick="remind()"/></form><script  LANGUAGE="JavaScript">function check(){
    console.log("提交前先验证");    var checkElement=document.getElementsByTagName("input");     if(checkElement[0].value==="" || checkElement[1].value==="") {         return false;//当用户名或者密码为空时返回false，此时表单不会提交     }
}function remind(){
    alert("这是一个简单按钮，默认不会提交表单数据,不会刷新页面");
}</script>

4. Les boutons ordinaires sont utilisés de la même manière que

<button type="submit"></button>表单数据提交按钮，与<input type="submit"/> 用法相同

Remarque :

<form action="#" onsubmit="return check()">
    用户名：<input type="text" name="username"/><br/>
    密码：<input type="password" name="password"/><br/>
    <button type="submit">登录</button>
    <button type="button"onclick="remind()">提醒</button></form><script  LANGUAGE="JavaScript">function check(){
    console.log("提交前先验证");    var checkElement=document.getElementsByTagName("input");     if(checkElement[0].value==="" || checkElement[1].value==="") {         return false;//当用户名或者密码为空时返回false，此时表单不会提交     }
}function remind(){
    alert("这是一个简单按钮，默认不会提交表单数据,不会刷新页面");
}</script>

Lorsque n'est pas dans le ; formulaire, son navigateur Le type par défaut est bouton

Lorsque est dans un formulaire button> Value;

Par conséquent, il est recommandé de toujours définir la valeur du type pour le bouton.

Pour résumer :

, utilisé comme bouton de soumission des données du formulaire, la page sera actualisée par défaut

et

sont tous deux des boutons ordinaires et ne le seront pas. actualiser la page par défaut.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php ! Lecture recommandée :

Quelles sont les étapes permettant à Jest de tester les composants natifs de réaction

Explication détaillée des appels implicites de javascript

JS ajoutant de nouveaux éléments

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!