The Form Attribute - Enhancing Form Layout Flexibility

by Alexander Muzenhardt published on Dec 03, 2023

Consider a scenario where you have a login form containing two input fields with corresponding labels, alongside a submit and a reset button. If you submit the form, the action of the form gets triggered, and you can work with the formData.

The layout looks nice as well (let’s imagine we have added some fancy CSS).

<form action="/login" method="get">
  <div>
    <label for="username">Username</label>
    <input type="text" name="username" id="username" required />
  </div>
  
  <div>
    <label for="password">Password</label>
    <input type="password" name="password" id="password" required />
  </div>
  
  <div>
    <button type="reset">Reset</button>
    <button type="submit">Submit</button>
  </div>
</form>

The Challenge

Now, let's delve into a new requirement presented by your client. They want a revamped layout with the buttons placed elsewhere. This redesign, however, leads to a problem.
The buttons are no longer within the form element which causes the buttons to lose their association to the form.

<main>
  <form action="/login" method="get">
    <div>
      <label for="username">Username</label>
      <input type="text" name="username" id="username" required />
    </div>
    
    <div>
      <label for="password">Password</label>
      <input type="password" name="password" id="password" required />
    </div>
  </form>
  
  <!-- Because of the new layout, we have to move the buttons 
  outside of the form -->
  <div>
      <button type="reset">Reset</button>
      <button type="submit">Submit</button>
  </div>
</main>

If you try to submit or reset the form, nothing will happen.

These buttons must be within the form element to be functionally associated with it.
Unfortunately, the client insists on the new layout and to move the buttons outside the form element is the only option you have.

The Solution

If you read the button element’s specification, there is an interesting attribute called form. This is very helpful in your situation and will solve your problem. You can add the form attribute to each button and assign a name to it. The name can be whatever you want. A good name would be form-login.
With that change, you just have to add an id attribute to the form element itself. The value of the attribute has to be the same as in the form attribute. That's it!

<main>
  <form action="/login" method="get" id="form-login">
    <div>
      <label for="username">Username</label>
      <input type="text" name="username" id="username" required />
    </div>
    
    <div>
      <label for="password">Password</label>
      <input type="password" name="password" id="password" required />
    </div>
  </form>
  
  <!-- Because of the new layout, we have to move the Buttons outside the form -->
  <div>
      <button type="reset" form="form-login">Reset</button>
      <button type="submit" form="form-login">Submit</button>
  </div>
</main>

With these adjustments, your form works like before but with the freedom of positioning your buttons as you want.

A Word on Practicality

The same approach can be applied to the input, textarea, select and other form elements as well. You can check the MDN or the HTML spec to see if an element accepts this attribute.
With that approach elements are no longer required to be children of the form element. You are able to place your elements as you wish in the DOM, and they are always associated with the form element.

Accessibility concerns

With this approach, you will get a lot of freedom with your layout. However, it is crucial to maintain an order in the DOM that still makes sense to users. Otherwise, it can be confusing and frustrating.

For example, if the position of the button in the DOM in the previous example is not close to the rest of the form elements, screen-reader or keyboard user may have difficulty locating the button and understanding its relation to rest of the form.

Browser compatibility

The form attribute is well-supported, with Internet Explorer being an exception.
For detailed browser compatibility information, refer to caniuse.

Conclusion

With the form attribute you are no longer restricted to position your inputs and buttons inside the form element boundaries. This approach enriches the potential for more flexibility and creative form designs.

About Alexander Muzenhardt

Alex is a front-end software developer at cit.de in Germany.

Website: alexmuzenhardt.de
Alex on LinkedIn: LinkedIn