• Les tableaux

Les langage HTML permet de créer les tableaux pour cela, on utilise la balise <table></table> C'est cette balise qui permet d'indiquer le début et la fin d'un tableau. Cette balise est de type bloc, il faut donc la placer en dehors d'un paragraphe. Exemple :
Code HTML :
 
A l’intérieur du tableau on peut avoir les balises suivantes :

• <tr> </tr> : indique le début et la fin d'une ligne du tableau ;
• <td> </td> : indique le début et la fin du contenu d'une cellule ;

En HTML, un tableau se construit ligne par ligne. Dans chaque ligne (<tr>), on indique le contenu des différentes cellules (<td>).
Schématiquement, un tableau se construit comme à la figure suivante

Schématiquement, un tableau se construit comme à la figure suivante

Ainsi la balise <tr></tr> englobe les balises <td>
 

Il est possible de préciser l’entête du tableau. La ligne d'en-tête se crée avec un <tr> comme on l'a fait jusqu'ici, mais les cellules qu'elle contient sont, cette fois, encadrées par des balises <th> et non pas <td> !

Code : html

Normalement, tout tableau doit avoir un titre. Le titre permet de renseigner rapidement le visiteur sur le contenu du tableau. Notre exemple est constitué d'une liste de personnes… oui mais alors ? Qu'est-ce que cela représente ? Sans titre de tableau, vous le voyez, on est un peu perdu.
HTML a prévu la balise <caption> pour cela.

Code : HTML

Présentation sur le navigateur :

2.1. Mise en forme d’un tableau
Tout d’abord, nous allons commencer par ajouter des bordures à notre tableau. Pour cela, nous allons utiliser les propriété CSS border, et border-collapse.
On connaît déjà la propriété border qui va nous permettre de créer des bordures autour de chaque cellule de notre tableau. Ensuite, pour « coller » ces différentes bordures entre elles, nous allons utiliser la propriété border-collapse.
Cette propriété accepte trois valeurs : collapse (les bordures des cellules se collent), separate (valeur par défaut) et inherit. Cela ressemble déjà beaucoup plus à un tableau !
Code CSS :
 

Aperçu :

On peut également augmenter la taille du tableau et donner une couleur bleue à l’entête pour le rendre plus beau.

Aperçu :

• Les formulaires

2.1. Introduction aux formulaires
Les formulaires sont certainement le moyen le plus simple et le plus utilisé pour recueillir des données à propos de vos utilisateurs. En cela, ils sont essentiels et incontournables.
Cependant, nous touchons là aux limites du HTLM. En effet, si l’on peut créer des formulaires en HTML, en ne peut pas en revanche stocker ni utiliser les données du formulaire avec ce langage. Pour cela, nous devrons utiliser d’autres langages comme le PHP et le MySQL par exemple.
Mais voyons déjà comment créer un formulaire : cela vous fera une très bonne base si vous souhaitez pousser plus loin votre apprentissage des langages de programmation.
2.2. Créer le squelette de notre formulaire
Pour créer notre formulaire, nous allons devoir tout d’abord utiliser l’élément form avec deux attributs : method et action.

• L’attribut action, tout d’abord, va servir à indiquer où les informations recueillies dans le formulaire doivent être envoyées pour être traitées.

Ce sera généralement vers une page PHP, Python, java EE, etc .

• L’attribut method va lui spécifier de quelle manière on va envoyer ces données. On peut choisir entre deux valeurs : GET et POST. En utilisant la valeur get, les données vont transiter via l’URL de la page ce qui ne sera pas le cas si l’on utilise la valeur post.

Il faut savoir que la valeur get est assez limitée par rapport à post. En effet, avec get, on est limité dans le nombre d’informations que l’on peut envoyer et surtout les informations sont visibles lors de l’envoi, ce qui est problématique si l’on envoie un mot de passe par exemple.
N.B : ne jamais envoyer les informations sensibles via la méthode get car n’importe qui pourra avoir accès à ses informations à temps voulu.
Code HTML :

2.3 créer un formulaire simple
Nous allons commencer par créer un formulaire très simple, demandant simplement un pseudo et un mot de passe à l’utilisateur.
Pour capturer des données textuelles simples comme un pseudo par exemple, on utilise soit l’élément input (pour des textes courts), soit l’élément textarea (pour des textes longs).
Dans notre cas, nous allons utiliser l’élément input. Cet élément prend forcément un attribut « type ». La valeur de l’attribut type correspond au type de données demandées. On a le choix entre text, password, date, email, tel, number, time, color et url.
Toutes ces valeurs ont été créées pour des raisons de sémantique. A noter également que l’affichage par défaut de chaque champ de votre formulaire pourra être légèrement différent selon la valeur choisie pour l’attribut type.
Il faut également préciser un deuxième attribut à l’élément input qui est l’attribut name. On lui donnera la valeur que l’on souhaite en essayant de rester cohérent. Cet attribut va nous être très utile pour traiter les données de notre formulaire.
A noter que l’élément input est représenté sous forme d’une balise orpheline.

