---------------------------UNIT 2 ----------------------------------What is an HTML 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
HTML <form> Element
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 elements, such as text box, textarea, etc.
</form>
HTML <input> Element
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.
Here is an example to take text input from the user:
<!DOCTYPE html>
<html>
<head>
<title>Text Input</title>
</head>
<body>
<form>
Enter your first name <br>
<input type="text" name="username">
</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.
<input> Defines an input control.
<textarea> Defines a multi-line input control.
<label> Creates a caption for input elements.
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.
<optgroup> Creates a drop-down list of related options.
<fieldset> Groups the related element in a web form.
<legend> It defines a caption for the <fieldset> element.
<button> Creates a clickable button.
HTML Form Controls
An HTML form has form controls, such as text fields, text areas, checkboxes, buttons, etc. It is a user interface control that
acts as a point of connection between the user and the server. Here are some of the commonly used HTML form controls to
gather data:
Text Input Controls
Password in an HTML Form
Radio Button Control
Checkbox Control
Submit Button Control
Let us understand each of these Form controls using the different Type attributes in HTML <form> tag.
1. Text Input Controls
The <input type=”text”> control defines a single-line text input. We can use the HTML <textarea> tag for creating multi-line
input control, if the user imput may be longer than a single line.
Let us look at an example to take the user’s first name and last name as input.
Example of a form with Text input fields:
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "fname" /><br>
Last name: <input type = "text" name = "lname" />
</form>
</body>
</html>
2. Password in an HTML Form
We use the type value as ‘password’ to take the password as input. The password entered by the user will not be visible in
the password field control.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form>
<p>
<label>Username : <input type="text" /></label>
</p>
<p>
<label>Password : <input type="password" /></label>
</p>
</form>
</body>
</html>
Output:
3. Radio Button Control
Radio buttons let users select one option out of many options. We can create a Radio Button control using the HTML
<input> tag and the type attribute will be radio. <input type=”radio”> defines a radio button.
Example of an HTML form with radio buttons:
<!DOCTYPE html>
<html>
<head>
<title>Radio Button Control</title>
</head>
<body>
<form>
<input type = "radio" name = "Gender" value = "Male"> Male
<input type = "radio" name = "Gender" value = "Female"> Female
</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>
<li><input type="checkbox" name="color" value="red" />Red</li>
<li><input type="checkbox" name="color" value="blue" />Blue</li>
<li><input type="checkbox" name="color" value="green" />Green</li>
</form>
</body>
</html>
Output:
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
Text Input Controls
There are three types of text input used on forms −
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.
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.
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.
