HTML Practice Exercise #7
Since Lesson 1, you have been expanding your knowledge of HTML codes through a series of HTML practice exercises.
These exercises, used in conjunction with the assignments, will culminate in a complete web site.
In this exercise, you will add a form to the web site that you are working on for Assignment #6.
Forms
Forms are a method of creating interactive pages where the reader can answer questions and send their response to
you. Forms are a very complex topic, and cannot be fully covered in one brief period, so this will just be a very basic
introduction.
Two Components of Using Forms
1. The HTML form (the Web page user interface) and
The server-side processing (Server-side processing works with the form data and sends e-mail, writes to a text
file, updates a database, or performs some other type of processing on the server.) We are not using server-side
processing, we are using the email browser default.
Important information:
To create a form which uses the mailto action:
<form action="mailto:[email protected]" method="post" enctype="text/plain">
The action parameter specifies where the results from the form will be sent, and the method parameter specifies
how that information will be sent there. At the end of the form, you must close the form tag.
HTML Using Forms
· <form> tag
o Contains the form elements on a web page
o Container tag
· <input /> tag
o Configures a variety of form elements including text boxes, radio buttons, check boxes, and buttons
o Stand alone tag
· <textarea> tag
o Configures a scrolling text box
o Container tag
· <select> tag
o Configures a select box (drop down list)
o Container tag
· <option> tag
o Configures an option in the select box
o Container tag
At the start of any form area, you must declare that you are making a form, and give some information to the browser
about what to do with it. This is done in the form tag, through the two required parameters, action and method.
HTML <form> element
· The form tag attributes:
o action
§ Specifies the server-side program or script that will process your form data
· method
o get – default value, form data passed in URL
o post – more secure, form data passed in HTTP Entity Body
· name
o Identifies the form
· id
o Identifies the form
Inside the Form
Inside the form, you can specify any kind of HTML codes you wish, but the only ones which will be important for the form
are the input types and the submit tags. The name parameter are the headings that appear on the form and help to
organize the data therein.
<input /> Text box
· Accepts text information
· Attributes:
o type=“text”
o name
o id
o size
o maxlength
o value
figure5_12
<input /> Password box
· Accepts text information that needs to be hidden as it is entered
· Attributes:
o type=“password”
o name
o id
o size
o maxlength
o value
<input /> Check box
· Allows the user to select one or more of a group of predetermined items
· Attributes:
o type=“checkbox”
o name
o id
o checked
o value
<input /> Radio Button
· Allows the user to select exactly one from a group of predetermined items
· Each radio button in a group is given the same name and a unique value
· Attributes:
o type=“radio”
o name
o id
o checked
o value
<textarea> Scrolling Text Box
· Configures a scrolling text box
· Attributes:
o name
o id
o cols
o rows
figure5_13
<select> Select List
· Configures a select list (along with <option> tags)
· Also known as: Select Box, Drop-Down List, Drop-Down Box, and Option Box.
· Allows the user to select one or more items from a list of predetermined choices.
· Attributes:
o name
o id
o size
o multiple
figure5_16
<option> Options in a Select List
· Configures the options in a Select List
· Attributes:
o value
o selected
Submit buttons - are used to send the information off to wherever it is going. Likewise, the reset button clears any
entered data.
<input /> Submit Button
· Submits the form information
· When clicked:
o Triggers the action method on the <form> tag
o Sends the form data (the name=value pair for each form element) to the web server.
· Attributes:
o type=“submit”
o name
o id
o value
<input /> Reset Button
· Resets the form fields to their initial values
· Attributes:
o type=“reset”
o name
o id
o value
Next Step
If you can meet the objectives stated at the beginning of Lesson 7, you are ready to proceed to the next lesson. Keep in
mind the weekly schedule recommended in the course syllabus.
Assignment
Assignment #5 is due this week.
Please visit the Assignments portion of the course for details on Assignment #6.
