📖 Introduction 🔢 Nouveaux types d'input 📌 Attributs de formulaire ✅ Validation intégrée 📋 L'élément datalist 📝 Exemple complet

📖 Introduction aux formulaires HTML5

HTML5 a révolutionné les formulaires en introduisant de nouveaux types d'input, des attributs puissants et une validation intégrée sans JavaScript.

❌ Avant HTML5

<!-- Nécessitait JavaScript pour valider -->
<input type="text" id="email">
<script>
    // Validation manuelle avec JS
    if(!email.includes('@')) alert('Email invalide');
</script>

✅ Avec HTML5

<!-- Validation automatique intégrée -->
<input type="email" required>
⚡

Validation automatique

Vérification côté navigateur sans JavaScript

📱

Claviers adaptés

Sur mobile, le clavier change selon le type (email, tel, number)

🎨

Interfaces natives

Sélecteurs de date, couleur, plage intégrés

🔧

Moins de code

Réduction du code JavaScript nécessaire

🔢 1. Nouveaux types d'input

HTML5 introduit de nombreux nouveaux types pour des champs spécifiques :

type="email"

Pour les adresses email

<input type="email">
✅ Validation automatique du format email

type="url"

Pour les URLs

<input type="url">
✅ Vérifie le format d'URL valide

type="tel"

Pour les numéros de téléphone

<input type="tel">
📱 Affiche le clavier numérique sur mobile

type="number"

Pour les nombres

<input type="number" min="0" max="100" step="5">
⬆️⬇️ Flèches d'incrémentation

type="range"

Curseur de plage

<input type="range" min="0" max="100">
🎚️ Curseur interactif

type="color"

Sélecteur de couleur

<input type="color">
🎨 Pallette de couleurs native

type="date"

Sélecteur de date

<input type="date">
📅 Calendrier intégré

type="datetime-local"

Date et heure locales

<input type="datetime-local">
📅⏰ Date + heure

type="month"

Sélecteur de mois

<input type="month">
📆 Mois et année

type="week"

Sélecteur de semaine

<input type="week">
📅 Numéro de semaine

type="time"

Sélecteur d'heure

<input type="time">
⏰ Heure (HH:MM)

type="search"

Champ de recherche

<input type="search">
🔍 Bouton "X" pour effacer

📌 2. Attributs de formulaire HTML5

required

Champ obligatoire

<input type="text" required>

placeholder

Texte indicatif

<input type="text" placeholder="Votre nom...">

autofocus

Focus automatique

<input type="text" autofocus>
🎯 Le champ est sélectionné au chargement

pattern

Validation par expression régulière

<input pattern="[A-Za-z]{3,}">

min & max

Valeurs minimales et maximales

<input type="number" min="18" max="99">

step

Incément

<input type="number" step="5">

autocomplete

Auto-complétion

<input autocomplete="off">
🔧 on | off | name | email | tel | etc.

novalidate

Désactive la validation

<form novalidate>
⛔ Appliqué au formulaire

multiple

Permet plusieurs valeurs

<input type="email" multiple>

list

Associe une datalist

<input list="options">
📋 Pour utiliser avec <datalist>

✅ 3. Validation intégrée

HTML5 offre une validation automatique côté navigateur sans JavaScript.

📧 Validation email

<input type="email" required>

🔗 Validation URL

<input type="url" required>

🔢 Validation pattern

<input pattern="[0-9]{10}" title="10 chiffres">

📢 Messages de validation personnalisés

<input type="text" required 
       oninvalid="this.setCustomValidity('Veuillez remplir ce champ')" 
       oninput="this.setCustomValidity('')">
💡 Les messages de validation peuvent être personnalisés avec JavaScript.

🎨 Styliser la validation avec CSS

/* Champs valides */
input:valid {
    border-color: #10b981;
}

/* Champs invalides */
input:invalid {
    border-color: #ef4444;
}

/* Champs requis */
input:required {
    border-left: 4px solid #f59e0b;
}

📋 4. L'élément <datalist>

