You come across buttons on every website you visit. Sometimes there are buttons inside an HTML form. These buttons play a crucial role in web development as they allow users to interact with a website or a web application more smoothly. You already use HTML to create different types of elements like texts on the website, images, and forms. Similarly, you can create buttons with HTML, and in this topic, you'll learn about different ways to do it.
Tag buttons
In HTML, there is a tag specifically for creating buttons — the <button> tag. You can also customize the button tag with its available attributes to improve the button's visibility and appearance. Let's see an example:
<body>
<button type="button">Click me</button>
</body>You can set different values of the type attribute when you create the buttons with the <button> tag in HTML. For example, button, submit, reset, and menu are the values of the type attribute.
Here's the output:
As shown in the example above, a button is created with the <button> tag. There is a type attribute specified to the button tag. It is not mandatory to specify this attribute when a button tag is used to create a button. However, specifying the type attribute is good practice to improve accessibility. Note that there is no CSS applied to the button, and this button is generated only because of the button tag in HTML. You can further style the button according to your needs using CSS.
Form buttons
There is another way to create buttons in HTML inside the forms. Buttons are widely used in the forms to submit or reset the data and in other processing events. The buttons inside the forms are created using the <input> tag in HTML. There can be many types of buttons inside HTML forms, for example, a submit button, a reset button, or a normal button used to trigger a specific event requiring user input.
Submit button (
type = submit)Reset button (
type = reset)Normal button (
type = button) It's generally used for triggering JavaScript functions.
The normal button is a simple button created using the button tag or the input tag with the value of the type attribute being button.
Let's look at the examples in the following section to better understand all these types of buttons.
Types of form buttons
Submit button
You can create a submit button by assigning the type attribute of the input tag to submit in the HTML forms. This button is used to submit the form data to the server. The value attribute sets the text to that element, and it is not necessary but advised to use this attribute to improve the accessibility of the websites and web applications.
<body>
<form action="">
<input type="submit" value="submit" />
</form>
</body>Here's the output:
Reset button
Similar to the submit button, you can create a reset button by assigning the type attribute of the input tag to reset in HTML forms. This button is used to reset the form to its original state, which means all the data entered by the user will be erased after pressing the reset button.
<body>
<form action="">
<input type="reset" value="reset" />
</form>
</body>Here's the output:
Normal button
You can also create and customize a button with its own functionality. You can do it using the type value of the input tag as a button with some JavaScript events attached to it. You'll learn about JavaScript events and how to implement them with the buttons in topics dedicated to JavaScript. For now, you can concentrate on the buttons part and their use cases. Let's see how to create this type of button.
This is the normal button, and it can be created inside and outside of HTML forms. The buttons created using the button tag inside the forms can also be used to submit the forms.
<body>
<button type="button" onclick="alert('Hello Button')">Button</button>
</body>Here's the output:
As you can see in the example, the button is created and a JavaScript event is attached to the onclick attribute. As soon as a click is detected on the button, an alert box will appear showing the message "Hello Button".
Conclusion
In this topic, you learned how buttons play a crucial part in web development. You can use buttons in many places. Normally, they are used as tag buttons and form input buttons. You learned how to create tag buttons using the <button> tag, while the form buttons are created using the <input> tag. There are also different HTML attributes to style the buttons and modify their functionality.