If there is an input, there should be a form

This post was originally published on https://tomekdev.com/posts/input-and-form. Go there to read a bit more interactive and style richer version ✌️

I often see in Single Page apps a situation where someone uses just an <input> field. Sometimes in the accompaniment of<label> if you happen to work with a pro 🌟. It feels that when we gained control of inputs with two-way binding and we started handling onclick events on buttons with our fancy frameworks, we forgot the old way of doing things.

The old way, and the right way

The headline of this section may suggest that the old way and the right way are two different things. Where in fact, it’s the opposite. If you come back with your memory before the frameworks (or ajax) era you see that people were using a <form> element when dealing with inputs and buttons.

In the past we were extensively using <form method=""> to process the input. I encourage you to still use a form element. It comes with benefits.

Common mistake

I use the keyboard to navigate and interact with pages. That speeds up everything. So for me one of the biggest pitfalls of using <input> without a <form> is that the input is not auto-submittable, so to say.

When you hit ENTER in the field that is inside the form then the form is submitted. That's very convenient for solo-input interfaces like a modal below:

You don’t have to touch your mouse or touchpad and click Save button 🎉. That would be a waste of time!

Solution

It’s a common mistake to bind your action to a <button> where in fact all you have to do is wrap your<input> with a <form> and assign submit event to a form:

HTML file:

<form id="my-form">
<input name="example" type="text" />
<button type="submit">Submit</button>
</form>

Javascript:

const form = document.getElementById('my-form');form.addEventListener('submit', function handleSubmit(event) {
alert('Submit clicked');
event.preventDefault();
});

Don’t forget to prevent default behavior from firing and run your custom behavior. It could be running validation and actually sending the data.

One more thing that you should consider is always specifying the button’s type. It’s submit by default in most browsers but Internet Explorer is different in this case and has button as a default type.

--

--

--

I connect humans and machines. Usually write about interfaces, digital products, and UX on tomekdev.com. Founder of checknlearn.com. A bit nerdy 🤓

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

0609創新思考

Minimize side effects in front end apps by limiting state updates to interactions with the outside…

How to Solve this Classic Technical Interview Question

S.O.L.I.D the First 5 Principles of Object Oriented Design, JavaScript, Version Controlling, NOSQL

Movie App using HTML, CSS, and Javascript

13 Useful JavaScript Snippets To Code Like a Pro

The Right Way To Develop Your Ethereum Dapp is Here: DRIZZLE!

What is MERN Stack?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tomek Niezurawski

Tomek Niezurawski

I connect humans and machines. Usually write about interfaces, digital products, and UX on tomekdev.com. Founder of checknlearn.com. A bit nerdy 🤓

More from Medium

Wear Your UX Unicorn Badge with Pride

Picture of a person in a unicorn custome at the beach holding a pride flag

Add a feature — Ulabox

Using figma and it’s feature’s

Exploring the Process of Creating Mockups