Scribd
Upload
3 views14 pages

Introduction to html forms

HTML forms are documents that allow users to submit information to a web server using various interactive controls such as text fields, checkboxes, and radio buttons. The processing of form data involves several steps, including user interaction, data submission, and server-side processing. HTML5 introduces new input types and attributes that enhance form functionality, such as validation and different input methods.

Uploaded by

Lê Diệu Chinh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
3 views14 pages

Introduction to html forms

HTML forms are documents that allow users to submit information to a web server using various interactive controls such as text fields, checkboxes, and radio buttons. The processing of form data involves several steps, including user interaction, data submission, and server-side processing. HTML5 introduces new input types and attributes that enhance form functionality, such as validation and different input methods.

Uploaded by

Lê Diệu Chinh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 14

BS NEU EBDB 5 – Web Technology –HTML Forms

HTML Forms
HTML Form is a document that stores information of a user on a web server using interactive
controls. An HTML form contains different kinds of information such as username, password, contact
number, email id, etc.

Although forms could simply be used to display information, HTML provides them in order to supply
a way for the user to interact with a Web server. The most widely used method to process the data
submitted through a form is to send it to server-side software typically written in a scripting
language, although any programming language can be used.

These are the steps in processing a form:

1. The user retrieves a document containing a form from a Web server.

2. The user reads the Web page and interacts with the form it contains.

3. Submitting the form sends the form data to the server for processing.

4. The Web server passes the data to a CGI programme.

5. The CGI software may use database information or store data in a server-side database.

6. The CGI software may generate a new Web page for the server to return to the user.

7. The user reads the new Web document and may interact with it.

Elements of Forms
The main elements of forms are:

Check boxes
Text (Input) fields
Radio buttons
Submit and reset buttons
Password fields
Text areas
Menu buttons
File picker

HTML5 defines a number of new input types that can be used in forms. Examples are Email address
fields; web address fields; numbers as spin boxes and sliders; date pickers; search boxes; color
pickers; form validation; and required fields. .

1
Creating Forms
The <form> tag is used to create an HTML form.

Example of an HTML Form :

<html>

<head>
<title> Forms
</title>
</head>

<body>

<form>

Username:<br>

<input type="text" name="username">

<br>

Email id:<br>

<input type="text" name="email_id">

<br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

Output in a browser:

Input Element in HTML Forms :


Input Elements are the most common elements which are used in HTML Forms. Various user input
fields can be created such as text field, check box, password field, radio button, submit button, etc.
The most common input elements are listed below:

2
• Text Field in HTML Forms :

The text field is a one-line input field allowing the user to input text. Text Field input controls are
created using the “input” element with a type attribute having the value as “text”.

<html>
<head>
<title> Forms
</title>
</head>

<body>

<h3>Example Of Text Field</h3>

<form>

<label for="EMAIL ID">Email Id:</label><br>

<input type="text" name="Email id" id="Email id">

</form>

</body>

</html>

Output:

• Number Field in HTML Forms:

This field is used to take numbers as input.

<html>
<head>
<title> Forms
</title>
</head>

<body>

3
<h3>Example Of Number Field</h3>

<form>

<label for="Age">Age:</label><br>

<input type="number" name="Age" id="Age">

</form>

</body>

</html>

Output:

• Password Field in HTML Forms :

Password fields are a type of text field in which the text entered is masked using asterisks or dots for
the prevention of user identity from another person who is looking at the screen. Password Field
input controls are created using the “input” element with a type attribute having the value as
“password”.

<html>

<head>
<title> Forms
</title>
</head>

<body>

<h3>Example of Password Field</h3>

4
<form>

<label for="user-password">Password:

</label><br>

<input type="password" name="user-pwd"

id="user-password">

</form>

</body>

</html>

Output in a browser:

• Radio Buttons in HTML Form :

Radio Buttons are used to let the user select exactly one option from a list of predefined options.
Radio Button input controls are created using the “input” element with a type attribute having the
value as “radio”

<html>

<head>
<title> Forms
</title>
</head>

<body>

<h3>Example of Radio Buttons</h3>

<form>

SELECT GENDER

<br>

<input type="radio" name="gender" id="male">

5
<label for="male">Male</label><br>

<input type="radio" name="gender" id="female">

<label for="female">Female</label>

</form>

</body>

</html>

Output in a browser:

• Checkboxes in HTML Form :

Checkboxes are used to let the user select one or more options from a pre-defined set of options.
Checkbox input controls are created using the “input” element with a type attribute having the value
as “checkbox”.

<html>

<head>
<title> Forms
</title>
</head>

