HTML
HTML - Forms
- HTML Form
- What is HTML Form?
- Form Tags
- HTML Form Controls
- 1. Text Input Controls
- Single-line input controls
- Multi-line input controls
- Password input controls
- Textarea tag form
- Select Box Control
- Checkbox Control
- File Upload Box
- Button Controls
- HTML <fieldset> element:
- Radio Button Control
- Hidden Form Controls
¶HTML Form
In this tutorial you will learn how to create a form in HTML to collect user inputs.
¶What is HTML Form?
An HTML form is a section of a webpage that contains interactive controls that allow users to input data and interact with the website. It is typically created using the <form
> element in HTML and can contain various input elements such as text fields, checkboxes, radio buttons, dropdown lists, and more.
When a user submits a form, the data they entered is sent to the server for processing. This can be done using various methods, such as the GET method, which appends the form data to the URL in the address bar, or the POST method, which sends the data in the body of the HTTP request.
The HTMLThis attribute specifies the URL of the script or page that will handle the form data when the form is submitted. The value of the action attribute is typically a server-side script that will process the form data and send a response back to the user. <form>
tag is used to create an HTML form for user input.
¶Example
<form action="">
Here will be the form elements...
</form>
¶Form Tags
The HTML <form>
tag can have several attributes that control the behavior and appearance of the form. Some of the most common attributes are:
-
action
: This attribute specifies the URL of the script or page that will handle the form data when the form is submitted. The value of theaction
attribute is typically a server-side script that will process the form data and send a response back to the user. -
method
: This attribute specifies the HTTP method to be used when submitting the form data. The two most common values for this attribute are “GET” and “POST”. When themethod
is set to “GET”, the form data is appended to the URL as a query string. When themethod
is set to “POST”, the form data is sent in the body of the HTTP request. -
target
: This attribute specifies the name of the target window or frame where the response to the form submission will be displayed. The most common values for this attribute are “_blank” (to open the response in a new window) and “_self” (to open the response in the same window or frame). -
enctype
: This attribute specifies the encoding type of the form data when themethod
attribute is set to “POST”. The most common value for this attribute is “application/x-www-form-urlencoded”, which is the default encoding type. Other possible values include “multipart/form-data” (used for uploading files) and “text/plain” (used for plain text data). -
name
: This attribute specifies a name for the form, which can be used to identify the form in client-side scripts and server-side code. -
autocomplete
: This attribute controls whether or not the browser should provide autocomplete suggestions for form fields. Possible values are “on” (the default) and “off”.
¶Example of a <form>
tag with several attributes:
<form action="submit-form.php" method="post" target="_blank" enctype="multipart/form-data" autocomplete="off">
<!-- form fields go here -->
</form>
¶HTML Form Controls
HTML provides several form controls that can be used within a <form>
tag to create input fields, checkboxes, radio buttons, dropdown lists, and more. Some of the most common form controls are:
¶1. Text Input Controls
there are three types of text input controls that can be used on forms:
- Single-line input controls: These are used for inputting a single line of text, such as a name or email address. They are created using the
<input>
tag with thetype="text"
attribute. - Multi-line input controls: These are used for inputting longer blocks of text, such as comments or messages. They are created using the
<textarea>
tag. - Password input controls: These are used for inputting passwords, where the user’s input is masked for security reasons. They are created using the
<input>
tag with the type=“password” attribute.
¶Single-line input controls
Single-line input controls are used for inputting a single line of text, such as a name or email address. They are created using the <input>
tag with the type="text"
attribute.
¶Example
<!DOCTYPE html>
<head>
<title>Single-line input controls</title>
</head>
<body>
<form action="">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</form>
</body>
</html>
¶Live preview
In this example, the type="text"
attribute creates a single-line text input control, and the id
and name
attributes are used to identify the input control in the HTML and when submitting the form data to the server. The <label>
tag is used to associate a label with the input control, which can improve accessibility and usability.
Single-line input controls can also include attributes such as placeholder, maxlength
, required
, and autocomplete
to provide additional information or requirements for the user. For example, the placeholder
attribute can be used to provide a hint or example of the type of input expected, while the maxlength
attribute can limit the number of characters that can be entered. The required
attribute can be used to ensure that the user must enter a value before submitting the form, and the autocomplete
attribute can enable or disable autocomplete
for the input control.
¶Multi-line input controls
Multi-line input controls are used for inputting longer blocks of text, such as comments or messages. They are created using the <textarea>
tag.
Here’s an example of a multi-line input control:
<!DOCTYPE html>
<head>
<title>Multi-line input controls</title>
</head>
<body>
<form action="">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
</form>
</body>
</html>
¶Live preview
In this example, the ``<textarea>`` tag creates a multi-line text input control, and the `` id`` and ``name`` attributes are used to identify the input control in the HTML and when submitting the form data to the server. The ``<label>`` tag is used to associate a label with the input control, which can improve accessibility and usability.
Multi-line input controls can also include attributes such as placeholder
, maxlength
, required
, and autocomplete
to provide additional information or requirements for the user. For example, the placeholder
attribute can be used to provide a hint or example of the type of input expected, while the maxlength
attribute can limit the number of characters that can be entered. The required
attribute can be used to ensure that the user must enter a value before submitting the form, and the autocomplete
attribute can enable or disable autocomplete
for the input control.
¶Password input controls
Password input controls are used for inputting passwords, where the user’s input is masked for security reasons. They are created using the <input>
tag with the type="password"
attribute.
Here’s an example of a password input control:
<!DOCTYPE html>
<head>
<title>Password input controls</title>
</head>
<body>
<form action="">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</form>
</body>
</html>
¶Live preview
In this example, the type="password"
attribute creates a password input control, and the id
and name
attributes are used to identify the input control in the HTML and when submitting the form data to the server. The <label>
tag is used to associate a label with the input control, which can improve accessibility and usability.
Password input controls can also include attributes such as placeholder
, maxlength
, required
, and autocomplete
to provide additional information or requirements for the user. For example, the placeholder
attribute can be used to provide a hint or example of the type of input expected, while the maxlength
attribute can limit the number of characters that can be entered. The required
attribute can be used to ensure that the user must enter a value before submitting the form, and the autocomplete
attribute can enable or disable autocomplete
for the input control.
¶Textarea
tag form
This form control is used to create a multiline text input field, where the user can enter more than one line of text.
¶Example
<!DOCTYPE html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form action="">
<label for="address">Address</label><br>
<textarea name="address" id="address" cols="30" rows="4" placeholder="Give your address"></textarea>
</form>
</body>
</html>
¶Live preview
¶Select Box Control
This form control is used to create a dropdown list of options that the user can select from. The <select>
tag must be paired with one or more <option>
tags that define the individual options in the list.
¶Example
<!DOCTYPE html>
<head>
<title>Select box control</title>
</head>
<body>
<form action="">
<select id="" name="dropdown">
<option value="banana" selected>Banana</option>
<option value="mango">Mango</option>
<option value="vegetable">vegetable</option>
<option value="tomato">Tomato</option>
</select>
</form>
</body>
</html>
¶Live preview
¶Checkbox Control
Checkbox controls are used when a user needs to select one or more options from a list of options. They are created using the <input>
tag with the type="checkbox"
attribute.
Here’s an example of a checkbox control:
<!DOCTYPE html>
<head>
<title>Password input controls</title>
</head>
<body>
<form action="">
<label for="fruit">Select your favorite fruit:</label><br>
<input type="checkbox" id="apple" name="fruit" value="apple">
<label for="apple">Apple</label><br>
<input type="checkbox" id="banana" name="fruit" value="banana">
<label for="banana">Banana</label><br>
<input type="checkbox" id="orange" name="fruit" value="orange">
<label for="orange">Orange</label><br>
</form>
</body>
</html>
¶Live preview
In this example, the type="checkbox"
attribute creates a checkbox control, and the id
, name
, and value
attributes are used to identify the checkbox control in the HTML and when submitting the form data to the server. The <label>
tags are used to associate labels with the checkbox controls, which can improve accessibility and usability.
Checkbox controls can also include attributes such as checked
to indicate that the checkbox should be initially checked, and disabled
to disable the checkbox so that it cannot be selected. Multiple checkboxes can have the same name
attribute to group them together as a set of related options, and their value
attributes can be used to specify the value(s) that will be submitted to the server when the form is submitted.
¶File Upload Box
A file upload box, also known as a file input control, is used to allow users to select and upload files from their local system to a web server. It is created using the <input>
tag with the type="file"
attribute.
¶Example
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<label for="file">Choose a file:</label>
<input type="file" id="file" name="file">
</form>
</body>
</html>
¶Live preview
File upload boxes can also include attributes such as accept to specify the types of files that can be selected, and multiple to allow users to select multiple files at once. When the user selects a file and submits the form, the file is uploaded to the server along with the other form data, and can be processed and stored on the server as needed.
¶Button Controls
Button controls are used to trigger actions in a form, such as submitting the form or resetting the form fields. They are created using the <button>
tag or the <input>
tag with the type="button"
, type="submit"
, or type="reset"
attribute.
¶Examples of button controls:
<!DOCTYPE html>
<html>
<head>
<title>Button Control</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "Click" value = "Click me" />
<input type = "image" name = "image-button" src = "images/logo-sm.png" />
</form>
</body>
</html>
¶Output:
Button controls can also include attributes such as name
and value
to identify the button control in the HTML and when submitting the form data to the server. Additionally, the <button>
tag can contain other HTML elements, such as images or icons, to create more complex button controls.
¶HTML <fieldset>
element:
he HTML <fieldset>
element is used to group related form controls together into a single unit and visually separate them from other parts of the form. It is often used in conjunction with the <legend>
element, which provides a title or description for the group of form controls.
Here’s an example of how to use the <fieldset>
and <legend>
elements:
<!DOCTYPE html>
<html>
<head>
<title>Fieldset element</title>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"><br>
</fieldset>
</form>
</body>
</html
¶Output:
¶Radio Button Control
A radio button control is a type of input control used to allow users to select one option from a group of options. Radio buttons are created using the tag with the type=“radio” attribute, and each radio button in a group must have a unique name attribute and a common value attribute to identify the selected option.
Here’s an example of how to create a group of radio buttons:
<!DOCTYPE html>
<html>
<head>
<title>Radio Button Control</title>
</head>
<body>
<form>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
</body>
</html
¶Live preview
¶Hidden Form Controls
A hidden form control is a type of input control that is not visible to the user, but is used to include data in the form submission. Hidden form controls are created using the <input>
tag with the type="hidden"
attribute.
¶Example
<!DOCTYPE html>
<html>
<head>
<title>Hidden Form Controls</title>
</head>
<body>
<form>
<input type="hidden" id="secret" name="secret" value="42">
<input type="submit" value="Submit">
</form>
</body>
</html
¶Live preview
Hidden form controls are often used to include data that is needed by the server to process the form submission, but that the user does not need to see or interact with directly. For example, a hidden form control could be used to include a user ID or session token with the form data, or to include a flag indicating that a particular action should be performed on the server side.
All Tutorials in this playlist
Popular Tutorials
Categories
-
Artificial Intelligence (AI)
11
-
Bash Scripting
1
-
Bootstrap CSS
0
-
C Programming
14
-
C#
0
-
ChatGPT
1
-
Code Editor
2
-
Computer Engineering
3
-
CSS
28
-
Data Structure and Algorithm
18
-
Design Pattern in PHP
2
-
Design Patterns - Clean Code
1
-
E-Book
1
-
Git Commands
1
-
HTML
19
-
Interview Prepration
2
-
Java Programming
0
-
JavaScript
12
-
Laravel PHP Framework
37
-
Mysql
1
-
Node JS
1
-
Online Business
0
-
PHP
28
-
Programming
8
-
Python
12
-
React Js
19
-
React Native
1
-
Redux
2
-
Rust Programming
15
-
SEO - Search Engine Optimization
1
-
Tailwind CSS
1
-
Typescript
10
-
Uncategorized
0
-
Vue JS
1
-
Windows Operating system
1
-
Woocommerce
1
-
WordPress Development
2
Tags
- Artificial Intelligence (AI)
- Bash Scripting
- Business
- C
- C Programming
- C-sharp programming
- C++
- Code Editor
- Computer Engineering
- CSS
- Data Structure and Algorithm
- Database
- Design pattern
- Express JS
- git
- Git Commands
- github
- HTML
- Java
- JavaScript
- Laravel
- Mathematics
- MongoDB
- Mysql
- Node JS
- PHP
- Programming
- Python
- React Js
- Redux
- Rust Programming Language
- SEO
- TypeScript
- Vue JS
- Windows terminal
- Woocommerce
- WordPress
- WordPress Plugin Development