Scribd
Upload
19 views

HTML Forms

Uploaded by

22r11a05t5
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views

HTML Forms

Uploaded by

22r11a05t5
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 28

HTML Form

An HTML form is used to collect user input. The user input is most often sent to a
server for processing.
An HTML form is a section of a document which contains controls such as text fields, password
fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing
such as name, email address, password, phone number, etc. .

Why use HTML Form


HTML forms are required if you want to collect some data from of the site visitor.
For example: If a user want to purchase some items on internet, he/she must fill the form such
as shipping address and credit/debit card details so that item can be sent to the given address.

The <form> Element


The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.

HTML Form Syntax


1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>

HTML Form Tags


Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.


<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML 5 Form Tags


Tag Description

<datalist> It specifies a list of pre-defined options for input control.

<keygen> It defines a key-pair generator field for forms.

<output> It defines the result of a calculation.

HTML <form> element


The HTML <form> element provide a document section to take input from user. It provides
various interactive controls for submitting information to web server such as text field, text area,
password field, etc.

Note: The <form> element does not itself create a form but it is container to contain all required form
elements, such as <input>, <label>, etc.

Syntax:

1. <form>
2. //Form elements
3. </form>

HTML <input> element


The HTML <input> element is fundamental form element. It is used to create form fields, to take
input from user. We can apply different input filed to gather different information form user.
Following is the example to show the simple text input.

The <input> Element


The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices)

