55 lines
3.8 KiB
Markdown
55 lines
3.8 KiB
Markdown
HTML 7
|
|
=
|
|
|
|
### Exercice 1
|
|
1. En HTML, les formulaires sont délimités par les balises `<form>`.
|
|
2. L'attribut `action` spécifie l'URL de destination des données, lors de l'envoi du formulaire. L'attribut `method` spécifie la manière d'envoyer les données. Classiquement `method="get"` envoie les données directement dans l'URL d'appel, et `method="post"` envoie les données au serveur par methode `POST`, c'est à dire dans les métadonnées de requête.
|
|
|
|
### Exercice 2
|
|
1. Un champ de texte monoligne est ajouté grâce à la balise `<input>` avec l'attribut `type` défini à `text`. Les champs de textes multiligne sont générés par les balises `<textarea>`.
|
|
2. L'attribut `name` indique le nom associé à la valeur du champ, qui va être envoyée à l'URL spécifiée par `action` lors de l'envoi du formulaire.
|
|
3. Le système de libellage permet d'associer un titre graphique à un champ. Le libéllé sera une balise, typiquement `<input>` qui aura son attribut `name` défini. Le libellant sera une balise `<label>` avec l'attribut `for` ayant pour valeur la valeur du `name` ou de l'`id` de la balise libéllée. À l'affichage, la balise `<label>` sera placée devant la balise en question, et cliquer sur le `<label>` placera le curseur sur/dans le `<input>`.
|
|
|
|
### Exercice 3.
|
|
1. Les listes déroulantes sont créées à l'aide de la balise `<select>`. Les différentes options seront des sous-balises de cette dernière, sous-balises de type `<option>` avec un attribut `value` correspondant à la valeur informatique transmise lors de l'envoi du formulaire.
|
|
2. Les cases à cocher sont représentées par des balises `<input>` avec pour attribut `type` la valeur `checkbox`. Si leur attribut `checked` possède une valeur non vide, alors la case sera cochée par défaut.
|
|
|
|
3. Les zones d'options (si j'ai bien compris) sont créées par les balises `<input>` avec comme attribut `type` la valeur `"radio"`. Dans un formulaire, il ne sera possible de sélectionner qu'un seul `radio` pour une valeur d'attribut `name` donné. Il faut faire alors attention à ne pas réutiliser les valeurs données à `name` involontairement.
|
|
|
|
### Exercice 4
|
|
Les champs enrichis se font grâce à l'attribut `type` de la balise `<input>`. Les différentes valeurs permettent de
|
|
- Cacher le texte rentré si l'utilisateur rentre un mot de passe (champ `password`)
|
|
- Éviter d'envoyer les données quand elles sont clairement érronées (une adresse e-mail invalide pour le champ `email`, ou un mois pour `month`)
|
|
- Utiliser le clavier adéquat sur support mobile, par exemple uniquement neuf touches pour un champ `number`, ou `tel` (numéros de téléphone).
|
|
|
|
### Exercice 5
|
|
1. Un bouton pouvant envoyer les données peut être créé grâce à la balise `<input>` avec l'attribut/valeur `type=submit`.
|
|
2. L'attribut `name` permet de savoir quel bouton a été préssé pour envoyer le formulaire. Par exemple pour un formulaire demandant nom/prénom et avec deux boutons "Se connecter" et "Créer un compte".
|
|
|
|
### Exercice 6
|
|
```
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head></head>
|
|
<body>
|
|
Le meilleur des pokemon c'est ????? RONDOUDOU BIEN SUR !<br/><br/>
|
|
Veuillez renseigner vos coordonées afin que je vous envoie plein de propagande sur la bienfaisance de rondoudou:<br/>
|
|
<form action="https://satan.corp/sell_soul.php" method="GET">
|
|
<label for="nom">Votre nom: </label>
|
|
<input type="text" name="nom"/><br/>
|
|
<label for="prenom">Votre prénom: </label>
|
|
<input type="text" name="prenom"/><br/>
|
|
<label for="mdp">Le mot de passe de votre adresse mail: </label>
|
|
<input type="password" name="mdp"/><br/>
|
|
<label for="ddn">Votre date de naissance: </label>
|
|
<input type="date" name="ddn"/><br/>
|
|
<label for="teleph">Votre numéro de téléphone: </label>
|
|
<input type="tel" name="teleph"/><br/>
|
|
<input type="submit" name="vendre" value="Vendre"/>
|
|
|
|
|
|
</form><br/>
|
|
</body>
|
|
</html>
|
|
```
|