HTML Selection Menu Controls

HTML Selection Menu Controls
Nikhil
Published on 2021-07-02 05:20:14

HTML Selection Menu Controls where in this learn about different types of selection control

 

HTML Select Menu


The <select> element generates a drop-down menu from which the user can choose an option.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Atutorialhub selection</title>
</head>

<body>
    <select name="">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
    </select>
</body>

</html>

 

Changing the Size


You can change the size of the selection menu with the size attribute. A size of 0 or 1 displays the standard dropdown style menu. A size greater than 1 will convert the drop-down into a box displaying that many lines, with one option per line and a scrollbar in order to scroll through the available options.

<select name="size="4""></select>

Multi-option Selection Menus

By default, users can only select a single option. Adding the multiple attributes allows users to select multiple options at once and submit all selected options with the form. Using the multiple attributes automatically converts the drop-down menu into a box as if it had a size defined. The default size when this occurs is determined by the specific browser you are using, and it is not possible to change it back to a drop-down style menu while allowing

multiple selections.

<select name="multiple"></select>

When using the multiple attributes, there is a difference between using 0 and 1 for the size, whereas no difference exists when not using the attribute. Using 0 will cause the browser to behave in whatever default manner it is programmed to do. Using 1 will explicitly set the size of the resulting box to only one row high.

 

Options selections in select


The options inside a selection menu are what the user will be selecting. The normal syntax for an option is as follows:

<option>Some Option</option>

However, it's important to note that the text inside the <option> element itself is not always used, and essentially becomes the default value for attributes that are not specified. The attributes which control the actual appearance and function of the option are value and label.

The label represents the text which will be displayed in the drop-down menu (what you're looking at and will click on to select it). The value represents the text which will be sent along with the form submission. If either of these values is omitted, it uses the text inside the element as the value instead. So the example we gave above could be "expanded" to this:

<option label="Some Option" value="Some Option">

Note the omission of the inside text and end tag, which is not required to actually construct an option inside the menu. If they were included, the inside text would be ignored because both attributes are already specified and the text is not needed. However, you probably won't see a lot of people writing them this way. The most common way it's written is with a value that will be sent to the server, along with the inside text which eventually becomes the label attribute, like so:

<option value="option1">Some Option</option>

 

Selecting an option by default


You can also specify a certain option to be selected in the menu by default by attaching the selected attribute to it. By default, if no option is specified as selected in the menu, the first option in the menu will be selected when rendered. If more than one option has the selected attribute attached, then the last option present in the menu
with the attribute will be the one selected by default.

<option value="option1" selected>Some option</option>

If you're using the attribute in a multi-option selection menu, then all the options with the attribute will be selected by default, and none will be selected if no options have the attribute.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Atutorialhub selection</title>
</head>

<body>
    <select multiple>
        <option value="option1" selected>Some option</option>
        <option value="option2" selected>Some option</option>
    </select>
</body>

</html>

 

Option Groups in Selection Menu Controls


You can neatly group your options within a selection menu in order to provide a more structured layout in a long list of options by using the <optgroup> element. The syntax is very basic, by simply using the element with a label attribute to identify the title for the group, and containing zero or more options that should be within that group.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Atutorialhub selection</title>
</head>

<body>
    <select name="">
        <option value="milk">Milk</option>
        <optgroup label="Fruits">
            <option value="banana">Bananas</option>
            <option value="strawberry">Strawberries</option>
        </optgroup>
        <optgroup label="Vegetables" disabled>
            <option value="carrot">Carrots</option>
            <option value="zucchini">Zucchini</option>
        </optgroup>
    </select>
</body>

</html>

 

When using option groups, not all options need to be contained within a group. As well, disabling an option group will disable all options within the group, and it is not possible to manually re-enable a single option within a disabled group.

 

Datalist in selection control


The <datalist> tag specifies a list of pre-defined options for an <input> element. It provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of options as they write.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Atutorialhub selection</title>
</head>

<body>
    <input list="Languages"><datalist id="Languages">
        <option value="PHP">
        <option value="Perl">
        <option value="Python">
        <option value="Ruby">
        <option value="C+">
    </datalist>
</body>

</html>

 

Browser Support

Browser Version
Chrome 20.0
Edge 10.0
Mozilla 4.0
Opera 9.0
Safari Supported

Embed

Parameters Details
src Address of the resource
type Type of embedded resource
width Horizontal dimension
height Vertical dimension

 

Embed Basic usage


The embed tag is new in HTML5. This element provides an integration point for an external (typically non-HTML) application or interactive content.

<embed src="myflash.swf">

 

Defining the MIME type in Embed


The MIME type must be defined using the type attribute.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Atutorialhub selection</title>
</head>
<body>
    <embed type="video/mp4" src="video.mp4" width="640" height="480">
</body>
</html>

 

ATutorialHub Related Guide

HTML Tutorials Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website