Scribd
Upload
106 views

Hypertext Markup Language

HTML forms allow users to enter data into a website. A form contains input elements like text fields, checkboxes, radio buttons, dropdown menus, and buttons. The user's input is sent to a backend application which processes the data. Forms are defined using HTML tags like <form>, <input>, <textarea>, and <select>. Common input types include single-line and multi-line text, passwords, checkboxes, radio buttons, dropdown menus, file uploads, and submit/reset buttons. Each input element has attributes that specify its behavior and value.

Uploaded by

princy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
106 views

Hypertext Markup Language

HTML forms allow users to enter data into a website. A form contains input elements like text fields, checkboxes, radio buttons, dropdown menus, and buttons. The user's input is sent to a backend application which processes the data. Forms are defined using HTML tags like <form>, <input>, <textarea>, and <select>. Common input types include single-line and multi-line text, passwords, checkboxes, radio buttons, dropdown menus, file uploads, and submit/reset buttons. Each input element has attributes that specify its behavior and value.

Uploaded by

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

HTML

(Hypertext Markup Language)


HTML Forms

HTML Forms are required, when you want to collect some data from
the site visitor. For example, during user registration you would like
to collect information such as name, email address, credit card, etc.

A form will take input from the site visitor and then will post it to a
back-end application such as CGI, ASP Script or PHP script etc. The
back-end application will perform required processing on the passed
data based on defined business logic inside the application.
HTML Form Structure
The HTML <form> tag defines a form that is used to collect user
input. All the form elements should be written inside <form> and
</form> tags.

Syntax:
<form>
....
Form Elements..
....
</form>
Example
HTML Form Controls
• 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.
Example:Single-line text input controls

<!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 for <input> tag 
Sr.No Attribute & Description

type Indicates the type of input control and for text input control it will be set to text.

name Used to give a name to the control which is sent to the server to be recognized and get the
value.

value
This can be used to provide an initial value inside the control.

size Allows to specify the width of the text-input control in terms of characters.

maxlength
Allows to specify the maximum number of characters a user can enter into the text box.
Example: Password input controls
<!DOCTYPE html>
<html>

<head>
<title>Password Input Control</title>
</head>

<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>

</html>
Example:Multi-line text input controls
<!DOCTYPE html>
<html>

<head>
<title>Multiple-Line Input Control</title>
</head>

<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>

</html>
Attributes for <textarea> tag

Sr.No Attribute & Description

name Used to give a name to the control which is sent to the server to be recognized
and get the value.

rows
Indicates the number of rows of text area box.

cols Indicates the number of columns of text area box


Checkbox Control

Checkboxes are used when more than one option is required to be


selected. They are also created using HTML <input> tag but type
attribute is set to checkbox.
Example: Checkbox controls
<!DOCTYPE html>
<html>

<head>
<title>Checkbox Control</title>
</head>

<body>
<form>
<input type = "checkbox" name = "maths" value = "on">
Maths
<input type = "checkbox" name = "physics" value = "on">
Physics
</form>
</body>

</html>
Attributes for <checkbox> tag 
Sr.No Attribute & Description
1
type
Indicates the type of input control and for checkbox input control it
will be set to checkbox..

2 name
Used to give a name to the control which is sent to the server to be
recognized and get the value.

3 value
The value that will be used if the checkbox is selected.

4 checked
Set to checked if you want to select it by default.
Radio Button Control

Radio buttons are used when out of many options, just one option is
required to be selected. They are also created using HTML <input> tag
but type attribute is set to radio.
Example:Radio button controls
<!DOCTYPE html>
<html>

<head>
<title>Radio Box Control</title>
</head>

<body>
<form>
<input type = "radio" name = "subject" value = "maths">
Maths
<input type = "radio" name = "subject" value = "physics">
Physics
</form>
</body>

</html>
Attributes for <radio button> tag 
Sr.No Attribute & Description
1 type
Indicates the type of input control and for checkbox
input control it will be set to radio.

2 name
Used to give a name to the control which is sent to the
server to be recognized and get the value.

3 value
The value that will be used if the radio box is selected.

4 checked
Set to checked if you want to select it by default.
Select Box Control

A select box, also called drop down box which provides option to list
down various options in the form of drop down list, from where a user
can select one or more options.
Example:Select box controls
<!DOCTYPE html>
<html>

<head>
<title>Select Box Control</title>
</head>

<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>

</html>
Attributes for <select> tag 
Sr.No Attribute & Description

name Used to give a name to the control which is sent to the server to be recognized and get
the value.

size This can be used to present a scrolling list box.

multiple If set to "multiple" then allows a user to select multiple items from the menu.
Attributes for <option> tag 
Sr.No Attribute & Description

The value that will be used if an option in the select box box is
value selected.

selected Specifies that this option should be the initially selected value
when the page loads.

label
An alternative way of labeling options
Select Box Control

