Tutoriel sur l'utilisation des balises de formulaire HTML

Les formulaires constituent le moyen le plus simple d'interagir avec les entrées utilisateur et les données côté serveur sur une page Web. Nous nous concentrons ici sur l'affichage du contenu du formulaire le plus élémentaire et examinons le didacticiel d'utilisation des balises de formulaire HTML

<.>En HTML, les formulaires peuvent être utilisés pour collecter différents types d'informations saisies auprès des utilisateurs. 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

pour définir la portée du formulaire. Les valeurs des éléments dans

cette forme.

Informations de saisie
Généralement, la balise 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 (). 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.

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 pour déplacer le curseur. . Entrez 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

<form>  
文本域1:<input type=”text” name=”firstname” />  
文本域2:<input type=”text” name=”lastname” />  
</form>

Le navigateur s'affiche comme suit :

Bouton radio

Le bouton radio apparaît le plus souvent dans les options permettant aux utilisateurs de saisir des informations lors de leur inscription. Ce type de multi-utilisateur permet aux utilisateurs de sélectionner un seul résultat.
Le bouton radio est défini en définissant la valeur de l'attribut type sur radio

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

dans la balise >

Box à cocher

Box à cocher permet à l'utilisateur de cocher une ou plusieurs 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 dans la balise

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

Le navigateur s'affiche comme suit :

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 , et chaque balise d'option dans la balise de sélection est une valeur dans le menu déroulant.

<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>

Affichage du navigateur :

Bouton Soumettre

Le bouton Soumettre est nécessaire pour tous les composants du formulaire . 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

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.

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

Le navigateur s'affiche comme suit :

Conclusion : Cette section n'est qu'une démonstration et une explication de base du front de formulaire couramment utilisé. éléments de mise en page de fin. 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.

Pour plus de didacticiels d'apprentissage sur l'utilisation des balises de formulaire HTML et d'articles connexes, veuillez prêter attention au site Web PHP chinois !