<input Displays a checkbox (for selecting zero or more of many


type="checkbox"> choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

Example:
1. <body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6. </body>

Output:

HTML TextField Control


The type="text" attribute of input tag creates textfield control also known as single line text field
control. The name attribute is optional, but it is required for the server side component such as
JSP, ASP, PHP etc.
The <input type="text"> defines a single-line input field for text input.
Note: If you will omit 'name' attribute then the text filed input will not be submitted to server.
1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>

Example2:
A form with input fields for text:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

HTML <textarea> tag in form


The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea>
can be specify either using "rows" or "cols" attribute or by CSS.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <form>
8. Enter your address:<br>
9. <textarea rows="2" cols="20"></textarea>
10. </form>
11. </body>
12. </html>

Label Tag in Form


It is considered better to have label in form. As it makes the code parser/browser/user friendly.
If you click on the label tag, it will focus on the text control. To do so, you need to have for
attribute in label tag that must be same as id attribute of input tag.

The <label> Element


Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read
out loud the label when the user focuses on the input element.

The <label> element also helps users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.

NOTE: It is good to use <label> tag with form, although it is optional but if you will use it, then it will
provide a focus when you tap or click on label tag. It is more worthy with touchscreens.
1. <form>
2. <label for="firstname">First Name: </label> <br/>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6. </form>
HTML Password Field Control
The password is not visible to the user in password field control.
1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password"/> <br/>
4. </form>

Output:

HTML 5 Email Field Control


The email field in new in HTML 5. It validates the text for correct email address. You must use @
and . in this field.
1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>

It will display in browser like below:


Radio Button Control:
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
The radio button is used to select one option from multiple options. It is used for selection of
gender, quiz questions etc.
If you use one name for all the radio buttons, only one radio button can be selected at a time.
Using radio buttons for multiple options, you can only choose a single option at a time.
1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="male"/>Male
4. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>
5. </form>

Example2
A form with radio buttons:

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

Checkbox Control
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
The checkbox control is used to check multiple options from given checkboxes.
1. <form>
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" value="cricket"/>
4. <label for="cricket">Cricket</label> <br>
5. <input type="checkbox" id="football" name="football" value="football"/>
6. <label for="football">Football</label> <br>
7. <input type="checkbox" id="hockey" name="hockey" value="hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>

Note: These are similar to radio button except it can choose multiple options at a time and radio button
can select one button at a time, and its display.

Example2:
A form with checkboxes:

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Submit button control
HTML <input type="submit"> are used to add a submit button on web page. When user clicks
on submit button, then form get submit to the server.
The <input type="submit"> defines a button for submitting the form data to a form-
handler.
The form-handler is typically a file on the server with a script for processing input data.
The form-handler is specified in the form's action attribute.
syntax:
1. <input type="submit" value="submit">
The type = submit , specifying that it is a submit button
The value attribute can be anything which we write on button on web page.
The name attribute can be omit here.
Example:
1. <form>
2. <label for="name">Enter name</label><br>
3. <input type="text" id="name" name="name"><br>
4. <label for="pass">Enter Password</label><br>
5. <input type="Password" id="pass" name="pass"><br>
6. <input type="submit" value="submit">
7. </form>

Example2:
A form with a submit button:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
HTML <fieldset> element:
The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped elements.

Example:
1. <form>
2. <fieldset>
3. <legend>User Information:</legend>
4. <label for="name">Enter name</label><br>
5. <input type="text" id="name" name="name"><br>
6. <label for="pass">Enter Password</label><br>
7. <input type="Password" id="pass" name="pass"><br>
8. <input type="submit" value="submit">
9. </fieldset>
10. </form>

HTML <select> tag


HTML <select> tag is used to create a drop down list with multiple options. The <option>
element is nested within <select> tag for defining options in a list.

The <optgroup> element can be used for grouping related options in a list.

If you want to send data to server then use <select> tag within <form> element.

Syntax
1. <select>
2. <option></option>
3. </select>
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML select Tag</title>
5. <style>
6. .img{
7. background-image: url("india.jpg");
8. background-size: cover;
9. background-position: center;
10. height: 100%;
11. width: 100%;
12. background-repeat: no-repeat;
13. position: fixed;
14. top: 0;
15. left: 0;
16. }
17. </style>
18. </head>
19. <body>
20. <div class="img">
21. <h2>Example of select tag</h2>
22. <form>
23. <label>Choose your Favorite city in India</label>
24. <select>
25. <option>New Delhi</option>
26. <option>Indore</option>
27. <option>Jaipur</option>
28. <option>Jodhpur</option>
29. <option>Chandigarh</option>
30. <option>Mumbai</option>
31. <option>Bengaluru</option>
32. <option>Lucknow</option>
33. <option>Amritsar</option>
34. </select>
35. </form>
36. </div>
37. </body>
38. </html>

HTML Selected Attribute


The Selected is an attribute of the <option> element, which is used to define the default
selection in a dropdown-list.

When any option uses this attribute, then that option should be pre-selected and displayed first,
when the web page loads.

Syntax
1. <option selected>

Example: The following example uses the Selected attribute in the <option> tag with
the Jaguar value.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>
5. Example of selected attribute
6. </title>
7. </head>
8. <body>
9. <h4> Select Your favourite Car from the following given options: </h4>
10. <br>
11. <select name="cars">
12. <option value="Mercedes"> Mercedes </option>
13. <option value="Lamborghini"> Lamborghini </option>
14. <!-- In the following option tag we specify the selected attribute for the Jaguar value, which is di
splay as selected on the web page by default. -->
15. <option value="Jaguar" selected> Jaguar </option>
16. <option value="BMW" > BMW </option>
17. <option value="Audi"> Audi </option>
18. </select>
19. </body>
20. </html>
HTML Form Example
Following is the example for a simple form of registration.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <h2>Registration form</h2>
8. <form>
9. <fieldset>
10. <legend>User personal information</legend>
11. <label>Enter your full name</label><br>
12. <input type="text" name="name"><br>
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br>
15. <label>Enter your password</label><br>
16. <input type="password" name="pass"><br>
17. <label>confirm your password</label><br>
18. <input type="password" name="pass"><br>
19. <br><label>Enter your gender</label><br>
20. <input type="radio" id="gender" name="gender" value="male"/>Male <br>
21. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>
22. <input type="radio" id="gender" name="gender" value="others"/>others <br/>
23. <br>Enter your Address:<br>
24. <textarea></textarea><br>
25. <input type="submit" value="sign-up">
26. </fieldset>
27. </form>
28. </body>
29. </html>

Output:
HTML Form Attributes:
The Action Attribute
The action attribute defines the action to be performed when the form is submitted.

Usually, the form data is sent to a file on the server when the user clicks on the submit
button.

In the example below, the form data is sent to a file called "action_page.php". This file
contains a server-side script that handles the form data:

Example
On submit, send form data to "action_page.php":

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">

Tip: If the action attribute is omitted, the action is set to the current page.

The Target Attribute


The target attribute specifies where to display the response that is received after
submitting the form.
The target attribute can have one of the following values:
Value Description

_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

_parent The response is displayed in the parent frame

_top The response is displayed in the full body of the window

framename The response is displayed in a named iframe


The default value is _self which means that the response will open in the current window.

Example
Here, the submitted result will open in a new browser tab:
<form action="/action_page.php" target="_blank">
The Method Attribute
The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").

The default HTTP method when submitting form data is GET.

Example
This example uses the GET method when submitting the form data:

<form action="/action_page.php" method="get">

Example
This example uses the POST method when submitting the form data:

<form action="/action_page.php" method="post">

Notes on GET:

 Appends the form data to the URL, in name/value pairs


 NEVER use GET to send sensitive data! (the submitted form data is visible in the
URL!)
 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to bookmark the result
 GET is good for non-secure data, like query strings in Google

Notes on POST:

 Appends the form data inside the body of the HTTP request (the submitted form data
is not shown in the URL)
 POST has no size limitations, and can be used to send large amounts of data.
 Form submissions with POST cannot be bookmarked

Tip: Always use POST if the form data contains sensitive or personal information!

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.
Example:
A form with autocomplete on:
<form action="/action_page.php" autocomplete="on">

Novalidate Attribute
The novalidate attribute is a boolean attribute.
When present, it specifies that the form-data (input) should not be validated when
submitted.
Example
A form with a novalidate attribute:
<form action="/action_page.php" novalidate>

List of All <form> Attributes:


Attribute Description

accept- Specifies the character encodings used for form submission


charset

action Specifies where to send the form-data when a form is submitted

autocomplet Specifies whether a form should have autocomplete on or off


e

enctype Specifies how the form-data should be encoded when submitting it to the
server (only for method="post")

method Specifies the HTTP method to use when sending form-data

name Specifies the name of the form

novalidate Specifies that the form should not be validated when submitted

rel Specifies the relationship between a linked resource and the current document

target Specifies where to display the response that is received after submitting the
form

HTML Form Elements:


The HTML <form> element can contain one or more of the following form elements:
 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>

The <input> Element


One of the most used form elements is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.

Example
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

The <button> Element


The <button> element defines a clickable button:

Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
This is how the HTML code above will be displayed in a browser:

Click Me!
Note: Always specify the type attribute for the button element. Different browsers may use
different default types for the button element.

The <datalist> Element


The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.

Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
The <output> Element
The <output> element represents the result of a calculation (like one performed by a script).

Example
Perform a calculation and show the result in an <output> element:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>

HTML Input Types:


Here are the different input types you can use in HTML:
 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">

Tip: The default value of the type attribute is "text".


Input Type Submit
<input type="submit"> defines a button for submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

Input Type Reset


<input type="reset"> defines a reset button that will reset all form values to their default
values:

Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
If you change the input values and then click the "Reset" button, the form-data will be reset
to the default values.

Input Type Date


The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.

Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>

You can also use the min and max attributes to add restrictions to dates:

Example
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
Input Type Datetime-local
The <input type="datetime-local"> specifies a date and time input field, with no time
zone.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

Input Type Image


The <input type="image"> defines an image as a submit button.
The path to the image is specified in the src attribute.

Example
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

Input Type File


The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

Example
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Input Type Hidden
The <input type="hidden"> defines a hidden input field (not visible to a user).
A hidden field lets web developers include data that cannot be seen or modified by users
when a form is submitted.
A hidden field often stores what database record that needs to be updated when the form is
submitted.

Note: While the value is not displayed to the user in the page's content, it is visible (and
can be edited) using any browser's developer tools or "View Source" functionality. Do not
use hidden inputs as a form of security!

Example
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>

Input Type Number


The <input type="number"> defines a numeric input field.
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to
5:
Example
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
Input Restrictions:
Here is a list of some common input restrictions:
Attribute
Description

checked Specifies that an input field should be pre-selected when the page loads
(for type="checkbox" or type="radio")

disabled Specifies that an input field should be disabled

max Specifies the maximum value for an input field

maxlength Specifies the maximum number of character for an input field

min Specifies the minimum value for an input field

pattern Specifies a regular expression to check the input value against

readonly Specifies that an input field is read only (cannot be changed)

required Specifies that an input field is required (must be filled out)


size Specifies the width (in characters) of an input field

step Specifies the legal number intervals for an input field

value Specifies the default value for an input field

You will learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a value from 0 to
100, in steps of 10. The default value is 30:

Example
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" valu
e="30">
</form>

Input Type Search


The <input type="search"> is used for search fields (a search field behaves like a regular
text field).

Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Input Type Tel:
The <input type="tel"> is used for input fields that should contain a telephone number.

Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Input Type Time


The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.

Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
The Name Attribute for <input>
Notice that each input field must have a name attribute to be submitted.
If the name attribute is omitted, the value of the input field will not be sent at all.

You might also like