Scribd
Upload
5 views

Lesson 8 Week 8

Lesson

Uploaded by

anuoluwa2051
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

Lesson 8 Week 8

Lesson

Uploaded by

anuoluwa2051
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

Lesson 8 Week 8

Designing Forms
Introduction
Today’s lesson is about creating HTML
forms to collect information from people
visiting your Web site. Forms enable you
to gather just about any kind of
information for immediate processing by
a server-side script or for later analysis
using other applications.
Objectives
At the end of this lesson, you should be able to carry out the
followings:
• Discovering how HTML forms interact with server-side
scripts to provide interactivity
• Creating simple forms
• Learning all the types of form controls you can use to
create radio buttons, check boxes, and more
• Using more advanced form controls to enhance your
designs
• Planning forms so that your data matches any server-side
scripts you use
Creating a simple form
The following tag is a form created to accept names and password:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/transitional.dtd”>
<html>
<head>
<title>LOG IN</title>
</head>
<body>
<form action=“http://www.example.com/cgi-bin/entrance.cgi”
method=“post”>
Username: <input type=“text” name=”Username” /> <br>
Password: <input type=“password” name=“password” />
<input type=”submit” value=”Log In” />
</form>
</body>
</html>
Explanations
• The action attribute, which is required,
specifies the URL to the server-side script
(including the filename) that will process
the form when it’s submitted. It’s very
important that the script with the name
you’ve entered is present on your Web
server at the location the URL specifies. In
this example, the full URL for the script
was used, but you can just as easily use a
relative URL if it makes more sense.
Explanations Cont’d
• The two most commonly used attributes of the <form> tag
are action and method. Both of these attributes are
optional. The following example shows how the <form> tag
is typically used: <form action=”someaction” method=”get
or post”>, this two possible values: post or get defines how
form data is submitted to your Web server.
• The post method includes the form data in the body of the
form and sends it to the Web server.
• The get method appends the data to the URL specified in
the action attribute and most often is used in searches.
Explanations Cont’d
• If you leave out the action attribute, the form is submitted
to the current URL. In other words, if the form appears on
the page http://www.example.com/form.html and you
leave off the action attribute, the form will be submitted to
that URL by default.
• Although most forms send their data to scripts, you also
can make the action link to another Web page or a mailto
link. The latter is formed as follows:
• <form action=”mailto:[email protected]”
method=”post”>
• This attaches the form data set to an email, which then is
sent to the email address listed in the action attribute.
Explanations Cont’d
Notice that both form controls are created using
the input element. The type attribute defines
which type of control will be created. In this
case, you have a text control and a password
control. Each type of control has a distinct
appearance, accepts a different type of user
input, and is suitable for different purposes.
Each control is also assigned a name that
distinguishes it and its data from the other form
controls. Finally, a submit button was added so
that the user can send the information she
entered into the form to the database.
Putting your form in a table format
<form action="http://www.example.com/cgi-bin/entrance.cgi" method="post">
<table border="1">
<tr>
<td align="right">Username:</td>
<td><input type="text" name="username" /></td> </tr>
<tr>
<td align="right">Password:</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td align="center">
<input type="submit" value="Log In" margin-top: “20px”/>
</td>
</tr>
</table>
</form>
Creating Text Controls
• Text controls enable you to gather information from
a user in small quantities. This control type creates a
single-line text input field in which users can type
information, such as their name or a search term.
• To create a text input field, create an input element
and choose text as the value for the type attribute.
• <p>Enter your pet’s name: <input type=”text”
name=”petname” /></p>
• You can modify the appearance of text controls by
using the size attribute. Entering a number which
enlarges the width of the text control in characters:
• <input type=”text” name=”petname” size=”15” />
Maximum length of characters
• To limit the number of characters a user can enter, add the
maxlength attribute to the text control.
• Using default value
• <input type=”text” name=”petname” size=”15”
maxlength=”15” value=”Enter Pet Name” />
• In this case, Enter Pet Name appears in the field when the
form is rendered in the Web browser. It remains there until
the user modifies it.
Creating Password Controls
The password and text field types are identical in every
way except that the data entered in a password field is
Indicated password.
<input type=”password” name=”userpassword” size=”8”
maxlength=”8” /></p>
Creating Submit & Reset Buttons
Creating Submit Buttons
• Submit buttons are used to indicate that the
user is finished filling out the form.
• <input type=”submit” value=”Send Form
Data” />
Creating Reset Buttons
• Reset buttons set all the form controls to their
default values.
• <input type=”reset” value=”Clear Form” />
Creating Check Box Controls