Code HTML :

Il va maintenant falloir indiquer à votre visiteur ce qu’il doit renseigner comme information dans chaque champ. C’est le rôle du label, qu’on va donc ajouter juste avant l’input.
A noter que pour afficher du texte dans un formulaire, il faut entourer ce texte avec un élément de type block. Généralement, on utilisera donc un élément p.
Ensuite, toujours pour des raisons de sémantique, il est bon et conseillé de lier le label à l’input qui lui correspond. Pour cela, on va ajouter un attribut for au label et un attribut id à l’input, et Voilà donc pour notre champ « pseudo ». Maintenant, on va faire exactement la même opération pour notre champ mot de passe, à la différence que cette fois on va utiliser un input de type « password ». Cela aura pour effet que les caractères inscrits ne s’affichent pas à l’écran.
C’est tout, notre premier formulaire est prêt ! leur attribuer exactement la même valeur. Notez que cette valeur peut être la même que celle donnée à l’attribut name de l’élément input.

code HTML :

2.4. Créer une zone de saisie multiple ligne
G Imaginons que vous vouliez créer un livre d’or pour votre site web, ou tout simplement que vous souhaitiez laisser la possibilité à vos visiteurs de laisser des commentaires, alors vous aurez certainement besoin de créer une zone de texte multilignes.
Pour faire cela, on va cette fois-ci utiliser l’élément <textarea> plutôt que l’élément input. Tout comme pour l’élément input, on va lui attribuer un attribut name et utiliser un label.
Si vous souhaitez modifier la taille de votre champ, vous pouvez évidemment utiliser les propriétés width et height en CSS. Notez que cela fonctionne également pour un élément de type input.

Code HTML :

Code CSS :

2.5. Les case à cocher, zone d’options et listes
Ce sont les cases qui permettent de présenter à l’utilisateur de choisir une ou plusieurs réponses parmi différentes propositions.
Nous allons voir trois façons de faire cela avec les types checkbox (cases à cocher), radio (zones d’options) et l’élément select (listes déroulantes).

• Les cases à cocher : pour créer une zone de formulaire avec des cases à cocher, il suffit d’utiliser l’élément input avec cette fois-ci un attribut de type checkbox

Code HTML :

Aperçu sur le navigateur :

• Les boutons radio : pour créer une zone de formulaire avec des cases à cocher, il suffit d’utiliser l’élément input avec cette fois-ci un attribut de type radio. Ici on ne peut pas choisir plus d’une option.

Code HTML :

Aperçu :

Ici on voit bien une option sélectionnée. On ait soit homme, soit femme mais pas les deux en même temps.

• La liste déroulante : : pour créer une zone de formulaire avec liste déroulante, il suffit d’utiliser la balise <select> et insérer à l’intérieur de celle-ci les balises <option> qui permettent d’indiquer les valeurs de la liste déroulante.

Syntaxe :

Aperçu :

2.6. Finaliser et envoyer votre formulaire
Il existe bon nombre d’attribut et balise utiles dans les formulaires. Les parcourir tous nous prendra énormément de temps, nous allons donc vous présentez les plus utiles.
Nous allons étudiez les attributs placeholder, required et les balises <fieldset> et <legend>.

• L’attribut placeholder, sert à donner davantage d’indications sur vos champs à vos visiteurs. Il vous sert à donner un exemple de remplissage de champ

Code HTML :

Aperçu :

• Required permet de forcer le remplissage d’un champ dans un formulaire

Code HTML :

• La balise <fieldset> sert à organiser votre formulaire en différentes rubriques. Cela peut être utile si celui-ci devient long. Vous pouvez ensuite donner une légende à chaque rubrique grâce à l’élément <legend>

CodeHTML :

Code CSS :

Aperçu :

On va pouvoir enfin envoyer notre formulaire. Pour créer le bouton d’envoi, on va tout simplement utiliser un input de type submit avec un attribut value.

Il est aussi possible de réinitialiser les champs du formulaire.
Pour cela on utilise la balise input de type reset avec l’attribut value.

Exemple de formulaire complet :  ceci nous permettra de réviser bon nombre de propriété css vu jusqu’ici.
Code html :

Code CSS :


Aperçu :

• Explication du code CSS
• display:block indiqué dans le label permet de passer à la ligne automatiquement.
• display:inline indiqué dans le label.inline... pour éviter de passer à la ligne dans certains cas (ici pour les boutons radios)
• input[type=radio] permet de styliser uniquement les boutons radio (c'est à dire les cases à cocher) de même input[type=submit] et input[type=reset] permettent de styliser les boutons de soumission et d'annulation.
• cursor:pointer permet d'avoir le curseur sous forme d'une main pour les boutons.
• border-radius et box-shadow permettent respectivement de créer les arrondis sur les bordures des box et créer les hombres. Attention, ces propriétés décoratives CSS3 ne sont pas implémentées par les navigateurs anciens.