バナー画像

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属性

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」のいずれかを指定することで、テキストエリアに入力された文字を折り返すことが出来るようになりました。

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

記述例

<body>
	<form id="sampleField" action="" method="post">
		<textarea name="sampleName" wrap="physical"></textarea>
	</form>
</body>

まとめ

いかがでしたか?

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

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

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

 

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。