Maison > Article > interface Web > Explication détaillée de l'utilisation de la balise form en HTML5

Explication détaillée de l'utilisation de la balise form en HTML5

小云云original: 2018-03-05 14:50:032523parcourir

Cet article partage principalement avec vous une explication détaillée de l'utilisation de la balise form en HTML5. Je partagerai avec vous l'utilisation du formulaire avec des exemples de code.

Syntaxe :

, et le formulaire doit être placé entre eux.

2. Méthode de transmission, get/post est une question que les programmeurs back-end doivent considérer

3. action Les données saisies par le spectateur est l'endroit vers lequel envoyer, comme une page php, (save.php)

< formulaire méthode="post" action="save.php">
🎜><étiquette pour="nom d'utilisateur" >Nom d'utilisateur :étiquette>
<entrée type= "texte" nom="nom d'utilisateur" />
<étiquette pour="pass">密码 :étiquette >
<entrée type="mot de passe" nom=" passe" />
formulaire>

Zone de saisie de texte, zone de saisie de mot de passe

Lorsque l'utilisateur doit saisir des lettres, des données, etc. dans le formulaire, la zone de saisie de texte est utilisée et la zone de saisie de texte est également utilisée. Peut être convertie en zone de saisie de mot de passe

Syntaxe :

<formulaire>
<saisie type = "texte/mot de passe" nom = "nom" valeur = "texte" />
formulaire > Lorsque le type est du texte, il s'agit d'une zone de saisie de texte
Lorsque le type est mot de passe, il s'agit de la zone de saisie du mot de passe
2.name : nommez la zone de texte à utiliser en arrière-plan asp php
3.value : définissez la valeur par défaut pour la zone de saisie de texte (généralement utilisée comme invite)
1. >
2. < html> tête
 >
3. méta http-equiv
4. "Content-Type" contenu ="text/html; charset=utf-8">
5. <titre>Zone de saisie de texte, zone de saisie de mot de passetitre> ;/tête
6. <corps
7. <formulaire
8. méthode="post" action="save.php"> Compte :
9. <entrée type = "texte" nom = "monNom" />
10. ;
11. 密码：
12. <saisie type = "mot de passe " nom = "pass"/>
13. formulaire>
14. corps>
15. html>
Résultat :

Compte :
Mot de passe :

Champ de texte : prend en charge la saisie de texte sur plusieurs lignes

La saisie de texte est utilisée lorsque les utilisateurs doivent saisir de gros blocs de texte dans le formulaire Domaine

syntaxe :

<textarea lignes = "Nombre de lignes" cols = "Nombre de colonnes" > texte textarea>

Explication : 1. Le champ de saisie de texte commence par et se termine par

2.rows : Saisie Le nombre de lignes du champ de saisie de texte

3.cols : Saisissez le nombre de colonnes du champ de saisie de texte

