HTML Forms

Have you ever wondered how HTML forms can be used in web development? One thing that always fascinates me as I explore the dynamic world of web design is how adaptable HTML forms are. It stands out as a vital tool in the web developer's work process. It enables programmers like us to create dynamic user interfaces that adjust to the growth.

So, join me as I explore HTML form design examples with code to uncover its functionalities and best practices along the way.

What are HTML Forms?

A basic HTML form is a digital copy of paper forms you fill out in person. It's an interactive website component that lets users submit information and transmit it to the website's server for processing.

Syntax:

<form>
form elements…
</form>

Code:

<form>
<label for="name:">Enter your name: </label><br>
<input type="text" name="name" required>
<br>
<label for="id">Enter your ID: </label><br>
<input type="text" name="email" required>
<br>
<label for="email">email: </label><br>
<input type="text" name="email" required>
<br>
<label for="password">Enter your password: </label><br>
<input type="text" name="password" required>
<br>
<label for="contact">Enter your contact no: </label><br>
<input type="text" name="contact" required>
<br>
<input type="submit" value="Login">
</form>

HTML forms are crucial facets of websites that allow users to input and submit data. It promotes user engagement with websites, enabling activities ranging from essential user feedback submissions to complicated e-commerce transactions. Understanding how to generate and use these forms is crucial for web development and developing user-friendly interfaces.

Benefits of HTML Forms

• User Interaction: Enables users to engage with websites by offering input areas for entering data. This allows users to enter login credentials and complete online transactions.
• Functionality: Provides functionality that enhances user experience. They enable user input validation to guarantee that the data submitted is accurate and complete.
• Versatility: It is adaptable and may be adjusted to fit varied objectives and design needs. The adaptability enables the construction of user-friendly interfaces that cater to the individual demands of varied audiences.
• Accessibility: Properly designed HTML forms contribute to the accessibility of websites for individuals with impairments. Some accessibility standards offer features like informative labels and alternate language for form components.

Now, let's dive into the types of HTML form elements.

Types of Elements in HTML Forms

Text Input Fields

Code:

<input type="password" name="pwd" value=" Bob124”>

Text Input Fields

Text input fields collect single-line text input from consumers. They're great for gathering information like names, email addresses, and search queries.

Textarea

Textareas are perfect for recording lengthy messages, comments, or descriptions. They are typically used in contact forms, comment sections, and message boxes.

Code:

<textarea rows="15" cols="30"> Write something here…</textarea>

Dropdown Menus

Dropdown menus offer users a list of alternatives to pick from. They're handy for selecting items from categories or choosing preferences.

An online purchasing website uses HTML form code so visitors can select their preferred payment method from a dropdown menu.

Code:

<form>
<label> Choose Payment method </label>
<select>
<option value = "UPI"> UPI </option>
<option value = "card"> Credit Card </option>
<option value = "card"> Debit Card </option>
</select>
</form>

Radio Buttons

When a customer must select just one choice from a set of options, an HTML form radio button is used. They're ideal for picking preferences with mutually exclusive possibilities.

Users can select their preferred mode of transport using radio buttons on a survey form.

Code:

<form>
<p>Please select mode of transportation:</p>
<input type="radio" id="mode1" name="mode1">
<label for="mode1">Bike</label><br>
<input type="radio" id="mode2" name="mode2">
<label for="mode2">Car</label><br>
<input type="radio" id="mode3" name="mode3">
<label for="mode3">Train</label><br><br>

<input type="submit" value="Submit">
</form>

Checkboxes

Checkboxes allow users to select one or more choices from a list. They're typically used for selecting numerous things or signaling preferences.

A subscription form on a website allows visitors to specify their interests by selecting boxes for subjects they wish to get information about. It is the best HTML form example.

Code:

<form>
<p> Confirm your Plan </p>
<input type="checkbox" id="plan1" name="plan1" value="Basic">
<label for="plan1"> Basic</label><br>
<input type="checkbox" id="plan2" name="plan2" value="Pro">
<label for="vehicle2"> Pro</label><br>
<input type="checkbox" id="plan3" name="plan3" value="Premium ">
<label for="vehicle3"> Premium</label><br><br>
<input type="submit" value="Submit">
</form>

Submit Button

Submit buttons prompt the submission of form input to the server for processing. They're needed for submitting orders, sending communications, or enrolling accounts.

Code:

<form>
<label for="name">Enter Name:</label>
<input type="text" name="name"><br><br>
<label for="state">Enter State:</label>
<input type="text" state="state"><br><br>
<label for="city">Enter City:</label>
<input type="text" city="city"><br><br>
<input type="submit" value="Submit">
</form>

Reset Button

Reset buttons clear all the input fields in a form, allowing users to start again. They're essential for letting users reverse changes or return the form to its initial state.

Code:

<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="pin">Enter a PIN:</label>
<input type="text" id="pin" name="pin" maxlength="4"><br><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>

Before Reset:

