LAB 02 – HTML5 FORM

This practice will be divided into three parts:

Part 01: HTML Form
Part 02: Practical exercises with instructions
Part 03: Self-practice exercises
A. PART 01
I/. HTML Form overview
1/. What is the HTML form?
An HTML form is used to collect user input. The user input is most often sent to a
server for processing.
The web is shift from reading a network of pages to a place where getting
information done. For example email address, credit card, signing petitions,
searching a site, and posting a tweet. These interactions are handled by forms.

2/. What is the < form> element?

The HTML <form> element is used to create an HTML form for user input. The
<form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.
3/. How do the form work?
To understand what is happening behind the scenes when creating web forms, a
simple form is used as an example to trace the steps of a transaction that gathers
names and email addresses for a mailing list. It is typical of the process for many
forms.
- The visitor opens the page with a web form in the browser window. The browser
sees the form control elements in the markup and renders them with the appropriate
form controls on the page, including two text entry fields and a submit button as
shown in the Figure below.
- The visitor would like to sign up for this mailing list, the name and email addresses
are entered into the fields and submit the form by hitting the Submit button.
- The browser collects the entered information, encodes it, and sends it to the web
application on the server.
- The web application accepts the information and processes it (that is, does whatever
it is programmed to do with it). In this example, the name and email address are
added to a database.
- The web application also returns a response. The kind of response sent back
depends on the content and purpose of the form. Here, the response is a web page
that contains thanks for signing up for the mailing list. Other applications might
respond by reloading the HTML form page with updated information, by moving
the user on to another related form page, or by issuing an error message if the form
is not filled out correctly.
- The server sends the web application’s response back to the browser where it is
displayed.
 SIGN UP
Name: Mary

Email: [email protected]

SUBMIT

Data
Name: Mary WEB
Email: [email protected] APPLICATION

Response
HTML

THANK YOU FOR SIGN UP

We will confirm your registration
information as soon as possible.

4/. HTM Form Attributes

a/. The “action” attribute
The action attribute defines the action to be performed when the form is submitted.
Usually, the form data is sent to a file on the server when the user clicks on the
submit button.
b/. The “target” attribute
The target attribute specifies where to display the response that is received after
submitting the form.
The target attribute can have one of the following values:
Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe

c/. The “method” attribute

The method attribute specifies the HTTP method to be used when submitting the
form data.
The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").
The default HTTP method when submitting form data is GET.
II/. HTML Form Elements
1/. The <label> Element
<label>….</label>
The <label> element defines a label for several form elements.
The <label> element is useful for screen-reader users, because the screen-reader will
read out loud the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small
regions (such as radio buttons or checkboxes) - because when the user clicks the text
within the <label> element, it toggles the radio button/checkbox.
The “for” attribute of the <label> tag should be equal to the id attribute of the <input>
element to bind them together.
2/. The <input> Element
One of the most used form element is the <input> element.
The <input> element can be displayed in several ways, depending on the type
attribute.
HTML Input Types:
a/. Input Type Text:
<input type="text">
Input type text defines a single-line text input field.
Example:
I want you to create a form below:

You can try:

b/. Input Type Password:

<input type="password">
The characters in a password field are masked (shown as asterisks or circles).
Example:
I want you to create a form below:
You can try:

c/. Input Type Submit

<input type="submit" value="…." >
Input type submit defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute.
Example:
I want you to create a form below:

You can try:

d/. Input Type Reset
<input type="reset" value="…." >
Input type reset defines a reset button that will reset all form values to their default
values.
Example:
I want you to create a form below:

You can try:

e/. Input Type Radio

<input type="radio" value="…." name="…." >
Radio buttons let a user select ONLY ONE of a limited number of choices.
Example:
I want you to create a HTML content as below:

You can try:

e/. Input Type Checkbox

<input type="checkbox" value="…." name="…." >
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example:
I want you to create a HTML content as below:

You can try:

f/. Input Type Button
<input type="button" value="…." >
It defines a button on form.
Example:

g/. Input Type Color:

<input type="color">
Input Type Color is used for input fields that should contain a color.
Depending on browser support, a color picker can show up in the input field.
Example:

h/. Input Type Date:

<input type="date">
Input type date is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.
Example:

i/. Input Type Image:

<input type="image" src=" " alt=" " width=" " height=" ">
Input type image defines an image as a submit button.
The path to the image is specified in the src attribute.
Example:

j/. Input Type File:

<input type="file">
Input type file defines a file-select field and a "Browse" button for file uploads.
Example:

k/. Input Type Hidden:

<input type="hidden">
Input type hidden defines a hidden input field (not visible to a user).
A hidden field lets web developers include data that cannot be seen or modified by
users when a form is submitted.
A hidden field often stores what database record that needs to be updated when the
form is submitted.
Note: While the value is not displayed to the user in the page's content, it is visible
(and can be edited) using any browser's developer tools or "View Source"
functionality. Do not use hidden inputs as a form of security!
l/. Input Type Number:
<input type="number">
Input type number defines a numeric input field.
You can also set restrictions on what numbers are accepted.
Example:

3/. The <select> Element

<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
The <select> element defines a drop-down list.
The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
Use the “size” attribute to specify the number of visible values.
Use the “multiple” attribute to allow the user to select more than one value.
Example:
4/. The <textarea> Element
<textarea name="…" rows="…" cols="…">Content</textarea>
The <textarea> element defines a multi-line input field (a text area).
The “rows” attribute specifies the visible number of lines in a text area.
The “cols” attribute specifies the visible width of a text area.
Example:

5/. The <button> Element

<button type="button">Name button</button>
The <button> element defines a clickable button.
Note: Always specify the type attribute for the button element. Different browsers
may use different default types for the button element.
Example:
B. PART 02
I have a form like this:

I want you to create a form on HTML page.

You can try this:
C. PART 03
Create HTML Forms below:
1/. Form 01

Clues: input type range, datalist

2/. Form 02
In the footer, you can choose any images.