FAQ (X)HTMLConsultez toutes les FAQ

Nombre d'auteurs : 23, nombre de questions : 53, dernière mise à jour : 2 septembre 2018 

 
OuvrirSommaireGénéralitésUtilisations des balises et de leurs attributsFormulairesEléments de formulaires

Pour réunir certains champs de formulaires, vous pouvez les inclure dans un élément fieldset.

Si de plus vous voulez indiquer un titre pour ce bloc, vous devez utiliser l'élément legend.

Code XHTML :
Sélectionnez

<form action="ma-page.php" method="post">
  <fieldset>
    <legend>Civilité</legend>
    <label>Nom :</label><input type="text" name="nom" />
    <label>Prénom :</label></input type="text" name="prenom" />
  </fieldset>
  <fieldset>
    <legend>Contact</legend>
    <label>Adresse :</label><textarea name="adresse"></textarea>
    <label>Téléphone :</label><input type="text" name="telephone"/>
  </fieldset>
</form>

Avec le code précédent, vous aurez quatre champs de saisie réparties dans deux cadres distincts. De plus ces cadres auront un titre (généralement placé à cheval sur la bordure du haut).

Ceci peut vous permettre de mieux structurer vos formulaires, ce qui peut être un plus appréciable pour l'utilisateur quand vous proposez des formulaires complexes.

Attention : Si vous décidez de définir un titre à l'aide de l'élément legend, alors cet élément doit obligatoirement être le premier fils de l'élément fieldset.

Créé le 29 février 2008  par MasterOfChakhaL

Pour définir un libellé dans un formulaire, le (X)HTML dispose de l'élément label.
De plus, si vous reliez l'élément label au champ de formulaire, alors un clique sur le libellé donnera le focus au champ.

Pour associer votre libellé au champ de formulaire, il y a deux possibilités :

  • Soit vous incluez directement le champ dans votre libellé ;
  • Soit vous renseignez l'attibut for de l'élément label avec l'id du champ correspondant.
Code XHTML :
Sélectionnez

<!-- en incluant le champ dans le libellé -->
<label>Nom :<input type="text" name="nom" /></label>
 
<!-- en renseignant l'attribut for -->
<label for="id-nom">Nom</label>
<input type="text" name="nom" id="id-nom" />

Si vous associez votre libellé à une case à cocher ou à un bouton radio, alors cliquer sur le libellé aura pour effet de selectionner la case ou le bouton.

Utilisez cet élément vous permet de rendre votre formulaire plus accessible.
Ainsi, si un utilisateur consulte votre site grâce à un lecteur d'écran, ce dernier sera en mesure d'indiquer que tel libellé correspond à tel champ, même si pour une raison ou une autre ces deux informations sont éloignées dans votre code source.

Créé le 29 février 2008  par Yoshio

Si vous avez besoin de réunir certaines options d'une liste déroulante, vous pouvez utiliser l'élément optgroup.

Utiliser cet élément vous autorise à regrouper les options en suivant une certaine logique, ce qui est particulièrement appréciable lorsque vous présentez une liste avec un nombre important d'options.

Vous pouvez donner un nom à ce groupe en définissant l'attribut label.

Code XHTML :
Sélectionnez

            <label for="form_country">Pays : </label>
            <select id="form_country" name="country">
                <optgroup label="Amérique">
                    <option value="ca">Canada</option>
                    <option value="us">États-Unis</option>
                </optgroup>
                <optgroup label="Europe">
                    <option value="be">Belgique</option>
                    <option value="fr">France</option>
                </optgroup>
            </select>

Attention : Les noms de groupes qui apparaissent dans la liste ne sont pas selectionnables et ne peuvent pas être transmis lorsque le formulaire est soumis.

Créé le 29 février 2008  par Yoshio

La balise <form> n'est pas autorisée dans <form>. Elle n'est acceptée que dans

  • del
  • fieldset
  • iframe
  • ins
  • noframes
  • noscript
  • object
  • td
  • th
Mis à jour le 29 février 2008  par Giminik

Lien : Connaître la hiérarchie autorisées de tous les éléments XHTML ainsi que leurs attributs

Il y a deux manières de le faire :

  • disabled : le champ input sera grisé dans le navigateur, et n'est pas transmis lors de la soumission du formulaire.
 
Sélectionnez

<input type="text" name="toto1" value="toto1" disabled="disabled" />
        
  • readonly : le champ paraîtra comme champ normal, mais la valeur ne sera pas modifiable, et sera transmis lors de la soumission du formulaire.
 
Sélectionnez

<input type="text" name="toto2" value="toto2" readonly="readonly" />
        
Créé le 23 janvier 2007  par Maxoo

Il faut rajouter dans la balise la propriété checked.

Par exemple :

 
Sélectionnez

<form>
  <input type="radio" name="a" checked>
  <input type="radio" name="b">
</form>
        

Avec ce code, le bouton a sera coché par défaut au chargement de la page.

Note : En XHTML, il faut utiliser checked="checked"

Créé le 27 juillet 2006  par Jérôme

Il faut utiliser l'attribut selected dans la balise <option> que l'on souhaite sélectionner.

 
Sélectionnez

<select name="monselect">
  <option value="1">un</option>
  <option value="2">deux</option>
  <option value="3" selected="selected">trois</option>
  <option value="4">quatre</option>
</select>
        
Mis à jour le 29 février 2008  par Giminik

Il faut ajouter l'attribut disabled au bouton radio ou à la case à cocher.

Exemple :

Pour un bouton radio
Sélectionnez

<input name="mon_bouton_radio" type="radio" disabled="disabled" />
Pour une case à cocher
Sélectionnez

<input name="ma_checkbox" type="checkbox" disabled="disabled" />
Créé le 29 février 2008  par Linaa

L'élement textarea permet de saisir du texte sur plusieurs lignes. Le contenu de cette zone doit être compris entre les balises ouvrantes et fermantes textarea.

 
Sélectionnez

<textarea name="zone_de_texte" cols="60" rows="10">Le contenu du champ</textarea>
        
Mis à jour le 29 février 2008  par Linaa

Lien : Les formulaires et PHP5 : Le champ textarea, par Guillaume Rossolini

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez.com Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.