Perl Web開発者のHTML・CSS入門

【HTML5】テキストフィールド - テキスト入力のフォーム部品

テキストフィールドは、テキストを入力するためのフォーム部品です。inputタグで「type="text"」を指定します。

<input type="text" name="address">

テキストを入力することができます。フォーム部品なので、name属性で、名前を付けておくことが一般的です。

テキストフィールドは、インラインブロック要素

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

<input type="text" name="address" style="width:100px;height:50px;">
<input type="text" name="tel" style="width:200px;height:80px;">

テキストフィールドに、フォントサイズ、パディングを設定する

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

<input type="text" name="address" style="padding:12px 5px 10px 5px;">

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

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

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

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

テキストフィールドのラベルをクリックしたときに、フォーカスが当たるようにする

テキストフィールドだけではなく、項目見出しをクリックしたときに、フォーカスが当たるようにするにはlabelタグを使います。inputタグの中のid属性で指定した名前をlabelタグのfor属性に指定します。

住所:

<label for="address">住所:</label> <input type="text" name="address" id="address">

住所というラベルをクリックしてみてください。テキストフィールドに、フォーカスが当たります。

フォーム送信時に、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>
    <div>
      住所: <input type="text" name="address">
    </div>
    <div>
      電話番号: <input type="text" name="tel">
    </div>
    <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 address = $(this).closest('form').find('[name=address]').val();
      
      alert(address);
    });
  });
</script>

<div class="form-text-field-part">
  <form>
    <div>
      住所: <input type="text" name="address">
    </div>
    <div>
      電話番号: <input type="text" name="tel">
    </div>
    <button type="button" class="submit_button">送信</button>
  </form>
</div>