Perl Web開発者のHTML・CSS入門

【HTML5】テキストエリア(textarea) - 複数行テキスト入力のフォーム部品

テキストエリアは、複数行のテキストを入力するためのフォーム部品です。テキストエリアを作成するには、textareaタグを使用します。

<textarea name="message"></textarea>

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

テキストエリアは、インラインブロック要素

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

<textarea name="message" style="width:100px;height:50px;"></textarea>
<textarea name="message" style="width:200px;height:80px;"></textarea>

テキストエリアに、フォントサイズ、最小の高さ、パディングを設定する

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

<textarea style="padding:11px 5px 9px 5px;font-size:16px;min-height:200px;"></textarea>

iphone/safari対応するために、テキストエリアのフォントサイズは、16px以上に

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

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

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

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

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

お問い合わせ内容:

<label for="message">お問い合わせ内容:</label> <input type="text" name="message" id="message">

お問い合わせ内容というラベルをクリックしてみてください。テキストエリアに、フォーカスが当たります。

フォーム送信時に、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>
      お問い合わせ内容: <textarea name="message"></textarea>
    </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 message = $(this).closest('form').find('[name=message]').val();
      
      alert(message);
    });
  });
</script>

<div class="form-text-field-part">
  <form>
    <div>
      お問い合わせ内容: <textarea name="message"></textarea>
    </div>
    <button type="button" class="submit_button">送信</button>
  </form>
</div>