ホームページ > 記事 > ウェブフロントエンド > HTMLでフォームの選択ボックス効果を実装するにはどうすればよいですか?ラジオボタンと複数選択ボックスの実装（コード例）
HTMLでフォームの選択ボックス効果を実装するにはどうすればよいですか?ラジオボタンと複数選択ボックスの実装（コード例）
- 青灯夜游オリジナル
- 2018-09-12 11:16:4517249ブラウズ
フォームを使用してデータを送信する場合、ユーザーの操作を軽減するために、選択ボックスを使用することをお勧めします。この章では、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>
レンダリング:
上記の例からわかるように:
type="radio" の場合、選択ボックスはラジオ ボタンとして定義されます。
name 属性: ラジオ ボタンの名前を定義します。ラジオ ボタンはグループで使用され、ラジオ オプションはすべて同じグループで使用する必要があります。同じ名前;
value 属性: ラジオ ボタンの値を定義します。同じグループ内ではフィールド値が異なる必要があります。
checked="checked" が設定されている場合、このオプションはラジオ ボタンとチェック ボックスの両方で使用できます (ラジオ ボタンなど)。
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>
レンダリング:
上記の例からわかるように:
type="checkbox" の場合、選択ボックスはチェック ボックスとして定義されます。チェック ボックスの名前を定義します。同じグループ内のチェック ボックスは異なる名前を使用しますが、次のように同じ名前 (配列) として定義することもできます。
value 属性: チェックの値を定義します。ボックス、フィールド値は同じグループ内で異なっていなければなりません。
4. 選択ボックスの name 属性 HTML フォームでは、ラジオ ボタンのセット (ラジオ) であっても、チェックボックスのセット (チェックボックス) であっても、name 属性を含める必要があります。これは、処理ページでフォームによって渡された値を取得しやすくするためです。
ラジオ ボタンのセット (ラジオ): name 属性の値が同じであるため、1 つだけ選択できます。これは、$_GET['name']; などの処理ページで直接取得できます。
一連のチェックボックス (チェックボックス): 通常、name 属性の値は name[] に設定され、処理ページで要素が配列 name[] に追加されます。
if(!empty($_POST['name'])){
for($i=0; $i< count($_POST['name']); $i++){
echo $array[$i].'<br />';
}
}このようにして、チェックボックスに渡された複数の異なるデータを収集できます。
以上がHTMLでフォームの選択ボックス効果を実装するにはどうすればよいですか?ラジオボタンと複数選択ボックスの実装（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。