HTML FORMS
• Forms are an important tool for the webmaster to receive
information from the web surfer, such as: their name, email address,
credit card, etc.
• A form will take input from the viewer and depending on your needs;
you may store that data into a file, place an order, gather user
statistics, register the person to your web forum, or maybe subscribe
them to your weekly newsletter.
• Enter the normal <HEAD> and <BODY> tags. Then include the
following <FORM> tag
Structure of a form
• <form method="" action="">
form elements
• </form>
• Method- specifies how form data is sent to the page specified in the
action attribute.
• get- data sent as an URL variable i.e together with the web address and is
not secure. Appends the form-data to the URL in name/value pairs:
URL?name=value&name=value
• post- send the information from the form as a text document and is secure
• Action- specifies the location of the CGI script that will process the
form data
• A CGI enables web servers to execute an external program, typically
to process user requests
• Action=“URL”
• The URL is the address where data is submitted e.g an email address
or a web page e.g ACTION="mailto:
[email protected]"
Form Elements
• Labels- used to display information
• <label for=“ID of input control">text:</label> e.g
• <label for=“Programme">Programme:</label>
Textfields- Single-line Text Entry
• <INPUT TYPE="text" SIZE="40" MAXLENGTH="30"
NAME=“name of control">
• <INPUT> is the tag used to get input
• TYPE="text" sets the object to a single-line text field.
• Size="40" sets the field to show 40 characters.
• MAXLENGTH="30" means that only a total of 30 characters can be typed in this field
• E.g <INPUT TYPE="text" SIZE="40" MAXLENGTH="30"
NAME=“programme">
• Value attribute can be used to specify default text
Text areas- Multi-line Text Entry
• <TEXTAREA></TEXTAREA> tags are used for multi-line text boxes
• <TEXTAREA NAME=“ID" COLS="50" ROWS="5"></TEXTAREA>
• COLS="50" specifies the width, in characters, of the text area.
ROWS="5" specifies the height of the text area in rows.
• E.g
• <TEXTAREA NAME=“address" COLS="50" ROWS="5"></TEXTAREA>
Radio Buttons
• Used to select a single item from various items
• <input type="radio" name=“ID" value="yes/no">Yes
• Value allows the form-processing software to determine which
radio button has been selected
• Eg
• <input type="radio" name=“mode" value="yes">Yes
<input type="radio" name=“mode" value="no">No
Checkboxes
• Allows a user to select multiple options
• <INPUT TYPE="checkbox" NAME=“ID" VALUE="yes">Text<BR>
• Eg
• <INPUT TYPE="checkbox" NAME="music" VALUE="yes">Music<BR>
Drop down list
• Allows a user to select an option from predefined values
• The <select> element defines a drop-down list
• <select id=“id" name=“name">
• <option value="value1">Value1</option>
• <option value=“value2">value2</option>
• <option value=“value3">value3</option>
• <option value=value4">value4 </option>
• </select>
Buttons
• Allows some action to be performed when clicked by a user
• The <button> element defines a clickable button
• <button type="button" onclick="alert(‘Leave page')">Exit</button>
Submit and reset buttons
• The submit button is used to send user input to the URL specified in
the action attribute of the <form> element using the specified
method i.e post/ get
• The reset button is used to clear user input from the form
• <input type=“submit” value= “send”>
• <input type=“submit” value= “send”>
Research on the other Form elements
• <fieldset>
• <legend>
• <datalist>
• <output>
• <optgroup>
• <article>
