MENU
  1. ホーム
  2. HTML
  3. textarea要素

textarea要素

HTML
2023.10.28
記事の内容

概要

textarea要素は、フォーム要素内で複数行のテキスト入力を受け付けるために使用される要素です。

textareaの説明図
textarea要素
記法

<form action=”送信先URL” method=”送信方式”>
　<textarea name=”送信クエリ名”></textarea>
　<button type=”submit”>ボタンラベル名</button>
</form>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>textare要素に関して</title>
  </head>
  <body>
    <form action="URL" method="post">
      <label for="comment">コメント:</label>
      <textarea name="comment"></textarea>
      <button type="submit">送信</button>
    </form>
  </body>
</html>
textarea {
  display: block;
  margin-bottom: 1rem;
}
出力結果

属性

autocomplete属性

autocompleteは、フォームなどの入力欄へ入力するときに過去に入力したことのある文言やブラウザに登録してある情報を入力候補として表示するブラウザの機能になります。

autocomplete属性
記法

<textarea name=”送信クエリ名” autocomplete=”ON or OFF”></select>
・ON:オートコンプリートを行いませす
・OFF:オートコンプリートを行いません

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>textarea要素(autocomplete属性)に関して</title>
  </head>
  <body>
    <form action="URL" method="post">
      <label for="comment">コメント:</label>
      <textarea name="comment" autocomplete="OFF"></textarea>
      <button type="submit">送信</button>
    </form>
  </body>
</html>
textarea {
  display: block;
  margin-bottom: 1rem;
}
出力結果

cols/rows属性

cols/rows属性は、テキストエリアの入力文字数(横幅)と表示高さ(縦幅)を決める属性になります。

・cols(文字数) : 初期値は20
・rows(入力欄高さ) : 初期値は2

autocomplete属性
記法

<textarea name=”送信クエリ名” cols=”数値” rows=”数値”></select>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>textarea要素(cols属性・rows属性)に関して</title>
  </head>
  <body>
    <form action="URL" method="post">
      <label for="comment1">コメント(cols設定):</label>
      <textarea name="comment1" cols="10"></textarea>
      <label for="comment2">コメント(rows設定):</label>
      <textarea name="comment2" rows="5"></textarea>
      <label for="comment3">コメント(両方設定):</label>
      <textarea name="comment3" cols="30" rows="7"></textarea>
      <button type="submit">送信</button>
    </form>
  </body>
</html>
textarea {
  display: block;
  margin-bottom: 1rem;
}
出力結果

disabled属性

disabled属性は、テキスト入力を無効にします。

disabled属性
記法

<textarea name=”送信クエリ名” disabled></select>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>textarea要素(disabled属性)に関して</title>
  </head>
  <body>
    <form action="URL" method="post">
      <label for="comment">コメント(disabledなし):</label>
      <textarea name="comment"></textarea>
      <label for="comment">コメント(disabledあり):</label>
      <textarea name="comment" disabled></textarea>
      <button type="submit">送信</button>
    </form>
  </body>
</html>
textarea {
  display: block;
  margin-bottom: 1rem;
}
出力結果

required属性

required属性は、テキスト入力を必須項目にします。

required属性
記法

<textarea name=”送信クエリ名” required></select>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>textarea要素(required属性)に関して</title>
  </head>
  <body>
    <p>未入力で送信ボタンを押してください。</p>
    <form action="URL" method="post">
      <label for="comment">コメント:</label>
      <textarea name="comment"　required></textarea>
      <button type="submit">送信</button>
    </form>
  </body>
</html>
textarea {
  display: block;
  margin-bottom: 1rem;
}
出力結果

未入力で送信ボタンを押してください。

placeholder属性

placeholder属性は、テキスト入力欄に表示しておくダミーテキストになります。

placeholder属性
記法

<textarea name=”送信クエリ名” placeholder=”入力ヒントの文字”></select>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>textarea要素(placeholder属性)に関して</title>
  </head>
  <body>
    <form action="URL" method="post">
      <label for="comment">コメント:</label>
      <textarea name="comment" placeholder="ここにコメントを入力してください"></textarea>
      <button type="submit">送信</button>
    </form>
  </body>
</html>
textarea {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}
出力結果

minlength・maxlength属性

テキスト入力文字を制限することができる属性になります。

minlength・maxlength属性
記法

<textarea name=”送信クエリ名” minlength=”指定文字” maxlength=”指定文字”></select>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>textarea要素(maxlength属性・minlength属性)に関して</title>
  </head>
  <body>
    <p>1〜4文字で送信ボタンを押してください(8文字以上は入力不可)</p>
    <form action="URL" method="post">
      <label for="comment">コメント:</label>
      <textarea name="comment" minlength="5" maxlength="8"></textarea>
      <button type="submit">送信</button>
    </form>
  </body>
</html>
textarea {
  display: block;
  margin-bottom: 1rem;
}
出力結果

1〜4文字で送信ボタンを押してください(8文字以上は入力不可)

readonly属性

readonly属性は、ユーザー編集不可にするが値は送信される属性になります。

readonly属性
記法

<textarea name=”送信クエリ名” readonly></select>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>textarea要素(maxlength属性・minlength属性)に関して</title>
  </head>
  <body>
    <p>テキストエリアに文字を入力してみてください。</p>
    <form action="URL" method="post">
      <label for="comment">コメント:</label>
      <textarea name="comment" readonly>これは読み取り専用のテキストエリアです。</textarea>
      <button type="submit">送信</button>
    </form>
  </body>
</html>
textarea {
  display: block;
  margin-bottom: 1rem;
}
出力結果

テキストエリアに文字を入力してみてください。

wrap属性

wrap属性は、テキスト入力欄での折り返しに関して送信されるデータに改行を反映させるかの指定ができます。

soft : 送信クエリに折り返しを反映させない
hard : 送信クエリに折り返しを反映させる

readonly属性
記法

<textarea name=”送信クエリ名” wrap=”soft or hard”></select>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>textarea要素(wrap属性)に関して</title>
  </head>
  <body>
    <p>テキストエリアに文字を入力してみてください。</p>
    <form action="URL" method="post">
      <label for="comment">コメント:</label>
      <textarea name="comment" wrap="hard"></textarea>
      <button type="submit">送信</button>
    </form>
  </body>
</html>
textarea {
  display: block;
  margin-bottom: 1rem;
}
出力結果

soft

hard

HTML
記事の内容
閉じる