Perl Web開発者のHTML・CSS入門

【HTML5】セレクト(select)フィールド - 項目を選択するフォーム部品

セレクト(select)フィールドは、項目を選択するためのフォーム部品です。selectタグとoptionタグを使います。

価格を選択 1000円未満 1000円～2000円まで 2000円～3000円まで 3000円以上

<select name="price">
  <option value="-1">価格を選択</option>
  <option value="1000">1000円未満</option>
  <option value="2000">1000円～2000円まで</option>
  <option value="3000">2000円～3000円まで</option>
  <option value="99999999">3000円以上</option>
</select>

項目を選択することができます。フォーム部品なので、name属性で、名前を付けておくことが一般的です。

サーバーに送信したい値はvalue属性に指定します。

セレクトフィールドは、インラインブロック要素

セレクトフィールドは、デフォルトで、インラインブロック要素です。インラインブロック要素なので、左側に流れ、高さや幅を設定することができます。

<select name="price" style="width:150px;height:50px;">
  <option value="-1">価格を選択</option>
  <option value="1000">1000円未満</option>
  <option value="2000">1000円～2000円まで</option>
  <option value="3000">2000円～3000円まで</option>
  <option value="99999999">3000円以上</option>
</select>

<select name="price" style="width:200px;height:80px;">
  <option value="-1">価格を選択</option>
  <option value="1000">1000円未満</option>
  <option value="2000">1000円～2000円まで</option>
  <option value="3000">2000円～3000円まで</option>
  <option value="99999999">3000円以上</option>
</select>

セレクトフィールドに、フォントサイズ、パディングを設定する

デフォルトのセレクトフィールドは、スマートフォンをメインに考えると、少し小さいです。セレクトフィールドに、適切なパディングを設定してみましょう。

<select name="price" style="padding:5px 5px 9px 5px;font-size:16px;">
  <option value="-1">価格を選択</option>
  <option value="1000">1000円未満</option>
  <option value="2000">1000円～2000円まで</option>
  <option value="3000">2000円～3000円まで</option>
  <option value="99999999">3000円以上</option>
</select>

iphone/safari対応するために、セレクトフィールドのフォントサイズは、16px以上に

iphone/safari対応するために、セレクトフィールドのフォントサイズは、16px以上にしましょう。iphone/safariでフォーム入力時の自動拡大機能をoffにするためのです。

iphone/safariで、フォーム部品にデフォルトのデザインが適用されるのを防ぐ

iphone/safariで、フォーム部品にデフォルトのデザインが適用されるのを防ぐには、「-webkit-appearance:none;」を指定します。iphone/safariで、テキストフィールドやボタンのデフォルトデザインが適用されてしまうのを解決を参考にしてください。

フォーム送信時に、jQueryでフォームのセレクトフィールドの値を取得する

送信ボタンを押したタイミングで、セレクトフィールドの値を取得するjQueryを使ったサンプルです。ajaxでPOSTリクエストを送信するときに、よく使います。取得した内容を、alertで表示しています。

フォームのすべての値を取得する方法

フォームのすべての値を取得する方法です。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $(function () {
    $(document).on('click', '.form-text-field-all .submit_button', function () {
      
      /* フォームのすべての値を取得する方法 */
      var data = $(this).closest('form').serialize();
      
      alert(data);
    });
  });
</script>

<div class="form-text-field-all">
  <form>
    <select name="price">
      <option value="-1">価格を選択</option>
      <option value="1000">1000円未満</option>
      <option value="2000">1000円～2000円まで</option>
      <option value="3000">2000円～3000円まで</option>
      <option value="99999999">3000円以上</option>
    </select>
    <button type="button" class="submit_button">送信</button>
  </form>
</div>

on('click')をdocumentから始めているのは、動的なHTMLの書き換えに対応するためです。ドキュメントトップからたどると、HTMLの部分が動的に書き換えられた場合も、正しく動作します。buttonに「type="button"」を指定しておくと、フォームのボタンのサブミットの動作がなくなくすことができます。

個別のセレクトフィールドの値を取得する方法

個別のセレクトフィールドの値を取得する方法です。価格だけを取得しています。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $(function () {
    $(document).on('click', '.form-text-field-part .submit_button', function () {
      
      /* 価格を取得 */
      var price = $(this).closest('form').find('[name=price]').val();
      
      alert(price);
    });
  });
</script>

<div class="form-text-field-part">
  <form>
    <select name="price">
      <option value="-1">価格を選択</option>
      <option value="1000">1000円未満</option>
      <option value="2000">1000円～2000円まで</option>
      <option value="3000">2000円～3000円まで</option>
      <option value="99999999">3000円以上</option>
    </select>
    <button type="button" class="submit_button">送信</button>
  </form>
</div>