• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Form Attributes

← Previous Next →

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.

HTML Form Attributes Quiz

Q1: Which attribute specifies the URL to send form data?

A. method
B. target
C. action
D. submit

Q2: What does the method="post" attribute do?

A. Saves form data in cookies
B. Sends data through the URL
C. Sends data in request body
D. Prevents form submission

Q3: Which attribute disables form auto-filling?

A. autocomplete="off"
B. autofocus
C. placeholder
D. required

Q4: What does the novalidate attribute do?

A. Auto-validates data
B. Skips browser validation
C. Validates only numbers
D. Makes input bold

Q5: What is the purpose of the readonly attribute?

A. Prevents form submission
B. Allows input editing
C. Displays a read-only value
D. Makes the field required

Q6: What input type allows multiple file selection?

A. <input type="multiple">
B. <input multiple="file">
C. <input type="file" multiple>
D. <file input="multiple">

Q7: What attribute is used to provide sample input text inside a field?

A. alt
B. hint
C. placeholder
D. title

Q8: Which attribute makes an input field mandatory?

A. required
B. needed
C. must
D. submit

Q9: What does maxlength="10" do?

A. Requires at least 10 characters
B. Makes input only numbers
C. Limits characters to 10
D. Sets max value to 10

Q10: What is the purpose of the pattern attribute?

A. Styles the input field
B. Applies regex validation
C. Shows placeholder text
D. Makes input optional
← Previous Next →
Login
Go Back Top