Maison >interface Web >tutoriel HTML >Utilisation des balises de formulaire HTML

Utilisation des balises de formulaire HTML

小云云
小云云original
2018-01-26 11:19:406937parcourir

En général, la balise d5fd7aea971a85678ba271703566ebfd est utilisée dans les formulaires pour collecter les informations de saisie de l'utilisateur. Le type de saisie est déterminé par le type. La balise de formulaire la plus couramment utilisée est la balise d'entrée (d5fd7aea971a85678ba271703566ebfd). Les types d'entrée sont définis par l'attribut type (type). Les types de saisie courants incluent les champs de texte, les boutons radio, les cases à cocher, les menus déroulants, etc.

Les formulaires en HTML peuvent être utilisés pour collecter différents types d'informations saisies par l'utilisateur. Un formulaire est en fait une zone contenant des éléments de formulaire. Les informations saisies sur divers éléments de cette zone seront finalement soumises au script du programme via le formulaire. Par exemple, les plus courants incluent la connexion des utilisateurs, l'enregistrement, la publication d'articles, etc., qui sont tous soumis à des programmes dynamiques pour être traités via des formulaires. Cette section parle principalement des formulaires et des éléments de formulaire. La façon de soumettre les informations du formulaire à des programmes dynamiques sera abordée dans les futures leçons de langage de programmation.
La zone du formulaire utilise la balise ff9c23ada1bcecdd1a0fb5d5a0f18437 pour définir la portée du formulaire. Les valeurs des éléments dans ff9c23ada1bcecdd1a0fb5d5a0f18437f5a47148e367a6035fd7a2faa965022e cette forme.
Champ de texte
Le champ de texte peut fournir aux utilisateurs la fonction de saisie de texte. Le navigateur interprétera le champ de texte comme une boîte rectangulaire. L'utilisateur déplace le curseur vers la boîte et clique sur Le. le curseur peut être déplacé dans le cadre. Les utilisateurs peuvent saisir des lettres, des chiffres, etc. dans le formulaire.
Le champ de texte est défini en définissant la valeur du texte pour l'attribut type dans la balise d5fd7aea971a85678ba271703566ebfd


Code XML/HTML Copier le contenu dans le presse-papiers

  1. fac74ff8e3a743540fd61ac97cb240c4

  2. Champ de texte 1 :1c49cf4d3a821b69e0fe6289cb0ba7ee

  3. Champ de texte 2 :900840ce9940ec9b5fdbbbe385516c03

  4. formulaire>

Le navigateur s'affiche comme suit :
201678135308382.png (296×89)

Bouton radio
Bouton radio dans la plupart des cas Apparaît dans les options permettant aux utilisateurs de saisir des informations lors de leur inscription. Ce type de multi-utilisateur ne permet aux utilisateurs de sélectionner qu'un seul résultat.
Le bouton radio est défini en définissant la valeur de l'attribut type sur radio dans la balise d5fd7aea971a85678ba271703566ebfd

  1. <form>
    <input type=”radio” name=”sex” value=”male” /> 男生   
    <input type=”radio” name=”sex” value=”female” /> 女生   
    </form>

L'affichage dans le navigateur est :
201678135342504.png (164×77)

case à cocher
Les cases à cocher permettent aux utilisateurs de cocher certaines options ou options correspondantes. Une solution courante consiste à fournir aux utilisateurs des fonctions telles que la mémorisation de leur compte de connexion lorsqu'ils se connectent. Vous pouvez également recueillir plusieurs opinions des utilisateurs sur la page d'enquête auprès des utilisateurs. La case à cocher
est définie en définissant la valeur de l'attribut type sur checkbox

  1. <form>
    <input type=”checkbox” name=”val1″ />
    前端开拓者不错   
    <input type=”checkbox” name=”val2″ />
    前端开拓者一般   
    </form>

dans la balise d5fd7aea971a85678ba271703566ebfd suit :
201678135409883.png (203×92)

Menu déroulant
Le menu déroulant est similaire à la sélection radio dans la sélection d'informations, mais le menu déroulant peut accueillir plus d'informations. Et le menu déroulant peut exécuter des scripts supplémentaires après avoir sélectionné la valeur du menu.
Le menu déroulant commence par 221f08282418e2996498697df914ce4e, et chaque balise d'option dans la balise de sélection est une valeur dans le menu déroulant.

  1. <form>
    <select name=”cars”>
    <option value=”volvo”>Volvo</option>
    <option value=”saab”>Saab</option>
    <option value=”fiat”>Fiat</option>
    <option value=”audi”>Audi</option>
    </select>
    </form>

Le navigateur affiche :
201678135442039.png (149×83)

Bouton Soumettre
Bouton Soumettre est une partie nécessaire de chaque forme. Une fois que l'utilisateur a saisi les informations correspondantes, il doit cliquer sur le bouton Soumettre pour déclencher l'action et soumettre les valeurs du formulaire à la page suivante. Lorsque l'attribut d'action dans la balise ff9c23ada1bcecdd1a0fb5d5a0f18437 définit l'adresse de soumission correspondante, le bouton de soumission soumettra toutes les données obtenues dans le formulaire à la page à cette adresse.
Le bouton de soumission est défini en définissant la valeur du type à soumettre dans la balise d'entrée. Ce qui suit est un exemple de champ de recherche du développeur front-end, définissant l'adresse de soumission comme page de recherche.

  1. <form name=”input” action=”http://www.frontopen.com/” method=”get”>
    关键字:   
    <input type=”text” name=”s” id=”s” />
    <input type=”submit” value=”搜索” />
    </form>

Le navigateur s'affiche comme suit :
201678135509377.png (401×69)

Conclusion : cette section fournit uniquement une démonstration et une explication de base des éléments de mise en page frontale des formulaires couramment utilisés. Les applications sous forme réelle sont principalement utilisées dans les langages de programmation serveur, et davantage de paramètres et de règles doivent être définis. Dans cette leçon, il vous suffit de comprendre comment organiser les éléments du formulaire. Dans la plupart des cas, vous pouvez essentiellement coopérer avec le programmeur en arrière-plan pour terminer le développement du site Web.

Recommandations associées :

Explication détaillée des éléments du formulaire HTML

Vérification du formulaire JQuery si le bouton radio est sélectionné Résumé de l'expérience

L'applet WeChat implémente simplement le formulaire pour obtenir des données d'entrée et partage des exemples

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!

Déclaration:
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