HTMLでフォームの選択ボックス効果を実装するにはどうすればよいですか?ラジオボタンと複数選択ボックスの実装（コード例）-htmlチュートリアル-php.cn

HTMLでフォームの選択ボックス効果を実装するにはどうすればよいですか?ラジオボタンと複数選択ボックスの実装（コード例）

青灯夜游

リリース： 2018-09-12 11:16:45

オリジナル

17269 人が閲覧しました

フォームを使用してデータを送信する場合、ユーザーの操作を軽減するために、選択ボックスを使用することをお勧めします。この章では、HTML でフォームの選択ボックス効果を実装する方法を紹介します。ラジオボタンとチェックボックスの実装 (コード例)。ラジオボタンのコードとチェックボックスのコード例を通じて、ラジオボタンのスタイルと複数選択ボックスのスタイルを実現します。必要な方は参考にしていただければ幸いです。

1. 選択ボックスの種類と構文

HTML にはラジオボタンとチェックボックスの 2 種類の選択ボックスがあります。この 2 つの違いは、ユーザーがラジオで 1 つのオプションしか選択できないことです。ボタンをクリックすると、ユーザーは複数の項目を選択したり、すべてを選択したりできます。

文法:

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

ログイン後にコピー

2. HTML ラジオボタンスタイル

html ラジオボタンコード:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>单选框</title>
	</head>
	<body>
		<form name="form" method="post" action="">
		              你是否喜欢运动？<br />
		     <input type="radio" name="radio" value="喜欢"/>喜欢
		     <input type="radio" name="radio" value="不喜欢"/>不喜欢
		     <input type="radio" name="radio" value="无所谓"/>无所谓
		</form>
	</body>
</html>

ログイン後にコピー

レンダリング:

HTMLでフォームの選択ボックス効果を実装するにはどうすればよいですか?ラジオボタンと複数選択ボックスの実装（コード例）

上記の例からわかるように:

type="radio" の場合、選択ボックスはラジオボタンとして定義されます。

name 属性: ラジオボタンの名前を定義します。ラジオボタンはグループで使用され、ラジオオプションはすべて同じグループで使用する必要があります。同じ名前;

value 属性: ラジオボタンの値を定義します。同じグループ内ではフィールド値が異なる必要があります。

checked="checked" が設定されている場合、このオプションはラジオボタンとチェックボックスの両方で使用できます (ラジオボタンなど)。

HTMLでフォームの選択ボックス効果を実装するにはどうすればよいですか?ラジオボタンと複数選択ボックスの実装（コード例）

3. HTML チェックボックススタイル

チェックボックスを使用すると、主に Web 閲覧者がオプションのセット内で複数のオプションを同時に選択できます。各チェックボックスは独立した要素であり、一意の名前を持つ必要があります。

html チェックボックスコード:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复选框</title>
	</head>
	<body>
		<form name="form" method="post" action="">
		              你喜欢什么运动？<br />
		     <input type="checkbox" name="checkbox" value="跑步" checked="checked"/>跑步
		     <input type="checkbox" name="checkbox" value="羽毛球"/>羽毛球
		     <input type="checkbox" name="checkbox" value="乒乓球"/>乒乓球
		     <input type="checkbox" name="checkbox" value="乒乓球"/>登山
		</form>
	</body>
</html>

ログイン後にコピー

レンダリング:

HTMLでフォームの選択ボックス効果を実装するにはどうすればよいですか?ラジオボタンと複数選択ボックスの実装（コード例）

上記の例からわかるように:

type="checkbox" の場合、選択ボックスはチェックボックスとして定義されます。チェックボックスの名前を定義します。同じグループ内のチェックボックスは異なる名前を使用しますが、次のように同じ名前 (配列) として定義することもできます。

value 属性: チェックの値を定義します。ボックス、フィールド値は同じグループ内で異なっていなければなりません。

4. 選択ボックスの name 属性 HTML フォームでは、ラジオボタンのセット (ラジオ) であっても、チェックボックスのセット (チェックボックス) であっても、name 属性を含める必要があります。これは、処理ページでフォームによって渡された値を取得しやすくするためです。

ラジオボタンのセット (ラジオ): name 属性の値が同じであるため、1 つだけ選択できます。これは、$_GET['name']; などの処理ページで直接取得できます。

一連のチェックボックス (チェックボックス): 通常、name 属性の値は name[] に設定され、処理ページで要素が配列 name[] に追加されます。

if(!empty($_POST[&#39;name&#39;])){
for($i=0; $i< count($_POST[&#39;name&#39;]); $i++){
echo $array[$i].&#39;<br />&#39;;
}
}

ログイン後にコピー

このようにして、チェックボックスに渡された複数の異なるデータを収集できます。

以上がHTMLでフォームの選択ボックス効果を実装するにはどうすればよいですか?ラジオボタンと複数選択ボックスの実装（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。