フォームの入力制限、よく使うやつまとめ

名前

最初の要素の場合は、autofocusをつけると便利かも。

<input type="text" name="name" required autofocus>

メールアドレス

required+pattern
patternを指定してもrequiredが無いと空でも送信できてしまう。
type="email"でも入力制限はかかるみたいだけど、ちょっと弱めみたい&内容を把握しておきたいので。

<input type="text" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">

電話番号

type="tel"+pattern+placeholder
type=telは、別に入力制限とかしてくれない。国によって電話番号の形式が違うかららしい。つまり気休め。正規表現でパターンを指定する。
placeholderで、ハイフンを入力しない旨を示す。

<input type="tel" name="phone" pattern="^0\d{9,10}$" placeholder="09011112222">

パスワード

type="password"
required、minlengthを指定

<input type="password" name="pw" required minlength="8">

ファイルアップロード

type="file"、accept属性で拡張子を指定。
拡張子の指定方法は以下を参照。
accept-HTML5入門

<input type="file" name="image" accept="image/png,image/jpeg,image/gif">