HTML5 - Fonctionnalités évoluées

- Tableaux et Formulaires -

1 - Création d'un tableau à l'aide des balises table ( Tableau ), tr ( Lignes ) et td ( Cellules )

Code HTML :

<p>- Affichage d'un tableau simple à l'aide des balises table, tr et td.</p>
<table id="table1">
  <tr>
    <td>Carmen</td>
    <td>33 ans</td>
    <td>Espagne</td>
  </tr>
  <tr>
    <td>Michelle</td>
    <td>26 ans</td>
    <td>États-Unis</td>
  </tr>
</table><br /><br />

Résultat >>

- Affichage d'un tableau simple à l'aide des balises table, tr et td.

La marge extérieure du tableau et les bordures des cellules sont gérés depuis le fichier style_test.css .

Code CSS associé :
#table1
{
margin-left: 30px;   /* Marge extérieure gauche des tableaux */
}

td    /* Toutes les cellules des tableaux... */
{
border: 1px solid black;   /* auront une bordure de 1px */
text-align: center;   /* et leur texte centré */
}

1.1 - Ajout d'une ligne d'en-tête avec la balise th et collage des cellules avec la propriété border-collapse

Code HTML :

<p>- Ajout d'une ligne d'en-tête et collage des bordures à l'aide de la balise th et de la propriété border-collapse.</p>
<table class="table2">
  <tr>
    <th>Nom</th>
    <th>Age</th>
    <th>Pays</th>
  </tr>
  <tr>
    <td>Carmen</td>
    <td>33 ans</td>
    <td>Espagne</td>
  </tr>
  <tr>
    <td>Michelle</td>
    <td>26 ans</td>
    <td>États-Unis</td>
  </tr>
</table><br /><br />

Résultat >>

- Ajout d'une ligne d'en-tête et collage des bordures à l'aide de la balise th et de la propriété border-collapse.

Code CSS associé :
.table2
{
margin-left: 30px;
margin-right: 30px;
border-collapse: collapse;   /* Collage des bordures de cellules, valeurs possibles : collapse ou separate */
}

td, th
{
border: 1px solid black;
text-align: center;
}

1.2 - Ajout d'un titre avec la balise caption et position de celui-ci avec la propriété caption-side

Code HTML :

<p>- Ajout d'un titre avec la balise caption et position de celui-ci avec la propriété caption-side.</p>
<table class="table2">
  <caption>Passagers du vol 377</caption>
  <tr>
    <th>Nom</th>
    <th>Age</th>
    <th>Pays</th>
  </tr>
  <tr>
    <td>Carmen</td>
    <td>33 ans</td>
    <td>Espagne</td>
  </tr>
  <tr>
    <td>Michelle</td>
    <td>26 ans</td>
    <td>États-Unis</td>
  </tr>
</table><br /><br />

Résultat >>

- Ajout d'un titre avec la balise caption et position de celui-ci avec la propriété caption-side.

La position du titre est gérée depuis le fichier style_test.css .

Code CSS associé :
.table2
{
margin-left: 30px;
margin-right: 30px;
border-collapse: collapse;
caption-side: bottom;   /* Titre placé en bas, valeurs possibles : top ou bottom */
}

1.3 - Le même tableau plus structuré avec les balises thead, tfoot et tbody ( balises non obligatoires )

Code HTML :

<p>- Le même tableau structuré à l'aide des balises thead, tfoot et tbody.</p>
<table class="table2">
  <caption>Passagers du vol 377</caption>

 <thead>
  <tr>
    <th>Nom</th>
    <th>Age</th>
    <th>Pays</th>
  </tr>
 </thead>

 <tfoot>
  <tr>
    <th>Nom</th>
    <th>Age</th>
    <th>Pays</th>
  </tr>
 </tfoot>

 <tbody>
  <tr>
    <td>Carmen</td>
    <td>33 ans</td>
    <td>Espagne</td>
  </tr>
  <tr>
    <td>Michelle</td>
    <td>26 ans</td>
    <td>États-Unis</td>
  </tr>
 </tbody>

</table><br /><br />

Résultat >>

- Le même tableau structuré à l'aide des balises thead, tfoot et tbody.