• Check boxes are fields that can be set to two states: on and off . To create a check
box, set the input tag’s type attribute to checkbox. The name attribute is also
required, as shown in the following example:

<p>Check to receive SPAM email <input type=”checkbox” name=”spam” /></p>

• To display the check box as checked, include the checked attribute, as follows:
<input type=”checkbox” name=”year” checked=”checked” />

Practical work
• <p>Check all symptoms that you are experiencing:<br /> <input type=”checkbox”
name=”symptoms” value=”nausea” /> Nausea
• <br/><input type=”checkbox” name=”symptoms” value=”lightheadedness” />
Light-headedness<br />
<input type=”checkbox” name=”symptoms” value=”fever” /> Fever<br /> <input
type=”checkbox” name=”symptoms” value=”headache” /> Headache </p>
Creating Radio Buttons
• Radio buttons, which generally appear in groups, are
designed so that when one button in the group is selected,
the other buttons in the group are automatically
unselected. They enable you to provide users with a list of
options from which only one option can be selected
Practical work
• <p>Select a color:
• <br />
• <input type=”radio” name=”color” value=”red” /> Red
• <br />
• <input type=”radio” name=”color” value=”blue” /> Blue
• <br />
• <input type=”radio” name=”color” value=”green” />
Green<br /> </p>
Hidden Form Fields
• Hidden form fields are used when you want to embed data
in a page that shouldn’t be seen or modified by the user.
• <input type=”hidden” name=”id” value=”1402” />

• Hidden form fields are generally used when data identifying


the user needs to be included in a form. For example, let’s
say you’ve created a form that allows a user to edit the
name and address associated with her bank account.
Because the user can change her name and address, the
data she submits can’t be used to look up their account
after she submits the form.
The File Upload Control
• The file control enables a user to upload a file when he submits the form. As
you can see in the following code, the type for the input element is set to
file:
• <p>Please select a file for upload: <input type=”file” name=”fileupload”
/></p>
• If you want to use a file upload field on your form, you have to do a lot of
behind-the- scenes work to get everything working.
• For one thing, the program specified in the action attribute of your form
must be able to accept the file being uploaded.
• Second, you have to use the post method for the form.
• Third, you must set the enctype attribute of the <form> tag to
multipart/form-data.

<form action=”/cgi-bin/upload.cgi” enctype=”multipart/form-data”


method=”post”> <input type=”file” name=”new_file” /> <input
type=”submit” /> </form>

• After you’ve created a form for uploading a file, you need a program that
can process the file submission.
Create Large Text-Entry Fields with
textarea
• The textarea element creates a large text entry field
where people can enter as much information as they
like. To create a textarea, use the <textarea> tag. To set
the size of the field, use the rows and cols attributes.
These attributes specify the height and width of the
text area in characters. A text area with cols set to 5
and rows set to 40 creates a field that’s 5 lines of text
high and 40 characters wide.
•
• <p>Please comment on our customer service.<br />
<textarea name=”question4” rows=”10” cols=”60”>
Enter your answer here </textarea> </p>
Creating disabled and read only
Controls
• Sometimes you might want to display a form control
without enabling your visitors to use the control or enter
new information. To disable a control, add the disabled
attribute to the form control:
• <p>What is the meaning of life?
• <textarea name=”question42” disabled=”disabled”> Enter
your answer here. </textarea> </p>
• When displayed in a Web browser, the control will be
dimmed (a light shade of gray) to indicate that it’s
unavailable.
• To create a read-only control, use the readonly attribute:
• <p>This month: <input type=”text” name=”month”
value=”September” readonly=”readonly” /></p>
Quiz 3
Coming Soon

You might also like