[go: up one dir, main page]
Scribd
Upload
62 views3 pages

How to Create HTML Buttons

The document explains how to create buttons in HTML using the <button> tag, which can contain text, images, or other elements. It outlines various attributes of the <button> tag, including name, type, value, and disabled, and provides examples of button creation and styling. Additionally, it demonstrates how to integrate images within buttons for enhanced user interaction.

Uploaded by

2024ca56f
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
62 views3 pages

How to Create HTML Buttons

The document explains how to create buttons in HTML using the <button> tag, which can contain text, images, or other elements. It outlines various attributes of the <button> tag, including name, type, value, and disabled, and provides examples of button creation and styling. Additionally, it demonstrates how to integrate images within buttons for enhanced user interaction.

Uploaded by

2024ca56f
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Creating Buttons

What are Buttons?

Buttons are commonly used in


forms, dialog boxes, and various
user interface components to
facilitate user interactions on a
webpage. Let us learn how to
create buttons on a web page.

Alt text: Various Types of Buttons

The <button> tag is used to create clickable buttons. You can put anything
inside a button element like text, image, or any other tag.

Syntax

<button>Any Text</button>

Create a Button

HTML Code Output

<body>
<h2> Button</h2>
<button>Click me</button>
</body>

Attributes of <button> Tag:


To style the buttons we can use following attributes:
a. Name
b. Type
c. value
d. disabled

1|Page
a. name- Specifies a name for the button. This attribute is used to identify the
button in the context of a form. It is typically used when multiple buttons
are present within a form, allowing you to distinguish between them.

b. type- Specifies the type for the button. Common values for the type
attribute are Submit, Reset, and Button.
● button: (default) A standard button.
● submit: A button that submits the form data to the server.
● reset: A button that resets the form to its default values.

c. value- Specifies an initial value for the button.

d. disabled: If present, the button is disabled and cannot be clicked. This


attribute does not need a value; its presence alone disables the button.

Let us see how to use the attributes of button through code:

HTML Code Output


<body>
<h2> Button</h2>
<button type="button"
name="myButton" value="Click
me">Click me</button><html
lang="en">
</body>

Note: To disable a button in HTML, you can use the disabled attribute.
<button disabled>Disabled Button</button>

2|Page
Buttons in HTML: Integration of Images
You can also include an image inside the button along with the text.

HTML Code Output

<!DOCTYPE html>
<html lang="en">
<head>
<title>Button Example</title>
</head>
<body>

<!-- Button with text -->


<button>Click me</button>

<!-- Button with an image -->


<button>
<img src="[Link]" alt="Button
Icon"> Click here to Download
</button>
</body>
</html>

<button>Click me</button>

This line creates a button with the text "Click me". When clicked, this button
can perform various actions, such as submitting a form or triggering
JavaScript code (though no specific action is defined in this code).

<button>
<img src="[Link]" alt="Button Icon"> Click here to
Download
</button>

This creates another button that contains an image ([Link]) along with
text content ("Click here to Download"). When clicked, this button can also
perform actions, but none are specified in this code.

3|Page

You might also like