HTML の<textarea>タグを使用すると、ユーザーはフォーム内で自由なテキストを入力して送信できます。この実験では、<textarea>入力を備えた簡単な HTML フォームを作成し、いくつかの一般的に使用される属性を適用します。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080タブを更新して、ウェブページをプレビューできます。
index.htmlという名前の空の HTML ファイルを作成し、基本的な HTML5 のボイラープレートコードを入力します。
<!doctype html>
<html>
<head>
<title>HTML Textarea Tag Tutorial</title>
</head>
<body>
<!-- ここに HTML コードを記述します -->
</body>
</html>HTML のボディに<form>要素を追加します。このフォームを使ってユーザーから情報を収集します。
<form>
<!-- フォーム要素はここに記述します -->
</form><form>要素の中に<textarea>要素を追加します。rowsとcols属性を設定することで、テキストエリアのサイズをカスタマイズできます。
<form>
<label for="feedback">フィードバックを入力してください：</label>
<textarea id="feedback" name="feedback" rows="10" cols="50"></textarea>
</form>ここでは、入力フィールド（フィードバック）を説明するラベルと、id属性が"feedback"のtextarea入力を追加しました。name属性は、サーバーサイドで入力フィールドを識別するために使用されます。
フォームと入力要素に他の HTML 属性を追加することができます。たとえば、ユーザーがいくつかのテキストを入力することを確認するために、required属性を追加することができます。
<form>
<label for="feedback">フィードバックを入力してください：</label>
<textarea
id="feedback"
name="feedback"
rows="10"
cols="50"
required
></textarea>
<input type="submit" value="Submit Feedback" />
</form>ここでは、ユーザーがフィードバックを送信できるように、タイプsubmitのinput要素を追加しました。textareaにrequired属性が追加されているため、ユーザーは空白のフォームを送信することができなくなりました。
最後に、フォームと入力要素にいくつかの CSS スタイルを適用して、フォームを視覚的に魅力的にすることができます。
<style>
form {
border: 1px solid #ccc;
padding: 10px;
margin: 20px auto;
max-width: 500px;
}
label,
textarea,
input[type="submit"] {
display: block;
margin-bottom: 10px;
width: 100%;
}
</style>ここでは、ボーダーを設定し、パディングとマージンを追加し、フォームの最大幅を制限しました。また、ラベル、テキストエリア、および送信入力要素の表示と幅を調整しました。
この実験では、<textarea>入力を持つ基本的な HTML フォームを作成し、一般的に使用される属性を適用する方法を学びました。また、CSS スタイルを適用してフォーム要素の外観をカスタマイズしました。必要に応じて、フォームと入力要素をさらにカスタマイズすることができます。
