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