htmlだけでメールフォームに必須項目を指定する方法

2016年3月25日

この記事は 2 分くらいで読めると思います

フォームにちょろっと書くだけで必須項目になる属性

あの必須項目がこんなに簡単に実装できる訳が…以下省略

メールフォームを実装する時に名前やら電話番号やら、とにかく必ず入力してほしい項目を指定する時ってJavascriptやPHPでごちゃごちゃ書くと思うんですが…

HTML5ではタグにrequiredを追加するだけでブラウザが必須項目と認識してくれます。

<form action="" method="post">サンプル↓:
<input type="text" name="moke" required />
<input type="submit" value="送信" />
</form>

デモ↓:

↑サンプルの送信をクリックすると「入力してください～」的なアラートが出ると思います。

このアラートはブラウザによって表示が違います。

何か入力すると送信できるようになります。

※サンプルなので何も起こりませんが（笑）

なるほど～

あくまでもブラウザ依存＆HTML5なので古いブラウザは対応していないです。

日本のメールフォームは確認画面のページがある事が特徴ですが、

せっかく送信して確認画面に遷移したら「○○は必須項目です」と言われるので

仕方なくフォームのページに戻って入力し直し…ということになるのですが

requiredを指定していれば確認ページに移ることなくアラートが出るので閲覧のストレスが多少は減って良いですね。

そもそも、確認ページを作ることで「やっぱ送信やーめた」の人が増えるので確認ページなど無くしてしまえ…

というような内容は言いだしたら長くなりそうなのでまた今度気が向いたら書きます。