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>

email

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

color

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.

Notez que l’utilisation de l’attribut step peut empêcher la validation de fonctionner correctement et n'est pas totalement fiable.
<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.

Évitez d’utiliser des boutons de réinitialisation dans vos formulaires, car les utilisateurs risquent de cliquer dessus par inadvertance et de perdre toutes les informations qu’ils ont renseignées.
<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="YourEmail@example.com" 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>
        <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</p>
      </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.

Trouvez-vous cela utile?

Articles Associées