Forms Part 1

Data Collection and Processing
• An HTML form is a collection of HTML
elements used to gather data that a user
enters online.
• When a user clicks a form’s submit button to
send the data, the form connects to a form
handler—software that runs on a Web file
server and processes the form.

Creating a Form
• Every form begins with the start <form> tag and
ends with the closing </form> tag, which must
be within the document <body></body> tags.
• The <form> tag has several attributes and
values, including a unique id for the form.
• The action attribute in the <form> tag
identifies the location on the server where you’ll
send the data.
• The method attribute tells the browser how to
submit the form information.

Creating a Form
• A form can be created using the following
code:
<form id = "idvalue"
method = "methodtype"
action = "script_url"></form>
where
– idvalue is the name of the form
– methodtype is either get or post
– script_url is the location on the file server
where the script will be run when the form is
submitted

The get and post Methods
• The default get method sends the data in the
form directly to the server by appending the
data to the URL.
• Using the post method, the browser contacts
the server, and then the data in the form is
sent to the server.
• The post method is more secure than the
get method.

The text Element
• The syntax for creating a text box is:
<input type = "texttype" name = "name"
id = "id" value = "initialvalue"
size = "sizevalue"
maxlength = "maxvalue" />
where
– texttype is text, password, email, or any valid
value
– initialvalue is the default data that appears in
the field
– sizevalue is the width of the box in characters
– maxvalue is the maximum number of characters
that a user can type in the field

The fieldset Element
• To organize form elements using the
fieldset and legend elements, the
following code is used:
<fieldset><legend>legendtext</legend>
form elements
</fieldset>
where
– legendtext is the text for the legend
– form elements is the code for the form
controls grouped together

Form Container
• The form container can be formatted in the
same way the other HTML elements can be
formatted.

Styling the form and
formcontainer Selectors

Determining Input Types
• A field represents a single kind of data.
• A user enters data into each field in a form
based on prompting text—a short description
that suggests what data belongs in a certain
field.
• The label element is used to display prompting
text on the screen.
• The input element is used to determine the
type of data a control collects.

Determining Input Types
• The label element is used together with the input
element.
– The label element uses the for attribute, which associates
the label with the id value in the input element.
<label for = “lastname”>Last Name</label>
<input type = “text” name=“lastname” id=“lastname” />
• The type attribute determines the specific type of form
object that is created:
– text input
– a check box
– an option button
– another form object.

Creating Text Boxes
• The text box control is used to gather
alphanumeric data (letters or numbers) as a
single line of text in a form.
• Use the type attribute with a value of text
to create a single-line text box.
• Another type of single-line text field is a
password field, where input is masked.
• The type attribute value for the password
field is password.

Organizing Form Controls Example

Email Text Box
• Another type of single-line text field is an
email text box, where input is masked.
• The type attribute value for the email text
box is email.
• The default length for the text boxes is 20
characters.
• The size attribute is used to make the email
text box longer.

Setting a Value in a Text Box
• The value attribute is used to set an initial
value of a text box control.
• The value of the value attribute appears in
the text box when the Web page opens.

Setting a Placeholder Value
• Some Web browsers recognize the
placeholder attribute and display its value
in a light grey color.
• The placeholder attribute allows you to
display a sample email address in the input
box.

Creating Option Buttons
• A radio button lets users make only a single
choice from a group of options.
• The input type for an option button is radio.
• Each option button would appear to the right
of each label.
• The option buttons that form one group all
have the same name attribute and value.
• The value attribute is used by the program
on the server when the form is submitted.

Creating Option Buttons
• To create option buttons, the following code is used for
each one:
<input type = "radio" name = "name"
id = "id" value = "field_data" />
where
– name identifies the corresponding field in the database
– id associates the field with the for attribute in the label
element
– field_data is the data that will be sent to the appropriate
field in the database if the button is selected
• To specify that an option button is checked by default,
add the attribute and value checked = "checked"
to the <input> tag code.

Option Buttons Example
<fieldset>
<legend>Personal Information</legend>
<input type = "radio" name = "gender" id = "hungry"
value = "hungry" checked = "checked" />
<label for = "hungry">Hungry</label>
</fieldset>

Creating Check Boxes
• A check box is a form control that allows a
user to choose none, one, or more than one
item from a group.
• The input type for a check box is checkbox.
• A check box is named to correspond to the
field name in the database that receives the
data when a user selects that check box.
• Each check box should have a different name
attribute.

Creating Check Boxes
• The code for creating check boxes is:
<input type = "checkbox" name = "name"
id = "id" value = "data" />
where
– name identifies the check box field with a field in the
database
– id associates the field with the for attribute in the
label element
– data is the data that will be sent to the database if the
check box is selected
• To specify that a check box is checked by default, add
the attribute and value checked = "checked"
to the tag.

Creating a Selection List
• A selection list is a form control that displays all the
items in a list and allows a user to choose from the
list.
• A drop-down list box displays only one item in a
selection list; the user clicks a list arrow to display the
remaining contents of the list and to make a
selection.
• The select element is used to create a selection
list.

• The option element is used to define each
menu choice within a selection list.
• An option element’s value attribute and
its value determine the data that is sent to the
form handler.
• The option text is the text that appears in the
browser as a choice in the selection list.

• The code for creating a selection list is:
<select name = "name" id = "id">
<option value = "value1">optiontext1
</option>
<option value = "value2">optiontext2
</option>
…
</select>
where
– name identifies a field in the database
– id identifies the value for the for attribute in the label element
– optiontext1 and optiontext2 are choices in the option list
– value1 and value2 are the values sent to the program on the server
when the form is submitted

Creating a Selection List – Special
Considerations
• More than one item in the list to appear in the
browser
– use size = "number", where number is the number
of items you want to display in the selection list.
• Allow user to select more than one choice
– use multiple = "multiple" in the <select> tag
code.
• Default choice
– use selected = "selected" in the <option> tag
code.

Creating a Text Area
• A text area is a control that allows users to enter
more than one line of alphanumeric input.
• The textarea element is used to create a multiline
text field.
• A text area allows users to enter comments that
suggest how to improve a particular service or the
form itself, or to provide other feedback.

Creating a Text Area
• The code for creating a text area is:
<textarea name = "name"
id = "id" rows = "height_value"
cols = "width_value"></textarea>
where
– name identifies the field in the database associated
with the text area
– id associates this field with the for attribute value in
the label element
– height_value is the number of rows
– width_value is the character width of the text area
expressed as a number

Submitting Data
• A command button is a form control that lets a user
execute or cancel an action.
• A submit button is used to submit the form data to
the specified action location.
<input type = "submit"
value = "buttontext" />
• A reset button clears or resets the form fields to the
default values so the user can cancel the input in the
form and start over.
<input type = "reset"
value = "buttontext" />

Styling Submit and Reset Buttons

Forms Part 1

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Forms Part 1

Similar to Forms Part 1 (20)

More from kjkleindorfer

More from kjkleindorfer (10)

Recently uploaded

Recently uploaded (20)

Forms Part 1