【HTML】HTML5で変わったこと。formのtextareaについて解説。
  • facebookページ
  • twitterページ
  • 2020.03.16

    【HTML】HTML5で変わったこと。formのtextareaについて解説。

    HTML5にバージョンアップされたことで、HTML構築で可能なことが広がりましたが、フォームについても同じことが言えます。

    テキストフィールドの内容もアップグレードされ、単体で出来ることが多くなりました。

    そこで今回はこの<textarea>タグについて追加された機能などを中心に解説してみたいと思います。

    textとtextareaの違い

    フォームでは様々な部品を使用しますが、文字列を扱う部品には「input type: text 」と「textarea」があります。

    textareaはコード記述方法も使う場面も、input type: textとは異なっていますので使用する場面を間違えないようにしましょう。

    textareaの書き方

    textareaを使用する方法は次の通りです。

    開始タグ<textarea>と終了タグ</textarea>で括ります。

    一方”input type: text”は終了タグが存在しないため、<input type=”text”>となります。

    textareaの使い分け

    textareaは基本的にフォームの中でも長文になりそうな部分に使用します。

    例えばお問い合わせでは、本文にあたる部分はtextareaを使用することになるはずです。

    入力制限について

    文字数に制限などはあるのですか?

    基本的にはないものと考えて良いのですが、あまりにも文字数が多すぎる場合にはブラウザがフリーズするケースもあります。

    <input type=”text”>も<textarea></textarea>もともに入力制限はありませんが、フォームを使用する人の環境によっては制限に似たものがある場合もあります。

    これはPC依存よるものとブラウザに依存する二つのケースがあり、PC依存のケースでは主にメインメモリ、ブラウザ依存ではIEやOperaなど利用するブラウザの違いが挙げられます。

    HTML5で変更された点

    textareaはHTML5にバージョンアップされたことで追加された属性がいくつかあります。

    • autofocus
    • form
    • maxlength
    • placeholder
    • required
    • wrap

    autofocus属性

    autofocus属性を指定している場合には、ページ読み込み完了時に自動でフォーカスされます。

    記述例

    form属性

    <textarea>タグを<form>タグの外側に記述する場合に使用します。

    HTML5ではformに対するルールが柔軟になったため、<form>タグとセットで使用しなければならないといったことはなくなりました。

    しかしそのままではどのフォームのものかが把握できないため、該当タグにform属性を指定することで、どのフォームに所属するのかを把握させることが出来ます。

    要素にform属性を指定しない場合には、直近かつ該当要素よりも前に記述されているのformが所属フォームとなります。

    記述例

    maxlength属性

    入力可能文字数を制限させる場合に使用する属性となります。

    今までは文字入力に制限をかけるためにはHTMLとは別にプログラミングが必要でしたが、HTML5からは別プログラムを用意することなく単体で制限がかけられます。

    記述例

    上記のコードでは、最大文字制限を「50文字」としていますが、このmaxlength属性には一つ注意すべき点があります。

    通常、アルファベットは1バイト文字、日本語などは2バイト文字と呼ばれています。

    例えばプログラムで同じ数と認識される文字数は日本語1文字に対しアルファベットは2文字ですが、maxlength属性で適用されている文字数は視覚効果的な文字数であり、バイト文字とは関係なく作用します。

    placeholder属性

    簡単に言うと入力ヒントです。

    フォームの初期状態(空白時)に灰色で文字が記述されているのをおみたことがあると思いますが、placeholder属性を指定することで実現させることが出来ます。

    注意点としては、フィールドの長さによっては前文表示させることが出来ないため、ケースバイケースでtitle属性と使い分ける必要があります。

    記述例

    required属性

    フォームによくある「必須項目」は以前では別でプログラムを組む必要がありましたが、HTML5からはrequired属性が追加され、プログラミングをすることなく単体で指定できるようになりました。

    textareaに”required”と指定することで、必須項目化され空欄チェックが同時に行えます。

    記述例

    wrap属性

    HTML5では「soft」「hard」「off」「physical」「virtual」のいずれかを指定することで、テキストエリアに入力された文字を折り返すことが出来るようになりました。

    • soft ─── 入力時折り返し、送信時には折り返さない
    • hard ─── 入力時も送信時も折り返す
    • off ─── 入力時も送信時も折り返し無し

    ※physicalはhardと同等、virtualはsoftと同等の動作をします。

    記述例

    まとめ

    いかがでしたか?

    今回は<textarea>タグについての解説を行いました。

    HTML5からはフィールドをform内に記述する必要がなくなったため、以前まで心配されていたレイアウト崩れにも対策できるようになりました。

    またHTML5での変更点で使い勝手も良くなったので、この記事を読んでしっかりと覚えておくようにしましょう。

     



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE