HTML Input Form Attributes
In this page:
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.
Note: Use the form attribute to build complex, creative layouts without being restricted by form tag nesting.
Warning: Ensure the form attribute value matches the target form's ID exactly, or the data will fail to submit.
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.
Note: Use the formaction attribute to create separate 'Save Draft' and 'Publish Live' buttons on the same form.
Warning: Make sure your formaction URLs are completely correct and secure, or your form submissions will fail.
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.
Note: Use the formenctype attribute to handle both text fields and file uploads on the same form dynamically.
Warning: Failing to specify the multipart/form-data encoding type on file uploads will cause your file transfers to fail.
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.
Note: Use formmethod to quickly toggle between public GET requests and secure POST requests.
Warning: Never use the GET method to transmit sensitive user data, as they will be displayed openly in the browser address bar.
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.
Note: Use the formnovalidate attribute on 'Save Draft' buttons so users can save their progress without filling in all required fields.
Warning: If you bypass validation, you must handle necessary checks on your server to prevent submitting empty forms.
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: