HTML - FORMS

OVERVIEW
HTML Forms are required, when you want to collect some data from the
site visitor. For example, during user registration you would like to
collect information such as name, email address, credit card, etc.

A form will take input from the site visitor and then will post it to a
back-end application such as PHP script . The back-end application will
perform required processing on the passed data based on defined
business logic inside the application.

There are various form elements available like text fields, textarea
fields, drop-down menus, radio buttons, checkboxes, etc.
 The <form> Element
 The HTML <form> tag is used to create an HTML form and it has
following syntax −
<form>
.
form elements
.
</form>

 The <form> element is a container for different types of input

elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.
HTML Form Controls
There are different types of form controls that you can use to collect
data using HTML form −

 Text Input Controls

 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button
 The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:
Text Fields

The <input type="text"> defines a single-line input field for text

input.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Note: The form itself is not visible. Also note that the default width of an
input field is 20 characters.
The <label> Element
 Notice the use of the <label> element in the example above.
 The <label> tag defines a label for many 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.
Radio Buttons
 The <input type="radio"> defines a radio button.
 Radio buttons let a user select ONE of a limited number of choices.
Example:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number
of choices.
Example
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
The Submit Button
The <input type="submit"> defines a button for submitting the form data to a
form-handler.
The form-handler is typically a file on the server with a script for processing
input data.
The form-handler is specified in the form's action attribute.
Example
A form with a submit button:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
 The Name Attribute for <input>
 Notice that each input field must have a name attribute to be submitted.

 If the name attribute is omitted, the value of the input field will not be sent at
all.
 Form Attributes

Apart from common attributes, following is a list of the most frequently

used form attributes −
 Form Attributes
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.

In the next example , the form data is sent to a file called

"action_page.php". This file contains a server-side script that handles
the form data:
 Form Attributes
The Action Attribute

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

Tip: If the action attribute is omitted, the action is set to the current page.
 Form Attributes
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:

The default value is _self which means that the response

will open in the current window.
 Form Attributes
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.
This example uses the GET method when submitting the form data:
<form action="/action_page.php" method="get">

This example uses the POST method when submitting the form data:
<form action="/action_page.php" method=“post">
 Form Attributes
The Method Attribute
Notes on GET:
 Appends the form data to the URL, in name/value pairs
 NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to bookmark the result
 GET is good for non-secure data, like query strings in Google

Notes on POST:
 Appends the form data inside the body of the HTTP request (the submitted form data is
not shown in the URL)
 POST has no size limitations, and can be used to send large amounts of data.
 Form submissions with POST cannot be bookmarked
Tip: Always use POST if the form data
contains sensitive or personal information!
 Form Attributes
The Autocomplete Attribute
The autocomplete attribute specifies whether a form should have autocomplete on or
off.
When autocomplete is on, the browser automatically complete values based on values
that the user has entered before.

Tip: Always use POST if the form data

contains sensitive or personal information!
 Reference:
 You can read more on below link.

https://www.w3schools.com/html/html_forms_attributes.asp
HTML Form Elements
 The HTML <form> Elements

The HTML <form> element can contain one or more of the following form elements:.

<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>
 The <select> Element

The <select> element defines a drop-down list:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:
 The <select> Element

Visible Values:

Use the size attribute to specify the number of visible values:

 The <select> Element

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
 The <textarea> Element
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.

 The <button> Element
The <button> element defines a clickable button:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

 Research on:

 The <fieldset> and <legend> Elements

 The <datalist> Element
 File Upload Box
 HTML FORM ASSIGNMENT

 See pdf doc sent

HTML Input Types
 HTML CSS

Refer to below links:

https://learn.shayhowe.com/html-css/getting-to-know-css/

https://www.w3schools.com/css/css_selectors.asp
<b>THE END</b>
THE END