Formulaires et saisie HTML

Formulaires et saisies HTML

Les formulaires HTML sont utilisés pour collecter différents types de saisies utilisateur.

Formulaire HTML

Un formulaire est une zone contenant des éléments de formulaire.

Les éléments de formulaire permettent aux utilisateurs de saisir du contenu dans le formulaire, tel que des zones de texte, des listes déroulantes, des boutons radio, des cases à cocher, etc.

Le formulaire est défini à l'aide de la balise form <form> :

<form>

< input type="">

</form>

Formulaire HTML - élément d'entrée

la balise de formulaire utilisée dans la plupart des cas est la balise d'entrée (<input>).

Le type d'entrée est défini par l'attribut type (type). Les types de saisie les plus fréquemment utilisés sont les suivants :

Champs de texte

Les champs de texte sont représentés par le paramètre de balise <input type="text"> l'utilisateur souhaite saisir des lettres, des chiffres, etc. dans le formulaire, le champ de texte sera utilisé.

<form>
姓名: <input type="text" name="name"><br>
年龄: <input type="text" name="old">
</form>

Remarque : Le formulaire lui-même n'est pas visible. De plus, dans la plupart des navigateurs, la largeur par défaut d'un champ de texte est de 20 caractères.

Le champ du mot de passe est défini par la balise <input type="password"> :

<form>
密码: <input type="password" name="pwd">
</form>

Remarque : les caractères du champ du mot de passe ne seront pas affichés en texte clair, mais seront remplacés par astérisques ou points.

Boutons radio

<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">男
<br>
<input type="radio" name="sex" value="female">女
</form>

cases à cocher

<type d'entrée ="checkbox"> définit une case à cocher. L'utilisateur doit sélectionner une ou plusieurs options parmi un certain nombre de choix proposés.

<form>
<input type="checkbox" name="hobby" value="LOL">我喜欢玩LOL
<br>
<input type="checkbox" name="hobby" value="CF">我喜欢玩CF 
</form>

Bouton Soumettre

<input type="submit "> le bouton de soumission.

Lorsque l'utilisateur clique sur le bouton de confirmation, le contenu du formulaire sera transféré vers un autre fichier. L'attribut action du formulaire définit le nom du fichier de destination. Le fichier défini par l'attribut action effectue généralement un traitement associé sur les données d'entrée reçues. :

<form name="input" action="html_form_action.php" method="get">
用户名: <input type="text" name="user">
密码: <input type="password" name="pwd">
<input type="submit" value="Submit">
</form>

Rassembler ce qui précède :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
姓名：<input type="text" name="name"><br/><br/>
性别：<input type="text" name="sex"><br/><br/>
年龄：<input type="text" name="old"><br/><br/>
<input type="radio" name="sex" value="male">男
<br/><br/>
<input type="radio" name="sex" value="female">女
<br/><br/>
我的爱好：
<br/><br/>
<input type="checkbox" name="hobby" value="LOL">LOL
<br/><br/>
<input type="checkbox" name="hobby" value="CF">CF
<br/><br/>
<input type="checkbox" name="hobby" value="DOTA">DOTA
<br/><br/>
我的家乡：
<select>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="xianggang">香港</option>
</select>
<br/><br/>
用户名: <input type="text" name="user">
<br/><br/>
密&nbsp码: <input type="password" name="pwd">
<br/><br/>
<input type="submit" value="提交">
</form>
</body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form> 姓名：<input type="text" name="name"><br/><br/> 性别：<input type="text" name="sex"><br/><br/> 年龄：<input type="text" name="old"><br/><br/> <input type="radio" name="sex" value="male">男 <br/><br/> <input type="radio" name="sex" value="female">女 <br/><br/> 我的爱好： <br/><br/> <input type="checkbox" name="hobby" value="LOL">LOL <br/><br/> <input type="checkbox" name="hobby" value="CF">CF <br/><br/> <input type="checkbox" name="hobby" value="DOTA">DOTA <br/><br/> 我的家乡： <select> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="xianggang">香港</option> </select> <br/><br/> 用户名: <input type="text" name="user"> <br/><br/> 密&nbsp码: <input type="password" name="pwd"> <br/><br/> <input type="submit" value="提交"> </form> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Formulaires et saisie HTML

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]