Home >Web Front-end >CSS Tutorial >select (HTML element)

select (HTML element)

Joseph Gordon-LevittOriginal: 2025-02-26 10:10:08822browse

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

How to set a default option?

Use the selected attribute within the <option> element.

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

How to group related options?

Use the <optgroup> element to group options with a common label.

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

How to allow multiple selections?

Add the multiple attribute to the <select> element.

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

How to disable an option?

Use the disabled attribute within the <option> element.

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

How to use in a form?

Enclose the <select> element within <form> tags. The selected value will be submitted with the form.

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

How to style with CSS?

Style the <select> element using standard CSS techniques. Note that browser and OS differences may affect rendering.

<code>select {
  background-color: yellow;
  color: black;
  border: 1px solid black;
}
</code>

Can I use without a form?

Yes, but the selected value won't be submitted.

How to handle change events with JavaScript?

Use the onchange event attribute or add an event listener.

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

Can I use with other form elements?

Yes, it can be combined with other form elements in a complex form.

The above is the detailed content of select (HTML element). For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html select using Attribute Event default Other

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：moz-border-radius (CSS property)Next article：moz-border-radius (CSS property)

See more