Učení HTML část 30: Použití zaškrtávacích políček typu vstupu, typů rádia a zaškrtnutých atributů ve formulářích HTML

V předchozím tutoriálu jsme studovalio tom, jak vytvořit jednoduchý formulář v HTML spolu s použitím vstupních značek a jejich hodnot vstupního typu, a to textu, hesla a odeslání. V tomto tutoriálu se diskutuje o použití typu typu zaškrtávacího políčka, rádia a také zaškrtnutého atributu.

Pro více informací o dvou hodnotách typu vstupu a atributech se podívejme na níže uvedený tutoriál:

1. Zaškrtávací políčko typu vstupu

Zaškrtávací políčko typu vstupu slouží k vytvoření avýběrový seznam s malým rámečkem, který zobrazí kontrolní seznam, pokud na něj kliknete a lze jej vybrat více než jeden. Níže je uveden příklad zápisu a použití zaškrtávacích políček typu vstupu v 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>

Po provedení výše uvedeného kódu v prohlížeči se objeví následující obrázek:

2. Typ vstupu rádia

Vstup typu rádia se používá k vytvoření seznamu možností, které lze vybrat pouze jednou. Níže je uveden příklad psaní a použití rádiového vstupu v 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>

Po provedení výše uvedeného kódu v prohlížeči se objeví následující obrázek:

3. Kontrolované atributy

Kontrolovaný atribut se používá v typu vstupuzaškrtávací políčka a rádia označující, zda je položka vybrána nebo ne (určit výchozí možnosti). Níže je uveden příklad kódu pro psaní a použití atributu check v tagu <input> v 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>

Po provedení výše uvedeného kódu v prohlížeči se objeví následující obrázek: