HTML Form Attributes

HTML forms use various attributes to define their behavior and appearance.
Lets see the attributes

Attribute Type

Description

Example

type

Specifies the type of input element
Syntax: <input type="text">

action

Specifies the URL of the server-side script that will process the form data when submitted
Syntax: <form action="URL" method="post">

Run

method

Defines the HTTP method to be used when submitting the form. It can be "get" or "post."
Syntax: <form action="/submit_form.php" method="post">

Run

name

Provides a name for the form, which can be used for identification purposes or when accessing form data via JavaScript
Syntax: <form name="form_name">

Run

value

Sets the initial value of the input element
Syntax: <input type="text" name="input_name" value="initial_value">

Run

autocomplete

Allows you to enable or disable autocomplete for form input fields
Syntax: <form autocomplete="on">

Run

target

Specifies the name of the target window or frame where the form response should be displayed
Syntax: <form action="/submit_form.php" method="post" target="_blank">
Note: know more about Target attribute

Run

enctype

Defines the encoding type for sending data when using "post" method. Common values include "application/x-www-form-urlencoded" (default) and "multipart/form-data" (used for file uploads)
Syntax: <form action="/submit_form.php" method="post" enctype="multipart/form-data">

Run

maxlength

Specifies the maximum number of characters allowed in the input element
Syntax: <input type="text" name="input_name" maxlength="10">

Run

minlength

Specifies the minimum number of characters required in an input element
Syntax: <input type="text" name="password" minlength="8">

Run

min and max

Specifies the minimum and maximum values for numeric input types like number, range, etc
Syntax: <input type="number" name="quantity" min="1" max="10">

Run

size

Specifies the visible width of the input element, measured in characters
Syntax: <input type="text" name="username" size="20">

Run

pattern

Provides a regular expression that the input value must match to be considered valid
Syntax: <input type="text" name="zipcode" pattern="[0-9]{5}">

Run

novalidate

Prevents form validation when submitted. This attribute is used to bypass HTML5 form validation
Syntax: <form action="/submit_form.php" method="post" novalidate>

Run

onsubmit

Specifies a JavaScript function to be executed when the form is submitted
Syntax: <form action="/submit_form.php" method="post" onsubmit="return validateForm()">

Run

onreset

Specifies a JavaScript function to be executed when the form is reset
Syntax: <form action="/submit_form.php" method="post" onreset="clearForm()">

Run

step

Specifies the step increment for numeric input types like number and range
Syntax: <input type="number" name="quantity" step="1">

Run

list

Refers to a <datalist> element that provides a list of predefined options for an input type="text"
Syntax: <input type="text" name="fruit" list="fruitsList">

Run

checked

Specifies that the input element should be pre-selected/checked
Syntax: <input type="checkbox" name="subscribe" checked>

Run

accept-charset

Specifies the character encoding for the submitted form data
Syntax: <form action="/submit_form.php" method="post" accept-charset="UTF-8">

Run

rows and cols

Specifies the visible rows and columns of the textarea
Syntax: <textarea name="comments" rows="4" cols="40"></textarea>

Run

accept

Specifies the types of files that can be selected in an <input type="file"> element
Syntax: <input type="file" name="photos" accept="image/*">

Run

required

Indicates that a form input field must be filled out before the form can be submitted
Syntax: <input type="text" name="username" required>

Run

placeholder

Provides a short hint or example text for an input field
Syntax: <input type="text" name="email" placeholder="Enter your email address">

Run

multiple

Specifies that multiple values can be selected in input elements like <input type="file"> or <select>
Syntax: <input type="file" name="attachments" multiple>

Run

readonly

Makes an input field read-only, meaning the user cannot modify its value
Syntax: <input type="text" name="referenceNumber" value="12345" readonly>

Run

disabled

Disables an input field so that the user cannot interact with it or submit its value
Syntax: <input type="text" name="disabledField" disabled>

Run

autofocus

Specifies that the input element should automatically get focus when the page loads
Syntax: <input type="text" name="username" autofocus>

Run

formaction

Overrides the form's action attribute for this specific input element when submitting the form
Syntax: <input type="submit" value="Submit" formaction="/submit_custom_endpoint">

Run

formmethod

Specifies the HTTP method (GET or POST) to be used when submitting the form
Syntax: <input type="submit" value="Submit" formmethod="post">

Run

formenctype

Specifies how form data should be encoded before sending it to the server (e.g., application/x-www-form-urlencoded, multipart/form-data)
Syntax: <input type="file" name="attachment" formenctype="multipart/form-data">

Run

formtarget

pecifies where to display the response after submitting the form (e.g., _blank, _self, _parent, _top, or a frame name)
Syntax: <input type="submit" value="Submit" formtarget="_blank">

Run

Example

<!DOCTYPE html>
<html>
<head>
  <title>Contact Form</title>
</head>
<body>
  <h1>Contact Us</h1>
  <form action="/submit_contact.php" method="post" onsubmit="return validateForm()">
    <label for="name">Name:</label>
    <input type="text" name="name" required>

    <label for="email">Email:</label>
    <input type="email" name="email" required>

    <label for="message">Message:</label>
    <textarea name="message" rows="4" cols="40" required></textarea>

    <input type="checkbox" name="subscribe" id="subscribe" checked>
    <label for="subscribe">Subscribe to our newsletter</label>

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

  <script>
    function validateForm() {
      var name = document.forms["myForm"]["name"].value;
      var email = document.forms["myForm"]["email"].value;
      var message = document.forms["myForm"]["message"].value;

      if (name === "" || email === "" || message === "") {
        alert("Please fill out all required fields.");
        return false;
      }

      if (!validateEmail(email)) {
        alert("Please enter a valid email address.");
        return false;
      }

      return true;
    }

    function validateEmail(email) {
      var re = /\S+@\S+\.\S+/;
      return re.test(email);
    }
  </script>
</body>
</html>

Run

Quick Recap - Topics Covered

HTML Form Attributes

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

HTML Form Attributes

Example

Quick Recap - Topics Covered

Practice With Examples in Compilers

Example JS

Quiz