Formulaires et ...SE CONNECTER

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

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


section suivante
<!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>
soumettreRéinitialiser le code
chapitredidacticiel