Les formulaires
Les formulaires
Partie #1 - HTML
Formulaire - Pour quoi faire ?
Recherche
Connexion
Inscription
Création
Modification
Suppression
Pour beaucoup de choses en somme
Formulaire - Déclaration
<body>
<!-- Ouverture du formulaire -->
<form>
<!-- Contenu du formulaire -->
<!-- Fermeture du formulaire -->
</form>
</body>Formulaire - Déclaration
<body>
<!-- Ouverture du formulaire -->
<form method="POST">
<!-- Contenu du formulaire -->
<!-- Fermeture du formulaire -->
</form>
<form method="GET">
</form>
</body>Method : définit la façon dont sont envoyées les informations d'un formulaire
Par défaut, si on ne met rien : GET
Formulaire - Boutons
<body>
<!-- Ouverture du formulaire -->
<form>
<!-- Contenu du formulaire -->
<input type="..." name="..." />
<!-- Fermeture du formulaire -->
</form>
</body>Types : submit, reset, email, password, number, checkbox, color, date, file, ...
Name : définition du nom du bouton
TRÈS IMPORTANT POUR LA SUITE
Formulaire - Boutons
<body>
<!-- Ouverture du formulaire -->
<form>
<!-- Contenu du formulaire -->
<input type="..." name="..." value="..." placeholder="..." />
<!-- Fermeture du formulaire -->
</form>
</body>Value : Définit une valeur au bouton
Pour les boutons de type "submit" et "reset", value change le nom par défaut
Placeholder : texte grisé dans les boutons
Formulaire - Textarea
<body>
<!-- Ouverture du formulaire -->
<form>
<!-- Contenu du formulaire -->
<input type="..." name="..." value="..." placeholder="..." />
<textarea name="..."></textarea>
<!-- Fermeture du formulaire -->
</form>
</body>Textarea : Permet de définir une zone de texte
Formulaire - Label
<body>
<!-- Ouverture du formulaire -->
<form>
<!-- Contenu du formulaire -->
<label>Pseudo</label>
<input type="text" name="pseudoConnexion" placeholder="Pseudo" />
<!-- Fermeture du formulaire -->
</form>
</body>Label : Pour aider l'utilisateur à comprendre ce qu'on veut qu'il saisisse
Les formulaires
Partie #2 - Mise en forme
Formulaire - Fieldset
<body>
<!-- Ouverture du formulaire -->
<form>
<!-- Contenu du formulaire -->
<fieldset> <!-- Début de la "zone" -->
<legend>Informations de connexion</legend> <!-- Nom de la "zone" -->
<label>Pseudo</label>
<input type="text" name="pseudoConnexion" placeholder="Pseudo" />
<label>Mot de passe</label>
<input type="password" name="passConnexion" />
</fieldset> <!-- Fin de la "zone" -->
<fieldset> <!-- Début de la "zone" -->
<legend>Informations personnelles</legend> <!-- Nom de la "zone" -->
<label>Nom</label>
<input type="text" name="nameUser" placeholder="Nom" />
<label>Mot de passe</label>
<input type="email" name="emailUser" placeholder="Email" />
</fieldset> <!-- Fin de la "zone" -->
<!-- Fermeture du formulaire -->
</form>
</body>Les formulaires
Avez-vous des questions ?
Les formulaires
Les formulaires - Partie #1 et Partie #2
By Pauline Capot
