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 ?