Types d'inputs et validation

1<!-- Exemples d'inputs textuels -->
2<form>
3  <!-- Input basique -->
4  <label for="nom">Nom complet:</label>
5  <input type="text" id="nom" name="nom" placeholder="Jean Dupont">
6  
7  <!-- Email avec validation automatique -->
8  <label for="email">Email:</label>
9  <input type="email" id="email" name="email" placeholder="jean@exemple.com">
10  
11  <!-- Mot de passe masqué -->
12  <label for="password">Mot de passe:</label>
13  <input type="password" id="password" name="password">
14  
15  <!-- Téléphone avec clavier adapté -->
16  <label for="tel">Téléphone:</label>
17  <input type="tel" id="tel" name="tel" placeholder="06 12 34 56 78">
18</form>

1<!-- Types numériques avec contraintes -->
2<form>
3  <!-- Nombre entier avec limites -->
4  <label for="age">Âge:</label>
5  <input type="number" id="age" name="age" min="13" max="120" step="1">
6  
7  <!-- Plage de valeurs avec slider -->
8  <label for="volume">Volume:</label>
9  <input type="range" id="volume" name="volume" min="0" max="100" value="50">
10  <span id="volume-display">50</span>
11</form>

1<!-- Gestion des dates et heures -->
2<form>
3  <!-- Date complète -->
4  <label for="naissance">Date de naissance:</label>
5  <input type="date" id="naissance" name="naissance" min="1900-01-01" max="2024-12-31">
6  
7  <!-- Heure -->
8  <label for="rdv">Heure du rendez-vous:</label>
9  <input type="time" id="rdv" name="rdv" min="08:00" max="18:00">
10  
11  <!-- Date et heure combinées -->
12  <label for="livraison">Date/heure de livraison:</label>
13  <input type="datetime-local" id="livraison" name="livraison">
14  
15  <!-- Mois et année -->
16  <label for="expiration">Expiration carte:</label>
17  <input type="month" id="expiration" name="expiration">
18</form>

1<!-- Attributs de validation fondamentaux -->
2<form>
3  <!-- Champ obligatoire -->
4  <label for="email-required">Email (obligatoire):</label>
5  <input type="email" id="email-required" name="email" required>
6  
7  <!-- Longueur minimale et maximale -->
8  <label for="pseudo">Pseudo (3-20 caractères):</label>
9  <input type="text" id="pseudo" name="pseudo" 
10         minlength="3" maxlength="20" required>
11  
12  <!-- Valeurs min/max pour nombres -->
13  <label for="quantity">Quantité (1-10):</label>
14  <input type="number" id="quantity" name="quantity" 
15         min="1" max="10" value="1" required>
16</form>

1<!-- Validation avec expressions régulières -->
2<form>
3  <!-- Code postal français -->
4  <label for="postal">Code postal:</label>
5  <input type="text" id="postal" name="postal" 
6         pattern="[0-9]{5}" 
7         title="5 chiffres exactement"
8         placeholder="75001">
9  
10  <!-- Téléphone français -->
11  <label for="tel-fr">Téléphone:</label>
12  <input type="tel" id="tel-fr" name="tel" 
13         pattern="0[1-9][0-9]{8}" 
14         title="Numéro français: 0X XX XX XX XX"
15         placeholder="06 12 34 56 78">
16  
17  <!-- Mot de passe fort -->
18  <label for="strong-pwd">Mot de passe fort:</label>
19  <input type="password" id="strong-pwd" name="password" 
20         pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*]).{8,}"
21         title="8+ caractères avec majuscule, minuscule, chiffre et symbole">
22</form>

1<!-- États avancés des inputs -->
2<form>
3  <!-- Champ désactivé -->
4  <label for="disabled">Champ désactivé:</label>
5  <input type="text" id="disabled" name="disabled" 
6         value="Non modifiable" disabled>
7  
8  <!-- Lecture seule -->
9  <label for="readonly">Lecture seule:</label>
10  <input type="text" id="readonly" name="readonly" 
11         value="Visible mais non éditable" readonly>
12  
13  <!-- Saisie automatique -->
14  <label for="auto-email">Email (avec suggestions):</label>
15  <input type="email" id="auto-email" name="email" 
16         autocomplete="email" 
17         placeholder="Votre email">
18  
19  <!-- Focus automatique -->
20  <label for="autofocus">Premier champ:</label>
21  <input type="text" id="autofocus" name="first" 
22         autofocus placeholder="Focus automatique">
23</form>

