昨日に引き続き、CODEPREP | HTML基礎 フォーム実装編をやったのでメモ。pattern属性で正規表現書けるの初めて知りました。

---

URLを入力する

• [<input type="url"> - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url)

カラーピッカーを表示する

• [<input type="color"> - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/color)

日時を入力する

• [<input type="datetime-local"> - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/datetime-local)
• datetimeは非推奨

文字数チェック

• minlength属性・maxlength属性を使う

正規表現を使ったチェック

• pattern属性を使う
• HTML5におけるinput要素のpattern、type属性のおさらい - Qiita

入力チェック結果をスタイリングする

• 正常時は:valid擬似クラス、異常時は:invalid擬似クラスを使う

入力チェック機能を無効にする

• <form>要素にnovalidate属性を付与する
• HTML5が持つ入力チェック機能のメッセージにはスタイリングができないので、novalidate属性で無効化して別途スタイルを当てることが多い

名前を入力補助する

• autocomplete属性を使う

• 無効にするにはランダムな文字列を入れるといい？

  • フォームの自動補完を無効にするには - ウェブセキュリティ | MDN

読み取り専用にする

• readonly属性を使う
• disabled属性とreadonly属性の相違点 - Qiita

ページ読み込み時にフォーカスを当てる

• autofocus属性を使う

スペルや文法チェックを制御する

• 文字列の下に赤線が引かれるやつの制御
• spellcheck属性を使う (falseにするとチェックが無効になる)