Types de Saisie pour les Formulaires HTML
Il y a beaucoup de types de saisie, disponible en HTML5. Vous pouvez trouver la liste de toutes les valeurs de type de saisie ici. Ces types de saisie sont le plus souvent utilisés pour créer Formulaires HTML.
Nous allons examiner brièvement chacune d’entre elles et expliquer pourquoi vous devriez les utiliser tout de suite. L'utilisation de ces types de saisie permet de gagner du temps et d'améliorer l'expérience utilisateur. Les types de saisie à discuter sont:
text | email | url | tel | number | range | radio | color | date | month | week | time | datetime-local | password | submit | reset
text
Les éléments <input> text avec le type de texte créent des entrées de base d'une seule ligne. Utilisez-les lorsque vous souhaitez que les utilisateurs entrent une valeur sur une seule ligne. Ajoutez l'attribut required pour vous assurer que les utilisateurs rempliront ce champ.
<input type="text" required>Le type de saisie e-mail permet à l'utilisateur de saisir et de modifier une adresse électronique ou, si l'attribut multiple est défini, plusieurs adresses électroniques.
La valeur d'entrée due à :valid, :invalid Les pseudo-classes CSS indiquent automatiquement s'il s'agit d'une adresse électronique correctement formatée ou non.
<input type="email" multiple>url
Ce type de saisie est pour les adresses Web. Il est automatiquement validé pour s'assurer qu'il est vide ou que l'URL est correctement formatée avant que le formulaire puisse être soumis. Il est possible d'utiliser plusieurs URL à l'aide d'attributs multiple.
<input type="url" multiple>tel
Le type de saisie tel est utilisé pour entrer et éditer un numéro de téléphone. Cette valeur d'entrée n'est pas automatiquement validée. Sur le plan fonctionnel, il est très utile avec les navigateurs mobiles, car les smartphones reconnaissent généralement le type de saisie et modifient le clavier affichant un clavier numérique.
<input type="tel">number
Le type de saisie number est utilisé pour entrer une valeur numérique. Il valide et rejette les entrées non numériques. À l'aide des attributs min, max et step, vous pouvez contrôler la valeur par défaut et définir les valeurs minimum, maximum et starting.
<input type="number" min="1" max="15" step="1" name=”number-of-colors">range
Ce type de saisie permet à l'utilisateur de spécifier une valeur numérique qui ne doit pas être inférieure à une valeur spécifiée ni supérieure à une autre valeur spécifiée. Utilisez-le lorsque la valeur exacte du contrôle n’est pas importante. Il utilise généralement un curseur ou un contrôle de numérotation tandis que le type de saisie number affiche une zone de saisie de texte.
Si le navigateur de l’utilisateur ne supporte pas range, il retombera et le montrera comme une entrée text. Pour afficher un niveau, utilisez les attributs min et max avec le type de saisie range. Ajoutez un point de départ en utilisant l’attribut value.
<input type="range" min="0" max="20" value="0">radio
Le type de saisie radio est utilisé pour créer des boutons radio. Les boutons radio sont généralement utilisés pour spécifier un élément de groupe. Un seul bouton radio dans un groupe peut être sélectionné à la fois.
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Femalecolor
Le type d'entrée color fournit un élément d'interface utilisateur qui permet aux utilisateurs de sélectionner une couleur et renvoie la valeur hexadécimale de cette couleur. L'attribut value est généralement utilisé avec le type d'entrée color pour spécifier quelle couleur sera d'abord définie pour que les utilisateurs commencent à choisir. Si l'attribut value n'est pas spécifié, il définit automatiquement «# 000000».
<input type="color" name="color" value="#1c87c9"/>date
Les sélecteurs de date sont largement utilisés pour aider les utilisateurs à choisir rapidement et facilement la date requise. Utilisez le type de saisie date pour créer des champs de saisie permettant aux utilisateurs de saisir une date. La valeur résultante comprend l'année, le mois et le jour, mais pas l'heure. Vous pouvez utiliser les attributs min et max pour vous assurer que l'utilisateur ne pourra choisir que dans une plage de dates spécifiée.
<input type="date" name="date" value="2018-01-01" min="2017-01-01" max="2019-01-01">month
Le type de saisie month crée les champs de saisie qui permet à l’utilisateur de saisir le mois et l’année. La valeur est une chaîne au format "YYYY-MM", où YYYY représente l'année à quatre chiffres et MM le mois. Utilisez les attributs min et max pour définir une limite pour les utilisateurs.
<input type="month" name="month" value="2018-01" min="2017-01" max="2019-12">week
Le type de saisie week crée des champs de saisie permettant aux utilisateurs de choisir facilement l’année plus le numéro de semaine ISO 8601 au cours de cette année, qui peut aller de la semaine 1 à la semaine 52 ou 53).
<input type="week" name="week" min="2018-W1" max="2018-W52">time
Le type de saisie time est utilisé pour créer des champs de saisie permettant aux utilisateurs de saisir l’heure (heures et minutes, parfois secondes). Value du type de saisie time est généralement au format 24 heures ("hh: mm"), si l'heure comprend les secondes, le format est toujours "hh: mm: ss". Si vous souhaitez que les utilisateurs mentionnent également secondes, vous pouvez le faire à l'aide de l'attribut step.
<input type="time" name="time" value="22:00"/>datetime-local
Le type de saisie datetime-local est utilisé pour créer contrôles de saisie, qui permet à l’utilisateur de saisir facilement la date et l’heure input (année, mois, jour et heure en heures et minutes). Il montre le fuseau horaire local de l'utilisateur.
<input type="datetime-local" name="meeting"/>password
Ce type d'entrée permet à l'utilisateur de définir un mot de passe en toute sécurité. Il est présenté sous la forme d'un contrôle d'éditeur de texte brut d'une ligne dans lequel le texte est masqué de sorte qu'il ne puisse pas être lu, généralement en remplaçant chaque caractère par un symbole tel que l'astérisque ("*") ou un point ("•"). Ce caractère peut différer selon l'agent utilisateur.
Vous pouvez définir la largeur minimum pour le mot de passe en utilisant l’attribut minlength .
<input type="password" name="password" minlength="6" required placeholder="6 caractères minimum"/>submit
Le type de saisie submit crée un bouton d'envoi qui soumet le formulaire au serveur. Si vous ne spécifiez pas de value, le bouton aura une étiquette par défaut, choisie par l'agent utilisateur.
<input type="submit" value="Submit">reset
Le type de saisie reset est utilisé pour insérer un bouton de la remise, qui permettra aux utilisateurs de réinitialiser toutes les valeurs de formulaire à leurs valeurs initiales.
<input type="reset" value=Reset>Maintenant, lorsque vous avez terminé avec les types de saisie, voyons un exemple complet de formulaire dans lequel tous ces types de saisie sont utilisés:
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Remplissez la formulaire pour participer à un grand projet</h2>
<form action="/action_page.php">
<fieldset>
<legend>Information personnelle</legend>
<label for="name"> Prénom: </label> <input id="name" type="text" name="firstname" placeholder="First name" required /> <label for="last">Nom:</label> <input id="last" type="text" name="lastname" placeholder="Last name" required />
<br />
<br />
<label for="age">Age:</label> <input id="age" type="number" min="10" max="100" step="1" name="number-of-colors" /> <label for="website">Website:</label> <input id="website" type="url" multiple /> <br />
<br />
<label for="address">Addresse Email:</label> <input id="address" type="email" name="email" placeholder="[email protected]" required /> <label for="tel">Tel.:</label>
<input id="tel" type="tel" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" /><br />
<br />
</fieldset>
<fieldset>
<legend>À vous connaitre</legend>
<label for="color">Couleur préféré:</label> <input id="color" type="color" name="color" value="#1c87c9" /><br />
<p>Niveau de motivation:</p>
<input type="range" min="0" max="10" value="4" /><br />
<p>Saison préféré:</p>
<input type="radio" name="season" value="winter" /> Hiver<br />
<input type="radio" name="season" value="autumn" /> Autumn<br />
<input type="radio" name="season" value="summer" /> Été<br />
<input type="radio" name="season" value="spring" /> Printemps
<p>Musique préféré:</p>
<input type="radio" name="music" value="jazz" /> Jazz<br />
<input type="radio" name="music" value="blues" /> Blues<br />
<input type="radio" name="music" value="pop" /> Pop<br />
<input type="radio" name="music" value="rock" /> Rock
</fieldset>
<fieldset>
<legend>Disponibilité</legend>
<label for="project">Quand vous serez prêt à commencer le projet?</label> <input id="project" type="date" name="date" value="2018-01-01" min="2018-01-01" max="2018-04-01" /><br />
<label for="hours">Heures préférés pour travailler:</label>
<input id="hours" type="time" name="time" value="09:00" />
<label for="time">To </label> <input id="time" type="time" name="time" value="18:00" /><br />
<label for="password"> Mot de passe:</label>
<input id="password" type="password" name="password" minlength="6" required placeholder="6 characters minimum" />
<br />
<br />
<input type="submit" value="Send" />
<input type="reset" value="Reset" />
</fieldset>
</form>
</body>
</html>Ressources associées
Comment créer des formulaires Malito, Commenc styler boîte de commentaire avec CSS.