楽しいだけで十分です

よくわかってなかったinputタグの属性を整理

昨日に引き続き、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属性を使う

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

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

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

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

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

名前を入力補助する

読み取り専用にする

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

  • autofocus属性を使う

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

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

WRITTEN BY yinm

I'm a software engineer.