Formulaire HTMLBalise HTML INPUT
La balise HTML de formulaire INPUT
Le champ INPUT et son attribut TYPE
L'attribut "type" qui permet de changer l'aspect du champ INPUT accepte les paramètres : text, password, checkbox, radio, button, file, submit, url, date, reset...La balise INPUT accepte comme attributs :
- maxlength="20" (maximum de caractères)
- minlength="3" (minimum de caractères, idéal sur un age)
- readonly="true" (non modifiable)
- disabled="true" (désactivé)
- tabindex="1" (ordre de tabulation)
- accesskey="n" (touche de raccourci - alt + la lettre)
Type text (Champ de texte)
Votre nom :<input type="text" name="nom" size="25">
Pour limiter le nombre de caractères, rajoutez l'attribut maxlength="10" dans le code du champ "nom" (attribut inverse: minlength).On peut aussi rajouter les attributs javascript "onfocus" et "onblur" afin de faire ressortir la saisie:
<input type="text" onfocus="javascript:this.style.backgroundColor = 'yellow';" onblur="javascript:this.style.backgroundColor = 'white';">
Exemple d'utilisation de l'attribut accesskey (faîte la combinaison Alt + n au clavier)
Nom d'utilisateur <input type="text" size="15" name="nom" id="lenom" accesskey="n">
La balise LABEL et son attribut for
<label for="lenom">Nom d'utilisateur</label>
<input type="text" name="nom" id="lenom">
La balise LABEL est utilisée sur les contrôls qui n'ont pas de valeur implicite (type: text, textarea, checkbox...). L'attribut "for" permet de désigner l'attribut "id" du champ cible (ici un type text).Type button (Bouton)
L'attribut value permet de spécifier le texte du bouton. Le type button est très fréquement associé à un évènement JavaScript de type "onclick".<input type="button" name="monbouton" value="Cliquer ici" onclick="alert('Bienvenue sur \nEasy-Micro');">
Type password (Champ de mot de passe)
Votre mot de passe :Votre mot de passe : <input type="password" name="mdp" size="25">
Type checkbox(Case à cocher)
HTML - CSS - JavaScript
<input type="checkbox" name="case1" value="HTML" checked="true"> HTML -
<input type="checkbox" name="case2" value="CSS"> CSS -
<input type="checkbox" name="case3" value="JavaScript"> JavaScript
<input type="checkbox" name="case2" value="CSS"> CSS -
<input type="checkbox" name="case3" value="JavaScript"> JavaScript
> Voir les exemples de traitement en Javascript et de traitement en PHP sur les CheckBox.
Type radio (Bouton radio)
C'est par un attribut "name" identique que l'on peut lier les boutons radio en famille.OUI - NON
<input type="radio" value="oui" name="question1" checked="true"> -
<input type="radio" value="non" name="question1">
<input type="radio" value="non" name="question1">
Type file (champ parcourir)
Permet de proposer aux visiteurs le téléchargement de fichier sur le serveur. L'utilisation d'un type file impose un type d'encodage "multipart/form-data" avec l'attribut enctype.Votre fichier :
Votre fichier : <input type="file" name="monfichier">
Note: n'oubiez-pas dans votre traitement de restreindre le poid total autorisé au téléchargement sous peine de grave problème... > Voir un exemple de traitement en PHP d'un type file.
Type number (HTML5)
Quantité :Quantité : <input type="number" name="quantite" min="1" max="5">
Type email (HTML5)
<form action="" method="post" name="monformulaire">
Votre Email : <input type="email" name="email" autocomplete="off" required autofocus><br>
<input type="submit" value="Envoyer"></form>
Votre Email : <input type="email" name="email" autocomplete="off" required autofocus><br>
<input type="submit" value="Envoyer"></form>
Type date, month et week (HTML5)
Votre date de naissance :La balise input de type date accepte les attributs max et min
Votre date de naissance : <input type="date" name="date" max="2012-06-25" min="2011-08-13">
Il existe aussi les types month et week (HTML5) :
Type Month :
Type Week :
Type Month : <input type="month" name="vacances">
Type Week : <input type="week" name="semaine">
Type Week : <input type="week" name="semaine">
