演習課題「テキストフィールドを作成しよう」
現在、ブラウザでは、あるデザイン事務所のプロジェクトを管理するためのページが表示されています。
「プロジェクト概要・備考」の項目には、「概要・備考を入力してください」と表示されています。textarea要素を用いて、テキスト入力欄を追加します。指示のある箇所の「概要・備考を入力してください」を挟む形でtextarea要素を追加することで、「プロジェクト概要・備考」欄を作成してください。
ただし、name属性にはareaを、id属性にはareaを、cols属性には50を、rows属性には5を指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです!
#09:複数行のテキストフィールドを生成(textarea)
このチャプターでは、複数行のテキストフィールドについて学習します。
textarea要素は、複数行にわたるテキストを入力するためのフィールドを生成します。問い合わせ内容やコメントなど、長い文章の入力に適しています。rows属性で行数(高さ)、cols属性で列数(幅)の初期サイズを指定できます。ユーザーは通常、フィールドの右下をドラッグしてサイズを自由に変更できます。input要素とは異なり、textarea要素は終了タグが必要で、開始タグと終了タグの間に記述したテキストが初期値として表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>複数行のテキストフィールド</title>
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="stylesheet" href="style01.css">
</head>
<body>
<label for="area">テキストフィールド</label><br>
<textarea name="area" id="area" cols="30" rows="10">あいうえお
</textarea>
</body>
</html>
MDN web docs - <textarea>: テキストエリア要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea