フォームでセレクトボックスを作るのに必要な命令「select」を使ってみる

この記事がお役に立てたならシェアしてくれると嬉しいです。

htmlフォームにはセレクトボックスという構成部品があります。
この機能は都道府県などの地名をあらかじめ用意して、その中から選択して貰う等の場合に使えます。

種類も2つあり、用途よって使い分けられます。

スポンサーリンク

セレクトボックスの作り方

●リスト形式
もっとすごいhtmlフォームを作るのに必要なパーツ「select」を紹介

あらかじめ選択肢をリスト状に並べて選んで貰うボックスです。
項目が少な目な時に使い勝手が良いです。

●プルダウン形式
もっとすごいhtmlフォームを作るのに必要なパーツ「select」を紹介

選択している項目のみを表示し選択を変更する場合に、項目の変更候補リストを展開するボックスです。
項目が多い時に全体のレイアウトを崩さず便利です。

実際の命令はこんな感じです。

■select

<select name=”” size=””>
</select>

<select>と</select>の間に「<option value=””>」という命令で選択する項目を作っていきます。
(例えば、いちご・メロン・柿など)

nameは送り先の連想配列のキーになります。

sizeはリスト形式の縦幅の数字です。数値は一度に表示する項目数の数字です。
省略するとプルダウン形式に展開するタイプになります。

■option

<option value=”” selected>

<textarea>と</textarea>の間に入れます。

valueは送り先の連想配列の値になります。
項目の表示自体は「>」の後に書いた物が適応されます。
<option value=”s1″>いちご

selectedを入れると、その項目が選択状態で開始されます。
初期選択ではない項目は省略します。

例:

<form method="post">
<input type="submit" name="botan" value="send">ボタン

<BR>
<!---リスト形式--->
<select name="sel1">
<option value="s1">いちご
<option value="s2">メロン
<option value="s3" selected>柿
</select>

<!---プルダウン形式--->
<select name="sel2" size="5">
<option value="s1">いちご
<option value="s2" selected>メロン
<option value="s3">柿
</select>


</form>

<?php
if(isset($_POST["botan"]))
{
  print $_POST["sel1"];
  echo "<BR>";
  print $_POST["sel2"];
  echo "<BR>";
  print $_POST["botan"];
}
?>


実行するとこうなります。
もっとすごいhtmlフォームを作るのに必要なパーツ「select」を紹介

実際に実行すると
サンプル
のようになります。

リスト形式は選択された項目は上の画像のようにハイライトを入られて表示されます。
この場合は柿にselectedが使われているので柿が初期状態では選択されています。

プルダウン形式はクリックすると以下の様に展開し
もっとすごいhtmlフォームを作るのに必要なパーツ「select」を紹介
選択すると選択した項目のみを表示するよう格納します。

もっとすごいhtmlフォームを作るのに必要なパーツ「select」を紹介
選択されたselectのvalue値が送られます。


今回の例で言えば

いちごを選択した場合にvalue=”s1″が
メロンを選んだ場合はvalue=”s1″が
柿を選んだ場合はvalue=”s3″が返ってきます。

この値がphpに渡されます。
最初にも書きましたが、この機能を使えば都道府県の入力等
様々な事に使い道がありそうです。

スポンサーリンク

この記事がお役に立てたならシェアしてくれると嬉しいです。


最新記事の更新情報をお届けします。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)