WELCOME TO BHATI TRICKS WRITE FOR US ADVERTISE YOUR BLOG/SITE HERE POST YOUR ARTICLE/TRICK HERE


Thursday, 4 July 2013

3 IMPORTANT FORM TAGS IN HTML


3 IMPORTANT FORM TAGS IN HTML
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:
YOUR NAME
First NAME
MIDDLE NAME
Last NAME
ADDRESS
STREET
AREA
CITY
PIN CODE
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 post
AND SUBSCRIBE US FOR LATEST POSTS

Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter

0 comments:

Post a Comment

 

ABOUT THE AUTHOR

Founder & Author:I ABHISHEK BHATI student of COMPUTER SCIENCE by education a Blogger by profession and compueters and electronics is my passion BHATI TRICKS is not start of blogging ABHISHEK BHATI launched his frist Marketing Site in 2013.
...Read More

GET FREE EMAIL UPDATES

Join us for free and get valuable content delivered right in your inbox.



recent comments

BHATI TRICKS Widget

| BHATI TRICKS © BHATI TRICKS. All Rights Reserved | | Back To Top |