Forms are the foundation of user interaction on websites. Whether it's signing up, logging in, or contacting support — forms are everywhere! In this tutorial, we’ll build a simple contact form in HTML and apply input validation using the required and maxlength attributes.
You don’t need any JavaScript or backend setup to follow this guide. This is perfect for beginners who want to understand how HTML handles basic form validation without external code.
🧰 What We’ll Learn
-
Creating a basic HTML form
-
Adding
input,textarea, andbuttonelements -
Using the
requiredattribute to make fields mandatory -
Using the
maxlengthattribute to limit input length -
Structuring the form for accessibility and usability
🔧 Step-by-Step Tutorial: Build the Contact Form
Let’s now dive into building the contact form step by step.
🔹 Step 1: Set up the Basic HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Us Form</title>
</head>
<body>
<!-- Contact form will go here -->
</body>
</html>
✅ Explanation:
-
<!DOCTYPE html>: Declares the HTML5 document type. -
<html lang="en">: Sets the language to English. -
<meta charset="UTF-8">: Supports all characters (e.g., emojis, non-English text). -
<meta name="viewport" content="width=device-width, initial-scale=1">: Makes your form responsive on mobile devices. -
<title>: Sets the page title shown in the browser tab.
🔹 Step 2: Add the Form Element
Now, we’ll create the form element inside the <body> tag.
<form action="#" method="post">
<!-- Form fields will go here -->
</form>
✅ Explanation:
-
<form>: The container for all form elements. -
action="#": Tells the form where to send data. Here, we use#as a placeholder. -
method="post": Sends the data securely using the POST method.🔹 Step 3: Add Name Input Field (withrequiredandmaxlength) -
<label for="name">Full Name:</label> <input type="text" id="name" name="name" required maxlength="50">
🔹 Step 4: Add Email Input Field (with Validation)
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required maxlength="100">
✅ Explanation:
-
type="email": Tells the browser to expect a valid email format (e.g.,someone@example.com). -
required: Prevents empty submissions. -
maxlength="100": Caps the email address length.
Bonus: Modern browsers will automatically show an error if the user doesn’t enter a valid email.
🔹 Step 5: Add Message Field (Using <textarea>)
<label for="message">Your Message:</label>
<textarea id="message" name="message" required maxlength="300" rows="5" cols="30"></textarea>
✅ Explanation:
-
<textarea>: Used for multi-line input (like a message). -
required: Prevents form submission if the message is empty. -
maxlength="300": Limits the message length to 300 characters. -
rowsandcols: Define the visible size of the box (not the character limit).
🔹 Step 6: Add the Submit Button
<button type="submit">Send Message</button>
✅ Explanation:
-
<button type="submit">: Submits the form data. -
The text "Send Message" appears on the button.
🔹 Full HTML Contact Form Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Us Form</title>
</head>
<body>
<h2>Contact Us</h2>
<form action="#" method="post">
<label for="name">Full Name:</label><br>
<input type="text" id="name" name="name" required maxlength="50"><br><br>
<label for="email">Email Address:</label><br>
<input type="email" id="email" name="email" required maxlength="100"><br><br>
<label for="message">Your Message:</label><br>
<textarea id="message" name="message" required maxlength="300" rows="5" cols="30"></textarea><br><br>
<button type="submit">Send Message</button>
</form>
</body>
</html>
🧪 How Does Validation Work?
Let’s break down how HTML handles form validation:
| Attribute | Purpose | User Experience |
|---|---|---|
| required | Ensures the field is not left empty | Shows error if user skips it |
| type="email | Automatically checks for email format | Helps catch typos |
This built-in validation reduces user mistakes without using JavaScript or external libraries.
🎯 Bonus Tips for a Better Contact Form
-
Use placeholders:
Addplaceholder="Enter your full name"to inputs to give hints. -
Add CSS for better styling:
Use simple CSS to improve spacing and readability. -
Accessibility matters:
Always use<label>to describe each input field for screen readers. -
Test on multiple browsers:
Try Chrome, Firefox, Safari, etc., to ensure consistent validation behavior.
✅ Why Use required and maxlength?
Using these attributes makes your form:
-
User-friendly: Prevents mistakes before submission.
-
Efficient: Avoids overloading your server with unnecessary or invalid data.
-
Secure: Reduces chances of malicious input (though for security, backend validation is still essential).
📌 Conclusion
You've now built a fully functional and validated contact form using just HTML! By applying required and maxlength, you improve form usability and ensure cleaner user input — all without writing a single line of JavaScript.
This foundational knowledge is critical whether you're building simple static pages or getting ready for more advanced front-end development with frameworks.
If you found this tutorial helpful, consider sharing it or bookmarking for later. Got questions or want to see a version with CSS and JavaScript enhancements? Drop a comment or check out our next tutorial.