Balise de bouton HTML

HTML Button Tag permet de créer un contrôle de bouton actif sur une page Web à l'aide du document HTML. Ce L'élément est déclaré dans la balise body. Pourquoi avons-nous besoin d’un élément bouton ? Normalement, lorsqu'un utilisateur accède à une page Web, la chose la plus courante qu'il fait est de cliquer quelque part sur un site Web, menant à la page URL suivante. Pour ce faire, l’élément Button ne peut pas le faire seul ; il est créé par une action de formulaire où les formulaires Web ont un clic sur le bouton de soumission par défaut.

Les boutons ont été créés à l'aide de l'élément ils fonctionnent comme élément avec des possibilités supplémentaires comme l'ajout de contenu et d'images entre la balise bouton. Le texte du contenu apparaît entre les balises d'ouverture et de fermeture d'un bouton. Vous pouvez effectuer des actions sur le bouton à l'aide de JavaScript ou l'inclure dans un formulaire. CSS gère probablement l'application de styles spéciaux au bouton, mais différents navigateurs introduisent leurs styles uniques.

Syntaxe :

Comme les autres balises HTML, même les balises de bouton ont à la fois des balises d'ouverture et de fermeture, et le type de bouton est défini à l'aide d'attributs.

<button>
// some stuff like content / image
</button>

Attributs de la balise de bouton HTML

Aucun attribut spécial n’a été utilisé car ils n’ont aucun attribut requis ; au lieu de cela, ils sont utilisés comme un bouton ordinaire avec l'attribut type=". «Même cet élément est stylé en utilisant CSS, avec les propriétés permettant de modifier les modifications apportées à la balise bouton. Ces propriétés sont la famille de polices CSS, Font-weight, Text-decoration et font-Style. Propriétés de coloration telles que Background-color et propriétés de mise en page telles que text-overflow et text-indent.

S.no	Attribute Name	Description	Example
1	autofocus	It is considered a Boolean attribute.	autofocus
2	disabled	Making a button non-clickable.	/button>
3	Form	It Creates a form	…
4	formaction	It specifies the current location for submitting the form data.
5	formnovalidate	It appears in gray and gives non-validation features.
6	Formmethod	It specifies the methods while referring to the next web  page(get the post of HTTP methods)
7	formtarget	It specifies the target path for the server response when a form action is done.
8	formenctype	It has been used when a form is submitted to the webserver for the response; it activates the type of content used.	…..
8	name	It specifies the button name used in the form element, which is used by form inputs.
9	type	It specifies the type of button being used. It has three default values submit, reset, and text.
10	value	It gives an initial value when a button is used along with the form data
11	tabindex	It specifies the tab key and the order does the preference.
12	onclick	When a button is pressed, it runs a small javascript code behind it.

Examples to Implement in HTML Button Tag

Below are examples of implementing an HTML Button Tag:

Example #1

Code:

<title> HTML button tag Example</title>


<h2>HTML button tag Example </h2>

Employee Name: Click Reset

Output:

Example #2

Code:

<h3> <center> Example using CSS </center>
<h3>


Normal Class
<button type="button">Add to the First class</button>
<hr>
Economic Class
<button type="button" style="color: pink;"><b> Book Economic Class </b></button>
<hr>
Bussiness class
<button type="button" style="color: orange;"><b> Book Bussiness  Class </b></button>
<hr>
Departure
<button type="button" style="font: bold 12px Open Sans;">Norway </button><br>

</h3>
</h3>

Output:

Example #3

With CSS: Here, we have used padding and margin property. Here are some ways to look at the page better. To create a button with rounded corners, use border-radius.

Code:

<style>
body {
color: #000;
height: 90vh;
background: linear-gradient(-90deg, #a1c3d1 0%, #c48b9e 100%) no-repeat;
text-align: center;
}
input {
width: 280px;
display: block;
margin: 2rem auto;
border: 3px solid #fbc7ff;
padding: 7px;
background: transparent;
border-radius: 25px;
outline: none;
}
::placeholder {
color: #00ced1;
}
.btn {
background:#96f905;
border: none;
height: 3rem;
border-radius: 20px;
width: 220px;
display: block;
color: #96f905;
outline: none;
margin: 2rem auto;
}
</style>

<h1>HTML Form action Using Button</h1>

Click

Output:

Note: You can also increase the button size by giving . btn in the above code is the bootstrap function class.

Example #4

The below example shows how to use the attribute autofocus with button element; in an example, when a page Loads, it focuses on the first HTML control.

Code:

<title>
Button Demo
<button>autofocus Attribute
</button>
</title>


<h1 style="color: blue;">
EDUCBA Web Tutorial
</h1>
<h2> Button Tag
<button>autofocus Attribute
</button>
</h2>
<h2> Button Tag
<button>autofocus Attribute
</button>
</h2>
<button id="GFG" autofocus>
Press
</button>
<br>

Output:

Example #5

onclick attribute demo. In the below example, I have used JavaScript to take action in the button; meanwhile, it alerts a dialog box with a text message. We use a JavaScript function to make the critical decision by activating the button with onclick().

Code:

<title>HTML  On Click Button Demo</title>


<h3> HTML  On Click Button Demo</h3>
<button onclick="alert('Hi Welcome to EDUCBA!')"> Press me... </button>

Output: Before the button press

Alert Message – After the Button click

Example #6

Code:

<script type="text/javascript" src="scripts.js">
</script>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="scripts.js"></script>
<link rel="stylesheet" href="styles.css">


<p>The button loads to the next web page!</p>
<a href="https://www.educba.com" target="_blank">
<button>Submit!</button>
</a>

Output:

Conclusion  

In summary, we have learned about the HTML Button tag. This tag initiates an action and submits content within an HTML document. Important aspects of the website create an easy button, CSS, and JavaScript to look colorful. You can also learn many options related to buttons.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!