HTML 22 💻 select, option, optgroup, legend,fieldset, output elements
<form action=”/submit_form” method=”post”> <legend>Personal Information</legend> <fieldset> <label for=”name”>Name:</label> <input type=”text” id=”name” name=”name”> <br> <label for=”email”>Email:</label> <input type=”email” id=”email” name=”email”> <br> <label for=”phone”>Phone:</label> <input type=”tel” id=”phone” name=”phone”> </fieldset> <legend>Fruits and Vegetables</legend> <fieldset> <select name=”fruits” id=”fruits” size=”2″ autofocus> <optgroup label=”Fruits”> <option value=”fruit1″>Apple</option> <option value=”fruit2″ selected>Banana</option> </optgroup> <optgroup label=”Vegetables”> <option value=”veggie1″ disabled>Carrot</option> <option value=”veggie2″>Broccoli</option> </optgroup> </select> </fieldset> <output id=”result”></output> <button type=”submit”>Submit</button> </form>
It is usually used after the form controls that is related to
select element creates a drop-down list
The user can select one option from the list
name attribute references the element data after the form is submitted
id attribute is used to associate it with a label
it can also be used to get the element from JavaScript
size attributes specifies the number of the visible option
autofocus attributes get automatically focus
other attributes: disabled, form, name, required
the list items are specified by the option elements
option elements are placed within the select element
value attribute specifies the value of the option element
the inner text of the option element will be shown
selected attribute pre-selects this option
disabled attribute disables the option
label attribute specifies a shorter label for the option
optgroup element groups options in a select list
label attribute specifies the name of the group
legend element adds a caption/title to a section of a form
It is usually used above a fieldset element
fieldset element groups related form controls.
It is usually used with a legend element to add a title
It can contain various form controls
output element displays the result of an operation/calculation on form controls