HTML Input Form Attributes
In this page:
<input type="submit" form="formid" formaction="url" formmethod="post" formtarget="_blank">The form Attribute
By default, input fields must be placed inside a form container to submit their data. The form attribute allows you to place input fields anywhere on your page (even outside the form tag) and link them to a specific form using its unique ID.
- Use the form attribute to build complex, creative layouts without being restricted by form tag nesting.
- Accepted values:
- form — the id of a form element in the same document
- Lets a control outside the form belong to it
- Valid on input, button, select, textarea, fieldset, output, object
Example: The form Attribute
<form id="myForm" action="/submit"></form>
<input type="text" name="username" form="myForm">Overriding Endpoints with formaction
The formaction attribute is used on submit buttons to override the default action URL of the parent form tag. This allows you to create different buttons that send the exact same form data to different server endpoints.
- Use the formaction attribute to create separate 'Save Draft' and 'Publish Live' buttons on the same form.
- Accepted values:
- formaction — any valid URL
- Valid on input type=submit|image and button
- Overrides the form action
Example: Overriding Endpoints with formaction
<form action="/save">
<button type="submit" formaction="/save-draft">Save Draft</button>
<button type="submit" formaction="/publish">Publish</button>
</form>Changing Data Formats with formenctype
The formenctype attribute is used on submit buttons to override the default encoding type of the parent form tag.
This is incredibly useful when you want a specific button to upload files (which requires multipart/form-data) while keeping other fields as standard text.
- Use the formenctype attribute to handle both text fields and file uploads on the same form dynamically.
- Accepted values:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
Example: Changing Data Formats with formenctype
<form action="/submit">
<input type="file" name="file">
<button type="submit" formenctype="multipart/form-data">Upload</button>
</form>Changing Request Methods with formmethod
The formmethod attribute is used on submit buttons to override the default HTTP request method (GET or POST) of the parent form tag, allowing you to change how your data is transmitted on the fly.
- Use formmethod to quickly toggle between public GET requests and secure POST requests.
- Accepted values:
- get
- post
- dialog
Example: Changing Request Methods with formmethod
<form action="/submit" method="get">
<button type="submit" formmethod="post">Submit Securely</button>
</form>Bypassing Form Validation with formnovalidate
By default, browsers perform basic validation checks on form fields before submitting.
The formnovalidate attribute is used on submit buttons to bypass these native checks, allowing you to save drafts or cancel actions even if required fields are left blank.
- Use the formnovalidate attribute on 'Save Draft' buttons so users can save their progress without filling in all required fields.
- Accepted values:
- formnovalidate — boolean attribute
- Valid on input type=submit|image and button
- Skips validation only for that button
Example: Bypassing Form Validation with formnovalidate
<form action="/submit">
<input type="email" required>
<button type="submit" formnovalidate>Save Draft</button>
</form>- Failing to match the form attribute value with the target form's ID exactly, resulting in broken submissions.
- Using the public GET method on overridden buttons designed to transmit sensitive user passwords.
- Disabling browser validation using formnovalidate on primary submission buttons without writing backup validation scripts.
- Input form attributes allow individual buttons or fields to override the default settings of the parent form tag.
- Link external input fields to a form anywhere on your page using the form attribute matched to the form ID.
- Use formaction, formenctype, formmethod, and formnovalidate attributes on submit buttons to override the target URL, encoding type, request method, or validation settings dynamically.
Standard input form override attributes are supported natively by all modern web browsers.
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: