[53] 文章 (複数行のテキスト) を入力してもらおう textarea要素

最終更新日:2018年03月28日  (初回投稿日:2013年10月01日)

<input type="text">「1行のテキストフィールド」を作る要素でしたが、
今回の<textarea>要素は、複数行のテキストフィールドを作る要素です。

フォームでよく見るコレね↓

使用する要素 <textarea> 〜 </textarea>
textareaの属性
一覧はこちら
name :<textarea>に固有の名前をつける
cols :1行の文字数(ボックスの幅)を指定
rows :行数(ボックスの高さ)を指定
wrap :wrap=hard で改行コードを入れて送信
maxlength :最大文字数を指定する
readonly :読み取り専用にする
disabled :使用不可の状態にする
dirname :文字の書式方向の送信に使う名前
required :必須項目にする
placeholder :入力見本を表示
autofocus :ロード後、自動的にフォーカスする
form :親の<form>のID名を呼び出して関連づける

<textarea>でテキストフィールドを作ろう

ではさっそく使ってみましょう。まずは基本のカタチです。

●サンプル1
name属性は、ユーザの入力文とセットで送信されるので、必ず指定しましょう。
また、<textarea> 〜 </textarea>の間に「初期値」としてテキストを入れることができます。

HTMLはこちら ↓

<form>
<textarea name="comment1">入力してください。</textarea>
<input type="submit" value="送信する">
</form>

上の例の、初期値として書いたテキストは、ユーザが消さなければ残って送信されます。
placeholder属性を使えば、ユーザが入力し始めると消去されるので、残って送信されることはありません。

HTMLはこちら ↓

<form>
<textarea name="comment1-2" placeholder="入力してください。"></textarea>
<input type="submit" value="送信する">
</form>

テキストフィールド内の文字数、改行などの指定

●サンプル2
cols属性で1行の文字数を、rows属性でテキストフィールドの行数を指定します。
また、maxlength属性で入力できる最大文字数を指定することができます。

HTMLはこちら ↓

<form>
<textarea name="comment2" cols="30" rows="3" maxlength="80"
 placeholder="80字以内で入力してください。"></textarea>
<input type="submit" value="送信する">
</form>

●サンプル3
<textarea>要素は、ユーザが改行した位置で「改行コード」(%0D%0Aとか)が加えられて送信されます。
ということは、ユーザが改行しなければ、そのままダラ〜っと長い1行で送信されます。

そんな時のために、wrap属性で、送信時に改行コードを入れる指定ができます。
デフォルトは wrap="soft"(改行無し)です。
wrap="hard" と指定すれば、cols属性で指定した文字数 で改行コードが加えられて送信されます。ですので、wrap="hard" を使う時は cols属性は必須です。
ユーザが行った改行もイキで、さらに wrap="hard" の改行コードが追加されます。

HTMLはこちら ↓

<form>
<textarea name="comment2" cols="30" rows="3" maxlength="80" wrap="hard"
 placeholder="80字以内で入力してください。"></textarea>
<input type="submit" value="送信する">
</form>

readonly属性と disabled属性

<textarea>要素は、readonly属性と disabled属性のどっちも使えます。違いはこちら ↓ です。

●サンプル3
readonly属性を使うと、読み取り専用になります。ユーザは入力できないのですが、初期値で設置したテキストはname属性と一緒に送信されちゃいます。
disabled属性は、使用不可能になり、送信ボタンを押しても何も送信されません。

HTMLはこちら ↓

<form>
<p>
<textarea name="comment3-1" readonly cols="30">
カスタマーセンターはただいま準備中です。もうしばらくお待ちください。
</textarea>
<textarea name="comment3-2" disabled cols="30">
カスタマーセンターは現在ご使用になれません。
</textarea>
</p>
<input type="submit" value="送信する">
</form>

<textarea>の属性一覧

<textarea>で使える属性をまとめました。

name="部品の名前(任意のテキスト)"
送信先プログラムが部品を見分けるための名前なので、必ずつけておきましょう。
「テキストエリア名=ユーザが入力した文」というカタチで、セットで送信されます。
<textarea name="comment"></textarea>
cols="1行の文字数(ボックス幅)" rows="行数(ボックス高さ)"
cols属性、rows属性のデフォルト値は、半角で20文字と2行です。この2つの属性を指定しなければ、入力フィールドボックスはデフォルトで表示されます。
ですので、サイズをこっちで指定したいときに使います。
<textarea name="comment" cols="30" rows="5"></textarea>
wrap="hard"(または "soft" )  new
wrap属性は「送信時に改行するかどうか」を指定します。
wrap="soft"がデフォルトで改行コード無しで送信されます。wrap属性を指定しなければこの状態で送られます。
wrap="hard"では、cols属性で指定された1行の文字数ごとに改行コードを加えて送信。
ですので、wrap="hard"にするときは、cols属性は必須です。
<textarea name="comment" cols="30" rows="5" wrap="hard"></textarea>
maxlength="最大文字数"
maxlength属性で、最大文字数を指定すると、それ以上は入力できなくなります。
400字までで入力してください:
<textarea name="comment" maxlength="400"></textarea>
readonly(または「readonly=""」「readonly="readonly"」 ) 
「読み取り専用(リードオンリー)」になり、ユーザはテキストフィールドの操作ができませんが、初期値のテキストは送信されます。
<textarea name="comment" readonly>初期値のテキスト</textarea>
disabled(または「disabled=""」「disabled="disabled"」 ) 
「使用不可」になります。入力も選択もできない状態で、何も送信されません。
<textarea name="comment" disabled>初期値のテキスト</textarea>
dirname="文字の書式方向の送信に使う名前(任意のテキスト)"
この名前と「入力内容の書字方向(ltr または rtl)」がセットで送信される。
(自動判別されて送信される)
下記の場合は「memo=Hello&exampleDir=ltr」と送信される。
アラビア語のような「右から左」の書式の場合は、末尾が「=rtl」となる。
<textarea name="memo" dirname="exampleDir">Hello</textarea>
required(または「required=""」「required="required"」 )  new
「入力必須」になります。入力せずに送信ボタンを押すとアラートが出ます。
<textarea name="comment" required></textarea>
placeholder="入力見本のテキスト"  new
入力見本を入れられます。ユーザが記入を始めると自動的に消去されます。
<textarea name="request" placeholder=”宅配ボックス使用などご要望をどうぞ”></textarea>
autofocus(または「autofocus=""」「autofocus="autofocus"」 )  new
HTML文書のロード後すぐに、この属性のある要素が自動的にフォーカスされます。
● autofocus属性は、1つのHTML文書に1つだけ。(そりゃそうだ!)
<textarea name="comment" autofocus></textarea>
form="<form>要素のID"  new
form属性で<form>要素につけたIDを呼び出して関連づけます。
これによって<textarea>要素が<form>要素の外に出ていても機能します。
<textarea name="comment" form="ex1"></textarea>
<!-- 出てる↑ -->
<form method="post" action="sample.cgi" id="ex1">
<input type="submit" value="送信する">
</form>

「form属性」については、
「[47] form要素でデータ送信可能なフォームである事を示そう」の「HTML5からの変更点」もご覧ください。

このほかグローバル属性も使います
当然ながら、id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

次回は<label>要素です。
これ、単独でフォームの部品になるわけではありませんが、けっこうよく使う大事な要素です。
ユーザの使い勝手を良くするために、項目名(ラベル)とフォーム部品を関連づける役目です。

関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.