HTML5 - CSS 2.x/3
PHP / MySQL
FORTH ...

Des formulaires très propres sans TABLE

Voici le type de code que l'on retrouve trop fréquemment sur Internet dès qu'il s'agit de saisir des données:

<form method="POST" action='index.php?page=sites/enregistrerNouveauSite' id="formulaire">
    <table>
        <tr>
            <td align="right">catégorie:</td>
            <td>
                <select name="categorie">
                    <option>-- sélectionnez --</option>
                    <option value="CP">camping</option>
                    <option value="GH">gîte d'hôte</option>
                    <option value="PK">parking</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right">lien web:</td>
            <td>
                <input type='text' id="url" name='url' size='64' maxlength='250'>
            </td>
        </tr>
            <td align="right">description:</td>
            <td>
                <textarea name='description' rows='6' cols='64' required></textarea>
            </td>
    </table>
</form>

Et encore, dans cet exemple, on vous a épargné les classes issues des fichiers CSS servant à améliorer la présentation...

Entrons dans le vif du sujet en présentant ce même formulaire réécrit en HTML5 et sans TABLE:

<style type="text/css">
    form label {
        display: inline-block;
        vertical-align: top;
        text-align: right;
        padding-right: 8px;
        padding-top: 2px;
        width: 120px;
    }
    form p { text-align: left;  }
</style>
<form method='POST' action='index.php?page=sites/enregistrerNouveauSite' id="formulaire">
    <p><label for="categorie">catégorie:</label>
        <select name="categorie">
            <option>-- sélectionnez --</option>
            <option value="CP">camping</option>
            <option value="GH">gîte d'hôte</option>
            <option value="PK">parking</option>
        </select></p>
    <p><label for="url">lien web:</label>
        <input type='url' id="url" name='form[url]' size='64' maxlength='250'
               required title="tapez un URL complet, exemple: http://www.mon-site.com/"></p>
    <p><label for="titre">titre:</label>
        <input type='text' name='titre' size='64' maxlength='64'
               required title="tapez un titre bref et explicite, exemple: association de la Brenne"></p>
    <p><label for="description">description:</label>
        <textarea name='description' rows='6' cols='64' required></textarea></p>
    <p><label for="submit">&nbsp;</label>
        <input type='submit' id="submit" value=' Soumettre '></p>
</form>

Chaque champ de saisie est délimité par l'élément P. Cet élément se substitue au TR utilisé dans la structure TABLE.

Avant FORM on définit dans STYLE la manière de présenter LABEL. Tout texte encadré par LABEL sera présenté de manière similaire à celui précédemment affiché entre TD.

Voici le résultat de noter formulaire réécrit sans TABLE:

L'utilisation de LABEL est vivement conseillé pour gérer des formulaires plus accessibles, en particulier pour les non-voyants. L'attribut for="categorie"...

Remarquez que le type utilisé dans INPUT de l'url est url. En HTML5, INPUT accepte de nouveaux attributs de type:

pour ne citer que ces nouveaux attributs.

Avec un navigateur déja ancien - genre IE6 (qui a prononcé le mot "dinosaure?"...) - ces nouveaux types seront ignorés et c'est le type text qui lui sera substitué par défaut.

Par contre, avec les nouveaux navigateurs, en particuliers ceux embarqués sur les téléphones mobiles, la saisie sur un champ typé sera adaptée. Ainsi, la saisie sur un champ de type number présentera automatiquement un clavier de saisie numérique.

Ca ne coûte rien d'exploiter ces nouveaux types dès maintenant. C'est VRAI-MENT sans risque, facile à utiliser et ça donne un peu d'avance à vos pages. Appliquez ce nouveau proverbe: "il vaut mieux avoir 1 an d'avance que 10 ans de retard..."

Tous les articles sur ce thème