お問い合わせフォームの一部の入力を必須にする方法(input属性)

HTML/CSS

今回はお問い合わせフォームでよくある、入力必須項目の作成の仕方を紹介します。
お名前、メールアドレス、住所が基本的に必須では無いと困るので、フォームを作成した際は、これらの項目は今回紹介する方法で必ず必須に設定しておきましょう。

お問い合わせフォームの一部の入力を必須にする方法

お問い合わせフォームの一部の入力を必須にするには以下の属性を付けてあげます。

<input type="text" required>必須項目

inputタグのフォーム部品タグの中にrequired属性を追加するだけで必須項目になります。
必須項目は、何も入力しないで送信ボタンが押されると警告が表示されます。

実際に以下のフォームデザインのテキストフィールドに何も入力せずに送信ボタンを押すと警告が表示されるのがわかるかと思います。
※しかい何か1つしか警告は出ません。最も上にあるinputタグから優先されます。

上記のHTMLはこんな感じです。

<form action="#" method="POST">
  <p><label>お名前<br><input type="text" name="fulneme" required=""></label></p>
  <p><label>電話<br><input type="text" name="tel" required=""></label></p>
  <p><label>メール<br><input type="email" name="mail" required=""></label></p>
  <p><label>パスワード<br><input type="password" name="pw" required=""></label></p>
  <p><label>その他<br><input type="password" name="Other"></label></p>
  <p><input type="submit" value="送信"></p>
</form>

以上が「お問い合わせフォームの一部の入力を必須にする方法(input属性)」でした。
少しでも参考になって頂けたら幸いです。

2020年8月5日HTML/CSSHTML,WEB

Posted by KT