Tag Butang HTML-html tutorial-php.cn

Tag Butang HTML

WBOY

Lepaskan： 2024-09-04 16:29:55

asal

814 orang telah melayarinya

Tag Butang HTML membenarkan membuat kawalan butang aktif pada halaman web menggunakan dokumen HTML. elemen diisytiharkan dalam teg badan. Mengapa kita memerlukan elemen butang? Biasanya, apabila pengguna mengakses halaman web, perkara yang paling biasa dia lakukan ialah mengklik suatu tempat di tapak web, yang membawa kepada Halaman URL seterusnya. Untuk berbuat demikian, elemen Butang tidak boleh melakukannya sendiri; ia dicipta oleh tindakan borang di mana borang web mempunyai klik butang hantar lalai.

Butang dicipta menggunakan elemen; ia berfungsi seperti elemen dengan kemungkinan tambahan seperti menambah kandungan dan imej antara teg butang. Teks kandungan muncul di antara teg pembukaan dan penutup pada butang. Anda boleh melakukan tindakan pada butang menggunakan JavaScript atau memasukkannya ke dalam borang. CSS mungkin mengendalikan penggunaan gaya khas pada butang, tetapi pelayar berbeza memperkenalkan gaya unik mereka.

Sintaks:

Seperti teg HTML lain, teg butang pun mempunyai teg pembuka dan penutup, dan jenis butang ditakrifkan menggunakan atribut.

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

Salin selepas log masuk

Atribut Tag Butang HTML

Tiada atribut Khas telah digunakan kerana ia tidak mempunyai sebarang atribut yang diperlukan; sebaliknya, ia digunakan sebagai butang biasa dengan atribut type=". “Malah elemen ini digayakan menggunakan CSS, dengan sifat untuk mengubah perubahan dalam teg butang. Sifat tersebut ialah keluarga fon CSS, Berat fon, Hiasan teks dan Gaya fon. Sifat mewarna seperti warna latar belakang dan sifat reka letak seperti limpahan teks dan inden teks.

S.no	Attribute Name	Description	Example
1	autofocus	It is considered a Boolean attribute.
2	disabled	Making a button non-clickable.
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.	< button type “……” >
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:

<!DOCTYPE html>
<html lang="en">
<head>
<title> HTML button tag Example</title>
</head>
<body>
<h2>HTML button tag Example </h2>
<form action="/examples/html/action.php" method="post">
<p>
Employee Name: <input type="text" name="Employee-Name">
<button type="submit" value="Submit">Click</button>
<button type="reset" value="Reset">Reset</button>
</p>
</form>
</body>
</html>

Salin selepas log masuk

Output:

Tag Butang HTML

Example #2

Code:

<!DOCTYPE html>
<html>
<head>
<h3> <center> Example using CSS </center><h3>
</head>
<body>
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 />
</body>
</html>

Salin selepas log masuk

Output:

Tag Butang HTML

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:

<html>
<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>
<body>
<h1>HTML Form action Using Button</h1>
<form action="/action_page.php" method="get">
<input type="text" name=" Full Name" placeholder="Enter Full Name" class="btn">
<input type="text" name=" Address" placeholder="Enter Address" class="btn">
<button type="press" value="Press"> Click </button>
</form>
</body>
</html

Salin selepas log masuk

Output:

Tag Butang HTML

Note: You can also increase the button size by giving < button type=” button” style=: font-size: 30px”>. 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:

<!DOCTYPE html>
<html>
<head>
<title>
Button Demo
<button>autofocus Attribute
</title>
</head>
<body style="text-align:center">
<h1 style="color: blue;">
EDUCBA Web Tutorial
</h1>
<h2> Button Tag
<button>autofocus Attribute
</h2>
<h2> Button Tag
<button>autofocus Attribute
</h2>
<button id="GFG"
autofocus>
Press
</button>
<br>
</body>
</html>

Salin selepas log masuk

Output:

Tag Butang HTML

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:

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

Salin selepas log masuk

Output: Before the button press

Tag Butang HTML

Alert Message – After the Button click

Tag Butang HTML

Example #6

Code:

<!DOCTYPE html>
<html>
<head>
<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">
</head>
<body>
<p>The button loads to the next web page!</p>
<a href="https://www.educba.com" target="_blank">
<button>Submit!</button>
</a>
</body>
</html>

Salin selepas log masuk

Output:

Tag Butang HTML

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.

Atas ialah kandungan terperinci Tag Butang HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!