Form , HTML Form , Form Select |Students Empire

form select

The select element creates lists of options for the user to select.

select has local attributes: name, disabled, form, size, multiple, autofocus, required . It can contents option and optgroup elements.

The form, autofocus and required attributes are new in HTML5

The name, disabled, form, autofocus, and required attributes work in the same way with the input elements.

The size attribute specifies how many choices you want to show to the user.

The multiple attribute allows the user to select more than one value.

			        <!DOCTYPE HTML>
			    <html>
			    <body>
			    <form method="post" action="">
			    <p>
			    <label for="fave"> word:
			    <select id="fave"name="fave">
			    <option value="A" selected label="A">A</option>
			    <option value="B" label="B">B</option>
			    <option value="C" label="C">C</option>
			    </select>
			    </label>
			    </p>
			    <input type="submit" value="Submit" />
			    </form>
			    </body>
			    </html>

You can use the size attribute on the select element to show more than one option to the user, and the multiple attribute to allow the user to select more than one option.

			        <!DOCTYPE HTML>
			    <html>
			    <body>
			    <form method="post" action="">
			    <p>
			    <label for="fave" style="vertical-align: top"> Favorite word: <select id="fave" name="fave" size="5" multiple>
			    <option value="a" selected label="html">html</option>
			    <option value="o" label="Oracle">Oracle</option>
			    <option value="c" label="C">C</option>
			    <option value="p" label="Pascal">Pascal</option>
			    </select>
			    </label>
			    </p>
			    <input type="submit" value="Submit" />
			    </form>
			    </body>
			    </html>

select structure

You can add some structure to a select element by using the optgroup element.

It has local attributes:label, disabled and contains option elements.

You use the optgroup element to group option elements together.

The label attribute lets you create a title for the grouped options.

The disabled attribute makes the option elements not selectable.

			        <!DOCTYPE HTML>
			    <html>
			    <body>
			    <form method="post" action="">
			    <p>
			    <label for="fave" style="vertical-align: top"> Favorite Fruit: <select id="fave" name="fave">
			    <optgroup label="Top Choices">
			    <option value="apples" label="Apples">Apples</option>
			    <option value="oranges" label="Oranges">Oranges</option>
			    </optgroup>
			    <optgroup label="Others">
			    <option value="cherries" label="Cherries">Cherries</option>
			    <option value="pears" label="Pears">Pears</option>
			    </optgroup>
			    </select>
			    </label>
			    </p>
			    <input type="submit" value="Submit" />
			    </form>
			    </body>
			    </html>

The optgroup labels are purely for structure; the user cannot select these as values.

			        <!DOCTYPE HTML>
			    <html>
			    <body>
			    <form action="" method="get" name="frmInfo"> 
			    Please select the product you are interested in:<br> <select
			    name="selInformation">
			    <option disabled="disabled" value="">-- Hardware --</option>
			    <option value="Desktop">Desktop computers</option>
			    <option value="Laptop">Laptop computers</option>
			    <option disabled="disabled" value="">-- Software --</option>
			    <option value="OfficeSoftware">Office software</option>
			    <option value="Games">Games</option>
			    <option disabled="disabled" value="">-- Peripherals --</option>
			    <option value="Monitors">Monitors</option>
			    <option value="InputDevices">Input Devices</option>
			    <option value="Storage">Storage</option>
			    </select> <br>
			    <br>
			    <input type="submit" value="Submit">
			    </form>
			    </body>
			    </html>