Le HTML signifie HyperText Markup Language. C'est un langage de structuration de texte qui sera lu par un navigateur. La syntaxe du HTML utilise un système de balisage (Markup). C'est à dire qu'il y a une délimitation avec un début (balise ouvrante) et une fin (balise fermante). Grâce à ce système de balises, le navigateur va pouvoir structurer et enrichire votre texte (HyperText) en proposant des outils d'interaction avec l'utilisateur (ex : formulaire de saisie, lien, afficher une image du serveur...).
Le navigateur va ainsi comprendre la structuration de votre page. Cette structuration est également utilisée par les moteurs de recherche pour comprendre chaque zone d'informations de votre page et donc trouver les informations importantes pour les indexer. Il est donc important de bien structurer votre page avec les bonnes balises HTML pour améliorer votre référencement naturel.
Vous verrez que la mise en forme avec HTML n'est pas très « fun ». C'est pour cela qu'il faudra utiliser le langage CSS pour réaliser vos mises en formes sur les textes et tous les éléments qui composent votre structure HTML.
Aujourd'hui nous sommes à la version 5 du langage HTML.
Pour en savoir plus sur le fonctionnement du HTML :
Pour avoir la liste de toutes les balises HTML5 avec leurs définitions et leurs utilisations :La création de formulaire en HTML represente la partie la plus complexe de HTML.
Vous allez voir qu'il est quand même assez simple de réaliser un formulaire et donc de communiquer avec le monde entier grace à certaines balises HTML.
Les balises HTML de formulaire sont la base pour interagire avec tous les internautes et donc faire du web 2.0 !
Vous allez donc apprendre à communiquer avec le monde entier à la fin de ce cours !!
Pour créer un formulaire html, il vous faudra un fichier HTML avec les instructions de bases.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color:#eee">
Ecrivez le reste de votre code HTML ici....
</body>
</html>
La balise <form>...</form> represente la balise de création d'un formulaire.
C'est entre cette balise que nous allons pouvoir ajouter l'ensemble des objets qui vont constituer le formulaire.
Pour que votre formulaire fonctionne et puisse être récupéré par un script (PHP, JS...) il faut ajouter des attributs dans la balise ouvrante <form>.
<form name="myForm" id="myForm" action="pageDeTraitement" method="POST" enctype="multipart/form-data" >
... ici on placera les éléments de formulaire HTML ...
</form>
Détails des attributs
name : Nom du formulaire. Permet d'acceder au contenu du formulaire à l'aide d'un script (JS)id : Identifiant unique du formulaire. Permet d'acceder au contenu du formulaire à l'aide d'un script (JS)action : Indique quelle page va récupérer les données du formulaire. Il faut renseigner une URI (maPage.php)method : Définit le protocole HTTP d'envoi des données du formulaire vers le serveur web.enctype : spécifie comment les données du formulaire doivent être encodées lors de leur transmission au serveur web.
Cet attribut n'est pas obligatoire mais par defaut il n'est pas possible de transmettre des fichiers au serveur web.
Pour transmettre des fichiers au serveur, il faut indiquer la valeur enctype="multipart/form-data".
L'attribut enctype ne peut être utilisé qu'avec method="POST"Dans ce chapitre nous allons vous présenter les éléments de formulaire dont vous aurez besoin pour réaliser le projet à remettre à la fin du module.
<input>C'est l'élement couteau suisse dans un formulaire HTML. Il se derive en une multitude d'élements de saisie d'informations en fonction du type que vous allez renseigner.
<input type="nomDuType" value="" name="myName" id="myName" /> Voici la liste de tous les types que vous pouvez créer avec un élement <input>
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input
<input>C'est l'élement le plus utilisé pour récupérer des chaines de caractères
<input type="text" value="" name="prenom" id="prenom" placeholder="Votre prénom" required />L'attribut placeholder permet d'afficher un texte dans la zone de saisie quand la zone est vide.
L'attribut required rend la saisie du texte obligatoire.
Interessant à utiliser pour ne récupérer que des chiffres (code postal, prix...)
<input type="number" value="" name="prix" id="prix" step="0.01" />L'attribut step indique qu'il est possible de saisir un chiffre à virgule avec deux chiffres après la virgule.
Idéal pour saisir des mots de passe en toute discretion.
<input type="password" value="" name="motDePasse" id="motDePasse" />Cet élément est invisible et sert à stocker une information pour le traitement future du formulaire.
Par exemple pour mettre à jour un compte utilisateur on stockera l'identifiant unique de
l'utilisateur dans un élément "hidden" qui sera ensuite récupéré par le script de traitement (PHP, JS...).
<input type="hidden" value="542" name="idUser" id="idUser" />Avec le type "checkbox" vous pouvez proposer plusieurs choix à vos utilisateurs.
Dans ce cas il faudra que l'attribut "name" porte le
même nom sur chaque "input" de type "checkbox"
avec des crochets en suffixe pour créer un tableau de valeurs.
<input type="checkbox" value="foo" name="choix[]" id="myName" />
<input type="checkbox" value="foo2" name="choix[]" id="myName2" />Pour valider votre formulaire et envoyer les informations à la page indiquée dans "action" de la balise <form action="foo.php" >,
il faut ajouter un bouton de validation.
<input type="submit" value="Valider" name="valider" id="valider" />