Objectifs

• ِConnaitre les éléments input d’un formulaire HTML.

Introduction

• L’élément HTML <input> est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l’utilisateur de saisir des données.
• Les saisies possibles et le comportement de l’élément <input> dépend fortement de la valeur indiquée dans son attribut type.
• La balise unique <input /> permet de créer les composants classiques des formulaires.
• La différenciation de ces composants s’effectue simplement en définissant la valeur de leurs attributs, et notamment de l’attribut type.
• L’attribut name est obligatoire, car c’est lui qui permet d’identifier les champs côté serveur et ainsi de récupérer leur contenu.
• Les sections qui suivent détaillent les éléments de type "text", "password", "email", "tel", "date", "number", "checkbox", "radio","submit", "reset", "file" et "hidden".

Liste des éléments

1. L’élément <input type="text" />

• Cet élément crée un champ de saisie de texte d’une seule ligne.
• Attributs
1. name
2. size
• size="nombre". Détermine la largeur de la zone en nombre de caractères.
3. maxlength
• maxlength="nombre". Détermine le nombre maximal de caractères que l’utilisateur est autorisé à saisir.
4. value
• value="texte". Définit un texte par défaut tant que l’utilisateur ne l’a pas modifié.
• C’est cette valeur qui est transmise au serveur si l’internaute ne saisit aucun texte
• Exemple:
XHTML

<input type ="text" name="nom" size="30" maxlength="40" value="Votre nom"/>

1	<input type ="text" name="nom" size="30" maxlength="40" value="Votre nom"/>






2. L’élément <input type="email" />

• Crée un champ de saisie d’adresse e-mail identique à un champ de texte, mais qui à d’autres attributs spécifiques comme pattern.
• Attributs
1. size
• Même rôle que précédent
2. maxlength
• Même rôle que précédent
3. pattern
• L’attribut pattern contient un motif d’expression régulière, le navigateur vérifie la validité de la saisie et avertit l’utilisateur en cas d’erreur.
• Exemple:
XHTML

<input type ="email" name="mail" size="50" pattern="(^[a-z0-9]+)@([a-z0-9]) +(\.)([a-z]{2,4})"/>

1 2	<input type ="email" name="mail" size="50" pattern="(^[a-z0-9]+)@([a-z0-9]) +(\.)([a-z]{2,4})"/>

3. L’élément <input type="tel" />

• Crée un champ de saisie de numéro de téléphone qui a aussi l’aspect d’une zone de saisie de texte. On peut également lui ajouter l’attribut pattern contenant une expression régulière. Par exemple, nous pouvons écrire :
XHTML

<input type ="tel" name="tel" pattern="^0[0-9]{9}" />

1	<input type ="tel" name="tel" pattern="^0[0-9]{9}" />

4. L’élément <input type="password" />

• Crée un champ de saisie de mot de passe semblable à un champ texte mais dans lequel les caractères saisis sont invisibles et remplacés par des astérisques.

5. L’élément <input type="number" />

• Crée un champ de saisie de nombre
• Attributs
1. min et max
• Utiliser ces deux attributs pour fixer un intervalle de valeurs autorisées
2. required
• l’attribut required est utilisé pour rendre une saisie obligatoire.

6. L’élément <input type="date" />

• Crée un champ de saisie de date au format AAA-MM-JJ. Certains navigateurs affichent un calendrier qui permet d’éviter les erreurs de saisie.
7. Attributs
1. min et max
• Utiliser ces deux attributs pour fixer un intervalle de dates autorisées
2. Step
• L’attribut step est un nombre qui définit la granularité de la valeur ou le mot-clé any. Seule les valeurs qui sont des multiples de cet attribut depuis le seuil min sont valides.
3. any
• Lorsque la chaîne de caractères any est utilisée, cela indique qu’aucun incrément spécifique n’est défini et que toute valeur (comprise entre min et max) est valide.
8. Exemple:
XHTML

<input type ="date" name="ladate" min="2018-07-11" max="2019-07-12" />

1	<input type ="date" name="ladate" min="2018-07-11" max="2019-07-12" />

9. L’élément <input type="radio" />

• Crée un bouton radio. Employé seul, un bouton radio peut servir à valider des choix.Employé en groupe, il implique, à la différence de cases à cocher, qu’un seul choix est autorisé. Dans ce cas, tous les boutons radio du groupe doivent avoir une même valeur pour l’attribut "name".

10. L’élément <input type="checkbox" />

• Crée une case à cocher utilisée pour effectuer un ou plusieurs choix parmi ceux qui sont préétablis par le programmeur.
• Attributs
1. value
• L’attribut value est obligatoire, il contient le texte qui sera transmis au serveur si l’utilisateur coche la case.

11. L’élément <input type="submit" />

• Crée un bouton sur lequel l’utilisateur doit cliquer pour déclencher l’envoi des données de tout le formulaire vers le serveur.
• Il est indispensable d’avoir au moins un bouton d’envoi par formulaire, mais il est possible d’en utiliser plusieurs.
• Le clic sur l’un de ces boutons est alors analysé par le script désigné par l’attribut action de l’élément "form>.

12. L’élément <input type="reset" />

• Crée un bouton de réinitialisation du formulaire et non d’effacement systématique, comme on le croit souvent.
• Si les éléments du formulaire ont des attributs value qui définissent des valeurs par défaut, ce sont ces valeurs qui apparaissent au démarrage de la page et qui sont ré-affichées si l’utilisateur clique sur le bouton reset.

13. L’élément <input type="file" />

• Permet le transfert de fichiers du poste client vers le serveur. Cet élément crée un champ de saisie de même aspect qu’un champ de texte et un bouton de sélection de fichier permettant à l’utilisateur de choisir le fichier à transférer.

14. L’élément <input type="hidden" />

• Crée un champ caché n’ayant, comme son nom l’indique, aucun rendu visuel dans le formulaire mais permettant de transmettre des informations invisibles pour l’utilisateur.

Input Type Text

Input Type Password

Input Type Submit

Input Type Reset

Input Type Radio

Input Type Checkbox

Input Type Button

Input Type Color (html5)

Input Type Date (html5)

Input Type Datetime-local (html5)

Input Type Email (html5)

Input Type File (html5)

Input Type Month (html5)

Input Type Number (html5)

Input Type Range (html5)

Input Type Search (html5)

Input Type Tel (html5)

Input Type Time (html5)

Input Type Url (html5)

Input Type Week (html5)