Læring af HTML-del 30: Brug af inputtype-afkrydsningsfelter, radiotyper og kontrollerede attributter i HTML-formularer

I den foregående tutorial studerede viom, hvordan man opretter en enkel form i HTML sammen med brugen af input-tags og deres inputtypeværdier, nemlig tekst, adgangskode og indsendelse. Nå, i denne tutorial, hvad der diskuteres, er brugen af indtastning af afkrydsningsfeltype, radio og også den markerede attribut.

For flere detaljer om de to inputtypeværdier og attributter, lad os se på tutorial herunder:

1. Afkrydsningsfelt for inputtype

Afkrydsningsfelt for inputtype bruges til at oprette enen liste over valg med et lille felt, der viser en tjekliste, hvis der klikkes på boksen og kan vælges mere end én. I det følgende er et eksempel på skrivning og brug af indtastningsfelt i HTML:

<!DOCTYPE html>
<html>
<head>
<title> Penggunaan Input Type Checkbox di HTML </title>
</head>
<body>
<form action="proses_input.php" method="get">
Pilih Makanan Favorit Anda dibawah ini : <br>
<input type="checkbox" name="makanan" value="rendang">Rendang <br>
<input type="checkbox" name="makanan" value="bakso">Bakso <br>
<input type="checkbox" name="makanan" value="nasi goreng">Nasi Goreng <br>
<input type="checkbox" name="makanan" value="Mie Ayam Jamur">Mie Ayam Jamur<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Efter at ovenstående kode er udført i browseren, vises den som vist nedenfor:

2. Indgangstype radio

Indtastning af radiotype bruges til at oprette en liste over indstillinger, der kun kan vælges én gang. I det følgende er et eksempel på skrivning og anvendelse af radiotypeinput i HTML:

<!DOCTYPE html>
<html>
<head>
<title> Penggunaan Input Type Radio di HTML </title>
</head>
<body>
<form action="proses_input.php" method="get">
Pilih Pendidikan Terakhir Anda: <br>
<input type="radio" name="pendidikan" value="SMP"> SMP <br>
<input type="radio" name="pendidikan" value="SMA"> SMA <br>
<input type="radio" name="pendidikan" value="D3/S1"> D3/S1 <br>
<input type="radio" name="pendidikan" value="S2"> S2 <br>
<input type="radio" name="pendidikan" value="S3"> S3<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Efter at ovenstående kode er udført i browseren, vises den som vist nedenfor:

3. Kontrollerede attributter

Den markerede attribut bruges i inputtypenafkrydsningsfelter og radioer, der angiver, om et element er valgt eller ej (fastlægg standardindstillinger). Her nedenfor er et eksempel på skrivningskoden og brug af den markerede attribut i <input> -taggen i HTML:

<!DOCTYPE html>
<html>
<head>
<title> Penggunaan Atribut Checked di HTML Forms </title>
</head>
<body>
<form action="proses_input.php" method="get">
Pilih Pendidikan Terakhir Anda: <br>
<input type="radio" name="pendidikan" value="SMA"> SMA <br>
<input type="radio" name="pendidikan" value="D3/S1" checked> D3/S1 <br>
<input type="radio" name="pendidikan" value="S2"> S2 <br> <br>
Pilih Makanan Favorit Anda dibawah ini : <br>
<input type="checkbox" name="makanan" value="rendang" checked> Rendang <br>
<input type="checkbox" name="makanan" value="bakso"> Bakso <br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Efter at ovenstående kode er udført i browseren, vises den som vist nedenfor: