Building Better Web Forms

The Basic Input Elements:

This guide is intended for folks who already have a working knowledge of HTML and the basic form elements it provides. Here are the basic tags for reference:

 <input  name="name" value="Your Name"/> 
 <input type="password" name="name"/> 
 <input type="hidden" name="hidden" value="ID"/>

 <textarea name="body">Your Words!</textarea>
 <input type="checkbox" name="item[]" value="item 1"/>
 <input type="checkbox" name="item[]" value="item 2" CHECKED/>
 <input type="radio" name="item" value="item 1"/>
 <input type="radio" name="item" value="item 2" CHECKED/>

<select name="item" value="item 1"> 
<option value="">Choose from the Below Options:</option>
<option value="1">Option 1</option>
<option value="2" SELECTED>Option 2</option>
<option value="3">Option 3</option>
</select>

<select name="item" size="3" MULTIPLE> 
<option value="">Choose from the Below Options:</option>
<option value="1">Option 1</option>
<option value="2" SELECTED> Option 2</option>
<option value="3">Option 3</option>
</select>
 
<button onclick="alert('something happens');">Button</button>
 
<input type="button" value="Input Button" 
onclick="alert('something happens');"/>
 
<input type="submit" value="Submit Button"/> 

<input type="reset" value="Reset Button"/>