複数行のテキスト入力欄を定義するtextarea要素
<textarea>……</textarea>
textarea要素は「multi-line text field」の略で、複数行のテキスト入力欄が作成され、ほぼ無制限でテキストの入力ができます。
要素内のテキストが初期値として入力欄に表示されます。1行のみのデータ入力で済む場合はtextarea要素ではなく、input要素の"text"を使用しましょう。
例
<html>
<head>
<title>textarea要素のサンプル</title>
</head>
<body>
<div>
<form action="example.cgi" method="post">
<p><textarea rows="5" cols="15">ご意見をどうぞ。
</textarea></p>
<p><input type="submit" value="送信" /></p>
<p><input type="reset" value="リセット"/></p>
</form>
</div>
</body>
</html>
DOMでの参照方法
[window.]document.formName.elementName
[window.]document.forms[i].elements[j]
[window.]document.getElementById("【ID属性値名】")
オプション属性
| 属性 | 値 | 機能 | 入力例 | DOM参照 |
|---|---|---|---|---|
| cols (必須属性) |
整数 | テキスト入力欄 の表示領域の 幅を指定 |
<textarea rows="20" cols="80">……</textarea> |
[window.]document.formName.elementName.cols |
| disabled | "disabled" | テキスト入力欄 の入力と選択を禁止 ※データも送信 されない |
<textarea rows="20" cols="80" disabled="disabled">……</textarea> |
[window.]document.formName.elementName.disabled |
| name | 文字列 | どの項目に対する 回答なのかが 分かるように テキスト入力欄 に名前を付ける |
<textarea rows="20" cols="80" name="sample">……</textarea> |
[window.]document.formNname.elementName.name |
| readonly | "readonly" | ユーザー側での 入力の変更を禁止 ※あらかじめ 設定された値は 送信される |
<textarea rows="20" cols="80" readonly="readonly" >……</textarea> |
[window.]document.formName.elementName.readonly |
| rows (必須属性) |
整数 | テキスト入力欄の 表示領域の高さを 指定 |
<textarea rows="20" cols="80">……</textarea> |
[window.]document.formName.elementName.rows |
追加が可能なイベントハンドラ属性
onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup
有限会社タグパンダ
喜安 亮介
| 5/10 |
| INDEX | ||
| Web標準HTMLタグリファレンス(最終回) フォームや入力部品を表す9つの正しいXHTMLタグ フォーム |
||
| form フォームを定義するform要素 | ||
| label ラベルを定義するlabel要素 | ||
| input 入力部品を定義するinput要素 | ||
| textarea 複数行のテキスト入力欄を定義するtextarea要素 | ||
| select 選択メニューを定義するselect要素 | ||
| optgroup 選択メニューの項目のグループを定義するoptgroup要素 | ||
| option 選択可能な項目を定義するoption要素 | ||
| fieldset テーマとして関連があるラベルとコントロールをグループ化するfieldset要素 | ||
| legend fieldset要素に対する説明文や表題を定義するlegend要素 | ||
TechTargetジャパン
リッチクライアント & 帳票 フォーラム 新着記事
- 次のモバイルアプリはどのフレームワークで作る? (2012/5/24)
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する - 「LESS&専用エディター」でCSSをシンプルに書こう (2012/5/23)
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう - 学校が世界一のデジタル環境になったら (2012/5/18)
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない - 1000万ドル調達も夢じゃないクラウドファウンディング (2012/5/15)
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ
|
|
@IT 新着記事
キャリアアップ
スポンサーからのお知らせ
- - PR -
イベントカレンダー
お勧め求人情報
転職/派遣情報を探す
**先週の人気講座ランキング**
〜 Android編 〜
ホワイトペーパー(TechTargetジャパン)
ソリューションFLASH
