INTRODUCTION TO FORMS, THE <FORM>, <INPUT>

TAG, TEXT INPUT

7.1 INTRODUCTION

7.2 OBJECTIVES

7.3 HTML FORMS: AN OVERVIEW

7.4 ELEMENTS OF FORMS

7.5 FORM ATTRIBUTES

7.6 FORM CONTROLS

7.7 POINTS TO REMEMBER WITH HTML FORMS

7.8 CHECK YOUR PROGRESS

7.9

7.10 SUGGESTED READINGS

7.1 INTRODUCTION
Data from site visitors is required for HTML Forms. You may aim to assemble data like
names, emails, billing details, etc. The visitor's inputs will be sent to a server-side programme
through a post request, such as a CGI, ASP, or PHP script. The provided data will be
processed by the back-end application in accordance with the application's own business
logic. Text fields, text area fields, choose lists, radio buttons, checkboxes, and more are just
some of the form components that may be used.

<form action="Script URL" method="GET|POST"> form elements like input, text area etc.
</form>

7.2 OBJECTIVES

When you have finished this unit successfully, you will be able to-
● Learn the importance of HTML Forms in modern web development.
● Explain how HTML FORMS function.
● To learn the basics of creating standards compliant, best practice HTML forms.
● Students will learn how to create a Java server-side application (known as JSP) that can
receive form data from a client and save it to a database.
7.3 HTML FORMS: AN OVERVIEW
The web is evolving from a place where you read a network of sites to one where you can get
things done. Interactions like entering an email address, payment card number, petition
signature, site search, or tweeting are all handled through forms. HTML offers form to
facilitate user interaction with a web server. Data entered into a form is often sent to
server-side software developed in a scripting language for processing.
In a nutshell, there are two components to a working form. First is the HTML mark-up that
creates the form that users see on the page. Information is gathered from the user through the
form's buttons, input fields, checkboxes, and drop-down menus (together referred to as "form
controls"). Text and other components may also be included in a form. The other part of a
form is a server-side programme or script that processes the data submitted by the user and
provides a relevant answer. What makes the shape functional? It needs programming to create
a web application or script; just publishing an HTML page with form components isn't
enough.
How Forms Work?
When designing online forms, it helps to know what goes on behind the scenes. -
1. The process of collecting names and emails for a mailing list is broken down into its
component parts and shown with the help of a sample form. It's a standard step in the
production of many different kinds.
2. The first step is for the user to access a page that has a web form in the browser
window. As can be seen in the figure below, the browser interprets the HTML
containing the form control elements and displays the form controls—two text fields
and a submit button—appropriately.
3. Visitors who are interested in joining this mailing list fill out the form with their
information and click the "Submit" button after they are finished.
4. The data input is gathered by the browser, encoded, and then sent to the server-side
web application.
5. The data is processed by the web app after being accepted (that is, does whatever it is
programmed to do with it). A database entry is created using the given name and
email address.
6. A response is sent back from the web app. What sort of reply you get depends on the
nature and intent of the form? In this case, you may expect to see a webpage with
some kind words when you join up for the mailing list. In response, other programmes
may refresh the HTML structure page with the client's refreshed data, divert the client
to an alternate structure page, or show a mistake message if the user submits an
incorrect form.
 7. The browser receives the answer from the server and displays it.

7.4 ELEMENTS OF FORMS

The HTML <form> element is used to create interactive forms. The structure component
is a holder for all the substance of the structure.
syntax: -
<form>
..
Form elements
..
</form>
Various input components, such as text fields, checkboxes, radio buttons, and submit
buttons, make up the form elements of an HTML form. Other possible block components
are H1, p, and lists.
In order to communicate with the server-side form processing software, the form element
requires a few specific properties.

7.5 FORM ATTRIBUTES

● Action Attribute
The action element specifies the Uniform Resource Locator (URL) of the programme or
script that will be used to handle the form submission. The data is sent to the mailing list.php
script through the action property.
<form action="/mailinglist.php" >...</form>
● The.php extension on this form indicates that it is handled by a PHP script, although
any of the following technologies might be used to process a web form.
● PHP is a popular open-source programming language for the Apache web server.

