[学習28日目]HTML基礎 フォーム実装

#inputタグのtypeの種類
<input type="ここ!!!" name="xxx">

「ここ！！！」の部分に入る形式名はこれ。
（意味は英語のまま。type="email"ならemail形式が入るし、numberなら数字以外は入らない。）

• email
• tel
• url
• number
• color
• date
• time
• datetime

#必須入力チェックはrequired属性を付与

<input name="required" required>

この最後の「required」を入れることで、
空欄でフォームを送信すると、「このフィールドを入力してください」という忠告がでるようになる。

#入力値の制限
###最小値・最大値
<input type="number" name="max-min" ここ　>

「ここ」という部分に
min="5" max="10"
と入れれば、入力値ｘは5≦ｘ≦10の範囲でしか入力できなくなる。

###文字数
<input name="length" ここ >

「ここ」という部分に
minlength="5" maxlength="10"
と入れれば、入力値の文字数yは5≦y≦10の範囲でしか入力できなくなる。

###正規表現を使う
pattern属性を使う。

「HTML5のみ有効」にしたければ
pattern="HTML5"を。

「先頭がaで始まる文字のみ有効」にしたければ
pattern="^a.*"とする。

#入力チェック結果によってスタイリングを変える
つまり、入力値が期待通りだったら、緑、
エラー値だったら赤、のようにチェック結果によって色などをかえることができる。

その方法はスタイルシートで、inputやformのクラス名のあとに
:valid //正常
:invalid //エラー
を追記する。

つまり、こんな感じに書く。

style.css

input:invalid{
border:2px solid #139174;
background:#B3F5E6;
}

:invalidを追記したことで、
入力フォームに誤った値が入力された場合、
フォームが赤くなるようにできた。

####[参考]
逆に、入力チェック機能を無効にするには・・・
<form>要素にnovalidate属性を付与する。
こんな感じ。
<form novalidate>
/* hogehoge */
</form>

#入力補助をつける
<input name="xxx" ここ required>

「ここ」の部分にautocomplete="name"という形式で書く。
name部分は他に

• email
• tel
• postal-code
• off

が入る

#その他新しい属性について
###読み取り専用にするにはreadonlyを付与

###プレースホルダーはplaceholder属性を付与して、その値に表示する文字列を設定する

###ページ読み込み時にフォーカスを当てるにはautofocusを付与

###スペルチェックや文法チェッを無効にするにはspellcheck=falseとする

#by CODEPREP
HTML基礎 フォーム実装編