Lec. 6 HTML Forms

by Asst. Lect.
Zahraa
Ayad
Internet Programming
Lecture 6

HTML Forms, Styling Forms
14 November 2023 1
by Asst. Lect. Zahraa
Ayad
Outlines
 HTML Forms  Drop Down List Box (Select
Box)
 Form Controls
 File Upload Box
 How Form Works?
 Submit Button
 Form Structure
 Buttons
 Text Input
 Labeling Form Controls
 Password Input
 Grouping Form Elements
 Text Area
 Form Validation
 Radio Buttons
 Form Examples
 Checkbox
 Styling Forms
14 November 2023 2
Ayad
HTML Forms
 An HTML form is used to collect user input. The user input is most often sent to a server
for processing.
 The best known form on the web is probably the search box that sits right in the middle of
Google's homepage.
 In addition to enabling users to search, forms also allow users to perform other functions
online. You will see forms when registering as a member of a website, when shopping
online, and when signing up for newsletters or mailing lists.
14 November 2023 3
Ayad
HTML Forms (Cont.)

 Form general example:
14 November 2023 4
Ayad
Form Controls
 There are several types of form controls that you can use to collect information
from visitors to your site:
Adding Text
Text input (single-line) Used for a single line of text such as
email addresses and names.
Like a single line text box but it masks the
Password input
characters entered.
For longer areas of text, such as

Text area (multi-line)
messages and comments.
14 November 2023 5
Ayad
Form Controls (Cont.)

Making Choices
Radio buttons For use when a user must select one of a
number of options.
When a user can select and unselect one
Checkboxes
or more options.
When a user must pick one of a number
Drop down Boxes of options from a list.
Uploading Files
Allows users to upload files (e.g. images)
File upload
to a website.
14 November 2023 6
Ayad
Form Controls (Cont.)

Submitting Forms
Submit buttons To submit data from your form to another
web page.
14 November 2023 7
Ayad
How Forms Work?
14 November 2023 8
Ayad
Form Structure
 <form> Element
Form controls live inside a <form> element. This element should always carry the
action attribute and will usually have a method and id attribute too.
 Attributes:
Attribute Name Description

action Its value is the URL for the page on the server that will
receive the information in the form when it is submitted.
method Forms can be sent using one of two methods: get or post.
14 November 2023 9
Ayad
Text Input
 <input> Element
The <input> element is used to create several different form controls. The value of the type attribute
determines what kind of input they will be creating.
 Attributes:

type (Type=“text”) When the type attribute has a value of text, it
creates a single-line text input.
name Specifies the name of an <input> element to identify the form
control
maxlength to limit the number of characters a user may enter into the text
 Example: field.
14 November 2023 10
Ayad
Password Input
 By using the <input> Element
 Attributes:

type (Type=“password” ) When the type attribute has a value of
password it creates a text box that acts just like a single-line text
input, except the characters are blocked out.
name Specifies the name of an <input> element to identify the form
control
 Example:
14 November 2023 11
Ayad
Text Area
 <textarea> Element
• The <textarea> element is used to create a mutli-line text input.
• It should therefore have an opening and a closing tag.
• Any text that appears between the opening <textarea> and closing </textarea>
tags will appear in the text box when the page loads.
 Attributes:
name Specifies the name of an <textarea> element to identify the form
control
 Example:
14 November 2023 12
Ayad
Radio Buttons
 Attributes:
type (type=“radio”) Radio buttons allow users to pick just one of a number of
options.
name Specifies the name of an <input> element to identify the form control
(should be the same for all radio buttons)
value The value attribute indicates the value that is sent to the server for the
selected option.
checked (Boolean attribute) can be used to indicate which value (if any) should be
selected when the page loads.
 Example:
14 November 2023 13
Ayad
Checkbox
 Attributes:
type (type=“checkbox”) Checkboxes allow users to select (and unselect) one or
more options in answer to a question.
name Specifies the name of an <input> element to identify the form control
value The value attribute indicates the value that is sent to the server if this
checkbox is checked
checked (Boolean attribute) The checked attribute indicates that this box should be
checked when the page loads.
 Example:
14 November 2023 14
Ayad
Drop Down List Box (Select Box)

 A drop down list box (also known as a select box) allows users to
select one option from a drop down list.
 <select> Element
 The <select> element is used to create a drop down list box. It contains two
or more <option> elements.
 Attributes:
name Specifies the name of <select> element to identify this form control
size turn a drop down select box into a box that shows more than one option. Its
value should be the number of options you want to show at once.
multiple (Boolean attribute) allow users to select multiple options from this list
 Example:
14 November 2023 15
Ayad
Drop Down List Box (Select Box)

 <option> Element
 The <option> element is used to specify the options that the user can select from.
