HTML - Formulaires
Les formulaires HTML sont nécessaires lorsque vous souhaitez collecter des données auprès du visiteur du site. Par exemple, lors de l'enregistrement de l'utilisateur, vous souhaitez collecter des informations telles que le nom, l'adresse e-mail, la carte de crédit, etc.
Un formulaire prendra l'entrée du visiteur du site et le publiera ensuite dans une application back-end telle que CGI, ASP Script ou PHP script etc. L'application back-end effectuera le traitement requis sur les données transmises en fonction de la logique métier définie à l'intérieur L'application.
Il existe divers éléments de formulaire disponibles tels que des champs de texte, des champs de zone de texte, des menus déroulants, des boutons radio, des cases à cocher, etc.
Le HTML <form> La balise est utilisée pour créer un formulaire HTML et a la syntaxe suivante -
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>Attributs de formulaire
Outre les attributs courants, voici une liste des attributs de formulaire les plus fréquemment utilisés -
| Sr.Non | Attribut et description |
|---|---|
| 1 | action Script backend prêt à traiter vos données transmises. |
| 2 | method Méthode à utiliser pour télécharger des données. Les méthodes les plus fréquemment utilisées sont les méthodes GET et POST. |
| 3 | target Spécifiez la fenêtre ou le cadre cible dans lequel le résultat du script sera affiché. Il prend des valeurs telles que _blank, _self, _parent, etc. |
| 4 | enctype Vous pouvez utiliser l'attribut enctype pour spécifier la manière dont le navigateur code les données avant de les envoyer au serveur. Les valeurs possibles sont - application/x-www-form-urlencoded - Il s'agit de la méthode standard que la plupart des formulaires utilisent dans des scénarios simples. mutlipart/form-data - Ceci est utilisé lorsque vous souhaitez télécharger des données binaires sous la forme de fichiers tels qu'une image, un fichier Word, etc. |
Note- Vous pouvez vous référer à Perl et CGI pour plus de détails sur le fonctionnement du téléchargement des données de formulaire.
Contrôles de formulaire HTML
Il existe différents types de contrôles de formulaire que vous pouvez utiliser pour collecter des données à l'aide d'un formulaire HTML -
- Contrôles de saisie de texte
- Contrôles des cases à cocher
- Commandes du boîtier radio
- Sélectionner les contrôles de boîte
- Boîtes de sélection de fichier
- Contrôles cachés
- Boutons cliquables
- Bouton d'envoi et de réinitialisation
Contrôles de saisie de texte
Il existe trois types de saisie de texte utilisés sur les formulaires -
Single-line text input controls- Ce contrôle est utilisé pour les éléments qui ne nécessitent qu'une seule ligne d'entrée utilisateur, tels que des champs de recherche ou des noms. Ils sont créés en HTML<input> marque.
Password input controls- Il s'agit également d'une saisie de texte sur une seule ligne, mais elle masque le caractère dès qu'un utilisateur le saisit. Ils sont également créés à l'aide de la balise HTMl <input>.
Multi-line text input controls- Ceci est utilisé lorsque l'utilisateur doit donner des détails qui peuvent être plus longs qu'une seule phrase. Les contrôles d'entrée multilignes sont créés en HTML<textarea> marque.
Commandes de saisie de texte sur une seule ligne
Ce contrôle est utilisé pour les éléments qui ne nécessitent qu'une seule ligne d'entrée utilisateur, tels que des zones de recherche ou des noms. Ils sont créés à l'aide de la balise HTML <input>.
Exemple
Voici un exemple de base d'une saisie de texte sur une seule ligne utilisée pour prendre le prénom et le nom -
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>Cela produira le résultat suivant -
Les attributs
Voici la liste des attributs de la balise <input> pour la création d'un champ de texte.
| Sr.Non | Attribut et description |
|---|---|
| 1 | type Indique le type de contrôle d'entrée et pour le contrôle d'entrée de texte, il sera défini sur text. |
| 2 | name Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir la valeur. |
| 3 | value Cela peut être utilisé pour fournir une valeur initiale à l'intérieur du contrôle. |
| 4 | size Permet de spécifier la largeur du champ de saisie de texte en termes de caractères. |
| 5 | maxlength Permet de spécifier le nombre maximum de caractères qu'un utilisateur peut saisir dans la zone de texte. |
Contrôles de saisie du mot de passe
Il s'agit également d'une saisie de texte sur une seule ligne, mais elle masque le caractère dès qu'un utilisateur le saisit. Ils sont également créés à l'aide de la balise HTML <input> mais l'attribut type est défini surpassword.
Exemple
Voici un exemple de base d'une entrée de mot de passe sur une seule ligne utilisée pour prendre le mot de passe utilisateur -
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>Cela produira le résultat suivant -
Les attributs
Voici la liste des attributs de la balise <input> pour la création du champ de mot de passe.
| Sr.Non | Attribut et description |
|---|---|
| 1 | type Indique le type de contrôle d'entrée et pour le contrôle d'entrée de mot de passe, il sera réglé sur password. |
| 2 | name Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir la valeur. |
| 3 | value Cela peut être utilisé pour fournir une valeur initiale à l'intérieur du contrôle. |
| 4 | size Permet de spécifier la largeur du champ de saisie de texte en termes de caractères. |
| 5 | maxlength Permet de spécifier le nombre maximum de caractères qu'un utilisateur peut saisir dans la zone de texte. |
Commandes de saisie de texte sur plusieurs lignes
Ceci est utilisé lorsque l'utilisateur doit donner des détails qui peuvent être plus longs qu'une seule phrase. Les contrôles d'entrée multilignes sont créés à l'aide de la balise HTML <textarea>.
Exemple
Voici un exemple de base d'une saisie de texte multiligne utilisée pour prendre une description d'article -
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>Cela produira le résultat suivant -
Les attributs
Voici la liste des attributs de la balise <textarea>.
| Sr.Non | Attribut et description |
|---|---|
| 1 | name Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir la valeur. |
| 2 | rows Indique le nombre de lignes de la zone de texte. |
| 3 | cols Indique le nombre de colonnes de la zone de texte |
Contrôle des cases à cocher
Les cases à cocher sont utilisées lorsque plusieurs options doivent être sélectionnées. Ils sont également créés à l'aide de la balise HTML <input> mais l'attribut type est défini surcheckbox..
Exemple
Voici un exemple de code HTML pour un formulaire avec deux cases à cocher -
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>Cela produira le résultat suivant -
Les attributs
Voici la liste des attributs de la balise <checkbox>.
| Sr.Non | Attribut et description |
|---|---|
| 1 | type Indique le type de contrôle d'entrée et pour le contrôle d'entrée de case à cocher, il sera défini sur checkbox.. |
| 2 | name Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir la valeur. |
| 3 | value La valeur qui sera utilisée si la case est cochée. |
| 4 | checked Réglez sur coché si vous souhaitez le sélectionner par défaut. |
Commande par bouton radio
Les boutons radio sont utilisés lorsque parmi de nombreuses options, une seule option doit être sélectionnée. Ils sont également créés à l'aide de la balise HTML <input> mais l'attribut type est défini surradio.
Exemple
Voici un exemple de code HTML pour un formulaire avec deux boutons radio -
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>Cela produira le résultat suivant -
Les attributs
Voici la liste des attributs du bouton radio.
| Sr.Non | Attribut et description |
|---|---|
| 1 | type Indique le type de contrôle d'entrée et pour le contrôle d'entrée de case à cocher, il sera réglé sur radio. |
| 2 | name Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir la valeur. |
| 3 | value La valeur qui sera utilisée si la case radio est sélectionnée. |
| 4 | checked Réglez sur coché si vous souhaitez le sélectionner par défaut. |
Sélectionner le contrôle de boîte
Une zone de sélection, également appelée zone de liste déroulante, qui offre la possibilité de répertorier diverses options sous la forme d'une liste déroulante, à partir de laquelle un utilisateur peut sélectionner une ou plusieurs options.
Exemple
Voici un exemple de code HTML pour un formulaire avec une liste déroulante
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>Cela produira le résultat suivant -
Les attributs
Voici la liste des attributs importants de la balise <select> -
| Sr.Non | Attribut et description |
|---|---|
| 1 | name Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir la valeur. |
| 2 | size Cela peut être utilisé pour présenter une zone de liste déroulante. |
| 3 | multiple S'il est défini sur «multiple», il permet alors à un utilisateur de sélectionner plusieurs éléments dans le menu. |
Voici la liste des attributs importants de la balise <option> -
| Sr.Non | Attribut et description |
|---|---|
| 1 | value La valeur qui sera utilisée si une option dans la boîte de sélection est sélectionnée. |
| 2 | selected Spécifie que cette option doit être la valeur initialement sélectionnée lors du chargement de la page. |
| 3 | label Une autre façon d'étiqueter les options |
Boîte de téléchargement de fichier
Si vous souhaitez autoriser un utilisateur à télécharger un fichier sur votre site Web, vous devrez utiliser une boîte de téléchargement de fichier, également appelée boîte de sélection de fichier. Ceci est également créé à l'aide de l'élément <input> mais l'attribut type est défini surfile.
Exemple
Voici un exemple de code HTML pour un formulaire avec une boîte de téléchargement de fichier -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>Cela produira le résultat suivant -
Les attributs
Voici la liste des attributs importants de la boîte de téléchargement de fichiers -
| Sr.Non | Attribut et description |
|---|---|
| 1 | name Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir la valeur. |
| 2 | accept Spécifie les types de fichiers acceptés par le serveur. |
Commandes des boutons
Il existe différentes manières en HTML de créer des boutons cliquables. Vous pouvez également créer un bouton cliquable à l'aide de la balise <input> en définissant son attribut type surbutton. L'attribut type peut prendre les valeurs suivantes -
| Sr.Non | Type et description |
|---|---|
| 1 | submit Cela crée un bouton qui soumet automatiquement un formulaire. |
| 2 | reset Cela crée un bouton qui réinitialise automatiquement les contrôles de formulaire à leurs valeurs initiales. |
| 3 | button Cela crée un bouton qui est utilisé pour déclencher un script côté client lorsque l'utilisateur clique sur ce bouton. |
| 4 | image Cela crée un bouton cliquable mais nous pouvons utiliser une image comme arrière-plan du bouton. |
Exemple
Voici un exemple de code HTML pour un formulaire avec trois types de boutons -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>Cela produira le résultat suivant -
Contrôles de formulaire masqués
Les contrôles de formulaire masqués sont utilisés pour masquer les données à l'intérieur de la page qui peuvent ensuite être transmises au serveur. Ce contrôle se cache à l'intérieur du code et n'apparaît pas sur la page réelle. Par exemple, le formulaire masqué suivant est utilisé pour conserver le numéro de page actuel. Lorsqu'un utilisateur cliquera sur la page suivante, la valeur du contrôle masqué sera envoyée au serveur Web et là, il décidera quelle page sera affichée ensuite en fonction de la page actuelle passée.
Exemple
Voici un exemple de code HTML pour montrer l'utilisation du contrôle caché -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>Cela produira le résultat suivant -