Maison >interface Web >tutoriel HTML >« case HTML POST non cochée »
« case HTML POST non cochée »
- 王林avant
- 2023-09-01 19:29:06760parcourir
Dans ce tutoriel, nous allons apprendre à POSTER une case HTML non cochée.
Pour interagir avec les utilisateurs, il est nécessaire d'obtenir leurs entrées ou données via le site Web. Les formulaires HTML sont utilisés pour obtenir la saisie de l'utilisateur. Les formulaires sont essentiels pour capturer les données des utilisateurs sur votre site Web. Ces formulaires prennent les entrées de l'utilisateur et envoient les données au serveur à l'aide de requêtes HTTP.
Il existe deux types de requêtes HTTP, l'une est GET et l'autre est POST. La requête POST est le type le plus couramment utilisé car elle est sécurisée et peut envoyer de grandes quantités de données. Mais les deux méthodes envoient des données dont les valeurs ont été modifiées ou éditées. Par conséquent, les valeurs non modifiées ou les cases non cochées ne sont pas envoyées au serveur.
Voyons donc comment POSTER une case HTML non cochée à partir d'un formulaire.
Utilisez les types d'entrée masqués
Un type de saisie masqué est un champ de saisie qui n'accepte pas les saisies de l'utilisateur et n'est pas affiché. Ce champ de saisie est utilisé par défaut uniquement pour envoyer la valeur du champ via une requête HTTP. Il s'agit d'un domaine très important dans la formation de données et de bases de données.
Sans le formulaire HTML, nous ne pouvons pas envoyer de données au serveur. Pour envoyer des données supplémentaires sur le serveur qui ne sont pas obtenues de l'utilisateur, nous devons utiliser des types d'entrée cachés en HTML.
Les utilisateurs peuvent publier des cases à cocher HTML non cochées en utilisant des types d'entrée masqués en suivant la syntaxe suivante -
Grammaire
<input type = "checkbox" id = "Check" name = "CheckBox" value = "1"/>
<input type = "hidden" id = "Checkhidden" name = "CheckBox" value = "0"/>
<script>
if(document.getElementById(" <Checkbox ID here> ").checked) {
document.getElementById( <Hidden field id here> ).disabled = true;
}
</script>
Utilisez les champs de saisie masqués selon la syntaxe ci-dessus.
Exemple 1
Dans l'exemple ci-dessous, nous utilisons des cases à cocher dans un formulaire pour obtenir les commentaires de l'utilisateur. Nous verrons ce que nous obtiendrons après avoir publié les données à l'aide des cases à cocher. Nous avons ajouté sept cases à cocher au formulaire. Après avoir cliqué sur le bouton Soumettre, nous obtiendrons les données envoyées par la méthode post à partir du formulaire.
<html>
<body>
<h2> Using <i> POST method </i> to post the HTML checkboxes </h2>
<form method="post" id="form" onsubmit="func(); return false">
Select your Subjects: <br>
<input type="checkbox" id="group1" name="Subject" value="Math" />
<label for="group1"> Math </label><br>
<input type="checkbox" id="group2" name="Subject" value="Science" />
<label for="group2"> Science </label><br>
<input type="checkbox" id="group3" name="Subject" value="English" />
<label for="group3"> English </label> <br>
<input type="checkbox" id="group4" name="Subject" value="History" />
<label for="group4"> History </label> <br>
<input type="checkbox" id="group5" name="Subject" value="Geography" />
<label for="group5"> Geography </label> <br>
<input type="checkbox" id="group6" name="Subject" value="Hindi" />
<label for="group6"> Hindi </label> <br>
<input type="checkbox" id="group7" name="Subject" value="Information technology" />
<label for="group7"> Information technology </label> <br>
<button> Submit </button>
</form>
<div id="output"> </div>
<script>
function func() {
const form = document.getElementById('form');
const formData = new FormData(form);
const output = document.getElementById('output');
output.style.color = "red";
for (const [key, value] of formData) {
output.innerHTML += `${key}: ${value}` + '<br>';
}
}
</script>
</body>
</html>
Dans l'exemple ci-dessus, l'utilisateur peut voir que nous n'obtiendrons que les valeurs des cases cochées et que seules ces valeurs seront envoyées au serveur.
Exemple 2
Dans l'exemple ci-dessous, nous utilisons un type d'entrée masqué pour envoyer des données au serveur, que la case soit cochée ou non. Nous définissons un type d'entrée masqué avec le même nom que les autres cases à cocher du formulaire. Dans le script, nous avons donné une condition selon laquelle si la case est cochée, les champs cachés respectés seront désactivés. De cette façon, nous n’obtiendrons pas une double valeur pour la même case à cocher.
<html>
<body>
<h2> Using <i> hidden type </i> of input to post unchecked HTML checkboxes </h2>
<form method="post" action="#" onsubmit="func(); return false" id="form">
<label for="fname"> Enter your name: </label>
<input type="text" id="fname" name="Fname" value="" /> <br>
<label for="lname"> Enter your name: </label>
<input type="text" id="lname" name="Lname" value="" /> <br> Select your gender: <br>
<input type="hidden" id="maleHidden" name="Gender" value="He is not a male" />
<input type="checkbox" id="male" name="Gender" value="male" />
<label for="male"> Male </label> <br>
<input type="hidden" id="femaleHidden" name="Gender" value="He is not a female" />
<input type="checkbox" id="female" name="Gender" value="female" />
<label for="female"> Female </label> <br>
<input type="hidden" id="transgenderHidden" name="Gender" value="He is not a transgender" />
<input type="checkbox" id="transgender" name="Gender" value="transgender" />
<label for="transgender"> Transgender </label> <br>
<button> Submit </button>
<div id="output"> </div>
</form>
<script>
function func() {
if (document.getElementById("male").checked) {
document.getElementById('maleHidden').disabled = true;
}
if (document.getElementById("female").checked) {
document.getElementById('femaleHidden').disabled = true;
}
if (document.getElementById("transgender").checked) {
document.getElementById('transgenderHidden').disabled = true;
}
const form = document.getElementById('form');
const formData = new FormData(form);
const output = document.getElementById('output');
output.style.color = "red";
for (const [key, value] of formData) {
output.innerHTML += `${key}: ${value}` + '<br>';
}
}
</script>
</body>
</html>
Dans l'exemple ci-dessus, l'utilisateur peut voir que nous pouvons publier une case à cocher HTML non cochée en utilisant masqué comme type d'entrée en HTML.
Dans ce tutoriel, nous avons appris à POSTER une case à cocher HTML non cochée.
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!