HTML Forms

HTML Forms

HTML Forms allow those who come to your website to provide input to your webserver. Some reasons to use HTML forms are to allow visitors to partake in polls or sign up as a member. Also orders for merchandise may be placed using HTML forms. Usually the forms are supported by a client side script program which will be sure the form is properly filled out before it is sent to the server. Also the HTML form will invoke a script program which runs on the server. This script program will receive the data and store it on the server, then respond with a message to the user telling them that the HTML form was submitted.

This document is not intended to teach script writing, so it will concentrate on the HTML side of form writing.

HTML Form tags and attributes

• <FORM> - Starts an input form. </FORM> - Ends an input form.
• ACTION="..." - The address of the script to process this form input.
• METHOD="POST" - The method used to send the data from the form to the server. The options are POST and GET. Normally POST is used.
• <BUTTON> - Used to define an HTML FORM submit, reset, or push button. </BUTTON> - Ends the button. Attributes:
• ACCESSKEY - A shortkey used to give the focus to the label.
• DISABLED - A boolean value that makes the button unavailable for use.
• NAME - Sets the name sent to the server as part of the name/value pair when the form is submitted.
• ONBLUR - Sets a script program to run when the element loses focus.
• ONFOCUS - Sets a script program to run when the element gets focus.
• TABINDEX - Sets the tabbing order of the element.
• TYPE - Sets the button type to one of submit, reset, or button.
• VALUE - Sets the value of the button to be sent to the webserver when the form is submitted.
• <FIELDSET> - Allows grouping of HTML form controls. </FIELDSET> ends the fieldset.
• <INPUT> - An input element for an HTML form.
• ACCEPT - The acceptable media types for file upload.
• ACCESSKEY - A shortcut character.
• ALIGN="CENTER" - (Depreciated). Sets the way the text and image will align.
• ALT - Alternate text for the image.
• CHECKED - This indicates that the item is checked is it is a check box or radio button.
• DISABLED - A boolean value that makes the input object unavailable for use.
• MAXLENGTH="7" - The most characters that may be put in a text region.
• NAME="RegForm" - The name of the form which is passed to the script running on the server.
• ONBLUR - Sets a script program to run when the element loses focus.
• ONCHANGE - Script to run when the element is changed.
• ONFOCUS - Sets a script program to run when the element gets focus.
• ONSELECT - Script to run when the element text is selected.
• SIZE="3" - The number of characters an input region should be filled with.
• SRC="bluebutton.gif" - The name of the source file for an image to be displayed on the form.
• TABINDEX - Sets the tabbing order of the element.
• TYPE="TEXT" - The type of input to be done. The options are BUTTON, CHECKBOX, FILE, HIDDEN, IMAGE, RADIO, RESET, SUBMIT, PASSWORD, or TEXT.
• VALUE="1" - Specifies the default value for a text item. It specifies the label of a reset or submit button or the value to be returned when a check box or radio button is selected.
• <LABEL> - Allows an ability to click on a text label to select a form control. <.LABEL> ends a label. Attributes:
• ACCESSKEY - A shortkey used to give the focus to the label.
• FOR - Sets the control associated with the label which ust match the control name.
• ONBLUR - Sets a script program to run when the element loses focus.
• ONFOCUS - Sets a script program to run when the element gets focus.
• <TEXTAREA> - Indicates an element that has multiple text lines. </TEXTAREA> - Ends a Text entry form element. Attributes:
• ACCESSKEY - A shortkey used to give the focus to the element.
• COLS="3" - The number of columns in the text area.
• NAME="AddressLines" - The name of the textarea which is passed to the script running on the server.
• ONBLUR - Sets a script program to run when the element loses focus.
• ONCHANGE - Script to run when the element is changed.
• ONFOCUS - Sets a script program to run when the element gets focus.
• ONSELECT - Script to run when the element text is selected.
• ROWS="3" - The number of rows in the text area.
• TABINDEX - Sets the tabbing order of the element.
• <SELECT> - Creates a list of items that can be selected. </SELECT> ends the select area. Attributes:
• DISABLED - A boolean value that makes the select object unavailable for use.
• MULTIPLE - Allows more than one selection from the scrolling list.
• NAME="state" - The name of the selection item that is passed to the script running on the server.
• ONBLUR - Sets a script program to run when the element loses focus.
• ONCHANGE - Script to run when the element is changed.
• ONFOCUS - Sets a script program to run when the element gets focus.
• ONSELECT - Script to run when the element text is selected.
• SIZE="1" - The number of selections that will be displayed. If a value of SIZE is set, the selection will be a scrolling list. If no SIZE value is set the selection will be a pop-up menu.
• TABINDEX - Sets the tabbing order of the element.
• <OPTGROUP> - Sets up choices inside a SELECT menu. </OPTGROUP> ends the group. Attributes:
• DISABLED - A boolean value that makes the object unavailable for use.
• LABEL - Describes available choices.
• <OPTION> - Used to set items in a list of selectable items. </OPTION> ends the OPTION element. This is found within the SELECT element.
• DISABLED - A boolean value that makes the object unavailable for use.
• LABEL
• SELECTED - This will be the default value if this attribute is included in the OPTION element
• VALUE="10" - This is the value to be submitted to the CGI script program if this option is selected when the user submits the form.

