Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

Lesson 7 Notes

This document outlines HTML Practice Exercise #7, which focuses on adding forms to a website as part of a series of HTML exercises. It introduces the basic components of forms, including the <form>, <input>, <textarea>, <select>, and <option> tags, along with their attributes and functions. The exercise emphasizes the importance of the action and method parameters in form creation and provides guidance on submitting and resetting form data.

Uploaded by

cameron.king1202
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Lesson 7 Notes

This document outlines HTML Practice Exercise #7, which focuses on adding forms to a website as part of a series of HTML exercises. It introduces the basic components of forms, including the <form>, <input>, <textarea>, <select>, and <option> tags, along with their attributes and functions. The exercise emphasizes the importance of the action and method parameters in form creation and provides guidance on submitting and resetting form data.

Uploaded by

cameron.king1202
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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:userid@uwindsor.ca" 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.

You might also like