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

HTMLでフォーム送信前に必須入力を指定する方法｜required属性の使い方

required属性とは

HTMLのrequired属性（必須属性）は、フォームを送信する前に該当する要素への入力が必須であることを指定するための属性です。この属性が設定されたフィールドが空のまま送信ボタンをクリックすると、フォームの送信は失敗し、「このフィールドに入力してください（Please fill out this field）」というエラーメッセージが表示されます。

なお、required属性はブール型属性のため、値を指定せず「required」と記述するだけで有効になります。

required属性が使用できる要素

required属性は、次の3つのフォーム部品に適用できます。

  • <input> 要素（テキスト、メールアドレス、パスワードなど各種タイプ）
  • <select> 要素
  • <textarea> 要素

コード例

以下のコードを実行して、required属性の動作を確認してみましょう。ユーザー名の入力欄が空のまま送信しようとすると、ブラウザによってエラーが表示され、送信が阻止されます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML required属性の例</title>
   </head>
   <body>
      <h2>ユーザー登録</h2>
      <form action = "/new.php">
         <input type = "text" placeholder = "学生ユーザー名" name = "name" required/><br>
         <input type = "submit" value = "送信">
      </form>
   </body>
</html>

まとめ

required属性を使えば、JavaScriptなどを書かなくてもブラウザ標準のバリデーション機能によって簡単に入力必須チェックを実装できます。ユーザビリティ向上のために、placeholder属性と組み合わせて入力例を示すのも効果的です。ただし、クライアント側でのチェックは回避される可能性もあるため、重要なデータについてはサーバー側でも入力検証を行うことをおすすめします。

  1. HTMLのrequired属性とは？フォームの必須入力チェックを実装する方法

    HTMLのrequired属性は、フォーム送信前にその要素（フィールド）への入力が必須であることを指定するための属性です。この属性が設定されたフィールドが空のまま送信ボタンがクリックされると、ブラウザは自動的に「このフィールドに入力してください（Please fill out this field）」というエラーメッセージを表示し、フォームの送信は失敗します。 JavaScriptを使わずに、HTMLだけで簡単なバリデーション（入力チェック）を実現できるのが大きな特徴です。 required属性を使用できる要素 required属性は、以下の3つのフォーム部品に対して使用できます。 <

  2. HTMLで親要素とその子要素にのみスタイルを適用する方法【scoped属性と代替策】

    HTMLでは、scoped属性を使用することで、スタイルが親要素とその子要素にのみ適用されるよう指定できます。通常、<style>タグは<head>内に記述してページ全体にスタイルを適用しますが、scoped属性を付けると、スタイルの適用範囲をその要素の内部だけに限定できます。scoped属性の使用例<!DOCTYPE html> <html> <head> <style> h2 { color: yellow; } </sty