HTML – Chapter 2 | How to Create a Button in HTML | Create a Website Button
It’s time to finally move on, and take the second step towards learning HTML. We shall learn or at least try to learn how to create a button in HTML – one of the easiest and exciting things to do when you are playing around with HTML.
Before we even begin I just want to make sure you have read and understood the first Chapter of HTML, right? If you haven’t and are getting ahead of yourself, well go back and do yourself some good. I would recommend you take baby steps just like the baby you are.
A World of Buttons
Button. B-U-T-T-O-N. Butt-on! I like the sound of it. Okay, moving on.
Don’t you just love it when you open a site and there are places on it where you can click and make something happen? Well those twitchy little things are nothing but buttons that help you to keep things rolling. Here’s an example of a button on one of the most popular search engines:
Does this look familiar? Yes, well when you enter something on google that’s where you click (or at least you used to since now you prefer pressing Enter). That Google Search is a button and that sentient lucky bastard next to it, you guessed right, is also a button.
Button, button everywhere not a place to click. Maybe I should just stop thinking out loud.
Steps on How to Create a Button in HTML
Here are the steps to get you started immediately if you wish to know how to create a button in HTML.
Step 1: Where’s your HTML folder again? Open it, right click and create a new text document or simply open notepad. Choice is yours. I think we were over this?
Step 2: Now open the notepad file and put your Chapter 1 learning to test. Make sure your tags begin to appear something like this:
Let me guess. This looks vaguely familiar too? The next step can’t go on without introducing to you the concept of button tags. Now HTML already knows all about what a button tag is. The question is, do you?
The <Button> Tag
The HTML <button> tag is used to insert buttons into your website. It’s your way of telling the system what to do. So when you enter the <button> element between the <body> tags, and save your notepad file it recognizes your urgent need to insert a button.
Step 3: Enter <button> tag between the <body> tags.
Yeah, you must be thinking – Is that it? Well, technically. That is everything you need to learn on how to create a button in HTML, and it answers our primal question. If you use the above code to create a website button, this is what your site would look like:
How did I get there? Well you should have paid attention in the first chapter loser. Okay reiterating for you: Save the notepad file as .html extension and then open it in your web browser to see.
Can you notice that thin strip of a line in your body. Well that’s your button right there. To be honest, our job’s done right here. But something looks amiss. This doesn’t look like a button? Does it?
Wait! Where’s the label? How would people know what it’s supposed to do?
Step 4: Put something in between the <button> tags that will act as the button label.
Once you are done, why don’t you go ahead and check your progress by opening the file once again on your browser.
There we are! Better!
There’s a drawback however in the above code. If you use the above simple version, it might display different results on different browsers. You must use an attribute to make the browser comprehend that you intend to use a button.
To achieve that we need to make use of the <type> attribute.
<Button> type Attribute
A button too has attributes just like countless element tags in HTML. One such crucial attribute is “type”.
There are three types that you can allot to a button:
- Button
- Submit
- Reset
When used in a form, Submit and Reset help in playing around with your data. Let’s not worry about that now.
Taking the first one forward, this is how our HTML should look like now:
Now when you save it, even though it appears nothing changes, it has become okay to run it on all sorts of browser.
The only problem with our HTML now is that we have simply created a button. If you click on it, nothing happens. Go ahead click on it.
Doesn’t that, I don’t know, look a tad bleak?
Well hold your horses right there. We settled on how to create a button in HTML and not how to go about clicking it and wondering why does nothing happen. I am tired now, maybe in the next chapter or so we decide to put life in it and add some meaning to its existence.
Other Ways to Create a Website Button
While it might sound like a great way to do create a website button, there’s another way that is still preferred in many places owing to browser related inconsistencies. If you knew about it already, you guessed right. It is the <input> tag. So if you are unable to get the desired result with <button> tag I would recommend you take the aid of <input> tag.
The way you use it is simple as well. Here’s the code you should be replacing:
Notice how we <input> tag doesn’t require a closing tag and uses just another attribute called value to enter its label. It gives you the same result that the <button> tag gave you.
I am being told that you can lose the double quotation marks if you are working on HTML5. We don’t need them there.
Go ahead play around. The world is your playground.
1 Response
[…] by weaving up a button. If you are not sure how, you can go back turn your leaflets to read the second chapter of HTML on how to create a […]