HTML: Préaffecter un Formulaire HTML avec des Données

Dans ce didacticiel, je voudrais vous montrer comment pré-assign les différentes zones de saisie et les champs d'option HTML avec des données ou les valeurs par défaut.

Dans ce qui suit, vous pouvez trouver des exemples pour les éléments d'entrée HTML suivants - chacun avec et sans pré-affectation:

• Champ de Saisie de Texte sur une seule Ligne: Input Text
• Zone de Texte Multiligne: Textarea
• Commutateur d'Option: Checkbox et Radiobutton
• Liste de Sélection: Select

Si les valeurs par défaut sont définies, le visiteur de votre page peut trouver le préréglage directement après le chargement du site Web.

Input Text - Champ de Saisie de Texte sur une seule Ligne

Un champ de saisie de texte sur une seule ligne peut être défini avec <input type="text"> en HTML.

<input name="it" type="text">
<input name="it" type="text" value="">

Le préréglage de texte est défini à l'aide de l'attribut "value". Si vous omettez complètement cet attribut ou si vous écrivez value="", c'est une chaîne vide, le champ de saisie de texte reste vide.

<input name="it" type="text" value="Text in the Input Field.">

En définissant une chaîne / string entre les guillemets derrière "value", ce texte est utilisé comme valeur par défaut pour le champ de saisie.

Textarea - Zone de Texte Multiligne

Un Textarea est un grand champ multiligne pour la saisie de texte.

<textarea name="ta"></textarea> 

Une zone de texte vide est définie par <textarea></textarea>.

<textarea name="ta">
This text appears in the text field.
</textarea> 

Vous pouvez définir un préréglage en écrivant simplement le texte par défaut entre la balise d'ouverture <textarea> et la balise de fermeture </textarea>.

Checkbox et Radiobutton - Commutateur d'Option

Les cases à cocher et les boutons radio sont des commutateurs d'option, auxquels l'utilisateur peut créer un crochet. La différence entre une case à cocher et un bouton radio est que les cases à cocher peuvent être activées et désactivées indépendamment les unes des autres alors qu'il ne peut y avoir qu'un seul bouton radio d'un groupe de boutons radio à la fois.

<input type="checkbox" name="cb1" value="cb1">
<input type="checkbox" name="cb2" value="cb2">

<input type="radio" name="rb1" value="0">
<input type="radio" name="rb1" value="1">

<input type="radio" name="rb2" value="0">
<input type="radio" name="rb2" value="1">

Ici, nous définissons deux cases à cocher sélectionnables indépendamment l'une de l'autre ainsi que quatre boutons radio regroupés en deux groupes différents. L'affectation du groupe est déterminée par le même nom. Dans cet exemple, aucun hook n'est défini.

<input type="checkbox" name="cb1" value="cb1" checked="checked">
<input type="checkbox" name="cb2" value="cb2">

<input type="radio" name="rb1" value="0" checked="checked">
<input type="radio" name="rb1" value="1">

<input type="radio" name="rb2" value="0">
<input type="radio" name="rb2" value="1" checked="checked">

Afin de mettre une coche par défaut, nous ajoutons l'attribut "checked" avec la valeur "checked" - qui est checked="checked". Dans l'exemple, nous avons accroché et activé la première case à cocher ainsi qu'un bouton radio de chaque groupe.

Select - Liste de Sélection

Nous pouvons définir une liste de sélection par <select> .. </select>. À l'intérieur de ça, nous pouvons écrire les éléments sélectionnables avec <option> .. </option>. L'attribut «size» définit le nombre d'options visibles en même temps. Si vous utilisez 1 pour cela, le résultat est une liste déroulante (drop-down list).

<select name="sel" size="1">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Si nous utilisons la liste de cet exemple, automatiquement, le premier élément (le «A» ici) est présélectionné.

<select name="sel" size="1">
  <option>A</option>
  <option selected="selected">B</option>
  <option>C</option>
</select>

Afin de présélectionner un autre élément de la liste, nous pouvons utiliser l'attribut HTML "selected" comme dans l'exemple suivant. Cela ferait une présélection de l'élément «B».