Les différents types d’input

I. Présentation

Ce tutoriel a pour but de vous faire découvrir les différents types d’INPUT disponible en HTML. Pour rappel, les INPUT sont des éléments interactifs utilisés dans les formulaires qui permettre à l’utilisateur d’interagir avec le site web.

Syntaxe : <input type=’nom_type’ name=’son_nom’>
Syntaxe avec une valeur par défaut : <input type=’nom_type’ name=’son_nom’ value=’ok’>

II. Input type « text »

Ce type d’input crée un champ de saisie de texte d’une ligne dont on peut paramétrer la taille et la longueur maximale.

III. Input type « password »

Ce type est utilisé pour la saisie des mots de passe, tous les caractères saisis sont remplacés par un « rond ».

IV. Input type « radio »

Avec ce type d’input vous pouvez créer un bouton à cocher ou non par l’utilisateur, vous pouvez en mettre plusieurs, ce qui permettra à l’utilisateur de faire son choix parmi plusieurs options. Cependant, l’attribue name doit être égal pour tous les boutons radio de votre sélection, seul le paramètre value doit changer.

V. Input type « checkbox »

Cela vous permet d’insérer des cases à cocher dans votre page, cette case prend la valeur checked ou unchecked (cochée ou non cochée).

VI. Input type « file »

Ce type d’input permet à l’utilisateur de préciser l’emplacement d’un fichier qu’il souhaite envoyer avec le formulaire. Ce type est utile pour l’upload de fichier sur un serveur distant.

VII. Input type « hidden »

Il correspond à un champ caché dont l’intérêt est d’envoyer un paramètre fixe ou non modifiable par l’utilisateur qui devra être envoyé avec le formulaire.

VIII. Input type « reset »

Il s’agit d’un bouton de remise à zéro, c’est-à-dire qu’il efface toutes les valeurs des champs du formulaire dont il fait partie. Cela remet les champs à leur valeur initiale s'ils ont une valeur par défaut prédéfinie.

IX. Input type « button »

Ceci vous permet de mettre un bouton qui n’a aucune action particulière, vous devez lui en attribuer une ensuite avec du Javascript par exemple.

X. Input type « submit »

Ce type, très important, permet d’envoyer l’ensemble des paramètres (nom + valeur) de l’ensemble des champs du formulaire dont il appartient.

Type d'INPUT HTML

XI. Appliquer du style aux input d'un type précis :

Pour appliquer des propriétés CSS à un input d'un type précis uniquement il faut utiliser la syntaxe suivante dans votre feuille de style :

input[type=text] {
}

Où vous devez remplacer "text" par le type dont vous souhaitez attribuer des propriétés CSS.

Partagez cet article Partager sur Twitter Partager sur Facebook Partager sur Linkedin Partager sur Google+ Envoyer par mail

Florian Burnel

Ingénieur système et réseau, cofondateur d'IT-Connect et Microsoft MVP "Cloud and Datacenter Management". Je souhaite partager mon expérience et mes découvertes au travers de mes articles. Généraliste avec une attirance particulière pour les solutions Microsoft et le scripting. Bonne lecture.

florian has 3270 posts and counting.See all posts by florian

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

 

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.