HTML Form Elements



HTML Form Elements Examples

Multiple CheckBox Selection


An Example of Multiple CheckBox Selection for a Form.


<form xmlns="http://www.w3.org/1999/xhtml" style="background-color: #eeeeee">
<b>Google Products:</b><br>
I use Google Maps:
<input name="Google Products" type="checkbox" value="Google Maps" />
<br />
I use Google Docs:
<input name="Google Products" type="checkbox" value="Google Docs" />
<br />
I use Google Calendar:
<input name="Google Products" type="checkbox" value="Google Calendar" />
<br />
I use Picasa Web:
<input name="Google Products" type="checkbox" value="Picasa Web" />
<br><br><br><br></form>

Text field:

 
<form xmlns="http://www.w3.org/1999/xhtml" style="background-color: #eeeeee">
Text Field:<br />
<input name="text field" type="text" /><br />
<br><br></form>


Text Area:


<form xmlns="http://www.w3.org/1999/xhtml" style="background-color: #eeeeee">
Text Area:
<BR>
<TEXTAREA NAME="text area" ROWS="10">
</TEXTAREA>
<BR>
</form>

Radio Buttons (for a Single Selection):

<form xmlns="http://www.w3.org/1999/xhtml" style="background-color: #eeeeee">
<input name="options" type="radio" value="Yes" /> Yes
<br />
<input name="options" type="radio" value="No" /> No
</form>


Check Buttons (for Multiple Selection):

<form xmlns="http://www.w3.org/1999/xhtml" style="background-color: #eeeeee">
<b>Google Products:</b><br>
I use Google Maps:
<input name="Google Products" type="checkbox" value="Google Maps" />
<br />
I use Google Docs:
<input name="Google Products" type="checkbox" value="Google Docs" />
<br />
I use Google Calendar:
<input name="Google Products" type="checkbox" value="Google Calendar" />
<br />
I use Picasa Web:
<input name="Google Products" type="checkbox" value="Picasa Web" />
<br><br><br><br></form>

Drop-Down Box:


<form xmlns="http://www.w3.org/1999/xhtml" action="" style="background-color: #eeeeee">
<select name="Google Products:">
<option value="Google Maps">Google Maps</option>
<option value="Google Docs">Google Docs</option>
<option selected="selected" value="Google Calendar">Google Calendar</option>
<option value="Picasa Web">Picasa Web</option>
</select>
<br><br><br><br></form>



Button:

<form xmlns="http://www.w3.org/1999/xhtml" action="" style="background-color: #eeeeee">
<input type="button" value="Hello world!" />
</form>

Inline Javascript:


Inline Javascript is allowed in Google Sites for Form elements, The <form> tag will be automatically converted to a "Embed Gadget".

Alert Box
onClick
onSubmit
etc...


Select Box & Inline Javascript


<form xmlns="http://www.w3.org/1999/xhtml" action="../">
<select onchange="window.open(this.options[this.selectedIndex].value,'_top')" height="50px" ><option value=""></option>  
    <option value="">Choose a Link</option>
    <option value="http://maps.google.com/">Google Maps</option>
    <option value="http://www.google.com/">Google Search</option>
    <option value="http://calendar.google.com/">Google Calendar</option>
    <option value="http://translate.google.com/">Google Translate</option>
    </select>
</form>

Form elements can be used to create semi native Android/Iphone apps, Where the Android/Iphone OS recognizes the HTML formating and displays as a native application.

Live Html Editor 

Printing Options





JavaScript API libraries available for Google Sites
* Google Sites jQuery and jQuery UI >> 
Update: jQuery AJAX Form Example