• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Form Attributes

← Previous Next →

HTML forms are powerful tools for collecting data from users. The behavior, validation, and functionality of forms are controlled using form attributes. These attributes define how data is sent, how the browser interprets inputs, and how users interact with the form. Understanding form attributes is essential for creating secure, user-friendly, and functional web forms. In this tutorial, you will learn about the most commonly used HTML form attributes, how they work, and practical examples of each.

What are HTML Form Attributes

Form attributes are special properties applied to the <form> tag or its input elements to control behavior and appearance. They determine how the form data is submitted, validated, displayed, and processed. Attributes make forms flexible, functional, and accessible.

Basic Syntax

<form action="submit.php" method="post" target="_blank">
    <!-- Form elements go here -->
</form>

In this example, action, method, and target are all form attributes.

Common HTML Form Attributes

1. action

The action attribute specifies the URL or server script that will process the form data. Without an action attribute, the form submits to the same page by default.

<form action="submit.php" method="post">
    <input type="text" name="username">
    <input type="submit" value="Submit">
</form>

2. method

The method attribute defines how form data is sent to the server. Common values:

  • get – Appends data to the URL (visible in the address bar). Ideal for search forms.

  • post – Sends data in the HTTP request body. Suitable for sensitive data like passwords.

<form action="register.php" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="Register">
</form>

3. target

The target attribute defines where to display the response after submitting the form.

  • _self – Opens in the same window/tab (default).

  • _blank – Opens in a new window/tab.

  • _parent – Opens in the parent frame.

  • _top – Opens in the full body of the window.

<form action="submit.php" method="post" target="_blank">
    <input type="text" name="name">
    <input type="submit" value="Submit">
</form>

4. enctype

The enctype attribute defines how form data should be encoded when submitting. Important for file uploads.

  • application/x-www-form-urlencoded – Default encoding.

  • multipart/form-data – Required for file uploads.

  • text/plain – Sends data as plain text.

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="profilePic">
    <input type="submit" value="Upload">
</form>

5. autocomplete

The autocomplete attribute specifies whether the browser should suggest previous entries for inputs. Can be applied to the <form> or individual inputs.

  • on – Enable autocomplete (default).

  • off – Disable autocomplete.

<form action="login.php" method="post" autocomplete="off">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>

6. novalidate

The novalidate attribute disables HTML5 form validation. Useful if validation is handled by JavaScript or server-side scripts.

<form action="submit.php" method="post" novalidate>
    <input type="email" name="email" required>
    <input type="submit" value="Submit">
</form>

Even if the email field is invalid, the browser will allow form submission.

7. name

The name attribute identifies the form and its input fields. It is useful for server-side processing.

<form name="registrationForm" action="submit.php" method="post">
    <input type="text" name="username">
    <input type="submit" value="Register">
</form>

8. accept-charset

The accept-charset attribute specifies the character encodings the server accepts.

<form action="submit.php" method="post" accept-charset="UTF-8">
    <input type="text" name="username">
    <input type="submit" value="Submit">
</form>

9. form attribute in input elements

Individual input elements can reference a form using the form attribute, even if they are outside the <form> tag.

<form id="contactForm" action="submit.php" method="post"></form>

<input type="text" name="name" form="contactForm">
<input type="submit" value="Send" form="contactForm">

10. required, readonly, disabled (input attributes)

While not directly on <form>, input attributes like required, readonly, and disabled are commonly used in forms.

<form action="submit.php" method="post">
    <input type="text" name="username" required>
    <input type="text" name="readonlyField" value="Not editable" readonly>
    <input type="text" name="disabledField" value="Disabled" disabled>
    <input type="submit" value="Submit">
</form>

  • required – Field must be filled before submission.

  • readonly – Field is visible but cannot be edited.

  • disabled – Field is not editable and will not be submitted.

Best Practices for HTML Form Attributes

  1. Always specify action and method to ensure proper form submission.

  2. Use enctype="multipart/form-data" for file uploads.

  3. Enable autocomplete for better user experience unless sensitive data is involved.

  4. Use required for mandatory fields.

  5. Apply novalidate only when handling validation with scripts.

  6. Name your forms and inputs properly for server-side processing.

  7. Use target="_blank" cautiously; avoid unnecessary new tabs.

  8. Ensure character encoding with accept-charset="UTF-8".

  9. Combine semantic HTML with attributes for better accessibility.

Summary of HTML Form Attributes

HTML form attributes control how forms behave, how data is submitted, and how users interact with form elements. Key attributes include action, method, enctype, autocomplete, novalidate, target, and name. Proper use of these attributes ensures forms are functional, secure, accessible, and user-friendly. Mastering form attributes is essential for creating professional and interactive web applications.

Practice Questions

Q1. Create a form that opens the result in a new tab using target="_blank".

Q2. Add autocomplete="off" to a login form.

Q3. Use required on all input fields in a contact form.

Q4. Limit the number of characters in a name input to 20 using maxlength.

Q5. Add a number input for age, with min=18 and max=65.

Q6. Use readonly in an input field that shows a default username.

Q7. Create a file input that accepts multiple files.

Q8. Use placeholder to show sample input inside the field.

Q9. Apply pattern="[A-Za-z]{3,}" to ensure only alphabets are entered.

Q10. Use novalidate on a form and observe the behavior on submission.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top