Sélectionnez la valeur par défaut en HTML

Sushant Poudel 19 février 2023
  1. Utilisez selected="selected" pour sélectionner la valeur par défaut d’un élément HTML <select>
  2. Utilisation de l’attribut <option selected> pour sélectionner la valeur par défaut d’un élément HTML <select>
Sélectionnez la valeur par défaut en HTML

Cet article présente deux méthodes pour sélectionner la valeur par défaut d’un élément HTML <select>.

Utilisez selected="selected" pour sélectionner la valeur par défaut d’un élément HTML <select>

Nous pouvons utiliser l’option selected="selected" pour sélectionner la valeur par défaut dans un code HTML. Nous écrivons l’attribut selected dans la balise <option>. Nous pouvons définir la valeur de l’attribut selected sur selected pour sélectionner l’option spécifique par défaut lorsque la page Web est chargée pour la première fois. C’est ce qu’on appelle l’attribut booléen en HTML. L’option présélectionnée s’affichera en premier dans la liste déroulante. Cet attribut ne peut être utilisé que sur l’élément <option>. Il prend en charge les navigateurs Web tels que Google Chrome, Internet Explorer, Firefox, Opera, etc.

Par exemple, à l’intérieur du corps HTML, créez une balise <select> suivie de cinq options à l’intérieur. Écrivez les nombres de 1-5 pour l’attribut value pour chaque option. Écrivez le texte de One à Five entre la balise <option> pour chaque option. Ensuite, écrivez l’attribut selected avec la valeur selected juste après avoir ouvert la balise <option> dans cette valeur particulière que vous souhaitez sélectionner comme valeur par défaut (option 3 dans l’exemple ci-dessous). Enfin, fermez la balise <select>.

L’exemple ci-dessous utilise la méthode select=selected pour sélectionner la valeur par défaut dans une liste déroulante. Nous avons créé une liste déroulante qui nous permet de sélectionner des valeurs de One à Five. Lorsque la page se recharge, l’option Three se charge par défaut car nous avons utilisé l’attribut selected pour spécifier l’élément par défaut.

Exemple de code :

<body>
<select>
    <option  value="1">One</option>
    <option  value="2">Two</option>
    <option  selected="selected"  value="3">Three</option>
    <option  value="4">Four</option>
    <option  value="5">Five</option>
</select>
</body>

Utilisation de l’attribut <option selected> pour sélectionner la valeur par défaut d’un élément HTML <select>

Nous pouvons utiliser l’option <option selected> pour sélectionner une valeur par défaut en HTML. Ce processus est également assez similaire au premier. C’est aussi un attribut booléen. L’élément <select> est principalement utilisé pour collecter les entrées de l’utilisateur. La balise <option>, que nous écrivons à l’intérieur de l’élément <select>, définit les éléments disponibles contenus dans la liste déroulante. Nous pouvons écrire l’option selected dans la balise <option> particulière pour spécifier l’option comme option sélectionnée par défaut.

Par exemple, à l’intérieur du corps HTML, créez une balise <select> suivie de la balise <option> comme dans la méthode ci-dessus. Dans la ligne suivante, spécifiez les valeurs de 1-5 à la balise d’option et fermez la balise d’option. Répétez ce processus cinq fois. Ensuite, écrivez <selected> juste après la deuxième balise <option> pour la sélectionner comme valeur par défaut. Enfin, fermez la balise <select>.

L’exemple ci-dessous utilise l’option <option selected> pour sélectionner la valeur par défaut. Lors du chargement de la page, nous pouvons voir que l’option 2 est chargée par défaut dans la liste déroulante car nous avons utilisé l’option <option selected> dans le cas du deuxième élément.

Exemple de code :

<body>
    <select>
        <option> 1 </option>
        <option  selected> 2 </option>
        <option> 3 </option>
        <option> 4 </option>
        <option> 5 </option>
    </select>
</body>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn