Les éléments dédiés aux formulaires
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Un formulaire</title>
</head>
<body>
<form name="MonFormulaire" method="post" action="traitement.php">
<fieldset>
<legend>Légende du <fieldset></legend>
Contenu du du <fieldset>
</fieldset><br><label>Un champ texte</label>
<input type="text" name="Nom" value="valeur"><br><label>Un bouton</label>
<input type="button" name="Nom" value="Légende du bouton"><br><label>Un bouton image</label>
<input type="image" src="commande.jpg"><br><label>Un champ mot de passe</label>
<input type="password" name="Nom" value="valeur par défaut"><br><label>Une case à cocher</label>
<input type="checkbox" name="Nom" value="Valeur">
<label>Un bouton radio</label>
<input type="radio" name="Nom" value="Valeur"><br><label>Des boutons <submit> et <reset></label>
<input type="submit" name="Nom" value="Envoyer">
<input type="reset" name="Nom" value="Annuler"><br><label>Champs spécialisés date et heure</label>
<input type="date" name="Nom" title="Date(aaaa-mm-jj)" value="2010-11-22">
<input type="time" name="Nom" title="Heure(hh-mm)" value="10:00">
<input type="datetime" name="Nom"><br><label>Saise de nombres entiers autour de la valeur 55</label>
<input type="number" name="Nom" value="55"><br><label>Une zone de texte spécialisée recherche</label>
<input type="search" name="Nom" list="datalist" value="Valeur par défaut"><br><label>Un curseur pour sélectionner des valeurs numériques</label>
<input type="range" min="-500" max="500" value="0" step="10" name="Nom"><br><label>Un bouton pour désigner un fichier local</label>
<input type="file" name="Nom"><br><label>Une zone de saisie multiligne</label>
<textarea cols="40" rows="4">Texte par défaut</textarea><br><label>Liste déroulante et zone de liste</label>
<select name="Nom">
<option>Valeur 1</option>
<option>Valeur 2</option>
<option>Valeur 3</option>
<option>Valeur 4</option>
<option>Valeur 5</option>
</select><select size="2" name="Nom">
<option>Valeur 1</option>
<option>Valeur 2</option>
<option>Valeur 3</option>
<option>Valeur 4</option>
<option>Valeur 5</option>
</select><br><label>Résultat d'un calcul : </label>
<output name="resultat">123</output>
</form>
</body>
</html>
L’attribut placeholder
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Une zone de texte améliorée</title>
</head>
<body>
<form name="MonFormulaire" method="post" action="traitement.php">
<label>Quel est le meilleur système d'exploitation selon vous ?</label>
<input name="texte" placeholder="Entrez votre réponse ici">
<input type="submit" value="Envoyer">
</form>
</body>
</html>
L’attribut autofocus
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Autofocus compatible avec tous les navigateurs</title>
</head>
<body>
<form action="action.php" method="post">
<fieldset>
<legend>Positionnement du point d'insertion dans le premier champ input</legend>
<label>Nom</label>
<input type="text" id="champ1" autofocus>
<script>
if (!("autofocus" in document.createElement("input")))
{
document.getElementById("champ1").focus();
}
</script>
<label>Prénom</label>
<input type="text" id="champ2">
<label>Adresse</label>
<input type="text" id="champ3">
<label>Ville</label>
<input type="text" id="champ4">
</fieldset>
</form>
</body>
</html>
Validation de données
Exemple 1
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Champ de saisie obligatoire</title>
</head>
<body>
<form id="validation">
<label>Nom</label><input name="Nom" required><br><br><br><br>
<input type=submit value="Valider"></p>
</form>
</body>
</html>Exemple 2
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Validation e-mail et url</title>
</head>
<body>
<form id="validation">
<label>Nom</label><input name="Nom"><br>
<label>e-mail</label> <input type=email name="email" required><br>
<label>Adresse URL</label> <input type=url name="url" required><br>
<label>Commentaire</label> <textarea name="comment"></textarea><br>
<input type=submit value="Valider"></p>
</form>
</body>
</html>
Labels implicites
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Alignement d'éléments dans un formulaire</title>
</head>
<body>
<form id="validation">
<label>Nom<input id="Nom"></label><br>
<label>Prénom</label> <input id="prenom"><br>
<label for="adresse">Adresse</label><textarea id="adresse"></textarea><br>
</form>
</body>
</html>
Labels explicites
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Alignement d'éléments dans un formulaire</title>
</head>
<body>
<form id="validation">
<label for="nom">Nom<input id="nom"></label><br>
<label for="prenom">Prénom</label> <input id="prenom"><br>
<label for="adresse">Adresse</label><textarea id="adresse"></textarea><br>
</form>
</body>
</html>
Aligner les éléments d’un formulaire
Exemple 1
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Labels implicites et explicites</title>
<style>
label
{
display: inline-block;
width: 80px;
}
</style>
</head>
<body>
<form id="validation">
<label>Nom</label><input id="Nom"><br>
<label>Prénom</label><input id="Prenom"><br>
<label>Adresse</label><textarea id="Adresse" rows="8" cols="30"></textarea><br><br>
<input type="button" name="Nom" value="Valider">
</form>
</body>
</html>Exemple 2
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Alignement d'éléments dans un formulaire</title>
<style>
input, textarea
{
position: absolute;
left: 85px;
}
.button
{
position: absolute;
left: 85px;
top: 200px;
}
</style>
</head>
<body>
<form id="validation">
<label>Nom</label><input id="Nom"><br>
<label>Prénom</label><input type=email id="email"><br>
<label>Adresse</label><textarea id="adresse" rows="8" cols="30"></textarea><br><br>
<input type="button" name="Nom" value="Valider" class="button">
</form>
</body>
</html>
Arrondir les angles des éléments d’un formulaire
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Arrondir les angles d'un formulaire</title>
<style>
.arrondi
{
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
-ms-border-radius: 15px;
border: 1px solid black;
}
</style>
</head>
<body>
<form id="validation">
<label>Nom</label><input id="Nom" class="arrondi"><br>
<label>Prénom</label><input id="Prenom" class="arrondi"><br>
<label>Adresse</label><textarea id="adresse" class="arrondi" rows="8" cols="30"></textarea><br><br>
<input type="button" name="Nom" value="Valider" class="arrondi">
</form>
</body>
</html>
Modifier l’allure d’un bouton avec un style
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Un bouton de formulaire entièrement redéfini</title>
<style>
@font-face
{
font-familly: algerian;
src: url('ALGER.TTF');
}
.arrondi
{
width: 220px;
height: 50px;-moz-border-radius: 50px 50px 200px 50px;
-webkit-border-radius: 50px 50px 200px 50px;
-khtml-border-radius: 50px 50px 200px 50px;
-ms-border-radius: 50px 50px 200px 50px;
border: 1px solid black;background: -moz-linear-gradient(top, #40FFFF, #C0FFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#40FFFF), to(#C0FFFF));box-shadow: 5px 5px 5px grey;
-moz-box-shadow: 5px 5px 5px grey;
-webkit-box-shadow: 5px 5px 5px grey;
-khtml-box-shadow: 5px 5px 5px grey;font-family: 'algerian';
font-size: 40px;
}
.arrondi:hover
{
background: -moz-linear-gradient(top, #C0FFFF, #40FFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C0FFFF), to(#40FFFF));
}.arrondi:active
{
background: white;
background: white;
}
</style>
</head>
<body>
<form id="validation">
<input type="button" name="bouton1" value="Valider" class="arrondi">
</form>
</body>
</html>