Mark Biwojno Mark Biwojno - 5 months ago 42
HTML Question

How to make an HTML dropdown option not clickable

<form action="submit.php" method="post">
<select name="input">
<option value="Athletics:">Athletics:</option>
<option value="Running">Running</option>
<option value="Paragliding">Paragliding</option>
<option value="Swimming">Swimming</option>
</select>
<input type="Submit" value="Next">
</form>


I'm trying to make "Athletics:" NOT click-able, so users have to choose their specific sport. Help appreciated, thanks.

Answer

If you plan on adding more options to this dropdown that aren't "Athlectics", I think what you may be looking for here is actually <optgroup>:

<select>
  <option value=""></option>
  <optgroup label="Athlectics">
   <option value="Running">Running</option>
   <option value="Paragliding">Paragliding</option>
   <option value="Swimming">Swimming</option>
  </optgroup>
</select>

It looks like this:

enter image description here

This is useful for categorizing groups of options in a dropdown. "Athlectics" will not be a selectable option.

Otherwise I think you should just use "Athlectics" as the label for this field and remove it from the options:

<label>Athlectics: <select>...</select></label>

You should always use a label anyways for accessibility purposes, and it generally improves your UI.

If you really just want to disable an option, use the disabled attribute:

<option value="Athletics:" disabled>Athletics:</option>

Reference:

Comments