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

posted @ 2016-04-15 22:45  kakaguo  阅读(160)  评论(0编辑  收藏  举报