Scribd
Upload
37 views7 pages

FORM

The document discusses HTML forms and how to create them using tags such as <form>, <input>, and <textarea>. It describes different form controls like text, password, radio buttons, checkboxes and their usage. The document also provides examples of creating forms with these various controls.

Uploaded by

Rishu Singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
37 views7 pages

FORM

The document discusses HTML forms and how to create them using tags such as <form>, <input>, and <textarea>. It describes different form controls like text, password, radio buttons, checkboxes and their usage. The document also provides examples of creating forms with these various controls.

Uploaded by

Rishu Singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

---------------------------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.

You might also like