Scribd
Upload
26 views13 pages

HTML Forms

Uploaded by

nigelmafa879
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views13 pages

HTML Forms

Uploaded by

nigelmafa879
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

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:support@msu.ac.zw"
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>

You might also like