プログラミングを勉強中のみなさん、こんにちは!
今回は、「フォームの入力チェックをする方法」を紹介します。
ポートフォリオでも、コーポレートサイトでも、どのサイトでもそうですが、問い合わせフォームがあると、とても親切です。
でも、コードを書くとき、、「JavaScriptも書けないと無理だよね・・・」と困ったことはありませんか?
今回は、JavaScript無しで入力チェックを実装する方法を紹介します。
とっても簡単ですので、ぜひ参考にしてください。
初心者向けのメモ書きとして執筆しておりますので、あしからず。
コード
<input type="text" required>
このような形で、「required
」の記述を加えてあげます。
すると、
こんな感じで、空白で送信ボタンを押すと、このような注意ポップが出るようになります。
ワンポイント
メールアドレスを入力する項目には、type属性の値にemailを指定しましょう。
type="email"
これをすることにより、メールアドレスの入力項目だと認識されます。
見た目は変わりませんが、メールアドレスではなさそうな文字列が入力された場合には、警告を出してくれます。
詳細はこちらをどうぞ。
入力チェック実装方法
まとめ
いかがでしたでしょうか。
HTMLに記述を加えるだけで簡単に入力チェックが実装できます。
みなさんもぜひやってみてください。
コードチェックの記事も紹介しておきます。 続きを見る
コードチェックでよく出るエラーを紹介 HTMLの理解を深めよう