[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>要素です。
これ、単独でフォームの部品になるわけではありませんが、けっこうよく使う大事な要素です。
ユーザの使い勝手を良くするために、項目名(ラベル)とフォーム部品を関連づける役目です。
- 関連記事
-
- [60] フォームを美しく整えよう(CSS使用)
- [59] フォームの属性 逆引き一覧 (どの属性がどの部品に使えるか)
- [58] 暗号鍵を作ろう keygen要素(HTML5.2で削除されました)
- [57] プログレスバー(進捗状況)を出そう progress要素
- [56] 数量や割合のゲージを表示しよう meter要素
- [55] 計算結果の出力欄を作ろう output要素
- [54] ラベルを付けて使いやすくしよう label要素
- [53] 文章 (複数行のテキスト) を入力してもらおう textarea要素
- [52] 入力候補のリストを作ろう datalist要素
- [51] セレクトメニューを作ろう(select・option・optgroup要素)
- (ちょっとメモ)整理しよう。フォームのボタン比較
- [50] button要素で送信・リセット・汎用ボタンを自由に作ろう
- [49-11] input要素で画像の送信ボタンを作ろう (image)
- [49-10-2] input要素で作るボタンの見た目を CSSで変えよう
- [49-10] input要素で 送信ボタンなどを作ろう (submit, reset, button)
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク