Nauka HTML Część 30: Używanie pól wyboru typów danych wejściowych, typów radia i sprawdzonych atrybutów w formularzach HTML

W poprzednim samouczku studiowaliśmyo tym, jak utworzyć prosty formularz w HTML wraz z użyciem tagów wejściowych i ich wartości typu wejściowego, a mianowicie tekstu, hasła i przesłania. Cóż, w tym samouczku omówiono użycie wejścia typu pole wyboru, radia, a także atrybutu zaznaczonego.

Aby uzyskać więcej informacji na temat dwóch wartości i atrybutów typu wejściowego, spójrzmy na samouczek poniżej:

1. Pole wyboru Typ wejścia

Pole wyboru typu wejścia służy do utworzenialista opcji z małym polem, które wyświetli listę kontrolną, jeśli pole zostanie kliknięte i może być wybrane więcej niż jedno. Poniżej znajduje się przykład pisania i używania pól wyboru typu danych wejściowych w 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 wykonaniu powyższego kodu w przeglądarce pojawi się on jak pokazano poniżej:

2. Typ wejścia radia

Wejście typu radia służy do utworzenia listy opcji, które można wybrać tylko raz. Poniżej znajduje się przykład pisania i używania danych typu radio w 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 wykonaniu powyższego kodu w przeglądarce pojawi się on jak pokazano poniżej:

3. Sprawdzone atrybuty

Zaznaczony atrybut jest używany w typie wejściowympola wyboru i radia wskazujące, czy element jest wybrany, czy nie (określ opcje domyślne). Poniżej znajduje się przykład pisania kodu i używania sprawdzonego atrybutu w znaczniku <input> w 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 wykonaniu powyższego kodu w przeglądarce pojawi się on jak pokazano poniżej: