Maison > Article > interface Web > Bouton de réinitialisation HTML
Bouton de réinitialisation HTML
- 王林original
- 2024-09-04 16:42:04742parcourir
Lors du remplissage des formulaires dans un navigateur, il est important de donner à l'utilisateur la flexibilité d'effectuer plusieurs opérations sur un formulaire Web. Un bouton de type spécial connu sous le nom de réinitialisation permet de réinitialiser les valeurs sous la forme saisies par l'utilisateur. Ce bouton donne la flexibilité d'effectuer l'opération de réinitialisation à l'utilisateur. Ce bouton efface essentiellement toutes les données saisies par l'utilisateur sur le même formulaire. Après la réinitialisation, le formulaire sera rempli avec les valeurs par défaut. Cet article verra l'utilisation du bouton de réinitialisation dans plusieurs scénarios et comment il est utilisé.
Syntaxe du bouton de réinitialisation HTML
L'opération de réinitialisation peut être définie sur ou un
1. Balise d'entrée
Syntaxe :
<input type = "reset">
Ici, Input est une balise utilisée pour définir l'élément Input, et type est un attribut utilisé pour définir le type d'élément d'entrée. La valeur réinitialisée est l'une des valeurs pouvant être transmises à cet attribut.
2. Balise de bouton
Syntaxe :
<button type = "reset">
La réinitialisation est l'une des valeurs qui peuvent être transmises à l'attribut type de l'élément Button. Cela réinitialisera le formulaire, comme indiqué précédemment. Les deux autres valeurs prises en charge par cette balise sont « bouton » et « soumettre ».
Exemples d'implémentation du bouton de réinitialisation HTML
Vous trouverez ci-dessous des exemples de boutons de réinitialisation HTML :
Exemple n°1 – Bouton de réinitialisation à l'aide de la balise d'entrée
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>
Sortie :
Essayez de taper dans les zones de saisie, et sans un clic rafraîchissant sur le bouton de réinitialisation, les données saisies seront effacées. Notez que pour effectuer une réinitialisation, nous n’avons pas besoin d’actualiser la page ; les données seront effacées dynamiquement sur la même page chargée.
Exemple n°2 – Réinitialiser le bouton à l'aide de la balise de bouton
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>
Sortie :
Conclusion
Le bouton de réinitialisation HTML offre une fonctionnalité puissante pour réinitialiser automatiquement les données saisies dans le formulaire sans actualiser la page Web. Le bouton de réinitialisation est normalement utilisé à l'intérieur de l'élément de formulaire.
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!