● ASP.NET is Microsoft's server-side web application framework, which supports the

Active Server Pages (ASP) web application programming interface (IIS).
● JSPs, or Java Server Pages, are an ASP-compatible Java-based technology.
Method Attribute
This form is processed by a PHP script (as indicated by the.php suffix), but any of the
following technologies might be used instead.
One of the most often used open-source languages for the Apache web server is PHP.
 ● The Active Server Pages (ASP) web application programming interface is supported
by Microsoft's ASP.NET server-side web application framework (IIS).
● Java Server Pages (JSPs) are a Java-based technology that is interoperable with the
Active Server Pages (ASP) framework.
<form action="/cgi-bin/mailinglist.pl" method="POST">...</form>
1. GET Method
When a page is requested from a server, the encoded user data is attached to the URL and
sent using the GET method. The ULR and the encoded data se are isolated by the question
mark character. For instance: http://www.test.com/index.htm?name1=value1&name2=value2
When a user submits a form and receives a response, such as a list of search results, the GET
method should be used. For forms containing sensitive information, you shouldn't utilise
GET since the content is sent in plain text. Furthermore, GET may not be utilised for
transmitting a lot of data or when the form is used to upload a file due to the 256 character
restriction that may be added to URL. Some Observations on GET Requests:
● The history of a browser will always include GET requests.
● You may create a bookmark for a GET request.
● One limitation of GET requests is their maximum allowed length.
● The GET request method should never be used for sending private information.
● A GET request should only be used to obtain data.

2. POST Method
This encoded data is sent using the POST method of the HTTP protocol. Since arguments are
not included in a POST request's URI, the data being supplied using this method will be
hidden from view.
Since only the server can view the contents of this request, it is the most secure technique for
transmitting sensitive data like a credit card number or other personal information. Since the
POST method does not have a character restriction like the GET method does, it is ideal for
delivering a lot of data, such a long text input. Some clarifications about POST requests:
● No trace of POST requests can be seen in the browser cache.
● The following is true: POST requests cannot be bookmarked.
● No maximum length limitations on data are imposed on POST requests.

7.6 FORM CONTROLS

You may use a variety of form controls to gather information in an HTML form:
● Text Input Controls: Forms often use one of three distinct kinds of text input:

✔ Single-line text input controls - Select this option for text boxes that

can only accommodate a single line of text, including search bars and
login names. They are created using HTML <input>tag.
<input type="text">defines a one-line input field for text input:
Example:

✔ Password input controls - Like the last model, this is a solitary line

text input, however it conceals the person when it is composed. Also,

they are built using HTML<input>tag.

✔ Multi-line text input controls - This is used when a lengthier

explanation is needed than can fit in a simple statement. HTML is

used for the creation of multi-line text boxes.
 (Fig 1: Text Input Controls)
● Checkboxes Controls:
When the user must choose from many alternatives, a checkbox is utilised. They are
likewise made using the HTML input> element, but their type property is set to
checkbox instead.
An implementation of an HTML form with two checkboxes is shown below:
 (Fig 2: Checkboxes Controls)
● Radio Button Control:
When just one choice may be made from many available, radio buttons are utilised.
HTML input> tags are used to generate these as well, however the type property of
the element is changed to radio.
 (Fig 3 : Radio Button Control)

● Select Box Controls:-

You may create a drop-down menu from which users can pick one or more
alternatives.
A pick box, often referred to as a drop-down menu

(Fig 4: Select Box Controls)

● File Select boxes: A file upload box, often called a file choose box, is a required
component of any website that allows users to upload files. Also utilising the input>
element, but with the type property set to file.

</form>
</body>
</html>

(Fig 5: File Select boxes)

