This page is an example of using a simple form in HTML.

Each section has the HTML code as it would appear in a browser, followed by the actual HTML code.

<form> Tag:
Each form starts with a "form" tag that indicates the recipient of the data in the "action" parameter: <form action="http://www.fincher.org/SimpleFormAction.pl" method="get" > If you use the "GET" method, the results of your form will appear in the URL box in the top of the browser and name value pairs, separated by "&". The POST method passes information back by another method which does not show on the URL. GET is good for debugging, but POST should probably be used in production. More details here.

Text Entry:
First Name: Last Name: The HTML code to generate the above: First Name: <input type="text" name="FirstName" value="" size="15" maxlength="15" /> Last Name: <input type="text" name="LastName" value="Smith" size="20" maxlength="20" />

Text Area:

The HTML code to generate the above: <textarea cols="40" name="comments" rows="6">please enter your comments... </textarea>

Password Entry:
Password: The HTML code to generate the above: Password:<input type="password" value="" name="mypassword" maxlength="10" size="10" />

Radio Buttons:
Mr. Ms. decline The HTML code to generate the above: <input type="radio" name="title" value="mr" />Mr.<br /> <input type="radio" name="title" value="ms" />Ms.<br /> <input type="radio" name="title" value="decline" checked="checked" />decline<br />

Radio Buttons with "fieldset" and "legend":

The "fieldset" element groups like minded elements together. "legend" gives a heading to the group. Select a Hero Agamemnon Achilles Hector The HTML code to generate the above: <form action="" name="buttonsGalore" method="get"> <fieldset style="margin: 1em; text-align: center;"> <legend>Select a Hero</legend> <input type="radio" name="hero" value="Agamemnon" onclick="displayHero(this)" /> Agamemnon <input type="radio" name="hero" value="Achilles" onclick="displayHero(this)" /> Achilles <input type="radio" name="hero" value="Hector" onclick="displayHero(this)" /> Hector <div style="height: 1em;" /> </fieldset> </form>

Radio Buttons with "fieldset" and "legend" and "label":

Using the "label" attribute tells the browser that the text inside it is part of the radio button. The user can select on the text and change the state of the radio button without having to click directly on the circle - which is a good thing. Select a Hero Agamemnon Achilles Hector The HTML code to generate the above: <form action="" name="buttonsGalore" method="get"> <fieldset style="margin: 1em; text-align: center;"> <legend>Select a Hero</legend> <input type="radio" name="hero" id="Agamemnon" /> <label for="Agamemnon">Agamemnon</label>

<input type="radio" name="hero" id="Achilles" /> <label for="Achilles">Achilles</label> <input type="radio" name="hero" id="Hector" /> <label for="Hector">Hector</label> <div style="height: 1em;" /> </fieldset> </form>

Check Boxes:
Mail me more info E-Mail me more info The HTML code to generate the above: <input type="checkbox" name="checkbox1" />Mail me more info<br /> <input type="checkbox" name="checkbox2" checked="checked" />E-Mail me more info<br />

Select List:

The HTML code to generate the above: <select name="countries"> <option>Argentina</option> <option>Albania</option> <option>Afganistain</option> <option selected="selected">Aruba</option> </select>

Select list with "optgroup"

"optgroup" labels related items in a dropdown list

The HTML code to generate the above: <select name="menuitems"> <optgroup id="opt1" label="food"> <option>Hamburgers</option> <option>Hotdogs</option> </optgroup> <optgroup id="opt2" label="drinks"> <option>Coke</option>

<option>Pepsi</option> <option>Water</option> </optgroup> </select>

Select List Multiple:

Hold the CTL key down to add additional selections The HTML code to generate the above: <select name="computerbrands" multiple="multiple"> <option value="DELL" selected="selected">DELL</option> <option value="IBM">IBM</option> <option value="HP">HP</option> <option value="Compaq">Compaq</option> <option value="Sony">Sony</option> </select>

Scrolling List:

The HTML code to generate the above: <select name="countries2" size="4"> <option value="0" selected="selected">Argentina</option> <option value="1">Albania</option> <option value="2">Afganistain</option> <option value="3">Aruba</option> <option value="4">Arabia</option> </select>

Hidden Fields:
(Trust me, the hidden fields are right here) The HTML code to generate the above: <input type="hidden" name="computerType" value="DELL" /> <input type="hidden" name="computerOS" value="WIN2K" />

Image Buttons:

The HTML code to generate the above: <input type="image" align="left" name="_Next" src="submitbutton.gif" />

Action Buttons:
cancel submit

The HTML code to generate the above: (Note that the "value" attribute is the one displayed to the user and the "name" is sent to the "action" program <input type="reset" name="submitbutton" value="cancel" /> <input type="submit" name="submitbutton" value="submit" />

Action Buttons Alternative:

< > >> ||

The HTML code to generate the above: (Note that the "value" attribute is the one displayed to the user and the "name" is sent to the "action" program <input type="submit" name="_Previous" value="&nbsp;&lt;&nbsp;" alt="Previous" title="Previous"/> <input type="submit" name="_Next" value=">" /> <input type="submit" name="_Finish" value=">>" /> <input type="submit" name="_Pause" value="||" /> Style:

Custom Search

Home CoinStacking KnowledgeBase MayanPeriodic Misc Quotes Genealogy Utilities History Blogs FamilyNews SarahsSite SiteMap

Search

SIMPLE EXAMPLE OF USING HTML FORM ELEMENTS

+ CSS AJAX Rss Pervasive HTML HTMLForms General ColdFusion Apache PHP WhatsNew2005 WhatsNew2004 PeerToPeer