Video Tutorial Link: https://youtu.be/Y-BmFdCDSgM
A web form is a web page that contains fields,
areas in which a visitor can enter information or select from a set of
predefined options. When a visitor accesses the form, the browser displays the
web page as usual, including the form’s fields. The visitor can interact with
the fields—for example, by typing text into a text field, by selecting a checkbox or one option button in a group of option buttons, or by choosing an item
from a drop-down list. When finished with the form, the visitor clicks a
command button that submits the form, usually by running a server-side script
written in a programming language such as Perl, ASP, PHP, JSP etc.
The
form Element
Forms are added to web pages using (no surprise here) the form
element. The form element is a container for all the content of
the form, including some number of form controls, such as text entry fields and
buttons. It may also contain block elements, (h1, p, and lists), however, it may not contain another form
element.
This sample
source document contains a form similar to the one shown in table 1.
The output of above
code that shows in the browser is:
In addition to being a container for form control elements, the form element
has some attributes that are necessary for interacting with the form-processing
program on the server. Let’s take a look at each.
The action attribute
provides the location (URL) of the application or script (sometimes called the
action page) that will be used to process the form. The ACTION
value is required for working forms, though on some browsers a value
similar to the base URL of the document will be assumed if the ACTION is
left out.
The method
attribute specifies how the information should
be sent to the server. There are only two methods for sending this encoded data
to the server: POST or GET indicated using the method
attribute in the form
element.
- The
POST method: When the form’s
method is set to POST, the browser sends a separate server request containing
some special headers followed by the data. Only the server sees the content of
this request, thus it is the best method for sending secure information such as
credit card or other personal information.
- The GET method: With the GET method, the encoded form data gets tacked right onto the URL sent to the server. GET is not appropriate for forms with private personal or financial information.
Video Tutoial Link: https://youtu.be/QWxbyila_q0
Add Input controls to
the Form
Let’s discuss some input controls, or ways for users to enter data. For example, for you to enter your name on a form, there must be a space for you to do so. This space is what I’m referring to when I use the phrase input control or simply “control.” Figure contains some input controls that are labeled for you.
The majority of these controls are created with an input tag, the actual description of which control you want to include is made through the type attribute, as in the following example:
<form><input type="text" /></form>
The next sections explain the specific types of controls created with the input tag, as well as a few others that aren’t created by it.
HTML Form Element
The HTML
<form> element provide a document section to take input from user. It
provides various interactive controls for submitting information to web server
such as text field, text area, password field, etc. Below is the list of all
form elements:
- <input>
- <label>
- <textarea>
- <select>
- <option>
- <optgroup>
- <datalist>
- <button>
- <fieldset>
- <legend>
- <output>
Text Box controls
There are three
basic types of text box fields in web forms: single-line text boxes, password
boxes, and multiline text entry boxes.
- Single-line
text box: One of the simplest types
of form control is the text box field used for entering a single word or line
of text. It is added to the form using the input element with its type
attribute set to text, and the name attribute is required for
identifying the variable name as shown here in the Figure.
- Password
text box: A password box field works
just like a text box field, except the characters are obscured from view using
asterisk (*) or bullet (•) characters, or another character determined by the
browser.
- Multiline
text entry box: When you want
your users to be able enter more than just one line of text, for these
instances, use the textarea element that is replaced by a multi-line, scrollable text entry box when
displayed by the browser. Unlike the empty input element, the textarea element has content between its opening and
closing tags. The content of the textarea element is the initial content of the text box
when the form is displayed in the browser.
HTML5 <input> new attributes
The following new
attributes have been added to the <input> element in HTML5:
- autofocus :
automatically focuses one particular form field
- placeholder :
provides a hint to the user of what can be entered in the field
- required :
used for client side validations
- form:
specifies the for to which an <input> element
belongs to.
- height and width
- pattern :
specifies a regular expression that the value of the <input> element is checked
against
NOTE: In HTML5 you can use attributes that are boolean with or without values as you like! For example autofocus="autofocus" or also autofocus! I.e. the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
Label Element
The label element represents a label which can be associated to a form control, and is supposed to provide a short description for it. Browsers may link both elements by allowing users to set the focus to the control by clicking on its label.
There are two ways to associate a label with a control: by inserting both, the label text and the control inside label; or by matchin the values of the id attribute in the control and the for attribute in the label.
Example-
Working with Radio and Checkbox Buttons
Both checkbox and radio buttons make it simple for your visitors to
choose from a number of provided options. They are similar in that they
function like little on/off switches that can be toggled by the user and are
added using the input element.
They serve distinct functions, however. A form control made up of a collection
of radio buttons is appropriate when only one option from the group is
permitted, or, in other words, when the selections are mutually exclusive (such
as Yes or No, or Male or Female).
When one radio
button is “on,” all of the others must be “off,” sort of the way buttons used
to work on old radios—press one button in and the rest pop out.
When checkboxes
are grouped together, however, it is possible to select as many or as few from
the group as desired. This makes them the right choice for lists in which more
than one selection is okay.
Radio buttons
Radio buttons are added to a form with the input element with the type attribute set to radio. The name attribute is required. Here is the syntax for a minimal radio button: In this example, radio buttons are used as an interface for users to enter their age group (a person can’t belong to more than one age group, so radio buttons are the right choice). Figure 4 shows how radio buttons are rendered in the browser.
Notice that all
of the input elements
have the same variable name (“age”), but their values are different. Because
these are radio buttons, only one button can be checked at a time, and
therefore, only one value will be sent to the server for processing when the
form is submitted.
You can decide
which button is checked when the form loads by adding the checked attribute
to the input element. In this example, the button next to “under 24”
will be checked by default.
Checkbox buttons
Checkboxes are added using the input element with its type set to checkbox. As with radio buttons, you create groups of checkboxes by assigning them the same name value. The difference, as we’ve already noted, is that more than one checkbox may be checked at a time. The value of every checked button will be sent to the server when the form is submitted. Here is an example of a group of checkbox buttons used to indicate musical interests. Figure shows above how they look in the browser:
Submit and reset buttons
There are a number of different kinds of buttons
that can be added to web forms. The most fundamental is the submit button. When
clicked, the submit button immediately sends the collected form data to the
server for processing. The reset button returns the form controls to the state
they were in when the form loaded.
Both submit and
reset buttons are added using the input element. As mentioned earlier,
because these buttons have specific functions that do not include the entry of
data, they are the only form control elements that do not require the name attribute.
Submit and reset buttons are straightforward to use. Just place them in the appropriate place in the form, in most cases, at the very end. By default, the submit button displays with the label “Submit” or “Submit Query” and the reset button is labeled “Reset.” Change the text on the button using the value attribute as shown in the reset button in this example.
Menus
Option for
providing a list of choices is to put them in a pull-down or scrolling menu.
Menus tend to be more compact than groups of buttons and checkboxes.
You add both pull-down and scrolling menus to a form with the select element. Whether the menu pulls down or scrolls is the result of how you specify its size and whether you allow more than one option to be selected. Let’s take a look at both menu types.
Pull-down menus
The select element displays as a pull-down menu and it’s a container for
a number of option elements. The content of the chosen option element is what gets
passed to the web application when the form is submitted. In pull-down menus,
only one item may be selected. Here’s an example
Scrolling menus
To make the menu display as a scrolling list, simply specify the number of lines you’d like to be visible using the size attribute. This example menu has the same options as the previous one, except it has been set to display as a scrolling list that is six lines tall. The multiple attribute allows users to make more than one selection from the scrolling list. Use the selected attribute in an option element to make it the default value for the menu control.
File
Upload Box
If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the <input> element but type attribute is set to file.
Example:
<!DOCTYPE html>
Output−
<datalist>
Element
The <datalist> element specifies a
list of pre-defined options for an <input> element. Users will see a
drop-down list of the pre-defined options as they input data. The list
attribute of the <input> element, must refer to the id attribute of the
<datalist> element.
Example-
Fieldset Element
The fieldset element represents a set of controls in a form, optionally grouped under the same name. This element can be specially useful in large forms, where readability and ease of access can be improved with segmentation. Browsers will most likely render a frame around the grouped controls.
A fieldset can additionally have a title or name, that can be provided by legend. In such case, the legend element must be the first child of the fieldset.
Example-
Output-
<meter> Element
The <meter> element is used to display a measurement on a known scale. You can display your hard disk usage or percentage of students passed in a class using the <meter> element. The color of the meter bar depends on the measurement you display. The measurement can fall in any of the three categories: low, medium or high.
Example-
Input (Type=Date) Element
The input element, having the "date" value in its type attribute, represents a field for a date input. In modern browsers date fields are usually represented by controls that enable users to change its value in a graphical way (like, for example, a calendar), instead of having to input it directly as a string.
Upon submission, supporting browsers convert the input data into a string representing a date. The rules to compose a valid date are described below.
Example-
HTML <output> tag
HTML <output> tag is used to display the result of some
calculation (performed by JavaScript) or the outcome of a user action (such as
Input data into a form element).
The <output> tag is a newly added tag and was introduced in
HTML5.
Syntax
<output>......</output>
