こんにちは！最近、セキュリティの本を読んでいた時にhtmlの属性が紹介されました。便利な機能があったことに気づき、自分なりにまとめてみたfいと思いましたので、今回はその内容をご紹介したいと思います。
コード
<input
type='password'
name='password'
required
pattern='^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$'
title='パスワードには8文字以上の英数字を入力'
autocomplete='new-password'
inputmode='text'
/>
id, type, nameはお馴染みなので説明しません。
required
必須項目になる
pattern
ブラウザがバリデーションしてくれる。
<input
pattern='^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$'
/>
ちなみにこのバリデーションは任意の位置に数字と英字の両方が含まれかつ8文字以上という意味。
?= : 任意の位置
.\d : 数字が含まれる
.[A-Za-z] : 英字
{8,} : 8文字以上
title
patternのメッセージ
autocomplete
passwordを自動補完してくれます
autocomplete='new-password'に指定すれば自動入力を停止できたりします。
指定しない場合はname属性から判断してるみたいですね。nameと一緒なら意図的に書くことは少ないかも？詳しくはmdn見てください。
inputmode
スマホで見た時のキーボードを指定できます。デフォルトはtextです。
inputmode='numeric'
inputmode='search'
