Reading a Button's Value on Submit

Fri, 24 May 2024 09:25:37 -0400

Complex HTML forms often end up with multiple submit buttons. Consider a form for taxes: there’s a button to save a draft and another button to submit for processing. They both trigger the submit action on the same form. How could we accomplish this while keeping the buttons fairly simple?

One solution is to set the buttons’ value:

<form onsubmit={onSubmit}>
 <!-- Form fields here -->
 <input type="submit" value="save" />
 <input type="submit" value="submit" />
</form>

Then in the submit handler, we read the value.

Autofocus a Form Field

Tue, 21 May 2024 10:50:17 -0400

autofocus is a global attribute that sets a field as focused on page load.

<input name="first_name" autofocus />

No JavaScript required!

A use case could be a new customer form that an employee fills out multiple times a day. By autofocusing the first name field, you could save that employee thousands of clicks.

Carefully consider user experience and accessibility before using this attribute.

Docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus

Html on Jake Worth

Reading a Button's Value on Submit

Autofocus a Form Field