Mysaa/projprog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
projprog/HTML7.md
Avrillon Samy 3b6ab5e8ba Séance du 24 septembre. Fin du HTML.
2021-09-24 17:34:53 +02:00

3.8 KiB
Raw Permalink Blame History

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>