Les différents types d’input
Sommaire
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.
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.
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.
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.
Et les listes ( ) n’existent-elles pas ? oO
Merci beaucoup pour ces précieuses informations 🙂