Bouton de réinitialisation HTML

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 étiqueter. L'attribut type est utilisé sur ces balises pour définir cela, et la valeur « reset » lui est transmise.

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

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 :

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

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 :

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

Sortie : 

Remarque : que le bouton de réinitialisation fonctionne automatiquement lorsqu'il est placé à l'intérieur de l'élément de formulaire. Le bouton de réinitialisation à l’intérieur de ce formulaire s’y associe automatiquement. Seul le bouton de réinitialisation placé à l’intérieur de la balise form sera applicable à ce formulaire, et non de l’extérieur. En outre, plusieurs nombres de boutons de réinitialisation peuvent être placés dans un même formulaire, et tous ces boutons de réinitialisation fonctionneront correctement. Il est conseillé d'utiliser les boutons de réinitialisation avec prudence, car il est possible que l'utilisateur clique sur le bouton de réinitialisation par erreur et que l'utilisateur perde toutes les données saisies.

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!