Form Tags

Fieldset and legend tags

fieldset: grouping form fields.

legend: specify a title for each fieldset.

<form action="#" method="POST">  
    <fieldset>  
        <legend>Contact Info</legend>  
        [...]  
     </fieldset>  
</form>  

Form field markup and the label and input tags

For form fields, we have three main tags in HTML: input, select and textarea.

<div>  
     <label>Name</label>  
    <input type="text" name="name" id="name">  
</div>  


#Input type radio (and input type checkbox)
   <div>
   　　<label>Gender</label>
   　　<label>
   　　　　<input type="radio" name="gender" value="m">M</input>
   　　</label>
   　　<label>
   　　　　<input type="radio" name="gender" value="f">F</input>
　　　　</label>
   </div>
 
# Input type file 
　　<div>   
　　　　<label for="file">CV</label> 
　　　　<input type="file" name="file" id="file"></input>    
　　</div>

<div>  
    <label for="state">State</label>  
    <select name="state" id="state">  
        <option value="">-- Choose --</option>  
        <option value="">State 1</option>
        <option value="">State 2</option>
    </select>
</div>

<div>  
    <label for="message">Message</label>  
     <textarea name="message" id="message" cols="30" rows="10"></textarea>  
</div> 

Creating buttons 

 

<button type="submit">Send</button> 

 

 

Other attribute:

placeholder: If you want a field to have a brief explanation of what the user has to type in it, you can use a `placeholder`

autofoocus: If you want a field to be focused first when the user loads the page, use the boolean attribute `autofocus`

required: you can determine the required fields in the form