Example HTML Form Code:
<form action="/html/tags/html_form_tag_action.cfm" method="get"> <table> <tr> <td>First name:</td> <td> <input type="text" name="first_name" value="" maxlength="100" /> </td> </tr> <tr> <td>Lunch:</td> <td> <input type="radio" name="lunch" value="pasta" /> Pasta <input type="radio" name="lunch" value="rissotto" /> Rissotto </td> </tr> <tr><td>Drinks:</td> <td> <input type="checkbox" name="drinks" value="beer" /> Beer <input type="checkbox" name="drinks" value="wine" /> Wine </td> </tr> <tr><td>Preferred City:</td> <td> <select> <option value ="sydney">Sydney</option> <option value ="melbourne">Melbourne</option> <option value ="cromwell">Cromwell</option> <option value ="queenstown">Queenstown</option> </select> </td> </tr> <tr> <td>Comments:</td> <td> <textarea rows="3" cols="20" name="comments"></textarea> </td> </tr> <tr><td> </td> <td> <input type="submit" value="Submit" /> </td> </tr> </table>
This results in:
Templates
The form tags contain other tags nested within them. These other tags define the actual form elements that appear within the form.You can use the following template as a basis for your HTML form codes. Simply fill in the blanks or remove uneeded attributes.
Since HTML form code is made up of several tags, each tag is presented separately here.
1. The <form> Tag
For an explanation of all the attributes, see the HTML form tag specifications.
<form action="" method="" enctype="" accept-charset="" accept="" name="" class="" id="" dir="" lang="" target="" onSubmit="" onReset="" onclick="" ondbclick="" onmousedown="" onmouseup="" onmouseover="" onmousemove="" onmouseout="" onkeypress="" onkeydown="" onkeyup="" > (the individual form element tags go here - see below) </form>
2. The <input> Tag
This tag defines input fields within the form.For an explanation of all the attributes, see the HTML input tag specifications.
<input type="" name="" value="" size="" maxlength="" checked="" src="" class="" id="" dir="" lang="" title="" style="" align="" alt="" readonly="" disabled="" tabindex="" accesskey="" ismap="" usemap="" onfocus="" onblur="" onselect="" onchange="" onclick="" ondbclick="" onmousedown="" onmouseup="" onmouseover="" onmousemove="" onmouseout="" onkeypress="" onkeydown="" onkeyup="" />
3. The <select> Tag
This tag defines a dropdown menu within the form. This works in conjunction with the <option> tag.For an explanation of all the attributes, see the HTML select tag specifications.
<select name="" size="" multiple="" class="" id="" dir="" lang="" style="" title="" tabindex="" disabled="" onclick="" ondbclick="" onmousedown="" onmouseup="" onmouseover="" onmousemove="" onmouseout="" onkeypress="" onkeydown="" onkeyup="" > (option tags go here for each item you need in your list) <select/>
4. The <option> Tag
This tag defines an item within a dropdown menu. This works in conjunction with the <select> tag.
For an explanation of all the attributes, see the HTML option tag specifications.
<option selected="" value="" label="" class="" id="" dir="" lang="" style="" title="" tabindex="" disabled="" onclick="" ondbclick="" onmousedown="" onmouseup="" onmouseover="" onmousemove="" onmouseout="" onkeypress="" onkeydown="" onkeyup="" > (list item goes here) </option>
5. The <textarea> Tag
This tag defines a text area within the form.For an explanation of all the attributes, see the HTML textarea tag specifications.
<textarea name="" rows="" cols="" class="" id="" dir="" lang="" title="" style="" readonly="" disabled="" tabindex="" onfocus="" onblur="" onselect="" onchange="" onclick="" ondbclick="" onmousedown="" onmouseup="" onmouseover="" onmousemove="" onmouseout="" onkeypress="" onkeydown="" onkeyup="" > (this is where the user can type stuff)
