HTML5にバージョンアップされたことで、HTML構築で可能なことが広がりましたが、フォームについても同じことが言えます。
テキストフィールドの内容もアップグレードされ、単体で出来ることが多くなりました。
そこで今回はこの<textarea>タグについて追加された機能などを中心に解説してみたいと思います。
textとtextareaの違い
フォームでは様々な部品を使用しますが、文字列を扱う部品には「input type: text 」と「textarea」があります。
textareaはコード記述方法も使う場面も、input type: textとは異なっていますので使用する場面を間違えないようにしましょう。
textareaの書き方
textareaを使用する方法は次の通りです。
<body> <form> <textarea></textarea> </form> </body>
開始タグ<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属性を指定している場合には、ページ読み込み完了時に自動でフォーカスされます。
記述例
<body> <form action="" method="post"> <textarea autofocus></textarea> </form> </body>
form属性
<textarea>タグを<form>タグの外側に記述する場合に使用します。
HTML5ではformに対するルールが柔軟になったため、<form>タグとセットで使用しなければならないといったことはなくなりました。
しかしそのままではどのフォームのものかが把握できないため、該当タグにform属性を指定することで、どのフォームに所属するのかを把握させることが出来ます。
要素にform属性を指定しない場合には、直近かつ該当要素よりも前に記述されているのformが所属フォームとなります。
記述例
<body> <p>Congratulations: <textarea name="sampleName" form="sampleField"></textarea></p> <p>Postscript: <input type="text" name="sampleText" form="sampleField"></p> <form id="sampleField" action="" method="post"></form> </body>
maxlength属性
入力可能文字数を制限させる場合に使用する属性となります。
今までは文字入力に制限をかけるためにはHTMLとは別にプログラミングが必要でしたが、HTML5からは別プログラムを用意することなく単体で制限がかけられます。
記述例
<body> <form id="sampleField" action="" method="post"> <textarea name="sampleName" maxlength="50"></textarea> </form> </body>
上記のコードでは、最大文字制限を「50文字」としていますが、このmaxlength属性には一つ注意すべき点があります。
通常、アルファベットは1バイト文字、日本語などは2バイト文字と呼ばれています。
例えばプログラムで同じ数と認識される文字数は日本語1文字に対しアルファベットは2文字ですが、maxlength属性で適用されている文字数は視覚効果的な文字数であり、バイト文字とは関係なく作用します。
placeholder属性
簡単に言うと入力ヒントです。
フォームの初期状態(空白時)に灰色で文字が記述されているのをおみたことがあると思いますが、placeholder属性を指定することで実現させることが出来ます。
注意点としては、フィールドの長さによっては前文表示させることが出来ないため、ケースバイケースでtitle属性と使い分ける必要があります。
記述例
<body> <form id="sampleField" action="" method="post"> <textarea name="sampleName" placeholder="文字を入力してください"></textarea> </form> </body>
required属性
フォームによくある「必須項目」は以前では別でプログラムを組む必要がありましたが、HTML5からはrequired属性が追加され、プログラミングをすることなく単体で指定できるようになりました。
textareaに”required”と指定することで、必須項目化され空欄チェックが同時に行えます。
記述例
<body> <form id="sampleField" action="" method="post"> <textarea name="sampleName" required></textarea> </form> </body>
wrap属性
HTML5では「soft」「hard」「off」「physical」「virtual」のいずれかを指定することで、テキストエリアに入力された文字を折り返すことが出来るようになりました。
- soft ─── 入力時折り返し、送信時には折り返さない
- hard ─── 入力時も送信時も折り返す
- off ─── 入力時も送信時も折り返し無し
※physicalはhardと同等、virtualはsoftと同等の動作をします。
記述例
<body> <form id="sampleField" action="" method="post"> <textarea name="sampleName" wrap="physical"></textarea> </form> </body>
まとめ
いかがでしたか？
今回は<textarea>タグについての解説を行いました。
HTML5からはフィールドをform内に記述する必要がなくなったため、以前まで心配されていたレイアウト崩れにも対策できるようになりました。
またHTML5での変更点で使い勝手も良くなったので、この記事を読んでしっかりと覚えておくようにしましょう。