1<!-- Types de sélection -->
2<form>
3  <!-- Sélecteur de couleur -->
4  <label for="color">Couleur préférée:</label>
5  <input type="color" id="color" name="color" value="#3498db">
6  
7  <!-- Upload de fichier avec restrictions -->
8  <label for="avatar">Photo de profil:</label>
9  <input type="file" id="avatar" name="avatar" 
10         accept="image/jpeg,image/png" 
11         multiple>
12  
13  <!-- Recherche avec liste de suggestions -->
14  <label for="city">Ville:</label>
15  <input type="search" id="city" name="city" list="cities">
16  <datalist id="cities">
17    <option value="Paris">
18    <option value="Lyon">
19    <option value="Marseille">
20    <option value="Toulouse">
21    <option value="Nice">
22  </datalist>
23</form>

1<!-- Types techniques -->
2<form>
3  <!-- Valeur cachée (souvent générée par JavaScript) -->
4  <input type="hidden" name="csrf_token" value="abc123xyz">
5  
6  <!-- Boutons de soumission -->
7  <input type="submit" value="Envoyer le formulaire">
8  <input type="reset" value="Réinitialiser">
9  <input type="button" value="Action personnalisée" onclick="customAction()">
10</form>

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>Formulaire d'inscription complet</title>
6    <style>
7        .form-group {
8            margin-bottom: 1rem;
9        }
10        
11        .form-group label {
12            display: block;
13            margin-bottom: 0.25rem;
14            font-weight: bold;
15        }
16        
17        .form-group input {
18            width: 100%;
19            padding: 0.5rem;
20            border: 1px solid #ddd;
21            border-radius: 4px;
22        }
23        
24        .form-group input:invalid {
25            border-color: #e74c3c;
26        }
27        
28        .form-group input:valid {
29            border-color: #27ae60;
30        }
31        
32        .error-message {
33            color: #e74c3c;
34            font-size: 0.875rem;
35            margin-top: 0.25rem;
36        }
37    </style>
38</head>
39<body>
40    <form id="registration-form" novalidate>
41        <div class="form-group">
42            <label for="fullname">Nom complet *</label>
43            <input type="text" id="fullname" name="fullname" 
44                   required minlength="2" maxlength="50"
45                   placeholder="Jean Dupont">
46        </div>
47        
48        <div class="form-group">
49            <label for="email">Email *</label>
50            <input type="email" id="email" name="email" 
51                   required autocomplete="email"
52                   placeholder="jean@exemple.com">
53        </div>
54        
55        <div class="form-group">
56            <label for="password">Mot de passe *</label>
57            <input type="password" id="password" name="password" 
58                   required minlength="8"
59                   pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}"
60                   title="8+ caractères avec majuscule, minuscule et chiffre">
61        </div>
62        
63        <div class="form-group">
64            <label for="birthdate">Date de naissance</label>
65            <input type="date" id="birthdate" name="birthdate" 
66                   min="1900-01-01" max="2010-12-31">
67        </div>
68        
69        <div class="form-group">
70            <label for="phone">Téléphone</label>
71            <input type="tel" id="phone" name="phone" 
72                   pattern="0[1-9][0-9]{8}"
73                   placeholder="06 12 34 56 78">
74        </div>
75        
76        <div class="form-group">
77            <label for="website">Site web personnel</label>
78            <input type="url" id="website" name="website" 
79                   placeholder="https://monsite.com">
80        </div>
81        
82        <div class="form-group">
83            <input type="submit" value="S'inscrire">
84        </div>
85    </form>
86</body>
87</html>

1<!-- Gestion des messages d'erreur personnalisés -->
2<form>
3    <div class="form-group">
4        <label for="custom-email">Email avec message personnalisé:</label>
5        <input type="email" id="custom-email" name="email" required>
6        <div class="error-message" id="email-error" style="display: none;">
7            Veuillez saisir une adresse email valide
8        </div>
9    </div>
10</form>
11
12<script>
13// JavaScript pour messages d'erreur personnalisés
14const emailInput = document.getElementById('custom-email');
15const errorDiv = document.getElementById('email-error');
16
17emailInput.addEventListener('invalid', function(e) {
18    e.preventDefault(); // Empêche le message natif
19    errorDiv.style.display = 'block';
20    
21    if (this.validity.valueMissing) {
22        errorDiv.textContent = 'L\'email est obligatoire';
23    } else if (this.validity.typeMismatch) {
24        errorDiv.textContent = 'Format d\'email invalide';
25    }
26});
27
28emailInput.addEventListener('input', function() {
29    if (this.validity.valid) {
30        errorDiv.style.display = 'none';
31    }
32});
33</script>