Rumah > Artikel > hujung hadapan web > Butang Set Semula HTML
Butang Set Semula HTML
- 王林asal
- 2024-09-04 16:42:04742semak imbas
Semasa mengisi borang dalam penyemak imbas, adalah penting untuk memberikan kelonggaran kepada pengguna untuk melaksanakan berbilang operasi pada borang web. Salah satu butang jenis khas yang dikenali sebagai set semula membolehkan untuk menetapkan semula nilai dalam bentuk yang dimasukkan oleh pengguna. Butang ini memberikan fleksibiliti untuk melakukan operasi tetapan semula kepada pengguna. Butang ini pada asasnya memadamkan apa sahaja yang pengguna telah memasukkan data pada borang yang sama. Selepas set semula, borang akan diisi dengan nilai lalai. Artikel ini akan melihat penggunaan butang tetapan semula dalam berbilang senario dan cara ia digunakan.
Sintaks Butang Tetapkan Semula HTML
Operasi tetapan semula boleh ditakrifkan pada teg atau
1. Teg Input
Sintaks:
<input type = "reset">
Di sini, Input ialah teg yang digunakan untuk mentakrifkan elemen Input dan jenis ialah atribut yang digunakan untuk menentukan jenis elemen input. Penetapan semula nilai ialah salah satu nilai yang boleh dihantar kepada atribut ini.
2. Tag Butang
Sintaks:
<button type = "reset">
Tetapan semula ialah salah satu nilai yang boleh dihantar kepada atribut jenis elemen Button. Ini akan menetapkan semula borang, seperti yang dinyatakan sebelum ini. Dua nilai lain yang disokong oleh teg ini ialah “butang” dan “serahkan”.
Contoh untuk Melaksanakan Butang Set Semula HTML
Di bawah ialah contoh Butang Set Semula HTML:
Contoh #1 – butang Tetapkan semula menggunakan Tag Input
Kod:
<!DOCTYPE html>
<html>
<head>
<title>
Reset button in HTML
</title>
<style>
.form-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : 450px;
width : 95%;
}
.form {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.form li {
margin: 12px 0 0 0;
list-style: none;
}
.form label {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.form .field {
width: 80%;
height: 20px;
}
.form input[ type = submit], .form input[ type = reset] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.form input[type = submit]:hover, .form input[ type = reset]:hover {
background: #2173f3;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
</style>
</head>
<body>
<div class = "form-data">
<div class = "heading">
<h2> HTML Reset Button </h2>
<p> Click on reset button to reset the form data. </p>
</div>
<div>
<form action = "#" >
<ul class = "form" >
<li>
<label> First Name <span class = "required"> * </span></label>
<input type = "text" name = "firstName" placeholder = " First name" class = "field"/>
</li>
<li>
<label> Last Name <span class = "required"> * </span></label>
<input type = "text" name = "lastName" placeholder = " Last name" class = "field" />
</li>
<li>
<label> Email <span class = "required" > * </span></label>
<input type="email" name="field3" class="field" />
</li>
<li>
<label> Message </label>
<textarea name = "message" id = "message" class = "field-message"></textarea>
</li>
<li>
<input type = "reset" value = "Reset">
<input type = "submit" value = "Submit" />
</li>
</ul>
</form>
</div>
</div>
<script type = "text/javascript">
</script>
</body>
</html>
Output:
Cuba taip dalam kotak input, dan tanpa klik semula pada butang set semula, data yang dimasukkan akan dipadamkan. Ambil perhatian bahawa untuk melakukan penetapan semula, kami tidak perlu memuat semula halaman; data akan dikosongkan secara dinamik pada halaman dimuatkan yang sama.
Contoh #2 – Tetapkan Semula Butang menggunakan Tag Butang
Kod:
<!DOCTYPE html>
<html>
<head>
<title>
Reset button in HTML
</title>
<style>
.form-data {
border : #81D4FA 2px solid;
background-color : #03a9f400;
text-align : left;
padding-left : 20px;
height : 450px;
width : 95%;
}
.form {
margin:5px auto;
max-width: 700px;
padding: 25px 15px 15px 25px;
}
.form li {
margin: 12px 0 0 0;
list-style: none;
}
.form label {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
.form .field {
width: 80%;
height: 20px;
}
.form button[ type = submit], .form button[ type = reset] {
background: #2196F3;
padding: 10px 17px 10px 17px;
margin-right: 10px;
color: #fff;
border: none;
}
.form button[type = submit]:hover, .form button[ type = reset]:hover {
background: #2173f3;
}
.heading {
font-weight: bold;
border-bottom: 2px solid #ddd;
font-size: 15px;
width: 98%;
}
</style>
</head>
<body>
<div class = "form-data">
<div class = "heading">
<h2> HTML Reset Button </h2>
<p> Click on reset button to reset the form data. </p>
</div>
<div>
<form action = "#" >
<ul class = "form" >
<li>
<label> First Name <span class = "required"> * </span></label>
<input type = "text" name = "firstName" placeholder = " First name" class = "field"/>
</li>
<li>
<label> Last Name <span class = "required"> * </span></label>
<input type = "text" name = "lastName" placeholder = " Last name" class = "field" />
</li>
<li>
<label> Email <span class = "required" > * </span></label>
<input type="email" name="field3" class="field" />
</li>
<li>
<label> Message </label>
<textarea name = "message" id = "message" class = "field-message"></textarea>
</li>
<li>
<button type = "reset" value = "Reset"> Reset </button>
<button type = "submit" value = "Submit"> Submit </button>
</li>
</ul>
</form>
</div>
</div>
<script type = "text/javascript">
</script>
</body>
</html>
Output:
Kesimpulan
Butang set semula HTML menyediakan ciri yang berkuasa untuk menetapkan semula data yang ditaip dalam borang secara automatik tanpa memuat semula halaman web. Butang set semula biasanya digunakan di dalam elemen borang.
Atas ialah kandungan terperinci Butang Set Semula HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!