Sunday, 28 August 2016

HTML datalist using Select Element, Option, OptGroup Element

Select Element
It allows to select single item from number of options. No default option is provided by select element that will be transmitted to server if no option is selected.
The options are written within the opening and the closing tags of the select element by using the option element.

Attributes of Select Element

  • disabled- implies that the dropdown list is disabled.
  • name- refers to the name of the dropdown list.
  • refers to the number of visible options shown in the dropdown list.
  • autofocus- allows the button control to get the focus as soon as the page loads.
  • form- refers to the id of the form.
  • multiple- specifies that the multiple items can be selected from the dropdown list
Option Element
It is used to define the options written within the select element, Each option is separately written within a separate set of option element. Option element does not contain any other element within it.

Attributes of Option Element
  • label- refers to the heading of the several groups.
  • disabled- disabled the option element.
  • selected- option that is to be displayed as default.
  • value- refers to the value that is to be sent to the server.
example

<!Doctype Html>
<html>
<body>
<h1>Select and Option element</h1>
<form>
Select any one game from the drop down
<select>
<option value="cricket">cricket</option>
<option value="football">football</option>
<option value="hockey">hockey</option>
<option value="tennis">tennis</option>
</select>
</form>
</body>
</html>



OptGroup Element

It is used to create nested and cascading drop-down lists. In both type of lists the related items are grouped under specific headings.

Attributes of OptGroup

  • label- refers to the heading of the several groups.
  • disabled- disabled the optgroup element.
example
<!Doctype Html>
<html>
<body>
<h1>Select, Option, Optgroup element</h1>
<form>
select one item from a list of Sports, fruits, vegetables:
<select>
<optgroup label="sports">
<option value="cricket">cricket</option>
<option value="football">football</option>
<option value="hockey">hockey</option>
<option value="tennis">tennis</option>
</optgroup>
<optgroup label="fruits">
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="mango">mango</option>
</optgroup>
<optgroup label="vegetables">
<option value="cabbage">cabbage</option>
<option value="tomato">tomato</option>
<option value="potato">potato</option>
</optgroup>
</select>
</form>
</body>
</html>







0 comments:

Post a Comment