4 . Dans < /textarea> Entrez la valeur par défaut entre les balises .<ol class="dp-xml list-paddingleft-2" style="border-top:none;border-right:1px solid rgb(231,229,220);border-bottom:none;border-left:none;background-color:rgb(255,255,255);color:rgb(92,92,92);"> <li><!DOCTYPE HTML> </li> <li><html> </li> <li><tête> </li> <li> <méta http-equiv="Content-Type" content="text/html; charset=utf-8"> </li> <li> <titre>文本域 </titre> </li> <li></tête> </li> <li><corps> </li> <li><formulaire méthode = "post" action = "save.php"> </li> <li> <étiquette>个人简介< /étiquette> </li> <li> <zone de texte lignes = "5" cols = "10">Entrez le contenu ici . ..</textarea></span> ; </li><li> 🎜>type = "soumettre" valeur = "OK" nom = "soumettre" /> </li> <li> <entrée type = "reset" valeur = "reset" nom = "réinitialiser" /> </li> <li> </formulaire> </li> <li></corps> </html</li><li>> Présentation personnelle <lable> </li> </ol> Utilisez des boutons radio et des cases à cocher pour permettre aux utilisateurs de sélectionnerLors de l'utilisation de formulaires pour concevoir des questionnaires, afin de réduire le Pour le fonctionnement de l'utilisateur, l'utilisation d'une case de sélection est un bon moyen. En HTML, il existe des boutons radio et des cases à cocher. La principale différence entre les deux est que dans le bouton radio, l'utilisateur ne peut sélectionner qu'une seule option, tandis que dans la case à cocher, l'utilisateur. peut sélectionner n'importe quel Sélectionnez plusieurs éléments ou même tout sélectionner. <ol class="dp-xml list-paddingleft-2" style="border-top:none;border-right:1px solid rgb(231,229,220);border-bottom:none;border-left:none;background-color:rgb(255,255,255);color:rgb(92,92,92);"><li><entrée type = "radio/case à cocher" valeur = "valeur" nom = "nom" coché = "coché" /> </li></ol> Explication : 1. tapez : radio : bouton radio de contrôle case à cocher : case à cocher de contrôle 2. valeur : La valeur qui fournit des données au serveur 3. name : Nommez le contrôle à utiliser par le programme d'arrière-plan ASP, PHP 4.checked : Lors du réglage vérifié = "checked" , ceci L’option est sélectionnée par défaut. <ol class="dp-xml list-paddingleft-2" style="border-top:none;border-right:1px solid rgb(231,229,220);border-bottom:none;border-left:none;background-color:rgb(255,255,255);color:rgb(92,92,92);"> <li><!DOCTYPE HTML> </li> <li><html> </li> <li><tête> </li> <li> <meta http-equiv=" Content-Type" content="text/html; charset=utf-8"> </li> <li> <titre>单选框、复选框</titre> </li> <li></tête> </li> <li><corps> </li> <li><formulaire nom = "iForm" méthode = "post" action = "save.php"> </li> <li> Êtes-vous Vous aimez voyager ? <br /> </li> <li> <entrée type = "radio" nom = "radioLove" valeur = "喜欢" coché = "coché"/></span> </li> <li> <entrée type = "radio" nom = "radioLove" valeur = "不喜欢" /> </li> <li> <entrée type = "radio" nom = "radioLove" valeur = "Ça n'a pas d'importance"/> </li> <li> <br /> <br /> </li> <li> Quels sports vous intéressent ? <br /> </li> <li> <entrée type = "checkbox" nom = "checkbox1" valeur = "跑步"/> </li> <li> <entrée type = "case à cocher" nom = "checkbox1" valeur = "打球" coché = "coché"/> </li> <li> <entrée type = "checkbox" nom = "checkbox1" valeur = "登山" coché = "coché"/> </li> <li> <entrée tapez = "checkbox" nom = "checkbox1" valeur = "健身" /> </li> <li> </li> <li></formulaire> </li> <li></corps> </li> <li></html> </li> </ol> Résultats : Vous aimez voyager ? Quels sont les sports qui vous intéressent ? Remarque : La valeur du nom des boutons radio d'un même groupe doit être cohérente, afin que les boutons radio d'un même groupe puissent jouer le rôle de sélection radio. Zone de liste déroulante Utilisez le menu déroulant -down zone de liste, Économisez de l'espace, vous pouvez sélectionner des sélections simples ou multiples. Sélection unique : <ol class="dp-xml list-paddingleft-2" style="border-top:none;border-right:1px solid rgb(231,229,220);border-bottom:none;border-left:none;background-color:rgb(255,255,255);color:rgb(92,92,92);"> <li><!DOCTYPE HTML > </li> <li><html> </li> <li><tête> </li> <li> <meta http-equiv="Content-Type " content="text/html; charset=utf-8"> </li> <li> <titre>下拉页表框</titre> </li> <li></tête> </li> <li><corps> </li> <li><formulaire nom = "iForm" méthode = "post" action = "save.php"> </li> <li> < étiquette>爱好 :</étiquette> </li> <li> <sélectionner> </li> <li> <option valeur = "Lecture">Lecture</option>< /span> </li> <li> >option valeur = "Sports">Sports< /option> </li> <li> <option valeur = "Musique">Musique</option> </li> <li> <option valeur = "Voyage">Voyage</option></li> <li> valeur = "Shopping"> ;Shopping</option> </li> <li> <span style= "color:#ff0000;"></sélectionnez></envergure> </li> <li> </li> <li></formulaire> </li> <li> </corps> </li> <li></html> </li> </ol> Résultat : Loisirs : Lecture, sports, musique, voyages et shopping (peut être déroulant) <option value = "Soumettre la valeur " > option< /option> Soumettre la valeur : c'est la valeur soumise au serveur Option : c'est la valeur affichée Définir la sélection = "sélectionné", puis ceci L’option est sélectionnée par défaut. Sélection multiple : Changez simplement le <select> ci-dessus en <select multiple = "multiple" >, puis ctrl et cliquez simultanément sous Windows, sous Mac Command + cliquez Utilisez le bouton Soumettre pour soumettre des données Il y a deux boutons qui peuvent être utilisés dans le formulaire, le bouton Soumettre et la réinitialisation Lorsque l'utilisateur doit soumettre des informations au. serveur, le bouton Soumettre est nécessaire. Syntaxe : <input type = "submit" value = "Submit"> Explication : 1 Seulement lorsque type = " sumit", le bouton a la fonction de soumission 2.valeur : Les mots affichés sur le bouton Réinitialiser Lorsque le utilisateur Lorsque vous devez réinitialiser les informations du formulaire à leur état initial, vous pouvez utiliser le bouton de réinitialisation, changez simplement le type à réinitialiser. <input type = "reset" value = "reset"> Explication : 1. La même chose s'applique au bouton de soumission, uniquement lorsque type = ". réinitialiser" Uniquement lorsque le bouton a une fonction de réinitialisation 2.value : Le texte affiché sur le bouton étiquette d'étiquette étiquette d'étiquette ne sera pas être affiché à l'utilisateur Présenter des effets spéciaux. Sa fonction est d'améliorer la convivialité pour les utilisateurs de la souris. Si vous cliquez sur le texte à l'intérieur de l'étiquette, ce contrôle sera déclenché lorsque l'utilisateur cliquera pour sélectionner l'étiquette. label, le navigateur mettra automatiquement le focus sur le contrôle de formulaire lié à l'étiquette (le contrôle de formulaire associé à l'étiquette de l'étiquette sera automatiquement sélectionné Syntaxe : <label for); = "control id Name" > Remarque : La valeur de l'attribut for dans la balise doit être la même que la valeur de l'attribut id du contrôle associé <ol class="dp-xml list-paddingleft-2" style="border-top:none;border-right:1px solid rgb(231,229,220);border-bottom:none;border-left:none;background-color:rgb(255,255,255);color:rgb(92,92,92);"> <li><formulaire> </li> <li> <étiquette pour="mâle">Mâle</étiquette> </li> <li> <entrée type= "radio" nom="genre" <span style="couleur:#ff0000;"> id="mâle"</span> /> </li> <li> <br /> </li> <li> <étiquette pour= "femelle">女</étiquette> </li> <li> <entrée type ="radio" nom="genre" <span style="couleur :#990000;"> ;id="femelle"</span> /> </li> <li> <étiquette pour= "email">Entrez votre adresse email</libellé> </li> <li> <saisie type ="email" <span style ="color:#ff6666;">id="email"</span> placeholder=" Entrer email"> </li> <li></formulaire> </li> </ol> Résultat : Homme Femme Entrez votre adresse e-mail Ce qui suit est imité par vous-même et peut être vérifié : <ol class="dp-xml list-paddingleft-2" style="border-top:none;border-right:1px solid rgb(231,229,220);border-bottom:none;border-left:none;background-color:rgb(255,255,255);color:rgb(92,92,92);"> <li> <!DOCTYPE HTML> </li> <li><html> </li> <li><tête> </li> <li> <méta http-equiv="Contenu -Type " content="text/html; charset=utf-8"> </ </li><li>tête> ><corps> </li> </ol> <li><formulaire></li> <li></li> <li> Quoi les sports qui vous intéressent : <br/> </li> <li> <étiquette pour = "sport1">慢跑</étiquette> </li> <li> <entrée type = "case à cocher" nom = "sports" id = "sport1"/> </li> <li> <br /> </li> <li> <étiquette pour = "sport2">登山</label> </li> <li> <entrée type = "case à cocher" nom = "sports" id = "sport2"/> </li> <li> <br /> </li> <li> <étiquette pour = "sport3">篮球</étiquette> </li> <li> <entrée type = "case à cocher" nom = "sports" id = "sport3"/> <br /> </li> <li></formulaire> </li> <li> </li> <li></corps> ; </li> <li></html> </li> Résultats : Quels sports vous intéressent : Jogging Randonnée Basketball Recommandations associées : <a href="http://www.php.cn/js-tutorial-387196.html" target="_self"> Méthode de mise en œuvre de génération dynamique de formulaire </a> <a href="http://www.php.cn/js-tutorial-385336.html" target="_self">Exemple de méthode JavaScript pour ajouter dynamiquement des éléments de formulaire de formulaire</a> <a href="http://www.php.cn/div-tutorial-385258.html" target="_self">Explication détaillée des éléments de formulaire de formulaire HTML</a>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!</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng">Déclaration：<div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox">Article précédent：<a class="dBlack" title="Méthode de formatage du code HTML dans le fichier vue" href="http://m.php.cn/fr/faq/387471.html">Méthode de formatage du code HTML dans le fichier vue</a>Article suivant：<a class="dBlack" title="Méthode de formatage du code HTML dans le fichier vue" href="http://m.php.cn/fr/faq/387478.html">Méthode de formatage du code HTML dans le fichier vue</a></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><a href="http://m.php.cn/fr/article.html" class="bBlack">Voir plus</a><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><a href="http://m.php.cn/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><a href="http://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><a href="http://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><a href="http://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><a href="http://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/fr/">Maison</a></li><li><a href="http://m.php.cn/fr/course.html">Cours</a></li><li><a href="http://m.php.cn/fr/wenda.html">Questions et réponses</a></li><li><a href="http://m.php.cn/fr/login">Mon</a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><a href="http://m.php.cn/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/">Maison<div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html">Cours<div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html">Article<div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html">Questions et réponses<div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html">Dictionnaire<div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html">Manuel<div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/">Télécharger<div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet">Sujet<div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;">简体中文（ZH-CN）</a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;">English（EN）</a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;">繁体中文（ZH-TW）</a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;">日本語（JA）</a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;">한국어（KO）</a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;">Melayu（MS）</a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;">Français（FR）</a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;">Deutsch（DE）</a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append(""); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>