Input Form Attributes


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.


Go Back Top