WEB制作

【HTML】JavaScriptは使いません フォームの入力チェックする方法

スポンサーリンク

checklist

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

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

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

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

今回は、JavaScript無しで入力チェックを実装する方法を紹介します。
とっても簡単ですので、是非参考にしてください。

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

コード

<input type="text" required>

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

すると、

error

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

ワンポイント

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

type="email"

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

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

まとめ

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

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

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



スポンサーリンク

-WEB制作
-, , , , , , , ,

© 2023 WEBセンス Powered by AFFINGER5