An example HTML Form

<h2 style="text-align: center">Computer Technology Documentation Project</h2>

<h2 style="text-align: center">Member Registration</h2>

<hr style="height: 5" WIDTH=90%>

<div style="text-align: center">

<table>

<td>

<pre>

<form name="RegistrationForm" method="post" action="/cgi-bin/response.pl">

<b>First Name:   </b><input type="text" name="firstname">

<b>Last Name:   </b><input type="text" name="lastname">

<b>Address1:   </b><input type="text" name="addr1">

<b>Address2:   </b><input type="text" name="addr2">

<b>City:   </b><input type="text" name="city">

<b>State:   </b><select name="state" size="1">

        <option value="1">AL

        <option value="2">AK

        <option value="3">AR

        <option value="4">AS

        <option value="5">AZ

        <option value="6">CA

        <option value="7">CO

        <option value="8">CT

        <option value="9">DC

        <option value="10">DE

        <option value="11">FL

        <option value="12">FM

        <option value="13">GA

        <option value="14">GU

        <option value="15">HI

        <option value="16">ID

        <option value="17">IA

        <option value="18">IL

        <option value="19">IN

        <option value="20">KS

        <option value="21">KY

        <option value="22">LA

        <option value="23">MA

        <option value="24">MD

        <option value="25">ME

        <option value="26">MH

        <option value="26">MI

        <option value="28">MN

        <option value="29">MO

        <option value="30">MP

        <option value="31">MS

        <option value="32">MT

        <option value="33">NC

        <option value="34">ND

        <option value="35">NE

        <option value="36">NH

        <option value="37">NJ

        <option value="38">NM

        <option value="39">NV

        <option value="40">NY

        <option value="41">OH

        <option value="42">OK

        <option value="43">OR

        <option value="44">PA

        <option value="45">PR

        <option value="46">PW

        <option value="47">RI

        <option value="48">SC

        <option value="49">SD

        <option value="50">TN

        <option value="51">TX

        <option value="52">UT

        <option value="53">VA

        <option value="54">VI

        <option value="55">VT

        <option value="56">WA

        <option value="57">WI

        <option value="58">WV

        <option value="59">WY

</select>

<b>Zip:          </b><input type="text" name="zip" maxlength="10" size="10">

<b>Area Code/Phone:</b><input type="text" 

name="code" maxlength="3" size="3">

<input type="text" name="phone" maxlength="7" size="7">

<div style="text-align: center">

<input type="button" name="cmdSubmit" value="Submit"> <input type="reset"

 value="clear">

</div>

</pre>

</form>

</td>

</table>

</div>

</body>

How the HTML Form Looks:

Computer Technology Documentation Project

Member Registration

---

First Name : Last Name : Address1 : Address2 : City : State : AL AK AR AS AZ CA CO CT DC DE FL FM GA GU HI ID IA IL IN KS KY LA MA MD ME MH MI MN MO MP MS MT NC ND NE NH NJ NM NV NY OH OK OR PA PR PW RI SC SD TN TX UT VA VI VT WA WI WV WY Zip : Area Code/Phone: