What are buttons?
Buttons are quite a common thing across products of all kinds. We have buttons inside cars, on remote controls, on IoT devices, on washing machines, on gaming stations — just about everywhere.
At the core, a button represents an elementary idea — it's something that can be clicked in order to get an action accomplished. For example, pressing a button inside a car might turn on the AC, or pressing a button on a gaming station might fire a character.
A button in an HTML form represents an exactly similar thing.
That is, in an HTML form:
For example, clicking on a 'remove' button might remove an item from a shopping list; clicking on a 'start' button might start a video; and so on.
The text of a button represents the action that is accomplished when the button is pressed.
For example, if a button is meant to submit a form, a sensible text for it could be 'Submit', or maybe even 'Send' (for sending data to the server). Similarly, if a button is meant to pause a video, it could read as 'Pause.'
However, text isn't the only way to explain the meaning of a button; we can also have an icon do the same thing. In fact, it won't be wrong to say that it's more common to have buttons containing icons than buttons with text only.
Creating buttons in HTML
In HTML, there are two elements that we can use to create buttons: <input> and <button>.
Talking about the <input> element, as we learnt in the chapter, HTML Forms — Input Types, the type attribute helps the browser distinguish between the different types of <input> elements.
For the case of buttons, an <input>'s type attribute can either be "submit", "reset", "image", or "button". We'll understand the meaning of each of these values later on in this chapter.
The case with <button> is a little bit simpler. It too can accept a type attribute to specify the exact kind of button we want, however, that is optional. When the type attribute is omitted from a <button>, it defaults to "submit".
The possible values of a <button> element's type attribute are the same except for "image": "submit", "reset", and "button".
<span>, <a>, <img>, etc.The text of a button goes in the value attribute when we're using <input> or as the content of the element when we're using <button>.
For instance, here's how we'd denote a button reading the text 'Submit' in HTML using an <input>:
<input type="submit" value="Submit">and here's using <button>:
<button>Submit</button>Now, reading through this short discussion, you might be thinking: For denoting a button in HTML, should we use <input> or <button>?
Were you?
Well, the answer ain't that difficult, as the snippet below addresses.
<input> or <button> for buttons?
Both <input> and <button> can be used to create buttons of different kinds in HTML. The question is, which one shall we use?
First, let's address this from a technical perspective.
When we have a button with merely basic text, without any formatting applied to it (for e.g. bold, italics, etc.), we can use <input>. In other instances, when more complexity is desired, we can use <button>.
This is because <button> can include HTML elements within it. The <input> element, on the contrary, can NOT be used to create a button with HTML elements in it.
Let's take an example.
Suppose we want to have the text 'Buy now for $1' in a button and have '$1' formatted as bold (using the <strong> element).
We can NOT do so using the <input> element, for it only allows plain text to be embedded inside the button:
<!--This obviously won't work as desired!-->
<input type="submit" value="Buy now for <strong>$1</strong>">But we can easily do so using <button>, as shown below:
<button>Buy now for <strong>$1</strong></button>Notice the styling applied to '$1' — it's formatted as bold.
Now, let's address this question from a general perspective.
We should always use <button> over <input> for creating a button. Period.
If you think about it, the <input> element, with the word 'input', seems more about obtaining input data from the user — a button, in this respect, isn't really meant to obtain input data; it's rather meant to perform an action.
So while <input> is still supported in browsers for creating buttons, <button> is the go-to choice.
For the sake of completeness, we'll consider the <input> element for creating buttons in this chapter, but do keep in mind that <button> is preferred over <input> for this job.
Now, there are essentially four kinds of buttons that these two elements can create: reset buttons, submit buttons, image buttons, and ordinary buttons.
Submit buttons
A submit button, as the name suggests, is a button meant to submit an HTML form.
Recall that submitting an HTML form simply means to send all of its data to the server, specifically at the location denoted by the action attribute of the <form> element.
A type value of "submit" creates a submit button.
Note that when using <button> to create a submit button, specifying type="submit" is effectively the same as omitting the type attribute, since the default type of a <button> is "submit".
type of an <input> is "text", not "button".An HTML form can have more than one submit button, although it's more common (and even more sensible in most cases) to have one, and only one.
Consider the following example of a simple form containing a text input alongside a submit button, created using <button>:
<form>
<p>Your name</p>
<input type="text" name="name">
<button>Submit</button>
</form>Because the type attribute is missing from the <button> here, it defaults to the value "submit", i.e. denotes a submit button.
The following is equivalent HTML:
<form>
<p>Your name</p>
<input type="text" name="name">
<button type="submit">Submit</button>
</form>When we click this button, the form data gets submitted to the current location. (Recall that this leads to the URL in the address bar changing, having a query string containing a name parameter with the input name.)
Simple.
Now, let's do the same thing using an <input> element.
<form>
<p>Your name</p>
<input type="text" name="name">
<input type="submit">
</form>Expectedly, we get a similar result. But remember the point: use <button> only for creating a button in HTML.
Reset buttons
A reset button is used to reset an HTML form to its initial state before the user interacted with any of its form controls.
For form controls without an initial value (i.e. value for all form controls; and content for a <textarea>), they get emptied. For form controls with an initial value, they get reset to value.
A type value of "reset" corresponds to a reset button.
Consider the following form containing two input fields, a submit button, and a reset button:
<form>
<p>Your name</p>
<input type="text" name="name" value="Alice">
<p>Your email</p>
<input type="email" name="email">
<button>Submit</button>
<button type="reset">Reset</button>
</form>Go on and enter some data into the form by interacting with the input fields. Then, press the reset button — you'll notice the form being reset to its original state ('Alice' in the text input and nothing in the email input).
Moving on, going with the <input> element, here's a rewritten version of the code above this time using <input>s to create the given buttons:
<form>
<p>Your name</p>
<input type="text" name="name" value="Alice">
<p>Your email</p>
<input type="email" name="email">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>Remember the important point regarding <input> we mentioned above? Don't use it for a button; use <button> instead.
Normal buttons
Often times while creating forms, we'll want buttons to take on unique functionality apart from either submitting forms or resetting them. We call such buttons as normal buttons.
The previous W3C HTML specifications termed such buttons as push buttons.
For example, we might want a button to add another additional input field in a form. Because such buttons don't have any default behavior associated with them, they are made interactive by means of scripting using JavaScript.
To create a normal button, we use the "button" type.
Consider the following example:
<form>
<p>Your name</p>
<input type="text" name="name">
<button type="button">Do nothing</button>
</form>Open the linked page and enter some text into the input field. Then click on the 'Do nothing' button. What happens? Does the form get submitted?
No. This is because the button is a normal button and not a submit button, thanks to the specification of type="button".
For now, we can't really use normal buttons in our forms, since we haven't yet covered JavaScript in detail so as to be able to spin up scripts for making them interactive. But once we do cover JavaScript, using them will be more than a norm.
<button> element without a type attribute is not a normal button; it's a submit button.And now, as before, replicating the button code using <input>:
<form>
<p>Your name</p>
<input type="text" name="name">
<input type="button" value="Do nothing">
</form>By now, you hopefully well know what to do with <input> when creating a button, so we won't talk about it again. (Spoiler alert: throw it away.)
Image buttons
Sometimes, we might want to represent a complete image as a button. Such a button can concisely be referred to as an image button.
I personally can only think about games where image buttons might be needed. A game often has fancy graphics in it, including those for buttons; replicating these using HTML/CSS might be a little bit challenging and so an image button might be preferable.
Anyways, if we ever find ourselves in such a scenario, of making an image a button, we fortunately have standard ways to address it.
As has been emphasized throughout the discussion above, we should always use <button> for creating any kind of a button in HTML. This applies to creating an image button as well.
The idea is to wrap an <img> element inside a <button> element. That simple!
Let's take a quick example.
Consider this image of a fancy submit button:
We'll use this for denoting the submit button in our familiar name-input form — by putting an <img> inside a <button>:
<form>
<p>Your name</p>
<input type="text" name="name">
<br><br>
<button type="button">
<img src="fancy-submit-button.png" alt="Submit button">
</button>
</form>Notice the two <br>s we've added here — these are to prevent the button from appearing on the same line as the text input. This is because the button is large in size and would give a bad-looking layout if presented on the same line as the text input.
Now, the image does render inside the button, however, the button's default styles are irritating a little bit.
Using some simple CSS style properties that we already know by this point, we can remove these — in particular, background-color and border.
The following code accomplishes this:
<form>
<p>Your name</p>
<input type="text" name="name">
<br><br>
<button style="background-color: white;border: none;">
<img src="fancy-submit-button.png" alt="Submit button">
</button>
</form>Better now!
As this example demonstrates, using <button>, we can create an image button in HTML. The exact action accomplished by this image button entirely depends upon the type of the button (in the example above, we have a submit button).
Taking the discussion further, while <button> can create an image button quite easily, the <input> element can also be used for this task.
Let's find out how...
In the old days of HTML, imitating complex graphics using images was a very common thing on the web because HTML and CSS weren't that mature and sophisticated to handle complex graphics themselves.
Creating image buttons was a common thing back then. To address to this increased need, the <input> element got a special type, "image".
An <input type="image"> element represents an image button for submitting a form.
<input type="image"> element acts as a submit button. We can therefore call it as a submit image button.The source URL of the image is provided in the src attribute of the <input> whereas the alternative text (which is desirable since we're dealing with an image) is provided via alt.
To date, browsers support <input type="image"> for the sake of backwards-compatibility. (Backwards-compatibility hurts quite a lot!)
So the code above could be rewritten as follows:
<form>
<p>Your name</p>
<input type="text" name="name">
<br><br>
<input type="image" src="fancy-submit-button.png" alt="Submit button">
</form>But remember...amazing, you got it by now...throw away the thought of creating a button using <input>; use <button> instead.
The dispatch of pointer coordinates with <input type="image">
One worthwhile point noting about the <input type="image"> element is that, when clicked, along with the rest of data of the underlying form, it also includes data produced by itself.
This data is the x and y coordinates corresponding to the position of the pointer in the image button when it was clicked. The x-coordinate goes into the parameter x whereas the y-coordinate goes into the parameter y.
To confirm this, open the example link above, and click on the submit button — notice the URL in the address bar.
This <input type="image"> element was shown only for the sake of completion. You don't need to worry about its details any more than what have been explored here.
