HTMLパート30の学習：HTMLフォームでの入力タイプチェックボックス、ラジオタイプ、およびチェック済み属性の使用

前のチュートリアルでは、HTMLで単純なフォームを作成する方法と、入力タグとその入力タイプの値、つまりテキスト、パスワード、送信を使用する方法について。さて、このチュートリアルでは、チェックボックスタイプの入力、ラジオ、およびchecked属性の使用について説明します。

2つの入力タイプの値と属性の詳細については、以下のチュートリアルを見てみましょう。

1.入力タイプのチェックボックス

入力タイプのチェックボックスは、ボックスがクリックされた場合にチェックリストが表示され、複数選択できる小さなボックス付きの選択肢のリスト。以下は、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>

上記のコードをブラウザで実行すると、次のように表示されます。

2.ラジオの入力タイプ

ラジオタイプの入力は、一度だけ選択できるオプションのリストを作成するために使用されます。以下は、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>

上記のコードをブラウザで実行すると、次のように表示されます。

3.チェックされた属性

チェック属性は入力タイプで使用されますアイテムが選択されているかどうかを示すチェックボックスとラジオ（デフォルトのオプションを決定します）。以下に、HTMLの<input>タグでコードを記述し、checked属性を使用する例を示します。

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

上記のコードをブラウザで実行すると、次のように表示されます。