Learn step-by-step how to create a user-friendly contact form in HTML with built-in input validation using required and maxlength attributes. Perfect for beginners.

Build a Contact Form with Input Validation Attributes (`required`, `maxlength`) in HTML

Creating a contact form is one of the first projects many beginners try in HTML. It allows users to send their name, email, message, and other information to a website owner.

🔥 Read with Full Features on Our Website

In this tutorial, you will build a simple contact form and learn how to use two powerful HTML validation attributes:

required – ensures the user doesn’t leave a field empty
maxlength – limits the number of characters a user can enter

Let’s get started step-by-step! ✅

🔹 Step 1: Basic HTML Structure

First, every HTML page needs a basic structure.

🔍 Explanation:

<!DOCTYPE html>: Declares the document is HTML5.
Google Advertisement

<html lang="en">: Sets language to English.
<head>: Contains metadata like the page title.
<body>: Where the actual visible content goes.

🔹 Step 2: Add a Form Element

🔍 Explanation:

<form>: Starts the form.
action="#": Normally, this is where the data is sent. For now, we leave it as # since we’re not connecting to a server.
method="post": Specifies how form data will be sent.

🔹 Step 3: Add Input Fields with Validation

Here’s a simple contact form:

<form action="#" method="post">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name" required maxlength="50"><br><br>

  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required maxlength="100"><br><br>

  <label for="message">Message:</label><br>
  <textarea id="message" name="message" required maxlength="300"></textarea><br><br>

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

🔍 Field-by-Field Explanation:

🧍 Name Input:

type="text": Accepts plain text.
Google Advertisement

id and name: Identifiers for the input.
required: The user must fill this in.
maxlength="50": User cannot type more than 50 characters.

📧 Email Input:

type="email": Checks for a valid email format (e.g., name@example.com).
required: Can't submit the form if this is empty.
maxlength="100": Limits to 100 characters.

💬 Message Textarea:

<textarea>: Multi-line text input for longer messages.
required: Field is mandatory.
Google Advertisement

maxlength="300": Only 300 characters allowed.

✅ Submit Button:

Sends the form data when clicked.

🧪 Built-in Validation in Action

When you try to submit the form without filling out the required fields, the browser will show an automatic message like:

“Please fill out this field.”

And if the input is too long, the browser will stop the user from typing further.

No JavaScript needed – this is pure HTML validation!

💡 Pro Tips

Always use required for important fields to ensure you collect needed information.
Use maxlength to protect against very long and messy inputs.
Combine these with type="email" or type="number" for extra input control.

✅ Final Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contact Us</title>
</head>
<body>
  <h1>Contact Form</h1>
  <form action="#" method="post">
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name" required maxlength="50"><br><br>

    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required maxlength="100"><br><br>

    <label for="message">Message:</label><br>
    <textarea id="message" name="message" required maxlength="300"></textarea><br><br>

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

🏁 Conclusion

Using required and maxlength in HTML makes your contact forms much more user-friendly and secure – and the best part? You don’t need JavaScript to do it!

How to Create a Validated HTML Contact Form Using Required and Maxlength Attributes

Build a Contact Form with Input Validation Attributes (`required`, `maxlength`) in HTML

🔹 Step 1: Basic HTML Structure

🔍 Explanation:

🔹 Step 2: Add a Form Element

🔍 Explanation:

🔹 Step 3: Add Input Fields with Validation

🔍 Field-by-Field Explanation:

🧍 Name Input:

📧 Email Input:

💬 Message Textarea:

✅ Submit Button:

🧪 Built-in Validation in Action

💡 Pro Tips

✅ Final Code

🏁 Conclusion

Recommended Posts

भारत में कोरोना अपडेट 25 मई 2025: 257 सक्रिय मामले, नए वैरिएंट की पहचान, लक्षण हल्के

Build a Simple Quiz App Using JavaScript – Step-by-Step Guide for Beginners

Sucess Story : राजस्थान के मयंक पुरोहित ने देश में रचा इतिहास, आईएफएस परीक्षा पहले ही प्रयास में हासिल की सातवीं रैंक

Easily Create Dark and Light Mode with localStorage in JavaScript

Secure Password Maker Using JavaScript with Simple Code Guide

कौन हैं Banu Mushtaq, जिनकी शॉर्ट स्टोरी कलेक्शन ‘Heart Lamp’ को मिला International Booker Prize

How to Create a Validated HTML Contact Form Using Required and Maxlength Attributes

Build a Contact Form with Input Validation Attributes (required, maxlength) in HTML

🔹 Step 1: Basic HTML Structure

🔍 Explanation:

🔹 Step 2: Add a Form Element

🔍 Explanation:

🔹 Step 3: Add Input Fields with Validation

🔍 Field-by-Field Explanation:

🧍 Name Input:

📧 Email Input:

💬 Message Textarea:

✅ Submit Button:

🧪 Built-in Validation in Action

💡 Pro Tips

✅ Final Code

🏁 Conclusion

Recommended Posts

भारत में कोरोना अपडेट 25 मई 2025: 257 सक्रिय मामले, नए वैरिएंट की पहचान, लक्षण हल्के

Build a Simple Quiz App Using JavaScript – Step-by-Step Guide for Beginners

Sucess Story : राजस्थान के मयंक पुरोहित ने देश में रचा इतिहास, आईएफएस परीक्षा पहले ही प्रयास में हासिल की सातवीं रैंक

Easily Create Dark and Light Mode with localStorage in JavaScript

Secure Password Maker Using JavaScript with Simple Code Guide

कौन हैं Banu Mushtaq, जिनकी शॉर्ट स्टोरी कलेक्शन ‘Heart Lamp’ को मिला International Booker Prize

Build a Contact Form with Input Validation Attributes (`required`, `maxlength`) in HTML