« Previous Next »

HTML Input form* Attributes

The form Attributes

The input form attribute specifies the form the <input> element belongs to. The value of this attribute must be equal to the id attribute of the <form> element it belongs to.

Output:

The formaction Attribute

Output:

The formenctype Attribute

Output:

The formmethod Attribute

Output:

The formtarget Attribute

Output:

The formnovalidate Attribute

Output:

The novalidate Attribute

Output:

Practice Exercises

Task 1: How to set up a multi-role user portal using form-overriding attributes?

Goal: Build a profile form with a default submission route, an outside comment field using the form attribute, an Admin submit button with a custom action URL, a preview button opening in a new tab, and a Draft button that bypasses validation.
💡 Hint: Use id="user-form" on form, form="user-form" on outside inputs, formaction for admin submits, formtarget="_blank" for new tabs, and formnovalidate for saving drafts.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Multi-Role Portal</title>
  </head>
  <body>

    <h2>User Profile Update</h2>

    <form action="/update_profile.php" method="get" id="profileForm">
      
      <label for="email">Account Email (Required):</label><br>
      <input type="email" id="email" name="email" required><br><br>

      <input type="submit" value="Standard Submit">
      <input type="submit" formaction="/admin_override.php" value="Submit to Admin Route">
      <input type="submit" formtarget="_blank" value="Preview in New Tab">
      <input type="submit" formnovalidate value="Save Draft (Skip Validation)">

    </form>

    <br>
    <p>This additional field sits outside the main form element:</p>
    <label for="feedback">User Feedback:</label><br>
    <input type="text" id="feedback" name="feedback" form="profileForm">

  </body>
</html>
Output :

User Profile Update




This additional field sits outside the main form element:


Explanation: The form attribute binds external input fields to a specific form ID. Using formaction changes the backend submission destination dynamically per button. The formtarget="_blank" attribute opens output responses in a separate tab, and formnovalidate allows saving progress without enforcing field checks like required.
Task 2: How to override submission methods, encoding types, and global validation rules?

Goal: Build a job submission portal featuring file uploads, secure post options, direct binary multipart overrides, and form-level non-validation modes.
💡 Hint: Use formmethod="post" to override default HTTP methods, formenctype="multipart/form-data" for binary uploads on specific buttons, and novalidate inside the main <form> element to turn off validation globally.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Job Application Portal</title>
  </head>
  <body>

    <h2>Job Application Portal</h2>

    <!-- Form uses novalidate to bypass all validation checks globally -->
    <form action="/submit_app.php" method="get" novalidate>
      
      <label for="applicant">Applicant Name:</label><br>
      <input type="text" id="applicant" name="applicant" required><br><br>

      <label for="resume">Upload Resume:</label><br>
      <input type="file" id="resume" name="resume"><br><br>

      <input type="submit" value="Submit Standard (GET)">
      <input type="submit" formmethod="post" value="Submit via Secure POST">
      <input type="submit" formmethod="post" formenctype="multipart/form-data" value="Submit with File Payload">

    </form>

  </body>
</html>
Output :

Job Application Portal





Explanation: The formmethod attribute overrides the parent form's default HTTP request type (switching from GET to POST for sensitive operations). The formenctype="multipart/form-data" attribute allows file uploads to transmit correctly without altering the form tag itself. Finally, novalidate placed directly inside the <form> element disables client-side validation across all inputs at once.
« Previous Next »