FORM
FORM
An HTML or a Web form helps collect user input. HTML forms can have different fields, such as text areas, text boxes, radio
buttons, checkboxes, drop-down lists, file uploads, etc.
The collected data can be validated on the client browser using JavaScript. After validation of form data on the client-side,
the user clicks on the Submit button in the form. After this, data is sent to the server for further processing.
CREATE FORM
To create an HTML form, we will use the HTML <form> element. It starts with the <form> tag and ends with the </form>
tag. We can add the input elements within the form tags for taking user input.
Syntax:
<form>
</form>
We use the HTML <input> element to create form fields and receive input from the user. We can use
various input fields to take different information from the user. Using different Type attributes, we
can display an <input> element in various ways.
<html>
<head>
<title>Text Input</title>
</head>
<body>
<form>
</form>
</body>
</html>
Output:
Common HTML Form Tags
The following are some of the commonly used HTML tags to create web forms:
Tag Description
<form> This tag defines an HTML form to receive input from the user.
Create a drop-down menu with various options. The <select> tag defines the
<select> & <option> selection or the drop-down, while the <option> tag represents all the options
in the list.
Let us understand each of these Form controls using the different Type attributes in HTML <form> tag.
Let us look at an example to take the user’s first name and last name as input.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form >
</form>
</body>
</html>
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<p>
</p>
<p>
</p>
</form>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
</form>
</body>
</html>
Output:
4. Checkbox Control
The checkbox is used when more than one option is to be selected from the given options. We can create it using the HTML
<input> tag and set the type attribute to the checkbox.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
Choose Colors:<br>
</form>
</body>
</html>
Output:
HTML Form Controls
There are different types of form controls that you can use to collect data using
HTML form −
Single-line text input controls − This control is used for items that require only
one line of user input, such as search boxes or names. They are created
using HTML <input> tag.
Password input controls − This is also a single-line text input but it masks the
character as soon as a user enters it. They are also created using HTMl
<input> tag.
Multi-line text input controls − This is used when the user is required to give
details that may be longer than a single sentence. Multi-line input controls
are created using HTML <textarea> tag.
This control is used for items that require only one line of user input, such as
search boxes or names. They are created using HTML <input> tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>
Attributes
Following is the list of attributes for <input> tag for creating text field.
Sr.N
Attribute & Description
o
type
1 Indicates the type of input control and for text input control it will be set
to text.
name
2 Used to give a name to the control which is sent to the server to be
recognized and get the value.
3 value
This can be used to provide an initial value inside the control.
4 size
Allows to specify the width of the text-input control in terms of characters.
maxlength
5 Allows to specify the maximum number of characters a user can enter into
the text box.