HTML <select> Tag
It is used to create a drop-down list. The <option> tags inside the <select> element define the available options in the list. It is a paired tag.
Syntax:
<select>.......................</select>
Attributes
Attribute Value Description
disabled disabled Specifies that a drop-down list should be disabled
multiple multiple Specifies that multiple options can be selected at once
name name Defines a name for the drop-down list
size number Defines the number of visible options in a drop-down list
HTML <optgroup> Tag
It is used to group related options in a drop-down list. If you have a long list of options, groups of related options are easier to handle for a user. It is a paired tag.
Syntax:
<optgroup>.................................</optgroup>
Attributes
Attribute Value Description
disabled disabled Specifies that an option-group should be disabled
label text Specifies a label for an option-group
HTML <option> Tag
It defines an option in a select list. It is a paired tag.
Syntax
<option>....................................</option>
Attributes
Attribute Value Description
disabled disabled Specifies that an option should be disabled
label text Specifies a shorter label for an option
selected selected Specifies that an option should be pre-selected when the page loads
value text Specifies the value to be sent to a server
Example:
<html>
<body>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
</select>
</body>
</html>
Example:
<html>
<body>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Select Your Hobby">
<option value="cricket">Cricket</option>
<option value="WatchTV">Watch Tv </option>
<option value="PlayGame">Play Game</option>
<option value="Reading">Reading</option>
<option value="Int">Internet Surfing</option>
</optgroup>
</select>
</form >
</body>
</html>
List Box:
HTML <select> multiple Attribute
The multiple attribute is a boolean attribute. It specifies that multiple options can be selected at once.
Syntax
<select multiple>
Example:
<html>
<body>
<form>
<select name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="submit" value="NextPage">
</form>
</body>
</html>
HTML <select> size Attribute
The size attribute specifies the number of visible options in a drop-down list.
Syntax
<select size="number">
Attribute Values
Value Description
number The number of visible options in the drop-down list. Default value is 1. If the multiple attribute is present, the default value is 4
Example:
<html>
<body>
<select size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
Radio Button Control
Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio.
Syntax:
<input type='radio'/>
Example5
<form>
<label>What is your favourites Web browser..!</label>
<input type="radio" name="browser" /> Internet Explorer
<input type="radio" name="browser" /> Google Chrome
<input type="radio" name="browser" /> Mozilla Firefox
</form>
Checkbox Control
Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox..
Syntax:
<input type='checkbox'/>
Example:
<form>
<label>Select your hobby...!!</label>
<input type="checkbox" name="cricket" /> Cricket
<input type="checkbox" name="watchtv" /> Watch TV
<input type="checkbox" name="playgame" /> Play Game
<input type="checkbox" name="inserf" /> Internet Browsing
</form>
Button Controls
There are various ways in HTML to create clickable buttons.
Type Description
submit This creates a button that automatically submits a form.
reset This creates a button that automatically resets form controls to their initial values.
button This creates a button that is used to trigger a client-side script when the user clicks that button.
Example:
<!doctype html>
<body>
<form action="https://www.nareshit.com" name='myform' id="form1" >
<label>User Name:</label><br/>
<input type='text' name='uname' required="requried" /><br/>
<label>Password:</label><br/>
<input type='password' name='pwd' required="requried" /><br/>
<input type='submit' name='sn' value="SignIn"/>
<input type='reset' name='can' value="Cancel"/>
<button onclick="alert('UserClickedMe')"> Click_Me </button>
</form>
</body>
Example:
<!doctype html>
<body>
<form action="nit1.html" name="myform" id="form1">
<label>User Name: </label> <br/>
<input type="text" name="uname"> <br/>
<label>Password: </label> <br/>
<input type="password" name="pwd"> <br/>
<input type="submit" name="sn">
<input type="reset" name="clr">
<button onclick="alert('Hello')">Click</button>
<input type='image' src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/html5.png" width="10px" height="10px"/>
</form>
</body>
<fieldset>
It defines a group of form elements as being logically related. The browser draws a box around the set of fields to indicate that they are related. It is a paired tag.
Syntax:
<fieldset>...................</fieldset>
Example:
<fieldset>
favorite area: <input name="favegame"><br>
<input type=checkbox name="cricket"> like cricket<br>
<input type=checkbox name="chess"> like chess<br>
<input type=checkbox name="java"> like software<br>
</fieldset><p>
<legend>
It is used with <fieldset> to give a title to each set of fields. It is a paired tag.
Syntax:
<legend>.............</legend>
Attributes Parameters
align right, center, left
Example:
<FIELDSET>
<LEGEND>Personal Stuff</LEGEND><P>
name: <INPUT NAME="realname"><BR>
email: <INPUT NAME="email">
</FIELDSET>
Forms and Table:
<html>
<head>
<title>
Working with table
</title>
</head>
<table bgcolor="lightblue" height="10%" width="250">
<tr><td>User Name:</td><td><Input placeholder="Name"></td></tr>
<tr><td>Password:</td><td><Input type="password" placeholder="password"></td></tr
<tr><td> </td><td><Input type="button" value=Login ></td></tr>
</table>