HTML Forms
It's a crucial part of web development as they allow users to input data and interact with web pages.
Forms are used for various purposes, such as submitting information, performing searches, and collecting user data.
They typically consist of input fields, buttons, and other form elements that enable users to enter and submit data to a server for processing.
Example
<!DOCTYPE html>
<html>
<head>
<title>Sample Form</title>
</head>
<body>
<h2>Contact Us</h2>
<form action="/submit_form.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<input type="submit" value="Submit" />
</form>
</body>
</html>
HTML Form Elements
- <label>
- <input>
- <textarea>
- <select>
- <button>
- <label>
- <fieldset>
- <legend>
Input Element
Description
Example
<label>
Used to associate a label with an input element, such as <input>, <textarea>, <select>, or other form elements
Syntax: <label for="input_id">Label Text</label>
<textarea>
A multi-line text input area that allows users to enter longer text or comments
Syntax: <textarea name="comments" rows="4" cols="50"></textarea>
<select>
Creates a drop-down list of options from which users can select one or more items. Inside <select>, you use <option> elements to define the individual selectable items.
Syntax: <select name="country"> <option value="USA">United States</option> </select>
<datalist>
Defines a list of predefined options for an <input> element with the list attribute
Syntax: <datalist id="fruits"><option value="Apple"><option value="Banana"></datalist>
<output>
Represents the result of a calculation or a user action. It is often used in combination with JavaScript to display computed values or responses
Syntax: <output name="result"></output>
<option>
Defines an option within a <select> element or a <datalist>
Syntax: <select name="city"><option value="New York">New York</option><option value="Los Angeles">Los Angeles</option></select>
<button>
A clickable button that can perform various actions, such as triggering JavaScript functions or submitting a form
Syntax:
<button type="button" onclick="alert('Hello!')">Click me</button>
<fieldset> and <legend>
Used to group related form elements together, with the <legend> providing a caption for the fieldset.
Syntax: <fieldset> <legend>Contact Information</legend> </fieldset>
<optgroup>
Groups related options within a <select> element
Syntax: <optgroup label="Citrus"><option value="Orange">Orange</option></optgroup>
The <input> Element
The HTML <input> element is a versatile form control that allows users to input data on a web page.
It is used to create various types of form fields, such as text fields, checkboxes, radio buttons, buttons, and more.
The appearance and behavior of the input element can vary depending on the type attribute you assign to it.
Syntax: <input type="..." name="..." value="..." />
Example
<form action="/submit_form.php" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<input type="submit" value="Submit" />
</form>The <input> Types
Here are the input types
Input Type
Description
Example
text
Creates a single-line text input field for users to enter plain text
Syntax: <input type="text"/>
password
Creates a password input field that masks the characters entered for security
Syntax: <input type="password"/>
Provides an input field specifically designed for entering email addresses with built-in email validation
Syntax: <input type="email"/>
checkbox
Creates a checkbox that allows users to select one or more options from a list
Syntax: <input type="checkbox"/>
radio
Creates a set of radio buttons that allow users to select only one option from a list
Syntax: <input type="radio"/>
tel
Creates a field that is specifically designed for entering telephone numbers
Syntax: <input type="tel" name="phoneNumber">
image
Creates a clickable image that acts as a submit button within a form
Syntax: <input type="image" src="image_path.png" alt="Image Description" name="submitImage">
submit
Creates a button that, when clicked, submits the form data to the server for processing
Syntax: <input type="submit"/>
reset
Creates a button that, when clicked, resets the form fields to their default values
Syntax: <input type="reset"/>
file
Creates a file input field that allows users to upload files from their local system
Syntax: <input type="file"/>
week
used to allow users to select a specific week within a calendar month
Syntax: <input type="week"/>
month
Creates a field for entering only the month and year, without specifying a specific day
Syntax: <input type="month" name="monthInput">
search
create a field that is specifically designed for entering search queries
Syntax: <input type="search" name="searchQuery">
url
Used for entering website URLs. Some browsers provide URL validation for this input type
Syntax: <input type="url"/>
Range
Creates a slider control to select a value within a specified range
Syntax: <input type="range"/>
button
A generic button that can be used for JavaScript interactions
Syntax: <input type="button"/>
hidden
Hides the input field from the user but can store data used by scripts
Syntax: <input type="hidden"/>
datetime-local
Creates a field for entering both date and time values, with the time displayed in a 24-hour format
Syntax: <input type="datetime-local" name="dateTimeInput">
Example
<h2>Registration Form</h2>
<form action="/submit_form.php" method="POST">
<label for="full_name">Full Name:</label>
<input type="text" id="full_name" name="full_name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female" required>
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other" required>
<label for="other">Other</label>
<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>
<option value="australia">Australia</option>
<option value="other">Other</option>
</select>
<br>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<br>
<input type="submit" value="Submit">
</form>