1.4 - Fusion de celluses avec les balises colspan ( fusion horizontale ) et rowspan ( fusion verticale )

Code HTML :

<p>- Fusion horizontale de 2 cellules à l'aide de la balise colspan.</p>
<table class="table2">
  <tr>
    <th>Titre du film</th>
    <th>Pour enfants ?</th>
    <th>Pour adolescents ?</th>
  </tr>
  <tr>
    <td>Massacre à la tronçonneuse</td>
    <td>Non, trop violent</td>
    <td>Oui</td>
  </tr>
  <tr>
    <td>Les bisounours font du ski</td>
    <td>Oui, adapté</td>
    <td>Pas assez violent...</td>
  </tr>
  <tr>
    <td>Lucky Luke, seul contre tous</td>
    <td colspan="2" class="colspan" >Pour toute la famille !</td>
  </tr>
</table><br /><br />

Résultat >>

- Fusion horizontale de 2 cellules à l'aide de la balise colspan.

La couleur des cellules fusionnées est gérée depuis le fichier style_test.css .

Code CSS associé :
.colspan
{
background-color: #FFFA32;   /* Fond jaune foncé */
}

Code HTML :

<p>- Fusion verticale de 2 cellules à l'aide de la balise rowspan.</p>
<table class="table2">
  <tr>
    <th>Titre du film</th>
    <td>Massacre à la tronçonneuse</td>
    <td>Les bisounours font du ski</td>
    <td>Lucky Luke, seul contre tous</td>
  </tr>
  <tr>
    <th>Pour enfants ?</th>
    <td>Non, trop violent</td>
    <td>Oui, adapté</td>
    <td rowspan="2" class="rowspan">Pour toute la famille !</td>
  </tr>
  <tr>
    <th>Pour adolescents ?</th>
    <td>Oui</td>
    <td>Pas assez violent...</td>
</table><br /><br />

Résultat >>

- Fusion verticale de 2 cellules à l'aide de la balise rowspan.

La couleur des cellules fusionnées est gérée depuis le fichier style_test.css .

Code CSS associé :
.colspan, .rowspan
{
background-color: #FFFA32;   /* Fond jaune foncé */
}

2 - Création d'un formulaire avec les balises form - fieldset - legend - label - input - textarea et leurs attributs

Code HTML :

<p>- Affichage d'un formulaire à l'aide des balises form - fieldset - legend - label - input - textarea et de leurs attributs.</p><br />
<form method="post" action="traitement.php"> <!-- method = type d'envoi ( get ou post ) - action = moyen utilisé pour traiter la réception -->

<fieldset> <!-- indique le début d'un groupe de champs -->
 <legend>Vos coordonnées ( regroupement de 3 champs )</legend> <!-- indique le titre du groupe de champs -->
 <p>
  <label for="pseudo">Votre pseudo : </label> <!-- libellé lié par l'attribut for au champ input dont l'attribut id ="pseudo" -->
  <input type="text" name="pseudo" id="pseudo" placeholder="Ex : Indication de contenu" size="30" maxlength="10" autofocus />
    <br /><br />
  <label for="pass">Votre mot de passe :</label>
  <input type="password" name="pass" id="pass" required /> <!-- l' attribut required indique au navigateur que le champ doit être rempli -->
    <br /><br />
  <label for="mail">Votre adresse mail :</label>
  <input type="email" name="mail" id="mail" />
 </p>
</fieldset>

<fieldset>
 <legend>Vos commentaires ( 1 seul champ )</legend>
 <p>
  <label for="ameliorer">Affichage d'une zone de texte multiligne</label><br />
  <textarea name="ameliorer" id="ameliorer" rows="5" cols="50">une zone de texte multiligne est encadrée par la balise textarea</textarea>
  <br /><br />
 </p>
</fieldset>

<input type="submit" value="Envoyer" /> <!-- Création du bouton d'envoi -->

</form>
<p>Fin</p><br />

Résultat >>

- Affichage d'un formulaire à l'aide des balises form - fieldset - legend - label - input - textarea et de leurs attributs.

Fin

