• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Input Form Attributes

← Previous Next →

HTML gives you several special form-related attributes that control how an individual input behaves during form submission. These attributes are used inside the <input> tag but directly affect the form element. They decide where the data will be submitted, how it will be sent, whether validation should run and even how the results open. In this chapter, you will learn each form attribute in detail with practical examples.

What Are Input Form Attributes

Input form attributes are used to override form settings. Normally, the <form> tag controls the action URL, method, encoding type and other behaviours. But sometimes you want a single button or input to behave differently. These attributes allow you to customise submission for each input separately without changing the whole form.

The form Attribute

The form attribute links an input to a specific form by using the form’s id. This is useful when the input is placed outside the <form> tag but still needs to submit with it.

Example

<form id="mainForm">
  <input type="text" name="fullname">
  <input type="submit">
</form>

<input type="text" name="extra" form="mainForm" placeholder="Outside input">

In this example, the second input is placed outside the form but still belongs to it.

The formaction Attribute

formaction changes the action URL for a specific submit button. When the user clicks that button, the form is submitted to the URL given in formaction instead of the main form action.

Example

<form action="/save">
  <input type="text" name="username">

  <input type="submit" value="Save">

  <input type="submit" formaction="/save-and-download" value="Save & Download">
</form>

The second button sends the form to a different URL.

The formmethod Attribute

formmethod overrides the method used for submitting the form. This attribute is used mainly on submit buttons.

Options

  • get

  • post

Example

<form action="/search" method="get">
  <input type="text" name="q">

  <input type="submit" value="Search Normal">

  <input type="submit" formmethod="post" value="Search with POST">
</form>

Even though the form uses GET, the second button sends data using POST.

The formenctype Attribute

formenctype changes the encoding type for the form submission. It is useful especially when uploading files. This attribute works only when the submit method is POST.

Common Enctype Values

  • application/x-www-form-urlencoded (default)

  • multipart/form-data (required for file uploads)

  • text/plain

Example

<form action="/upload" method="post">
  <input type="file" name="resume">

  <input type="submit" value="Submit Normal">

  <input type="submit" formenctype="multipart/form-data" value="Submit with File Support">
</form>

The formtarget Attribute

formtarget decides where the response page will open. You can open the result in the same window or a new tab.

Common Values

  • _self – open in same tab

  • _blank – open in new tab

  • _parent

  • _top

Example

<form action="/preview">
  <input type="text" name="title">

  <input type="submit" value="Preview Here">

  <input type="submit" formtarget="_blank" value="Preview in New Tab">
</form>

The formnovalidate Attribute

formnovalidate tells the browser to skip validation rules for that submit button. It is used when you want one button to submit the form even if some required fields are empty, which is helpful for “Save as Draft”.

Example

<form>
  <input type="email" name="email" required>

  <input type="submit" value="Submit">

  <input type="submit" formnovalidate value="Save Draft">
</form>

The second button ignores the required validation on the email field.

The formenctype + formmethod Combination

Many developers use these attributes together when uploading files or when certain submit buttons should behave differently.

Example

<form action="/register" method="post">

  <input type="text" name="name" required>
  <input type="file" name="pic">

  <input type="submit" value="Register">

  <input type="submit" 
         formaction="/register-with-photo"
         formenctype="multipart/form-data"
         formmethod="post"
         value="Register with Photo">
</form>

This gives you more control over how the data is handled.

Difference Between Form Attributes and Normal Attributes

Normal input attributes control:

  • appearance

  • behaviour

  • validation

Form attributes control:

  • how the form is submitted

  • where it is submitted

  • how data is encoded

  • how results are displayed

Understanding this difference helps you design smarter forms.

Using Form Attributes for Multi-Action Forms

Websites sometimes have forms that perform multiple actions. For example:

  • add data

  • save draft

  • update record

  • preview record

Form attributes make this possible without creating separate forms.

Example

<form action="/save" method="post">

  <input type="text" name="title">

  <input type="submit" value="Save">

  <input type="submit" formaction="/preview" formtarget="_blank" value="Preview">

  <input type="submit" formaction="/draft" formnovalidate value="Save Draft">

</form>

Each button behaves differently based on its attributes.

Form Attributes with Inputs Outside the Form

Some layouts require inputs placed outside the form tag. The form attribute solves this.

Example

<input type="text" name="otp" form="verify" placeholder="Enter OTP">

<form id="verify" action="/check-otp">
  <input type="submit" value="Verify OTP">
</form>

The OTP input still becomes part of the form even though it is placed outside.

A Full Example Using All Key Form Attributes

<form id="mainform" action="/submit" method="post">

  <input type="text" name="username" required>
  <input type="email" name="email" required>

  <input type="submit" value="Submit Normally">

  <input type="submit"
         formaction="/preview"
         formmethod="post"
         formtarget="_blank"
         value="Preview">

  <input type="submit"
         formaction="/draft"
         formnovalidate
         value="Save Draft">

</form>

<input type="text" name="referral" form="mainform" placeholder="Referral Code">

This example shows how flexible HTML forms become when using the right form attributes.

Summary of HTML Input Form Attributes

Input form attributes let you override form behaviour for individual buttons and inputs. You learned how form, formaction, formmethod, formenctype, formtarget and formnovalidate work. These attributes help create multi-action forms, file-upload forms, preview options and draft systems. With these tools, you can build smarter and more flexible form experiences for your users.

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.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top