HTML WEB制作

【HTML】JavaScriptを使わずフォームの入力をチェック

checklist

プログラミングを勉強中のみなさん、こんにちは!

今回は、「フォームの入力チェックをする方法」を紹介します。

ポートフォリオでも、コーポレートサイトでも、どのサイトでもそうですが、問い合わせフォームがあると、とても親切です。

 

でも、コードを書くとき、、「JavaScriptも書けないと無理だよね・・・」と困ったことはありませんか?

今回は、JavaScript無しで入力チェックを実装する方法を紹介します。

とっても簡単ですので、ぜひ参考にしてください。

初心者向けのメモ書きとして執筆しておりますので、あしからず。

目次
  1. コード
  2. ワンポイント
  3. まとめ

コード

<input type="text" required>

このような形で、「required」の記述を加えてあげます。

すると、

error

こんな感じで、空白で送信ボタンを押すと、このような注意ポップが出るようになります。

 

 

ワンポイント

メールアドレスを入力する項目には、type属性の値にemailを指定しましょう。

type="email"

これをすることにより、メールアドレスの入力項目だと認識されます。

見た目は変わりませんが、メールアドレスではなさそうな文字列が入力された場合には、警告を出してくれます。

詳細はこちらをどうぞ。
入力チェック実装方法

 

 

まとめ

いかがでしたでしょうか。

HTMLに記述を加えるだけで簡単に入力チェックが実装できます。
みなさんもぜひやってみてください。

コードチェックの記事も紹介しておきます。



-HTML, WEB制作
-

© 2024 人生フリーハンド Powered by AFFINGER5