Input type button - label vs value

html

responsive-design

best-practices

accessibility

byNikita Barsukov·Sep 21, 2024

To set the display text of an HTML button, you can use either <input type="button"> with the value attribute or <button>:

<input type="button" value="Submit">  <!-- This looks quite lonely, isn't it? -->
<button type="button">Hello, I'm the new button in town!</button> <!-- But this one has got style! -->

The first one creates a basic button with "Submit" text. The second one allows for a <button> space that can hold all kinds of HTML mischief, including bold text and more.

`<input>` vs `<button>`

While <input> is a reliable and historic way to create button-like functionality, <button> grants you more versatility, such as including other HTML elements.

<button type="button">
   Submit <strong>Now</strong>, or the kitten will cry! <!-- You don't want to see a kitten cry, do you? -->
</button>

The above example can't be achieved with the <input> tag as it can't contain other HTML tags!

Gems from the dust: when to use `name` and `value`

name and value can be real lifesavers during form submission. For example, a generic "Submit" label button might carry a unique value to deliver specific data to your back-end.

<button type="submit" name="send" value="UniqueOffer">Submit Your Interest</button>

When this button is clicked, it sends 'send=UniqueOffer' to the server, not something the user needs to know, but crucial for back-end processing!

Flexing with `<button>` styling

With <button>, you can flex your creativity muscles. You can craft an engaging user experience with multimedia contents like images, icons, or even your favorite memes!

<button type="submit">
   <img src="anAwesomeImage.png" alt="WOW"> <!-- HTML, like us, likes pretty pictures -->
   Some Text Here
   <span style="color:blue">Even Bluer Text Here!</span>
</button>

You can wave goodbye to plain and boring buttons!

Button actions and dynamic interactivity

Some button actions require the value, others the label:

Value-centric: The value can be the parameter of a function called on a click event.
Label-centric: A label such as 'Reset Form' is user-facing, while its value maybe irrelevant.
Flexible buttons: For dynamic forms, a button might have a changing label paired with a stable value.

Accessibility considerations

Accessibility should never be an afterthought:

Supplement labels with aria-label attributes to make them readable by screen readers.
Consider how the label-value pair aligns with tabindex for keyboard navigation.
Descriptive labels enhance screen reader compatibility as value is often a secondary consideration.

Advancing with CSS and JavaScript

When paired with CSS and JavaScript, you can take your <button> design to new heights:

<button type="submit" id="mySweetButton">
 Let's Groove! <!-- A real party button! -->
</button>
<!-- We can hook this up to some cool backgrounds and LED lights using CSS and JS! -->