Maison >interface Web >tutoriel CSS >SELECT (élément HTML)
SELECT (élément HTML)
- Joseph Gordon-Levittoriginal
- 2025-02-26 10:10:08822parcourir
<code class="language-html"><!DOCTYPE html> <title>HTML Select Element</title> <h1>HTML Select Element</h1> <p>The select form control provides a dropdown menu for user selection. It allows single or multiple selections depending on the `multiple` attribute. Styling with CSS can be challenging due to operating system rendering variations.</p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174053581124774.jpg" class="lazy" alt="select (HTML element) "> <h2>Example</h2> <p>A basic select element:</p> <select id="favoritefood"> <option value="cheese">Cheese</option> <option value="egg">Egg</option> <option value="cabbage">Cabbage</option> </select> <h2>Use Cases</h2> <p>Use the select element to present users with a list of choices, conserving space compared to radio buttons.</p> <h2>Frequently Asked Questions</h2> <h3>How to create a dropdown list?</h3> <p>Combine the <code><select></code> element with <code><option></code> elements. <code><select></code> defines the list, and each <code><option></code> represents a selectable item. The <code>value</code> attribute specifies the submitted value.</p> <pre class="brush:php;toolbar:false"><code><select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </code>
comment définir une option par défaut?
Utilisez l'attribut selected dans l'élément <option>.
<code><select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes" selected>Mercedes</option> <option value="audi">Audi</option> </select> </code>
comment regrouper les options liées?
Utilisez l'élément <optgroup> pour regrouper les options avec une étiquette commune.
<code><select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</code>
comment autoriser plusieurs sélections?
Ajouter l'attribut multiple à l'élément <select>.
<code><select multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </code>
comment désactiver une option?
Utilisez l'attribut disabled dans l'élément <option>.
<code><select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes" disabled>Mercedes</option> <option value="audi">Audi</option> </select> </code>
comment utiliser sous une forme?
Entrez l'élément <select> dans les balises <form>. La valeur sélectionnée sera soumise avec le formulaire.
<code><form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</code>
comment se coiffer avec CSS?
Style l'élément <select> en utilisant des techniques CSS standard. Notez que les différences de navigateur et de SG peuvent affecter le rendu.
<code>select {
background-color: yellow;
color: black;
border: 1px solid black;
}
</code>
Puis-je utiliser sans formulaire?
Oui, mais la valeur sélectionnée ne sera pas soumise.
comment gérer les événements de changement avec JavaScript?
Utilisez l'attribut onchange événement ou ajoutez un écouteur d'événement.
<code><select onchange="myFunction(this.value)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
<script>
function myFunction(value) {
console.log("Selected value: " + value);
}
</script>
</code>
Puis-je utiliser avec d'autres éléments de forme?
Oui, il peut être combiné avec d'autres éléments de forme sous une forme complexe.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!