Butang Set Semula HTML

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 tag. Atribut jenis digunakan pada teg ini untuk mentakrifkan ini dan nilai "set semula" dihantar kepadanya.

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"></button>

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:

<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>


<div class="form-data">
<div class="heading">
<h2 id="HTML-Reset-Button"> 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>

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:

<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>


<div class="form-data">
<div class="heading">
<h2 id="HTML-Reset-Button"> 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>

Output: 

Nota: bahawa butang set semula berfungsi secara automatik apabila diletakkan di dalam elemen borang. Butang set semula di dalam borang itu dikaitkan secara automatik dengannya. Hanya butang set semula yang diletakkan di dalam teg borang akan digunakan untuk borang itu, bukan dari luar. Selain itu, berbilang nombor butang set semula boleh diletakkan di dalam satu borang, dan ini semua butang set semula akan berfungsi dengan betul. Adalah dinasihatkan untuk menggunakan butang set semula dengan berhati-hati kerana terdapat kemungkinan mengklik butang set semula secara tersilap oleh pengguna, dan pengguna akan kehilangan semua data yang ditaip.

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!