22 Voix

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

Tutoriel de Stefan Trost | 13/05/2021 à 01:09

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:

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».

RépondrePositifNégatif

Sur l’Auteur

AvatarVous pouvez trouver des logiciels de Stefan Trost sur fr.sttmedia.com. Avez-vous besoin d'un logiciel personnalisé selon vos propres besoins? Écrivez-nous: fr.sttmedia.com/contact
Voir Profil

 

Sujets Connexes

Avis Important

Veuillez noter: Les contributions publiées sur askingbox.com sont des contributions d’utilisateurs et ne doivent pas remplacer les conseils d’un professionnel. Ils ne sont pas vérifiés par des indépendants et ne reflètent pas nécessairement l’opinion de askingbox.com. Apprendre encore plus.

Participer

Posez votre propre question ou écrivez votre propre article sur askingbox.com. Voici comment.