Button in HTML
Well, we can have buttons on our website for different purposes, like there can be some button for submitting some form, or maybe a button for login/ signup, or anywhere you wish to keep a button, you can do so. You can also use the button as a link to another website/web page. All you have to do is to put the button inside a tag. Well, how are we going to get a button in HTML? The answer is simple, using some tag again. The tag we are going to use here is the button tag. Below is the demonstration of how can we get a button on our web page →
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Understanding links</title>
</head>
<body>
<h1>Find the button below</h1>
<button type=”button”>Click me!</button>
</body>
</html>
Well, as you can see, using the button tag, we are able to create a button. Here, we have used the type attribute, which specifies what type of button it is. There can be some different values for this attribute, like button, reset, and submit. If you try to open the file in the browser, the output is something like this –
Well, as you can see, we have a clickable button here on our page. Along with the type attribute, we can specify some additional attributes as well. Like if you want this button to be disabled, we just need to add the disabled boolean attribute into the button tag. Have a look at the disabled button thing now –
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Understanding links</title>
</head>
<body>
<h1>Find the button below</h1>
<button type=”button” disabled>You can’t Click me!</button>
</body>
</html>
Now, we are not able to click on the button, since it is disabled. Have a look at the output –
So, you can try creating the buttons, whenever you need a button. While we are going to create forms ahead, we are going to need the button there, and we are going to use the input element, to create a button there.
