Tutoriel HTML5

HTML5

Découvez les bases et les nouveautés du HTML5 dans ce tutoriel.

HTML CSS Dreamweaver Bootstrap PHP

Formulaires en HTML5

Dans ce tutoriel, je vous propose de découvrir les nouveautés sur les formulaires en HTML5.

Nouvelles balises

Un certain nombre de ces balises ne sont pas totalement compatibles avec tous les smartphones et anciens navigateurs.

type="email"

Email *
<input name="Email" type="email" placeholder="compléter votre email" required class="form-control">

type="tel"

Téléphone *
<input name="telephone" type="tel" placeholder="Votre téléphone" class="form-control" required>

type="url"

Votre site web *
<input name="adresse" type="url" placeholder="votre site web" required class="form-control">

type="search"

Recherche *
<input name="recherche" type="search" placeholder="Mot clé" required class="form-control">

type="number"

Votre âge *
<input type="number" name="age" placeholder="Votre âge" required class="form-control">

type="range"


<input type="range" name="range" class="form-control">

type="color"

Votre couleur préférée ? *
<input name="couleur" type="color" required class="form-control">

type="datetime"

Date d'inscription 2*
<input type="datetime" name="date_inscription2" required class="form-control">

type="datetime-local"

Date d'inscription 3*
<input type="datetime-local" name="date_inscription3" required class="form-control">

type="date"

Date d'inscription 4 *
<input type="date" name="date_inscription4" required class="form-control">

type="month"

Quelle semaine ? *

<input name="mois" type="month" required class="form-control">

type="week"

Quelle semaine ? *
<input name="semaine" type="week" required class="form-control">

type="time"

Quelle heure ? *
<input name="heure" type="time" required class="form-control">

Nouveaux attributs

placeholder

Permet d'afficher un texte indicatif dans le champ.

required

Oblige la saisie du champ.

list, datalist

C'est un élément de formulaire permettant de lier une liste de choix à input.

Exemple

Veuillez saisir une lettre d'un langage du web dans le champ ci dessous.


<input name="text" type="language" placeholder="Langages du web" list="langages" required class="form-control">

<datalist id="langages">
   <option value="HTML">
   <option value="XHTML">
   <option value="HTML5">
   <option value="CSS">
   <option value="CSS3">
   <option value="PHP">
   <option value="MySQL">
   <option value="Javascript">
</datalist>

pattern

Les patterns ou masques de saisie permettent de contrôler le format de données saisi dans un champ de formulaire.

Les types : email, url, tel que nous avons utilisé avant sont des patterns prédéfinies.

Vous pouvez mes créer vous même en utilisant des expressions régulières.

En savoir + sur les expressions régulières (Bon courage)

Exemple

Pour créer un masque qui impose la saisie d'une valeur numérique d'au moins 3 chiffres précédés d'une lettre majuscule comprise entre A et F.En cas de non respect du format, le navigateur vous en informera.

Votre code secret avec une lettre en majuscule et 3 chiffres derrières


<form action="" method="get" name="form2">
<input name="code_secret" type="text" pattern="[A-F][0-9]{3}" class="form-control">
<input type="submit" name="Bouton2" value="Envoyer" class="btn btn-default">
</form>