Latest web development tutorials

formulaire HTML

Formulaires HTML sont utilisés pour collecter différents types d'entrée de l'utilisateur.


Exemples

exemples en ligne

Créer un champ de texte (champ texte)
Cet exemple montre comment créer un champ de texte dans la page HTML. L'utilisateur peut écrire du texte dans un champ de texte.

Créer un champ de mot de passe
Cet exemple montre comment créer un champ de mot de passe de HTML.

(Au bas de cette page, vous pouvez trouver d'autres exemples.)


formulaire HTML

La forme est une région qui contient les éléments de formulaire.

élément de formulaire est de permettre à l'utilisateur d'entrer le contenu sous la forme, par exemple: le texte des champs (textarea), des listes déroulantes, boutons radio (radio-boutons), des cases à cocher (cases à cocher) et ainsi de suite.

Formulaire utilise des balises de formulaire <form> set:

<form>
.
input 元素
.
</form>


Les formulaires HTML - éléments d'entrée

Dans la plupart des cas sont sous forme utilisée tag est une balise d'entrée (<input>).

Le type d'entrée est l'attribut (type) des définitions de type. Le plus souvent, les types d'entrée utilisées sont les suivantes:


Champ de texte (champs de texte)

Par champ de texte <input type = "text"> pour définir quand l'utilisateur de taper des lettres, des chiffres, et d'autres contenus sous une forme, le champ de texte sera utilisé.

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

Le navigateur affiche les éléments suivants:

Prénom:
Nom de famille:

Remarque: La forme elle - même ne soit pas visible.En outre, dans la plupart des navigateurs, la largeur par défaut du champ de texte est de 20 caractères.


champ Mot de passe

champs de mot de passe par tag <input type = "password"> pour définir:

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

Le navigateur affiche les effets suivants:

Mot de passe:

Remarque: Les caractères de champ de mot de passe ne sont pas affichés en texte clair, mais avec un astérisque ou des points à la place.


Radio button (boutons radio)

<Input type = "radio"> définit la table seule options de la boîte

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

Le navigateur affiche les effets suivants:

mâle
femelle

Cochez les cases (cases à cocher)

<Input type = "checkbox"> définit une case à cocher. Les utilisateurs doivent sélectionner une ou plusieurs options de plusieurs choix donnés.

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

Le navigateur affiche les effets suivants:

J'ai un vélo
J'ai une voiture

bouton (Bouton Soumettre) Soumettre

<Input type = "submit"> définit le bouton soumettre.

Lorsque l'utilisateur clique sur le bouton OK, le contenu du formulaire seront transférés vers un autre fichier. attribut action du formulaire définit le nom de fichier du fichier de destination. Défini par l'attribut action du fichier aurait normalement reçu des données d'entrée relatives au traitement. :

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Le navigateur affiche les effets suivants:

Nom d'utilisateur:

Si vous tapez quelques lettres dans la zone de texte ci-dessus, puis cliquez sur le bouton OK, les données d'entrée est transférée à la page "de html_form_action.php". Cette page affiche les résultats entrés.


Essayez-le D'autres exemples

Radio button (boutons radio)
Cet exemple montre comment créer des boutons radio en HTML.

Cochez les cases (cases à cocher)
Cet exemple montre comment créer une case à cocher dans une page HTML. L'utilisateur peut sélectionner ou désélectionner la case à cocher.

liste déroulante Simple
Cet exemple montre comment créer une zone de liste déroulante simple dans une page HTML. Déroulante zone de liste est une liste facultative.

Pré-sélection dans la liste déroulante
Cet exemple montre comment créer une simple liste déroulante avec une valeur présélectionnée.

Les champs de texte (TextArea)
Cet exemple montre comment créer un champ de texte (un contrôle de saisie de texte multi-ligne). L'utilisateur peut écrire du texte dans un champ de texte. caractère enregistrable des mots ne se limite pas.

bouton Créer
Cet exemple montre comment créer un bouton. Vous pouvez texte sur le bouton peut être personnalisé.

Essayez-le instance de formulaire

Formulaire avec bordure
Cet exemple montre comment dessiner une boîte autour des données avec un titre.

zone de saisie et validez le formulaire avec des boutons
Cet exemple montre comment ajouter une page de formulaire. Ce formulaire contient deux champs de saisie et un bouton de confirmation.

Formulaire avec des cases à cocher
Ce formulaire contient deux cases à cocher et un bouton de confirmation.

Formulaire avec des boutons radio
Ce formulaire contient deux boîtes et un bouton de confirmation.

Envoyer un e-mail à partir d' un formulaire
Cet exemple montre comment envoyer un e-mail à partir d'un formulaire.


formulaire balises HTML

Nouveau: HTML5 nouveau label

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签,一般为输入标题
<fieldset> 定义了一组相关的表单元素,并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> New 指定一个预先定义的输入控件选项列表
<keygen> New 定义了表单的密钥对生成器字段
<output> New 定义一个计算结果