● Hidden Controls: - The usage of hidden form controls allows for the concealment of
information inside a page, which may then be sent to the server in an unobtrusive
manner. This control is invisible on the live page, existing only in the code. For
instance, the current page number is stored in the following concealed form. When a
user clicks "next page," the value of a hidden control will be sent to the web server,
which will then use this information to choose which page to show after the current
one.

</body>
</html>

(Fig 6: Hidden Controls)

● Button Controls:
HTML provides a number of options for making interactive buttons. Using the
input> tag and the type property to designate the element as a button is another
option. The following are valid options for the type attribute:
 (Fig 7: Button Controls)

7.7 POINTS TO REMEMBER WITH HTML FORMS

● Information submitted by users is collected through forms.
● An HTML form begins with the form> tag and finishes with the /form> tag.
● The input> tag is used to generate the majority of form controls.
● Dropdown list boxes in HTML are made with the choose> element.
● The input for multi-line text data is made using the Textarea> tag.

7.8 CHECK YOUR PROGRESS

Descriptive type questions-
a) What are Forms in HTML?
b) Why is it beneficial to use HTML Forms?
c) Define Form tag. Design a registration page by using all Form controls.
d) What are the differences between Get and post methods in form submitting? Give the
case where we can use get and we can use post methods.
e) How to read data from web form control like Text boxes explain with an example.
f) What is a form? Explain form components with example.
g) What is a form? What are the major attributes of the form? Explain any six form
components with example.
h) Explain Common HTML Form Tags?
i) Create an HTML Form to Input the Basic Details of an Employee.
j) What is button tag? Explain.
k) Explain Hidden control with suitable example.

Objective type questions-

a. If you want to make a list of items in the form of terms and their descriptions, then
you can create a _________ list.
1. Ordered 2 unordered 3. Definition 4. nested
b. The _________ attribute of <a> tag is used to provide information or a title for the
linked document or Web page.
 c. Which attribute of <td> tag is used to merge two or more columns to form a single
column?
1. colspan 2. Cellspacing 3. Cellpadding 4.rowspan

d. Which tag creates a check box for a form in HTML?

1. <checkbox> 2. <input type="checkbox">
3. <input=checkbox> 4. <input checkbox>
e. <TITLE> … </TITLE> tag must be within ________
1. Title 2. Form 3. Header 4. Body
f. What is the use of Forms in HTML?
1. to display contents of email. 2. to display animation effect.
3. to collect user’s input. 4. None of the Above.
g. Which tag is used in HTML5 for the initialization of the document type?
1. <Doctype HTML> 2. <!DOCTYPE html>
3. <Doctype> 4. <\Doctype html>
h. What is the default type of ‘type’ attribute of <input> element?
1. Text 2. Password 3. Numerals 4. Special Characters
i. Which attribute defines the file-select field?
1. file 2. Checkbox 3. Button 4. Text
j. Which attribute is not used on new forms?
1. size 2. Text 3. Name 4. maxlength
k. Which element is used to create multi-line text input?
1. text 2. textarea 3. submit 4. radio button

Answer (objective type question)-

[a] Definition [b] Title [c] colspan [d] <input type="checkbox"> [e] Form
[f] to collect user’s input [g] <!DOCTYPE html> [h] Text [i] file [j] size [k] textarea

7.9 BIBLIOGRAPHY/ REFERENCES

● Ramesh Bangia, “Internet and Web Design” , New Age International
● Ivan Bayross,” HTML, DHTML, Java Script, Perl & CGI”, BPB Publication
● Xavier, C, “ Web Technology and Design” , New Age International
● Sharma &Sharma, “Developing E-Commerce Sites”, Addison Wesley
● Uttam/Roy,” WEB Technology”, Oxford Publication.
● Patel and Barik, ”Introduction to Web Technology & Internet”, Acme Learning
● Raj Kamal, “Internet and Web Technologies”, McGraw Hill Eduction.
7.10 SUGGESTED READINGS
● Learning Web Design: A beginner’s Guide To HTML, CSS, Javascript, and Web
Graphics by David Sawyer McFarland.
● http://nptel.ac.in/courses/106105084/17