The words between the opening <option> and closing </option> tags will be shown
to the user in the drop down box.
 Attributes:
Attribute Description
Name
value indicates the value that is sent to the server along with the name of the control if
this option is selected.
selected (Boolean attribute) indicate the option that should be selected when the page
loads.
 Example:
14 November 2023 16
Ayad
File Input Box

 If you want to allow users to upload a file (for example an image, video, mp3, or a
PDF), you will need to use a file input box.
 Attributes:

type (type=“file”) creates a choose button when the user clicks on it, a window
opens
up that allows them to select a file from their computer to be uploaded to
the website.
 Example:
14 November 2023 17
Ayad
Submit button
 Attributes:
type (type=“submit”) creates a button that is used to send a form to the server.
value is used to control the text that appears on a button. (the default value is
submit query)
 Example:
14 November 2023 18
Ayad
Buttons
 We can add buttons to our form using the <button> element
 Attributes:
type (type=“submit”) used to send a form to the server.
(type=“reset”) resets all the controls to their initial values
 Example:
14 November 2023 19
Ayad
Labeling Form Controls

 <label> element
 used to add labels to form controls
 Benefits of using labels:
 Screen reader users (will read out loud the label, when the user is focused on the
element)
 Users who have difficulty clicking on very small regions (such as checkboxes) -
because when a user clicks the text within the <label> element, it toggles the input
(this increases the hit area).
 Attributes:
for Specifies the id of the form element the label should be bound to
 Example:
14 November 2023 20
Ayad
Grouping Form Elements

 <fieldset> Element
 You can group related form controls together inside the <f ieldset> element. This is
particularly helpful for longer forms.
 Most browsers will show the f ieldset with a line around the edge to show how they
are related.
 <legend> Element
 The <legend> element can come directly after the opening <f ie ldset> tag and
contains a caption which helps identify the purpose of that group of form controls.
 Example:
14 November 2023 21
Ayad
Form Validation
 You have probably seen forms on the web that give users messages if the form
control has not been filled in correctly; this is known as form validation.
 Validation helps ensure the user enters information in a form that the server will be
able to understand when the form is submitted (valid information).
 Validating the contents of the form helps:

 Reduce the amount of work the server has to do
 Enables users to see if there are problems with the form faster than if validation
were performed on the server.
 Prevents security attacks and data corruption.
• HTML5 comes with built-in validation. The most common validation attributes are
required, minlength, maxlength, min, and max.
14 November 2023 22
Ayad
Form Validation (Cont.)

 Examples:
 For text input
 For numbers
14 November 2023 23
Ayad
Form Validation (Cont.)

 Examples:
 For Email input
 For Date input
14 November 2023 24
Ayad
Form Examples
 Example 1:
14 November 2023 25
Ayad
Form Examples
 Output:
14 November 2023 26
Ayad
Form Examples
 Example 2:
14 November 2023 27
Ayad
Form Examples
 Output :
14 November 2023 28
Ayad
Styling Forms
 We can change the style of form controls by using the following CSS properties:
CSS Property Description

font-size sets the size of the text entered by the user.
color sets the text color
background-color sets the background color of the input.
border adds a border around the edge of the input box
border-radius can be used to create rounded corners
background-image adds a background image to the box
:focus pseudo class used to change the background color of the text input when it is
being used
:hover pseudo class applies the same styles when the user hovers over them.
14 November 2023 29
Ayad
Styling Forms (Cont.)

 Example 1: Styling Text Inputs
14 November 2023 30
Ayad

 Output:
14 November 2023 31
Ayad

 Example 2: Styling Buttons
14 November 2023 32
Ayad

 Output:
14 November 2023 33
Ayad

 Example 3: Styling fieldset and Legend
14 November 2023 34
Ayad

 Output:
14 November 2023 35
Ayad
End of Lecture 6
14 November 2023 36

Lec. 6 HTML Forms

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lec. 6 HTML Forms

Uploaded by

Copyright:

Available Formats

by Asst. Lect.

HTML Forms (Cont.)

For longer areas of text, such as

Form Controls (Cont.)

Form Controls (Cont.)

How Forms Work?

Attribute Name Description

Attribute Name Description

Attribute Name Description

Drop Down List Box (Select Box)

Drop Down List Box (Select Box)

File Input Box

Attribute Name Description

Labeling Form Controls

Grouping Form Elements

 Validating the contents of the form helps:

Form Validation (Cont.)

Form Validation (Cont.)

 For Date input

CSS Property Description

Styling Forms (Cont.)

Styling Forms (Cont.)

Styling Forms (Cont.)

Styling Forms (Cont.)

Styling Forms (Cont.)

Styling Forms (Cont.)

You might also like