Formations aurelearn

Les attributs disponibles

accept

Permet de spécifier une liste de types MIME ↗ accpetés lors de la sélection d’un ou plusieurs fichier(s).

index.html

<input type="file" accept="image/png,image/jpeg" />

autocomplete

Cet attribut permet de spécifier au navigateur que ce champ peut être automatiquement rempli par les informations qu’il connaît déjà (identité, adresse…). La valeur de cet attribut dépend de l’indication que vous souhaitez apporter au navigateur, la liste de toutes les valeurs possibles étant disponible sur MDN ↗.

index.html

<input type="email" autocomplete="email" />

checked

Indique au navigateur si la case à cocher doit être activée par défaut ou non (pratique pour des formulaires d’édition).

index.html

<input type="checkbox" name="vegetables" value="Brocoli" checked />
<input type="checkbox" name="vegetables" value="Céleri" />

dirname

Cet attribut permet d’indiquer au navigateur si le contenu du champ est écrit en LTR ou RTL. Cette valeur est envoyée en même temps que la valeur du champ lors de la soumission du formulaire.

index.html

<input type="text" name="fruit" value="cerise" dirname="fruit.dir=rtl" />

disabled

Affiche un champ désactivé, que l’utilisateur pourra voir mais pas modifier.

index.html

<form>
<input type="text" value="Contenu du champ" disabled />
</form>

form

Lie le champ à un formulaire particulier, si différent de son parent attendu.

index.html

<form name="form-1"></form>
<input type="text" value="Contenu du champ" form="form-1" />

list

Permet de lier un élément <datalist> pour afficher une liste d’autocomplétion.

index.html

<form>
<input type="text" name="fruit-field" list="fruits" />
<datalist id="fruits">
<option value="Banane" />
<option value="Pomme" />
<option value="Orange" />
<option value="Fruit de la passion" />
</datalist>
</form>

min et max

Bloque une valeur minimale et/ou une valeur maximale d’un champ numérique.

index.html

<input type="number" min="0" max="5" />

minlength et maxlength

Spécifie le nombre minimal et/ou maximal de caractères attendus dans un champ accueillant du texte.

index.html

<form>
<input type="text" minlength="2" maxlength="8" />
</form>

multiple

Indique au navigateur si plusieurs valeurs sont acceptées dans ce champ.

index.html

<input type="file" multiple />

name

Donne un nom unique à un champ. Ce nom est utilisé pour récupérer la valeur du champ dans la requête envoyée au serveur.

index.html

<form name="form1">
<input type="text" name="firstname" value="John" />
</form>

Vous pouvez alors récupérer la valeur du champ en JS ou PHP par exemple :

script.js

// Renvoie "John"
document.forms.form1.firstname.value

index.php

<?php
// Renvoie "John"
$_POST['firstname']

pattern

Permet de renseigner une expression régulière ↗ qui servira à valider le contenu du champ.

index.html

<form>
<input type="text" pattern="[a-z]+" />
</form>

placeholder

Affiche une valeur dans le champ tant que celui-ci n’est pas rempli par l’utilisateur.

index.html

<form>
<input type="text" placeholder="Veuillez rentrer votre nom" />
</form>

label != placeholder

Le placeholder ne doit en aucun cas remplacer l’utilisation d’un label pour un champ. L’utilisation seule d’un placeholder pose des problèmes d’UX et d’accessibilité, considèrez cela comme une mauvaise pratique.

readonly

Indique au navigateur que la valeur du champ ne peut pas être modifiée.

index.html

<input type="text" readonly />

size

Indique au navigateur la largeur visuelle du champ. Si on rentre la valeur 20, alors le champ aura une largeur correspondant à 20 caractères visibles.

index.html

<input type="text" size="10" />

step

Spécifie le pas utilisé pour incrémenter/décrémenter un champ numérique.

index.html

<input type="number" step="1" />
<input type="number" step="0.1" />

type

Cet attribut permettra de choisir le type de champ le plus adapté à votre besoin. Chacun d’eux est détaillé dans sa propre page.

value

Permet de renseigner une valeur à un champ. Permet par exemple d’afficher la valeur rentrée avant une erreur de soumission du formulaire.

index.html

<form>
<input type="text" name="firstname" defaultValue="John" />
</form>

© 2023 • Aurélien Devaux