CREATE A DROPDOWN LIST IN HTML FORM

             DROP-DOWN LIST

DROP-DOWN LIST
<SELECT>

The <Select> tag is a container tag. It creates the drop-down lists on the form.It has the following attributes:

  • multiple:Is used to allow the user to select more than one value from the drop-down list by using the Ctrl key.
  • name:Is used to specify a name of the selection list that will be used at a time of submitting the form.
  • size:Is used to specify the number of visible items in the selection or drop-down list.The default value is 1.If the value of the attribute is greater than 1, then a form field will be a list.
  • autofocus: Is used to ensure that the focus is on the drop-down list when the page loads.
  • form:Is used to specify the name of one or more forms to which the <SELECT> tag belongs..
the following code is used to create <SELECT> tag
<SELECT name="5_STAR Hotels" size=1 multiple></SELECT>

Defining the <OPTION>tag.

It is always used within the <SELECT> tag and cannot be used as a standalone tag. It is used to create a list of option in the drop-down list and has the following attributes:

  • selected:Is used to indicate that particular option comes pre-selected when the page loads in the browser.
  • value:Is used to indicate the value of option to be sent on the form submission when that option is selected by the user.
  • disabled:Is used to indicate that option should be be disabled when the page loads.


Consider the following code to create the drop-down list in the OrderFoodOnline form:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-gw-c+2p-30-2w" data-ad-client="ca-pub-3031641605037774" data-ad-slot="6682527308"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
.....</TR>
<TR>
<TD>SELECT RESTAURANT</TD>
<TD><SELECT>
<OPTION value="opt1">SELECT YOUR RESTAURANT</OPTION>
<OPTION value="opt2">TAJ</OPTION>
<OPTION value="opt3">ASHOKA </OPTION>
</SELECT></TD>
</TR>
<TR>
<TD>DRINK:</TD>
<TD><SELECT>
<OPTION value="opt4">SELECT YOUR DRINK</OPTION>
<OPTION value="opt5">PEPSI</OPTION>
<OPTION value="opt6">COKE </OPTION>
</SELECT></TD>
</TR>
<TR>
<TD>SOUP:</TD>
<TD><SELECT>
<OPTION value="opt7">SELECT YOUR SOUP</OPTION>
<OPTION value="opt8">TOMATO SOUP</OPTION>
<OPTION value="opt9">MIXED SOUP </OPTION>
</SELECT></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>


RESULT:






About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment