• 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

Input Form Attributes

← Previous Next →

HTML Input Form Attributes are special attributes used on <input> elements to associate them with a form, or define how they behave when the form is submitted.

These attributes provide flexibility to manage form data, especially when inputs are located outside the <form> tag.

🔹 List of Input Form Attributes

Attribute Description
form Links an <input> to a specific <form> by its id
formaction Overrides the form's action URL when a submit button is clicked
formenctype Overrides the form's enctype attribute (usually for file uploads)
formmethod Overrides the form’s method attribute (get or post)
formnovalidate Prevents validation when that button is clicked
formtarget Overrides the form’s target attribute (like _blank, _self, etc.)

💻 Example 1: Using form Attribute Outside <form>

<form id="userForm" action="/submit" method="post">
  <input type="text" name="name">
</form>

<!-- This input is outside the form but still linked -->
<input type="email" name="email" form="userForm">

💻 Example 2: Submit Button With formaction and formmethod

<form action="/register" method="post">
  <input type="text" name="username">
  <button type="submit" formaction="/save-user" formmethod="get">Submit via GET</button>
</form>

💻 Example 3: File Upload with formenctype

<form action="/upload" method="post">
  <input type="file" name="file">
  <input type="submit" formenctype="multipart/form-data">
</form>

Practice Questions

Q1. Use the form attribute to link an input that is outside the <form> tag.

Q2. Create a form with a submit button that overrides the main form’s action using formaction.

Q3. Use formmethod="get" to submit the form using GET only from one button.

Q4. Add formenctype="multipart/form-data" to a file upload input.

Q5. Prevent validation using formnovalidate on a submit button.

Q6. Use formtarget="_blank" to open the form response in a new tab.

Q7. Combine formaction and formtarget in the same button.

Q8. Create two inputs outside the form and link both using form="form_id".

Q9. Create a form with two buttons: one for GET and one for POST using formmethod.

Q10. Build a form that accepts file and submits using customized form attributes on the submit button.

Input Form Attributes Quiz

Q1: Which attribute connects an input to a specific form?

A. formaction
B. form
C. for
D. id

Q2: What does the formaction attribute do?

A. Links a label to an input
B. Sets the destination URL for form submission
C. Changes input type
D. Validates the form

Q3: Which attribute prevents form validation on a specific button?

A. novalidate
B. formnovalidate
C. validate="false"
D. disablevalidate

Q4: What is formenctype mainly used for?

A. Enabling checkboxes
B. Encrypting passwords
C. Setting file upload encoding
D. Changing field size

Q5: Which of these is a valid formtarget value?

A. _topmost
B. _file
C. _blank
D. _safe

Q6: If a submit button has formaction, which URL is used on click?

A. Form’s action
B. Button’s formaction
C. First input's name
D. Document URL

Q7: Can you link an input to a form outside its parent using form?

A. No
B. Yes, if the id is correct
C. Only inside tables
D. Only with JavaScript

Q8: What is the correct syntax for linking an input to a form with id "myForm"?

A. <input for="myForm">
B. <input form-id="myForm">
C. <input form="myForm">
D. <input data-form="myForm">

Q9: What input type commonly uses formenctype?

A. text
B. radio
C. file
D. hidden

Q10: Which attribute opens form results in a new tab?

A. formnewtab
B. target="_blank"
C. formtarget="_blank"
D. window="_blank"
← Previous Next →
Login
Go Back Top