L'élément <datalist> fournit une liste d'options prédéfinies pour un champ <input>, tout en permettant à l'utilisateur de saisir sa propre valeur.

📝 Syntaxe de base

<input list="villes" name="ville">
<datalist id="villes">
    <option value="Casablanca">
    <option value="Rabat">
    <option value="Marrakech">
    <option value="Fès">
    <option value="Tanger">
</datalist>
✨ Aperçu (commencez à taper)

🎯 Avantages de datalist

✅ Suggestion automatique pendant la saisie
✅ L'utilisateur peut saisir une valeur hors liste
✅ Fonctionne sans JavaScript
✅ Compatible avec tous les navigateurs modernes

📝 Exemple : Datalist pour les navigateurs web

<label>Votre navigateur préféré :</label>
<input list="browsers">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
</datalist>
✨ Aperçu

📝 Exemple complet : Formulaire d'inscription HTML5

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Formulaire d'inscription HTML5</title>
    <style>
        form { max-width: 500px; margin: 0 auto; padding: 20px; }
        input, select { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ccc; border-radius: 6px; }
        button { background: #2c3e66; color: white; padding: 12px; border: none; border-radius: 6px; width: 100%; }
        input:valid { border-color: #10b981; }
        input:invalid:not(:placeholder-shown) { border-color: #ef4444; }
    </style>
</head>
<body>
    <form>
        <h2>Inscription</h2>
        
        <!-- Nom -->
        <input type="text" name="nom" placeholder="Nom complet" required autofocus>
        
        <!-- Email -->
        <input type="email" name="email" placeholder="Email" required>
        
        <!-- Téléphone -->
        <input type="tel" name="tel" placeholder="Téléphone" pattern="[0-9]{10}" title="10 chiffres">
        
        <!-- Âge -->
        <input type="number" name="age" placeholder="Âge" min="18" max="99" required>
        
        <!-- Date de naissance -->
        <input type="date" name="naissance" required>
        
        <!-- Pays avec datalist -->
        <input list="pays" name="pays" placeholder="Pays">
        <datalist id="pays">
            <option value="Maroc">
            <option value="France">
            <option value="Canada">
            <option value="Belgique">
            <option value="Suisse">
        </datalist>
        
        <!-- Couleur préférée -->
        <input type="color" name="couleur" value="#3498db">
        
        <!-- Niveau (curseur) -->
        <label>Niveau : <span id="niveauValue">5</span></label>
        <input type="range" name="niveau" min="1" max="10" value="5" oninput="niveauValue.innerText = this.value">
        
        <!-- Conditions -->
        <label>
            <input type="checkbox" required> J'accepte les conditions
        </label>
        
        <button type="submit">S'inscrire</button>
    </form>
</body>
</html>
✨ Formulaire interactif

📝 Résumé du chapitre

Catégorie Éléments/Attributs
Nouveaux types d'input email, url, tel, number, range, color, date, datetime-local, month, week, time, search
Attributs de formulaire required, placeholder, autofocus, pattern, min, max, step, autocomplete, novalidate, multiple, list
Validation intégrée Validation automatique, messages personnalisés, CSS :valid / :invalid
Datalist <datalist> + <option>, associé avec input list="id"

📌 Quiz de vérification

Question 1 : Quel type d'input utilise-t-on pour un sélecteur de couleur ?

📖 Voir la réponse
✅ Réponse

<input type="color">

Question 2 : Quel attribut rend un champ obligatoire ?

📖 Voir la réponse
✅ Réponse

required

Question 3 : À quoi sert l'élément <datalist> ?

📖 Voir la réponse
✅ Réponse

Il fournit une liste d'options prédéfinies pour un champ input, tout en permettant une saisie libre.

Question 4 : Quel attribut permet de valider un champ avec une expression régulière ?

📖 Voir la réponse
✅ Réponse

pattern

Question 5 : Quelle pseudo-classe CSS cible les champs valides ?

📖 Voir la réponse
✅ Réponse

:valid