Easy-Micro


LANGAGE Formulaire HTML
Balise 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, 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)

<input type="text" name="le_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 fournir une aide dans la barre d'état du navigateur (status bar). Comme ceci:

<input type="text" onfocus="window.status='Votre nom';" onblur="window.status='';" />

Exemple d'accesskey (lors du test, faîte la combinaison Alt + n au clavier)
<label for="lenom" accesskey="n">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 password (Champ de 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

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

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

Attributs HTML5

Attention, le HTML5 propose des attributs supplémentaires pour la balise input :
  • autocomplete
  • autofocus (sauf lorsque l'attribut type est défini à hidden)
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • list
  • max
  • min
  • multiple
  • pattern
  • placeholder
  • required (sauf lorsque l'attribut type est défini à hidden, image ou les types de boutons tel que submit)
  • step



Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mardi 22 janvier 2019 - Semaine 04 - Saint Vincent (Demain: Saint Barnard)
Aujourd'hui, c'est l'anniversaire de Frank Leboeuf (1968-51 ans), footballeur français (défenseur). Autre 22 janvier: 1981 - Début de la série américaine Dallas sur les écrans français (TF1).
Haut de page Easy-Micro