HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのtextarea要素におけるrequired属性の使い方

HTMLの<textarea>要素におけるrequired属性は、フォームを送信する前にこのテキストエリアの入力が必須であることを訪問者に知らせるための属性です。required属性が設定されたテキストエリアが空のまま「送信」ボタンをクリックすると、フォームは送信されず、警告メッセージが表示されます。

基本構文

required属性の基本的な書き方は以下のとおりです。

<textarea required>

実装例

ここで、<textarea>要素にrequired属性を実装する具体例を見てみましょう。

コード例

<!DOCTYPE html>
<html>
<body>
<h2>教科別順位</h2>
<form action="">
   <label for="stinfo">学生名:</label>
   <input type="text" id="stinfo"><br>
   <label for="sub">教科:</label>
   <input type="text"><br>
   <label for="rank">順位:</label>
   <input type="number"><br>
   <label for="marks">点数:</label>
   <input type="number"><br>
   <label for="remark">備考:</label><br>
   <textarea rows="6" cols="70" required></textarea><br>
   <input type="submit">
</form>
</body>
</html>

実行結果の解説

上記の例では、複数の入力フィールドと送信ボタンを含むフォームを作成しています。

<form action="">
   <label for="stinfo">学生名:</label>
   <input type="text" id="stinfo"><br>
   <label for="sub">教科:</label>
   <input type="text"><br>
   <label for="rank">順位:</label>
   <input type="number"><br>
   <label for="marks">点数:</label>
   <input type="number"><br>
   <label for="remark">備考:</label><br>
   <textarea rows="6" cols="70" required></textarea><br>
   <input type="submit">
</form>

このフォームでは、テキストエリアにrequired属性を設定しています。そのため、テキストエリアが空のままフォームを送信しようとすると、ブラウザによって警告メッセージが表示され、フォームは送信されません。

該当するコード部分は以下のとおりです。

<textarea rows="6" cols="70" required></textarea>

まとめ

required属性は、HTML5で導入されたフォームバリデーション機能の一つです。JavaScriptを書かなくても、ブラウザ側で自動的に入力チェックが行われるため、必須入力フィールドを簡単に実装できます。ユーザビリティの向上やデータの欠落防止に役立つため、フォーム設計の際には積極的に活用しましょう。

  1. HTMLのrows属性とは？textareaの高さ指定方法をわかりやすく解説

    HTMLのrows属性とはHTMLのrows属性は、<textarea>要素の表示される高さ（行数）を指定するための属性です。テキストエリアを画面に表示したときに、何行分の入力欄の高さを確保するかを制御できます。なお、rows属性を指定しない場合の初期値は「2」となっており、多くのブラウザでは2行分の高さで表示されます。基本構文rows属性の基本的な書き方は以下の通りです。<textarea rows=数値></textarea>「数値」の部分に、表示したい行数を半角数字で指定します。例えば「10」と指定すれば、10行分の高さを持つテキストエリアが表示されま

  2. HTMLのrequired属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのrequired属性は、フォームを送信する前に該当要素の入力または選択が必須であることを指定するためのブール型属性です。この属性は、input、select、textarea の各要素に適用できます。required属性が設定されたフィールドが空のままフォームを送信しようとすると、ブラウザが自動的にバリデーションを行い、「このフィールドは必須です」といったエラーメッセージを表示して送信を阻止します。JavaScriptを使わずに簡単な入力チェックを実現できるため、フォーム作成時には非常に便利な属性です。構文（シンタックス）required属性の基本的な構文は以下の通りです。<t