<body>

<h3>Example of HTML Checkboxes</h3>

<form>

<b>SELECT SUBJECTS</b>

<br>

<input type="checkbox" name="subject" id="maths">

<label for="maths">Maths</label>

6
<input type="checkbox" name="subject" id="science">

<label for="science">Science</label>

<input type="checkbox" name="subject" id="english">

<label for="english">English</label>

</form>

</body>

</html>

Output in a browser:

• File select boxes in HTML Forms :

File select boxes are used to allow the user to select a local file and send it as an attachment to the
web server. It is similar to a text box with a button that allows the user to browse for a file. Instead
of browsing for the file, the path and the name of the file can also be written. File select boxes are
created using the “input” element with a type attribute having the value as “file”.

<html>

<head>
<title> Forms
</title>
</head>

<body>

<h3>Example of a File Select Box</h3>

<form>

<label for="fileselect">Upload:</label>

<input type="file" name="upload" id="fileselect">

</form>

7
</body>

</html>

Output in a browser:

• Text area in an HTML Form :

Text Area is a multiple-line text input control that allows the user to provide a description or text in
multiple lines. A Text Area input control is created using the “textarea” element.

<html>

<head>
<title> Forms
</title>
</head>

<body>

<h3>Example of a Text Area Box</h3>

<form>

<label for="Description">Description:</label>

<textarea rows="5" cols="50" name="Description"

id="Description"></textarea>

</form>

</body>

</html>

Output in a browser:

8
• Select Boxes in HTML Forms :

Select boxes are used to allow users to select one or more than one option from a pull-down list of
options. Select boxes are created using two elements which are “select” and “option”. List items are
defined within the select element.

<html>

<head>
<title> Forms
</title>
</head>

<body>

<h3>Example of a Select Box</h3>

<form>

<label for="country">Country:</label>

<select name="country" id="country">

<option value="India">India</option>

<option value="Sri Lanka">Sri Lanka</option>

<option value="Australia">Australia</option>

</select>

</form>

</body>

</html>

Output :

9
Attributes Used in HTML Forms
The Action Attribute :

The action to be performed after the submission of the form is decided by the action attribute.
Generally, the form data is sent to a webpage on the web server after the user clicks on the submit
button.

Example :

<html>

<head>
<title> Forms
</title>
</head>

<body>

<h3>Example of a Submit And Reset Button</h3>

<form action="test.php" method="post" id="users">

<label for="username">Username:</label>

<input type="text" name="username" id="Username">

<input type="submit" value="Submit">

<input type="reset" value="Reset">

</form>

</body>

</html>

If you click the submit button, the form data

would be sent to a page called test.php .

10
The Target Attribute in HTML Forms :

The Target attribute is used to specify whether the submitted result will open in the current window,
a new tab or on a new frame. The default value used is “self” which results in the form submission in
the same window. For making the form result open in a new browser tab, the value should be set to
“blank”.

<html>

<head>
<title> Forms
</title>
</head>

<body>

<form action="/test.php" target="_blank">

Username:<br>

<input type="text" name="username">

<br>

Password:<br>

<input type="password" name="password">

<br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

After clicking on the submit button, the result

will open in a new browser tab.

Name Attribute in Html Forms :

The name attribute is required for each input field. If the name attribute is not specified in an input
field then the data of that field would not be sent at all.

11
<html>

<head>
<title> Forms
</title>
</head>

<body>

<form action="/test.php" target="_blank">

Username:<br>

<input type="text">

<br>

Password:<br>

<input type="password" name="password">

<br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

In the above code, after clicking the submit button, the form data will

be sent to a page called /test.php. The data sent would not include the

username input field data since the name attribute is omitted.

The Method Attribute :

It is used to specify the HTTP method used to send data while submitting the form. There are two
kinds of HTTP Methods, which are GET and POST.

The GET Method –

12
<html>

<head>
<title> Forms
</title>
</head>

<body>

<form action="/test.php" target="_blank" method="GET">

Username:<br>

<input type="text" name="username">

<br>

Password:<br>

<input type="password" name="password">

<br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

In the GET method, after the submission of the form, the form values

will be visible in the address bar of the new browser tab.

The Post Method –

<html>
<head>
<title> Forms
</title>
</head>

13
<body>

<form action="/test.php" target="_blank" method="post">

Username:<br>

<input type="text" name="username">

<br>

Password:<br>

<input type="password" name="password">

<br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

In the post method, after the submission of the form, the form values

will not be visible in the address bar of the new browser tab as it was

visible in the GET method.

14

You might also like