HTML の複数行入力チュートリアル

はじめに

HTML の<textarea>タグを使用すると、ユーザーはフォーム内で自由なテキストを入力して送信できます。この実験では、<textarea>入力を備えた簡単な HTML フォームを作成し、いくつかの一般的に使用される属性を適用します。

注：index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 92%です。学習者から 100% の好評価を得ています。

HTML の骨格を作成する

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 を使ったさらなるカスタマイズ

最後に、フォームと入力要素にいくつかの 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 スタイルを適用してフォーム要素の外観をカスタマイズしました。必要に応じて、フォームと入力要素をさらにカスタマイズすることができます。