HTML Form
An HTML form is a section of a web page that contains interactive controls for users to input data. This data can be sent to a server for processing. Forms are a key component in web applications, enabling user interaction and data submission.
A portion of a document including controls like text fields, password
fields, checkboxes, radio buttons, submit buttons, menus, and so on is
called an HTML form.
An HTML form makes it easier for the user to enter information such a
name, email address, password, phone number, etc. that needs to be
transmitted to the server for processing. HTML forms are required if you
want to collect some data from the site visitor.
Syntax:
<form>
<input type="value">
</form>
Uses of Form Tags
1. <form>
The <form> tag is used to create an HTML form for user input. It
acts as a container for input elements like text fields, checkboxes,
radio buttons, etc.
Attributes:
- action: Specifies where to send the form data when submitted (the URL of the server).
- method: Specifies the HTTP method to use when sending form data (GET or POST).
Example:
<form action="/submit" method="post">
<!-- Form elements go here -->
</form>
2. <label>
The <label> tag defines a label for an <input> element.
Clicking on the label will focus/activate the corresponding input
element.
Attributes:
- for: Specifies which form element a label is bound to (the ID of the input element).
Example:
<label for="username">Enter your name:</label>
<input type="text" id="username" name="username">
.png)
3. <textarea>
The <textarea> tag is used to create a multi-line text input
field.
Attributes:
- name: Specifies the name of the textarea.
- rows and cols: Specifies the visible number of lines and the width of the textarea.
Example:
<label for="username">Type some text
here:</label><br>
<textarea name="message" rows="5"
cols="40"></textarea>
.png)
4. <select> and <option>
The <select> tag creates a drop-down list. The <option> tag
defines the options that can be selected.
Attributes:
- name: Specifies the name of the drop-down list.
Example:
<label for="username">Select any
option:</label><br>
<select name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
</select>
.png)
5. <button>
The <button> tag is used to create a clickable button.
Attributes:
- type: Specifies the type of button (submit, reset, button).
Example:
<button type="submit">Submit</button>
<button type="reset">Reset</button>
.png)
6. <fieldset>
It groups the related element in a form. It defines a caption for a
<fieldset> element.
Example:
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter
name</label><br>
<input type="text" id="name"
name="name"><br>
<label for="pass">Enter
Password</label><br>
<input type="Password" id="pass"
name="pass"><br>
</fieldset>
.png)
Program:
<!DOCTYPE
html>
<head>
<title>Sample Form</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label
for="email">Email:</label>
<input
type="email"
id="email"
name="email"><br><br>
<label
for="message">Message:</label><br>
<textarea
id="message"
name="message"
rows="4"
cols="50"></textarea><br><br>
<label
for="gender">Gender:</label><br>
<input
type="radio"
id="male"
name="gender"
value="male">
<label
for="male">Male</label><br>
<input
type="radio"
id="female"
name="gender"
value="female">
<label
for="female">Female</label><br><br>
<label
for="newsletter">Subscribe to
newsletter:</label>
<input
type="checkbox"
id="newsletter"
name="subscribe"
value="yes"><br><br>
<label
for="country">Country:</label>
<select
id="country"
name="country">
<option
value="usa">USA</option>
<option
value="canada">Canada</option>
<option
value="uk">UK</option>
</select><br><br>
<fieldset>
<legend>User Information:</legend>
<label
for="name">Password</label><br>
<input
type="text"
id="name"
name="name"><br>
<label
for="pass">Conform
password</label><br>
<input
type="Password"
id="pass"
name="pass"><br>
</fieldset><br><br>
<button
type="submit">Submit</button>
<button
type="reset">Reset</button>
</form>
</body>
</html>
Output:
.png)
HTML <input> Element:
The HTML <input> element is one of the most widely used form
elements, allowing users to enter data. This element can take many different
forms depending on the value of its type attribute.
Uses of <input> Element
User Input: The primary purpose of the <input> element is to
collect user input. This can range from simple text and numbers to complex
file uploads and date selections.
Creating Interactive Forms: By combining different types of
<input> elements, you can create complex and interactive forms to
gather various kinds of data.
User Authentication: <input> elements are commonly used in
login forms to capture username and password information.
Data Submission: Forms with <input> elements often submit
data to a server for processing, such as sending messages, signing up for
newsletters, or completing transactions.
Common Attributes of <input> Element
- type: Specifies the type of input (e.g., text, password, email, etc.).
- name: Associates a name with the input, which is sent to the server with the form data.
- value: Defines an initial value or the current value of the input.
- id: Provides a unique identifier for the input.
- placeholder: Offers a hint to the user about what can be entered in the input.
Example:
<input type="text">
<input type="checkbox" name="Username">
<input type="submit" value="Submit">
<input type="email" value="email" id="email">
Common Input Tag Type Attribute Value:
- text
- number
- password
- date
- datetime-local
- range
- color
- checkbox
- radio
- file
- button
- reset
- submit
Types of <input> Elements:
Here are detailed explanations of different types of <input>
elements:
1. Text Input (<input type="text">)
A single-line text input field for general text entry.
Example:
<label>Username:</label>
<input type="text" name="username">
.png)
2. Number (<input type="number">)
An input field for numeric values.
Example:
<label>Number:</label>
<input type="number" name="number">
<input type="number" name="number" min="1" max="10">
.png)
3. Password (<input type="password">)
A password input field where the input text is hidden.
Example:
<label>Password:</label>
<input type="password" name="password">
.png)
4. Email (<input type="email">)
An input field for email addresses.
Example:
<form>
<label >Email Address:</label>
<input type="email" name="email">
</form>
.png)
5. Date (<input type="date">)
An input field for selecting a date.
Example:
<label>Date:</label>
<input type="date" name="date">
.png)
6. Datetime-local (<input type="datetime-local">)
An input field for selecting a date and time (local).
Example:
<label>Datetime:</label>
<input type="datetime-local" name="datetime-local">
.png)
7. Range (<input type="range">)
An input field for selecting a value from a range of values.
Example:
<label>Range:</label>
<input type="range" name="range" min="0" max="100">
.png)
8. Color (<input type="color">)
An input field for selecting a color.
Example:
<label>Color:</label>
<input type="color" name="color">
.png)
9. Checkbox (<input type="checkbox">)
An input field for a checkbox, allowing multiple selections.
Example:
<label>Languages:</label><br>
<input type="checkbox"
name="subscribe">HTML<br>
<input type="checkbox"
name="subscribe">CSS<br>
<input type="checkbox"
name="subscribe">JavaScript<br>
.png)
10. Radio (<input type="radio">)
An input field for radio buttons, allowing a single selection from a
group.
Example:
<label>Gender:</label><br>
<input type="radio" name="gender" value="male">
<label>Male</label><br>
<input type="radio" name="gender" value="female">
<label for="female">Female</label>
.png)
11. File (<input type="file">)
An input field for file uploads.
Example:
<label>Upload a file:</label><br>
<input type="file" name="file">
.png)
12. Button (<input type="button">)
A clickable button, often used with JavaScript for additional
functionality.
Example:
<input type="button" value="Click me" onclick="alert('Button
clicked!')">
.png)
13. Reset (<input type="reset">)
A button that resets all form fields to their default values.
Example:
<input type="reset" value="Reset">
.png)
14. Submit
(<input type="submit">)
A button that submits the form data to the server.
Example:
<input type="submit" value="Submit">
.png)
Example 1:
<!DOCTYPE html>
<head>
<title>Example Form</title>
</head>
<body>
<h1>Example Form</h1>
<form action="/submit">
<label
for="text">Text:</label>
<input type="text" id="text"
name="text"><br><br>
<label>Number:</label>
<input type="number"
name="number"><br><br>
<label>Password:</label>
<input type="password"
name="password"><br><br>
<label>Email:</label>
<input type="email"
name="email"><br><br>
<label>Date:</label>
<input type="date"
name="date"><br><br>
<label>Datetime:</label>
<input type="datetime-local"
name="datetime-local"><br><br>
<label>Range:</label>
<input type="range" name="range"
min="0" max="100"><br><br>
<label>Color:</label>
<input type="color"
name="color"><br><br>
<label>Subscribe:</label>
<input type="checkbox"
name="subscribe" value="newsletter"><br><br>
<label>Gender:</label><br>
<input type="radio" name="gender"
value="male">
<label>Male</label><br>
<input type="radio" name="gender"
value="female">
<label>Female</label><br><br>
<label>Upload a
file:</label>
<input type="file"
name="file"><br><br>
<input type="button" value="Click me"
onclick="alert('Button clicked!')"><br><br>
<input type="reset"
value="Reset"><br><br>
<input type="submit"
value="Submit">
</form>
</body>
</html>
Output:
.png)
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<form>
<h1>HTML FORMS</h1>
<label>Username:</label>
<input type="text"><br>
<label>Password:</label>
<input type="password"><br>
<label>Phone Number:</label>
<input type="number"><br>
<label>D.O.B:</label>
<input type="date"><br>
<label>Email ID:</label>
<input type="email"><br>
<label>Resume:</label>
<input type="file"><br>
<label>Hobbies:</label><br>
<label>Gardening</label><input
type="checkbox">
<label>Painting</label><input
type="checkbox">
<label>Cricket</label><input
type="checkbox">
<label>Music</label><input
type="checkbox"><br>
<label>Gender:</label>
<label>Male</label>
<input type="radio">
<label>Female</label>
<input type="radio">
<label>Others</label><input
type="radio"><br>
<label>Price Range</label><input
type="range"><br>
<label>Choose Background
Color:</label>
<input type="color"><br>
<label>Website URL:</label><input
type="text"><br>
<label>Permanent
Address*:</label><textarea></textarea><br>
<input type="submit">
<input type="reset">
<input type="submit">
</form>
</body>
</html>
Output:
.png)
.png&description=HTML FORM){kind=link}