3 IMPORTANT FORM TAGS IN HTML
In HTML forms are widely used, and a well designed form is necessary for a good website. In this article, you will learn 3 important tags that are most important in forms designing in HTML.
FORM DESIGNING IN HTML IS VERY SIMPLE.THERE ARE 3 HTML TAGS THAT ARE VERY IMPORTANT IN FORM DESIGNING.
1.)LABELS: each form field have its own label.
FOR Example:
<html>
</body>
<form>
<label for=”key”>key</label>
<input name=“key” id=”key”>
</form>
</body>
</html>
the output of the above code is:
Labels have the bonus of browsers rendering the labels themselves click able, putting the focus on the particular form field.
Both name and Id attributes are typically required.
2 LEGEND AND FIELDSET:-by legand tag you can group the fields in a manner,say(name-first,middle,last) or address(street,area,city,state etc).you can set a caption with the legand tag.
FOR EXAMPLE:-
<html>
<head>
<title>LEGEND AND FIELDSET </title>
</head>
<body>
<form>
<form action="abc.cgi" >
<fieldset>
<legend>YOUR NAME</legend>
<p>First NAME <input name="FIRSTName"></p>
<p>MIDDLE NAME <input name="MIDDLENAME"></p>
<p>Last NAME <input name="lastNAME"></p>
</fieldset>
<fieldset>
<legend>ADDRESS</legend>
<p>STREET<textarea name="STREET"></textarea></p>
<p>AREA <textarea name="AREA"></textarea></p>
<p>CITY <textarea name="CITY"></textarea></p>
<p>PIN CODE <input name="PINCODE"></p>
</fieldset>
</form>
</body>
</html>
the output of above code is:
most of the browsers represent field sets with a border surrounding them.
3.)OPTION GROUP:-the optgroup tag groups the option in a particular select box with a heading.but it requires a label attribute by which it can display a non selectable heading that group a number of option in drop down list in browser.
FOR EXAMPLE:-
<html>
<head>
<title>option group</title>
</head>
<body>
<form>
<select name="FOOD">
<optgroup label="DRINK">
<option value="TEA">TEA</option>
<option value="BEAR">BEAR</option>
<option value="COFFEE">COFFEE</option>
</optgroup>
<optgroup label="PIE">
<option value="SQURE">SQURE</option>
<option value="RECTANGLE">RECTANGLE</option>
<option value="CIRCLE">CIRCLE</option>
</optgroup>
<optgroup label="HOT">
<option value="BURGER">BURGER</option>
<option value="HOT DOG">HOT DOG</option>
<option value="usa">BUN</option>
</optgroup>
</select>
</form>
</body>
</html>
AND SUBSCRIBE US FOR LATEST POSTS
In HTML forms are widely used, and a well designed form is necessary for a good website. In this article, you will learn 3 important tags that are most important in forms designing in HTML.
FORM DESIGNING IN HTML IS VERY SIMPLE.THERE ARE 3 HTML TAGS THAT ARE VERY IMPORTANT IN FORM DESIGNING.
1.)LABELS: each form field have its own label.
FOR Example:
<html>
</body>
<form>
<label for=”key”>key</label>
<input name=“key” id=”key”>
</form>
</body>
</html>
the output of the above code is:
Labels have the bonus of browsers rendering the labels themselves click able, putting the focus on the particular form field.
Both name and Id attributes are typically required.
2 LEGEND AND FIELDSET:-by legand tag you can group the fields in a manner,say(name-first,middle,last) or address(street,area,city,state etc).you can set a caption with the legand tag.
FOR EXAMPLE:-
<html>
<head>
<title>LEGEND AND FIELDSET </title>
</head>
<body>
<form>
<form action="abc.cgi" >
<fieldset>
<legend>YOUR NAME</legend>
<p>First NAME <input name="FIRSTName"></p>
<p>MIDDLE NAME <input name="MIDDLENAME"></p>
<p>Last NAME <input name="lastNAME"></p>
</fieldset>
<fieldset>
<legend>ADDRESS</legend>
<p>STREET<textarea name="STREET"></textarea></p>
<p>AREA <textarea name="AREA"></textarea></p>
<p>CITY <textarea name="CITY"></textarea></p>
<p>PIN CODE <input name="PINCODE"></p>
</fieldset>
</form>
</body>
</html>
the output of above code is:
most of the browsers represent field sets with a border surrounding them.
3.)OPTION GROUP:-the optgroup tag groups the option in a particular select box with a heading.but it requires a label attribute by which it can display a non selectable heading that group a number of option in drop down list in browser.
FOR EXAMPLE:-
<html>
<head>
<title>option group</title>
</head>
<body>
<form>
<select name="FOOD">
<optgroup label="DRINK">
<option value="TEA">TEA</option>
<option value="BEAR">BEAR</option>
<option value="COFFEE">COFFEE</option>
</optgroup>
<optgroup label="PIE">
<option value="SQURE">SQURE</option>
<option value="RECTANGLE">RECTANGLE</option>
<option value="CIRCLE">CIRCLE</option>
</optgroup>
<optgroup label="HOT">
<option value="BURGER">BURGER</option>
<option value="HOT DOG">HOT DOG</option>
<option value="usa">BUN</option>
</optgroup>
</select>
</form>
</body>
</html>
the output of the above code is:-
There are many other tags that can be used in designing of forms in html. We will post the other tags in our next post. If you have any confusion regarding these tags, then please post your comments below the postAND SUBSCRIBE US FOR LATEST POSTS
0 comments:
Post a Comment