HTML Form Attributes


HTML form attributes are used to control the behavior of form submission, input validation, appearance, and user experience. They can be applied to the <form> tag or individual <input>, <textarea>, <select>, etc.


🔹 Common <form> Tag Attributes

Attribute Description
action Specifies where to send form data
method HTTP method: GET or POST
target Specifies where to display response (_self, _blank, etc.)
autocomplete Enables/disables auto-filling form fields (on, off)
novalidate Prevents the browser from validating form data before submit
enctype Sets encoding type when submitting file data

✅ Example: Basic Form With Attributes

<form action="/submit" method="post" target="_blank" autocomplete="off" novalidate enctype="multipart/form-data">
  <input type="text" name="username">
  <input type="file" name="profilepic">
  <input type="submit" value="Submit">
</form>

🔹 Input Field Attributes (Very Important)

Attribute Description
type Type of input (text, email, file, checkbox, etc.)
name Name of the input (sent to the server)
value Default value for the input field
placeholder Hint text inside the input field
required Makes the field mandatory
readonly Makes input read-only
disabled Disables input (not submitted)
maxlength Maximum number of characters allowed
min / max Set minimum/maximum numeric or date value
pattern Regular expression to validate the input
autofocus Focuses the input automatically on page load
multiple Allows multiple values (e.g., for file input)
step Defines the stepping interval for number/date input

✅ Example: Input Field With Attributes
<input type="text" name="fullname" placeholder="Enter full name" required maxlength="30" autofocus>

✅ Example: Number Input with Range and Step
<input type="number" name="age" min="18" max="60" step="1">

✅ Example: File Input With Multiple Files
<input type="file" name="documents" multiple>

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.


Go Back Top