Beim Ausfüllen der Formulare in einem Browser ist es wichtig, dem Benutzer die Flexibilität zu bieten, mehrere Vorgänge auf einem Webformular auszuführen. Eine spezielle Schaltfläche namens „Zurücksetzen“ ermöglicht das Zurücksetzen der vom Benutzer eingegebenen Werte. Diese Schaltfläche gibt dem Benutzer die Flexibilität, den Reset-Vorgang durchzuführen. Diese Schaltfläche löscht grundsätzlich alle Daten, die der Benutzer im selben Formular eingegeben hat. Nach dem Zurücksetzen wird das Formular mit Standardwerten gefüllt. In diesem Artikel wird die Verwendung der Reset-Taste in verschiedenen Szenarien und ihre Verwendung beschrieben.
Syntax der HTML-Reset-Schaltfläche
Der Reset-Vorgang kann auf definiert werden. -Tag oder eine Etikett. Um dies zu definieren, wird auf diesen Tags das Attribut type verwendet und ihm der Wert „reset“ übergeben.
1. Eingabe-Tag
Syntax:
<input type = "reset">
Nach dem Login kopieren
Hier ist „Input“ ein Tag, der zum Definieren des Input-Elements verwendet wird, und „type“ ist ein Attribut, das zum Definieren des Typs des Input-Elements verwendet wird. Der Wert „Reset“ ist einer der Werte, die an dieses Attribut übergeben werden können.
2. Button-Tag
Syntax:
<button type = "reset">
Nach dem Login kopieren
Der Reset ist einer der Werte, die an das Typattribut des Button-Elements übergeben werden können. Dadurch wird das Formular, wie bereits erwähnt, zurückgesetzt. Die anderen beiden von diesem Tag unterstützten Werte sind „button“ und „submit“.
Beispiele zur Implementierung der HTML-Reset-Schaltfläche
Unten finden Sie Beispiele für die HTML-Reset-Schaltfläche:
Beispiel #1 – Schaltfläche „Zurücksetzen“ mit Eingabe-Tag
Code:
<!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>Nach dem Login kopieren
Ausgabe:
Versuchen Sie, etwas in die Eingabefelder einzugeben, und ohne einen erneuten Klick auf die Schaltfläche „Zurücksetzen“ werden die eingegebenen Daten gelöscht. Beachten Sie, dass wir zum Zurücksetzen die Seite nicht aktualisieren müssen. Die Daten werden dynamisch auf derselben geladenen Seite gelöscht.
Beispiel Nr. 2 – Schaltfläche zum Zurücksetzen mithilfe des Schaltflächen-Tags
Code:
<!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>Nach dem Login kopieren
Ausgabe:
Hinweis: dass die Schaltfläche zum Zurücksetzen automatisch funktioniert, wenn sie innerhalb des Formularelements platziert wird. Die Schaltfläche zum Zurücksetzen in diesem Formular wird automatisch damit verknüpft. Nur die im Formular-Tag platzierte Reset-Schaltfläche gilt für dieses Formular, nicht von außen. Außerdem können mehrere Reset-Tasten in einem Formular platziert werden, sodass alle Reset-Tasten ordnungsgemäß funktionieren. Es wird empfohlen, die Schaltflächen zum Zurücksetzen mit Vorsicht zu verwenden, da die Gefahr besteht, dass der Benutzer versehentlich auf die Schaltfläche zum Zurücksetzen klickt und alle eingegebenen Daten verloren gehen.
Fazit
Die HTML-Reset-Schaltfläche bietet eine leistungsstarke Funktion zum automatischen Zurücksetzen der im Formular eingegebenen Daten, ohne die Webseite zu aktualisieren. Der Reset-Button wird normalerweise innerhalb des Formularelements verwendet.
Das obige ist der detaillierte Inhalt vonSchaltfläche zum Zurücksetzen des HTML-Codes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
