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

Understanding and Using Web Forms

The chapter discusses how to create web forms using HTML elements like <form>, <input>, <select>, and <textarea>. It explains how to structure a form with the <form> tag and how to use different input types like text, checkbox, radio buttons and files. It also covers how to label, group and style forms for better user experience. The objective is to understand how to build interactive forms to collect and process user data on the web server.

Uploaded by

Henry Zegarra Rodriguez
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
65 views

Understanding and Using Web Forms

The chapter discusses how to create web forms using HTML elements like <form>, <input>, <select>, and <textarea>. It explains how to structure a form with the <form> tag and how to use different input types like text, checkbox, radio buttons and files. It also covers how to label, group and style forms for better user experience. The objective is to understand how to build interactive forms to collect and process user data on the web server.

Uploaded by

Henry Zegarra Rodriguez
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 54

Principles of Web Design

6th Edition

Chapter 11 – Web Forms


Objectives
When you complete this chapter, you will be
able to:
• Understand how forms work
• Use the <form> element
• Create input objects
• Style forms with Cascading Style Sheets (CSS)

2
Understanding How Forms Work

3
Understanding How Forms Work
• Forms let you build interactive web pages that
collect information from a user and process it
on the web server
• The HTML form is the interface for the user to
enter data
• The data is processed by applications that
reside on the web server

4
Understanding How Forms Work

• The data-processing software can then work with


the data and send a response back to the user
• The user enters data via an HTML form

5
6
Using the <form> Element

7
Using the <form> element
• The <form> element is the container for creating a
form
• A variety of attributes describe how the form data
will be processed

8
9
Using the <form> element

• The following code shows a typical <form>


element:

<form method="post"
action="https://signup.website.com/register.asp">

10
Using get or post
• The difference between get and post is the
way the data is sent to the server
• method=“get”: this method sends the form
information by including it in the URL
• method=“post”: this method sends the form
information securely to the server within the
message body

11
Using the mailto Action
• Lets you collect data from a form and send it
to any e-mail address

<form action="mailto:joel@joelsklar.com"
method="post" enctype="text/plain">

12
Creating Input Objects

13
Creating Input Objects

• The <input> element defines many of the form


input object types
• The type attribute specifies the type of input
object

14
15
16
Labeling Form Elements
• The <label> element lets you create a caption
for an input element
• Lets you extend the clickable area of a form
element

<p>
<label class="username" >First Name:</label>
<input type="text" name="firstname"
size="35" maxlength="35" />
</p>

17
Labeling Form Elements
• To make the text clickable, you associate the
<label> element with the <input> element by
using the for and id attributes

<p>
<label class="username" for="First Name">
First Name:</label>
<input type="text" name="fi rstname" id="First
Name"
size="35" maxlength="35" />
</p>

18
Creating Text Boxes

• The text box is the most commonly used form


element

<input type="text" name="firstname"


size="20" maxlength="35" value="First
Name">

19
20
Creating Check Boxes

• Check boxes are an on/off toggle that the user can


select

<input type="checkbox" name="species"


value="smbass"> Smallmouth Bass

21
22
Creating Radio Buttons
• Radio buttons are like check boxes, but only one
selection is allowed

<p>Would you like to be on our mailing list?</p>


<p><input type="radio" name="list" value="yes"
id="Yes" />
<label for="Yes">Yes</label>
<input type="radio" name="list" value="no"
id="No" />
<label for="No">No</label>
• </p>

23
24
Creating Submit & Reset Buttons
• The submit and reset buttons let the user choose
whether to send the form data or start over

<input type="submit" value="Submit your


answers">
<input type="reset" value="Clear the
form">

25
26
Creating an Image for the
Submit Button
• You can choose an image file and use it instead of
the default submit button

<input type="image" src="submit.gif"


alt="submit button">

27
28
Letting the User Submit a File

• Users can select a file on their own computer and


send it to the server

<p>Use the browse button to select your


file:</p>
<p><input type="file" size="30“></p>

29
30
Creating a Password Entry Field

• The password input box works like the text input,


but the entered text is hidden by asterisks

<p>Enter your user name and password:</p>


<p>
User Name: <input type="text" size="30" />
Password: <input type="password" size="30" />
</p>

31
32
Creating a Password Entry Field

• The password input box works like the text input,


but the entered text is hidden by asterisks

<p>Enter your user name and password:</p>


<p>
User Name: <input type="text" size="30" />
Password: <input type="password" size="30" />
</p>

33
34
Using the <select> Element
• The <select> element lets you create a list box or
scrollable list of selectable options
<select name="boats">
<option>Canoe</option>
<option>Jon Boat</option>
<option>Kayak</option>
<option>Bass Boat</option>
<option>Family Boat</option>
</select>

35
36
Using the <select> Element
• You can choose to let the user pick multiple values
from the list by adding the multiple attribute

<select name="snacks" multiple size="6">


<option>Potato Chips</option>
<option>Popcorn</option>
<option>Peanuts</option>
<option>Pretzels</option>
<option>Nachos</option>
<option>Pizza</option>
<option>Fries</option>
</select>
37
38
Using the <select> Element
• You group and label sets of list options with the
<optgroup> element and label attribute
<optgroup label="Salty Snacks">
<option>Potato Chips</option>
<option>Popcorn</option>
<option>Peanuts</option>
<option>Pretzels</option>
</optgroup>

39
40
Using the <textarea> Element
• The <textarea> element lets you create a larger
text area for user input
<p><b>Briefly tell us your favorite fish
story:</b><br>
<textarea name="fishstory" rows="5"
cols="30">
Enter your story here...
</textarea>
</p>

41
42
Creating Input Groupings
• You can use the <fieldset> and <legend> elements to
create groupings of different types of input elements

43
Creating Input Groupings
<fieldset>
<legend><b>Select the species you prefer
to fish:</b></legend>
<input type="checkbox" name="species"
value="smbass"> Smallmouth Bass
<input type="checkbox" name="species"
value="lgbass"> Largemouth Bass <br>
<input type="checkbox" name="species"
value="pike"> Pike
</fieldset>

44
45
Styling Forms with CSS

46
47
48
49
50
51
52
53
Summary
• Choose the right form elements based on the
data you want to collect
• A form element has attributes that describe how
the form data is processed
• You need a server application to process your
form data
• The <fieldset> and <legend> elements let you
create more visually appealing forms
• Forms should be formatted to improve their
legibility

54

You might also like