Formulaire HTML

HTML Formulaires et saisie

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

Exemple en ligne

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

<p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

<p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

(D'autres exemples peuvent être trouvés au bas de cette page.)

Formulaires HTML

Un formulaire est une zone qui contient 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 mis en place à l'aide de la balise form <form> :

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

Formulaire HTML - élément de saisie

La balise de formulaire la plus couramment utilisée est la balise d'entrée (<input>).

Le type d'entrée est défini par l'attribut type (type). La plupart des types de saisie couramment utilisés sont les suivants :

Champs de texte

Les champs de texte sont définis via la balise <input type="text"> lorsque les utilisateurs saisissent des lettres, des chiffres, etc. dans un formulaire.

Le navigateur

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

s'affiche comme suit :

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.

Champ Mot de passe

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

l'effet d'affichage du navigateur

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

est comme suit :

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

Boutons radio

La balise <input type="radio"> définit les options des boutons radio du formulaire

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

L'effet d'affichage du navigateur est le suivant suit :

Boxes à cocher

<input type="checkbox"> définit la case à cocher L'utilisateur doit sélectionner parmi plusieurs Sélectionnez une ou plusieurs options parmi une ou plusieurs options données. sélection.

L'effet d'affichage du navigateur

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

est le suivant :

Bouton Soumettre

<input type="submit"> définit le bouton Soumettre.

Lorsque l'utilisateur clique sur le bouton de confirmation, le contenu du formulaire sera transféré dans 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. :

L'effet d'affichage du navigateur

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

est le suivant :

Si vous tapez quelques lettres dans la zone de texte ci-dessus puis cliquez sur le bouton de confirmation, les données saisies seront envoyé à La page de "html_form_action.php". Cette page affichera les résultats saisis.

Plus d'exemples

Boutons radio
Cet exemple montre comment créer des boutons radio en HTML.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

<p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Boxes à cocher
Cet exemple montre comment créer des cases à cocher dans une page HTML. Les utilisateurs peuvent cocher ou décocher les cases.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Liste déroulante simple
Cet exemple montre comment créer une simple zone de liste déroulante dans une page HTML. La zone de liste déroulante est une liste sélectionnable.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

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

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Liste déroulante présélectionnée
Cet exemple montre comment créer une liste déroulante simple avec des valeurs présélectionnées.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Textarea
Cet exemple montre comment créer une zone de texte (contrôle de saisie de texte multiligne). L'utilisateur peut écrire du texte dans le champ de texte. Il n'y a pas de limite au nombre de caractères pouvant être écrits.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Création d'un bouton
Cet exemple montre comment créer un bouton. Vous pouvez personnaliser le texte sur le bouton.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Exemple de formulaire

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Formulaire avec zone de saisie et bouton de confirmation
Cet exemple montre comment ajouter un formulaire à la page. Ce formulaire contient deux zones de saisie et un bouton de confirmation.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>

<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

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

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked="checked"> I have a car<br>
  <input type="submit" value="提交">
</form>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Formulaire avec boutons radio
Ce formulaire contient deux boutons radio et un bouton de confirmation.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php" method="get">
  <input type="radio" name="sex" value="Male"> Male<br>
  <input type="radio" name="sex" value="Female" checked="checked"> Female<br>
  <input type="submit" value="提交">
</form>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Envoi d'un email depuis un formulaire
Cet exemple montre comment envoyer un email depuis un formulaire.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h3>发送邮件到 someone@example.com:</h3>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Balise de formulaire HTML

Nouveau : Nouvelle balise HTML5

< th align="left">Balise< td>Définir un résultat de calcul

Description

<form>

Définir un formulaire pour la saisie utilisateur

<input>

Définir le champ de saisie

Définir une zone de texte (un contrôle de saisie multiligne )

<label>

Définit l'étiquette de l'élément <input>, généralement le titre d'entrée

Définit un groupe d'éléments de formulaire associés et utilise un cadre externe pour les entourer

Définit le titre du <fieldset> element< /td>

Définit une liste d'options déroulante

Définir l'option groupe

Définissez les options dans la liste déroulante

< a href="http://www.php.cn/dic/html/button.html" target="_blank"><button>

Définir un bouton de clic

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

Spécifier une liste d'options de contrôle d'entrée prédéfinie

<keygen> ;

Définit le champ générateur de paire de clés du formulaire

<🎜>

← Mise en page HTML

Cadre HTML →

Formulaire HTML

HTML Formulaires et saisie

Instance

Instance

Formulaires HTML

Formulaire HTML - élément de saisie

Champs de texte

Champ Mot de passe

Boutons radio

Boxes à cocher

Bouton Soumettre

Plus d'exemples

Instance

Instance

Instance

Instance

Instance

Instance

Exemple de formulaire

Instance

Instance

Instance

Instance

Instance

Balise de formulaire HTML

Site Web PHP chinois