index.html
1- <form>
2
Run © Debug ■Stop ▸ Share H Save {}Beautify 土
3 <label for="email">Enter your email:</label>
4 <input type="email" id="email" name="email"><br><br>
5
6 <label for="pin">Enter a PIN:</label>
7 <input type="text" id="pin" name="pin""><br><br>
8
9 <input type="reset" value="Reset">
10 <input type="submit" value="Submit">
11
12 </form>
13
Enter your email: [xyz@email.com
Enter a PIN:
Reset Submit
input

After Reset:

Run
O Debug
Stop Share H Save {} Beautify 土
index.html
i 1- <form>
2
3 <label for="email">Enter your email:</label>
4 <input type="email" id="email" name="email"><br><br>
5
6 <label for="pin">Enter a PIN:</label>
7 <input type="text" id="pin" name="pin" maxlength="4"><br><br>
8
9 <input type="reset" value="Reset">
10 <input type="submit" value="Submit">
11
12 </form>
13
Enter your email:
Enter a PIN:
Reset Submit
input

Hidden Input Fields

Hidden input fields hold data transmitted with the form submission but are not visible to the user. They can transfer information like session tokens, user IDs, or tracking data.

Example: A form for sending feedback contains a hidden input field to keep the user's unique identifier, allowing the website to track feedback contributions linked to each user.

Syntax:

<input type="hidden">

Code:

<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>
<p><strong>Note:</strong> </strong> The data imputed will not be shown to the user, but the data is sent when the form is submitted</p>

Understanding the purpose and suitable usage of each type element of HTML forms help web developers to construct intuitive and effective user interfaces suited to the unique demands of their websites or applications.

Understanding Validation and Error Notification in HTML Form

Validation of HTML Forms:

1. HTML form validation Javascript is a built-in component of an HTML form, which lets browsers verify input fields against predefined standards before form submission.
2. Assists in ensuring users submit accurate data, thus lowering the possibility of mistakes and enhancing data quality.
3. HTML properties like needed, pattern, min, max, email, URL, etc. can be validated.
4. When a user fills out a form with incorrect information, the browser stops the form from submitting and shows error messages to the user, asking them to fix their input.
5. HTML form validation happens client-side, giving users immediate feedback without involving the server.

Code:

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

After clicking on the “submit” button,

Submitted Form Data
Your input was received as:
fname=xyz
The server has processed your input and returned this answer.

You can also use HTML forms with Bootstrap. Bootstrap is a well-liked front-end framework that offers pre-made CSS and JavaScript elements for making website UIs responsive and aesthetically pleasing. Furthermore, you can elevate your web design game with a Bootstrap HTML form template.

Error Notifications:

1. Users see error messages when their input does not match the requirements for validation.
2. It should be simple for users to recognize and fix problems when error warnings are shown next to the relevant input area.
3. Input field titles may be changed, and JavaScript can be used to perform validation and show personalized error messages.
4. A unified user experience should be maintained using the same style and layout for error messages throughout the form.
5. Recommendations or examples should accompany error warnings to help users understand how to fix their input more efficiently.
6. Error messages must be readable and visible to all users, including screen readers or assistive devices.
7. Understanding HTML form validation and error signals is essential for reliable and easy-to-use online forms. By establishing validation criteria and clear error messages, you can guarantee data correctness and improve user experience.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Demo</title>
<style>

.container {
padding: 15px;
width: 400px;
}

label,
input {
margin-bottom: 10px;
}

button {
float: left;
margin-right: 10px;

}
</style>
</head>
<body>

<h1>Error Notification</h1>

<br><br>
<div class="container">
<div>
<label>Username:</label>
<input type="text" size="40">
</div>
<div>
<label>Phone no:</label>
<input type="text"
id="number" size="40">
<span id="error"></span>
</div>
<button type="submit"
onclick="errorMessage()">
Submit
</button>
</div>
</body>
<script>
function errorMessage() {
var error = document.getElementById("error")
if (isNaN(document.getElementById("number").value))
{

// Changing content and color of content
error.textContent = "Please enter a valid number"
error.style.color = "red"
} else {
error.textContent = ""
}
}
</script>
</html>

Correct Information:

Correct Information:

Incorrect Information:

In Summary

HTML forms include a range of form components, and it is crucial to attain expertise in it. Adhering to proper guidelines is vital to build HTML forms to guarantee usability and efficiency.

I recommend you check out upGrad to gain a deeper understanding of HTML forms and various use cases. The many tutorials and courses on HTML will aid your web development skills.

Frequently Asked Questions

1. Can we use two forms in HTML?

Multiple forms can be used on a single HTML page, each with its input fields and submission actions.

2. How many form methods are there in HTML?

There are two form methods in HTML: GET and POST. They determine how form data is sent to the server.

3. What is a form in HTML?

HTML forms are interactive elements on a web page that lets users enter and submit data.

4. How can HTML form work?

Various online applications employ HTML forms for functions such as user registration, login, feedback posting, and e-commerce transactions.

5. How can you create HTML forms?

With input elements like <input>, <textarea>, and <select> for user input and frequent buttons for submission, HTML forms are made with the <form> element.

6. Where are HTML forms used?

They are used in surveys, e-commerce order and registration forms, website contact forms, and any other situation where user input submission is required.

7. What is the purpose of HTML forms?

HTML forms are used to gather user input on websites, making it easier for users to submit data, register, and provide feedback.

8. What is the advantage of forms in HTML?

HTML forms benefit from supporting accessibility features, facilitating organized data collection, facilitating interactivity, being easy to process, and improving general usability in web development.