Code CSS associé :
form
{
margin-left: 30px;   /* Marge extérieure gauche */
margin-right: 200px;   /* Marge extérieure droite */
}

type="reset", remise à zéro du formulaire.
type="image", équivalent du bouton submit, présenté cette fois sous forme d'image. Rajoutez l'attribut src pour indiquer l'URL de l'image.
type="button", bouton qui n'aura par défaut aucun effet. Ce bouton est souvent géré en JavaScript pour exécuter des actions sur la page.

De nouvelles valeurs de l'attribut type qui concerne les zones de saisie dites enrichies font que les comportements des navigateurs peuvent être différents selon que les champs soit remplis correctement ou non. Certains navigateurs, comme les navigateurs mobiles sur iPhone et Android, affichent un clavier adapté à la saisie du type déclaré à l'intérieur de la balise input.

Ci-dessous la listes de ces nouvelles valeurs :

type="email"
type="url"
type="tel"
type="number"
type="range"
type="color"
type="date"
type="time"
type="week"
type="month"
type="datetime"
type="datetime-local"
type="search"

2.1 - Les cases à cocher

Code HTML :

<p>- Affichage d'une liste de cases à cocher.</p>
<form method="post" action="traitement.php">
   <p>Cochez les aliments que vous aimez manger :<br />
     <input type="checkbox" name="frites" id="frites" /> <label for="frites">Frites</label><br />
     <input type="checkbox" name="steak" id="steak" checked /> <label for="steak">Steak haché</label><br />
     <input type="checkbox" name="epinards" id="epinards" /> <label for="epinards">Epinards</label><br />
     <input type="checkbox" name="huitres" id="huitres" /> <label for="huitres">Huitres</label>
   </p>
</form><br />

Résultat >>

- Affichage d'une liste de cases à cocher.

2.2 - Les zones d'options

Code HTML :

<p>- Affichage de zones d'options.</p>
<form method="post" action="traitement.php">
   <p>Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br />
     <input type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de 15 ans</label><br />
     <input type="radio" name="age" value="medium15-25" id="medium15-25" checked /> <label for="medium15-25">15-25 ans</label><br />
     <input type="radio" name="age" value="medium25-40" id="medium25-40" /> <label for="medium25-40">25-40 ans</label><br />
     <input type="radio" name="age" value="plus40" id="plus40" /> <label for="plus40">Encore plus vieux que ça ?!</label>
   </p>
</form><br />

Résultat >>

- Affichage de zones d'options.

2.3 - Les listes déroulantes

Code HTML :

<p>- Affichage d'une liste déroulante simple avec présélection d'un pays à l'aide de l'attribut selected.</p>
   <form method="post" action="traitement.php">
     <p>
        <label for="pays">Dans quel pays habitez-vous ?</label>
        <select name="pays" id="pays">
          <option value="france">France</option>
          <option value="espagne">Espagne</option>
          <option value="italie">Italie</option>
          <option value="royaume-uni">Royaume-Uni</option>
          <option value="canada" selected>Canada</option>
          <option value="etats-unis">États-Unis</option>
          <option value="chine">Chine</option>
          <option value="japon">Japon</option>
        </select>
     </p>
   </form><br />

Résultat >>

- Affichage d'une liste déroulante simple avec présélection d'un pays à l'aide de l'attribut selected.

Code HTML :

<p>- Affichage d'une liste déroulante incluant des groupes d'options.</p>
   <form method="post" action="traitement.php">
     <p>
        <label for="pays">Dans quel pays habitez-vous ?</label>
        <select name="pays" id="pays_options">
          <optgroup label="Europe">
             <option value="france">France</option>
             <option value="espagne">Espagne</option>
             <option value="italie">Italie</option>
             <option value="royaume-uni">Royaume-Uni</option>
          </optgroup>
          <optgroup label="Amérique">
             <option value="canada">Canada</option>
             <option value="etats-unis">Etats-Unis</option>
          </optgroup>
          <optgroup label="Asie">
             <option value="chine">Chine</option>
             <option value="japon">Japon</option>
          </optgroup>
        </select>
     </p>
   </form><br />

Résultat >>

- Affichage d'une liste déroulante incluant des groupes d'options.

Suite...