A select box, also called drop down box which provides option to list
down various options in the form of drop down list, from where a user
can select one or more options.
Example:Select box controls
<!DOCTYPE html>
<html>

<head>
<title>Select Box Control</title>
</head>

<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>

</html>
Attributes for <select> tag 
Sr.No Attribute & Description

1 name
Used to give a name to the control which is sent to the server to be recognized and get the
value.

2 size
This can be used to present a scrolling list box.

3 multiple
If set to "multiple" then allows a user to select multiple items from the menu.
Button Controls

There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input>tag by setting its type attribute to button.

<INPUT TYPE="BUTTON" VALUE="Press Me">

<BUTTON> element is functionally equivalent to <INPUT TYPE="BUTTON">,


which is not supported by the official HTML 3.2 definition.

<BUTTON>Press Me</BUTTON>
Attributes
Sr.No Type & Description

submit This creates a button that automatically submits a form.

reset This creates a button that automatically resets form controls to their
initial values.

This creates a button that is used to trigger a client-side script when


button
the user clicks that button.

This creates a clickable button but we can use an image as background


image
of the button.
Example: button controls
<!DOCTYPE html>
<html>

<head>
<title>Buttons</title>
</head>

<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src =
“unit2.jpg" />
</form>
</body>

</html>
File Upload Box

If you want to allow a user to upload a file to your web site, you will
need to use a file upload box, also known as a file select box. This is
also created using the <input> element but type attribute is set to file.
Example:

<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<input type = "file" name = "fileupload" accept =
"image/*" />
</form>
</body>

</html>
Attributes

Sr.No Attribute & Description

name Used to give a name to the control which is sent to the


server to be recognized and get the value.

accept Specifies the types of files that the server accepts.


Hidden Form Controls

Hidden form controls are used to hide data inside the page which later
on can be pushed to the server. This control hides inside the code and
does not appear on the actual page. For example, following hidden
form is being used to keep current page number. When a user will click
next page then the value of hidden control will be sent to the web
server and there it will decide which page will be displayed next based
on the passed current page.
Example:Hidden controls
<!DOCTYPE html>
<html>

<head>
<title> Hidden controls </title>
</head>

<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>

</html>
Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form and the
<legend> element defines a caption for the <fieldset> element.
Example:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> HTML Form Fieldset and Legend Attributes </title>
</head>
<body>
<form action="action-page.php">
<fieldset>
<legend>Personal information:</legend>
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Output
Form Attributes
Sr.No Attribute & Description
action Backend script ready to process your passed data.
method Method to be used to upload data. The most frequently used are GET and POST
methods.
target Specify the target window or frame where the result of the script will be
displayed. It takes values like _blank, _self, _parent etc.

enctype You can use the enctype attribute to specify how the browser encodes the data
before it sends it to the server. Possible values are −
application/x-www-form-urlencoded − This is the standard method most forms
use in simple scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the
form of files like image, word file etc.
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.

The action attribute value defines the web page where information
proceed. It can be .php, .jsp, .asp, etc. or any URL where you want to
process your form.
Example:
<!DOCTYPE html>
<html>
<h3>Example of a Submit And Reset Button</h3>
<body>
<form action="test.php" method="post" id="users">
Username:
<input type="text" name="username" id="Username">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
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”.

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


Method attribute
The method attribute defines the HTTP method which browser used to submit
the form. The possible values of method attribute can be:

POST: We can use the post value of method attribute when we want to
process the sensitive data as it does not display the submitted data in URL.

<form action="action.html" method="post">

GET: The get value of method attribute is default value while submitting the
form. But this is not secure as it displays data in URL after submitting the form.

<form action="action.html" method="get">


Hypertext Transfer Protocol (HTTP)

Hypertext Transfer Protocol (HTTP) is an application-layer protocol for

transmitting hypermedia documents, such as HTML. It was designed for

communication between web browsers and web servers, but it can also

be used for other purposes.


Difference between GET and POST
Points GET METHOD POST METHOD
Data Pass Limited amount of data can be sent because Large amount of data can be sent because data
data is sent in header. is sent in body.

Security Get request is not secured because data is data Post request is secured because data is not
sent is part of the URL, and this data saved in exposed in URL bar and parameters are not
browser history and server logs in plaintext. stored in browser history or in web server logs.

Bookmarked Request can be bookmarked and cached. Request can not be bookmarked and cached.

Usability GET method should not be suitable when you POST is good for when you are sending
are sending sensitive data like user id or sensitive data because your data are sended in
Passwords. encrypted form.

Data Length Data length restricted, usually to 2048 No restrictions on the amount of data that can
characters. be sent.
Hacked Easier to hack. More difficult to hack.
The Autocomplete Attribute

• The autocomplete attribute specifies whether a form should have


autocomplete on or off.
• When autocomplete is on, the browser automatically complete values
based on values that the user has entered before.

<form action="/action_page.php" autocomplete="on">

You might also like