今日も前回に引き続き第三回htmlの学習ノートをここにまとめていきます。
前回のurlも付けとくので前回のは見てないよという方はぜひ見てみてください。
前回のはこちら
それでは、今回もやっていこうと思います。
入力フォーム作成！
メールアドレス入力フォームを作るには、inputを使用して、type属性をtype="email"にします。
<form> <input type="email" name="email"></form>
こんな感じにフォームを作る際は<form></form>を忘れないようにつけよう。
ほかの例も下に記す
- 電話番号入力フォーム:
type="tel" - url入力フォーム:
type="url" - 数値入力フォーム:
type="number" - カラーピッカー:
type="color" - 日付入力フォーム:
type="date" - 時間入力フォーム:
type="time" - 日時入力フォーム:
type="datetime-local"
必須入力作成！
入力の際に必須入力にしたい際には、その要素にrequired属性を付ける。
<input name="form" required>
また、入力チェック処理は、送信前に実行が行われる。
入力値に最大と最小を！
入力値に最大最小を設ける。
入れる数値において最小と最大を設けたいときにつけたいときに使う。
<input type="number" name="maxn" min="1" max="12" value="0">
文字数制限！
数字同様に文字数にも制限をかけたいとき。
<input name="len" minlength="1" maxlength="4" value="len">
入力制限！
今回紹介するのはpattern属性を使って、入力してほしい値にマッチした値を入力させるためのものです。先に例のコードを書くと
<input name="op" patter="^o.*" title="oから始まる単語" value="op">
今回入力した値で^o先頭の文字が一致するかをチェックしまうす。
また、.*これは後ろに続く値は任意とするものです。
入力に応じて反応する色！
入力した結果に応じてチェックして色でエラーや正常を教えてくれると便利だよねってことで、今回使うのは:vaildと:invalidこれはどちらも疑似的クラスを作成してcssで読み込む
input :valid { background: "色を選択" } これが正常時
こんな形で:validも作れば設定したcssが状態に合わせて使用される。
入力チェック機能を無効化する！
入力チェック機能を無効化させる際はnovalidate属性を使用する
<form novalidate>と最初に着ければ適用される。
入力する際の補助を適用させる!
名前などを入力する際にそれを補助する機能があります。それを追加する際にはautocomplete属性を付けて、その値をnameにします
<input name="op" autocomplete="name">
今回は名前でしたがメールなどの際は
<input name="email" type="email" autocomplete="email">
また、電話番号の場合は
<input name="tel" autocomplete="tel">
このように、属性の値を変更していけばできます。
これ以外にも、郵便番号ならpostal-codeなどがあります。
入力補助を無効化する!
その場合は,autocomplete="off"にすればいけます。
また、こうしない限りChromeでは、input要素内では自動で補助が付きます。
読み取り専用のフォームを作成！
読み取り専用というのは、ユーザーが変鉱石内容にするものです。
これは、普通の入力フォーム同様に値は送信されます。
この際に使う属性はreadonlyです。
プレースホルダーを作る!
プレースホルダーとは、入力する際にユーザーがなにを入力したらよいかを、入力フォーム内に後ろに表示するものです。
入力フォームにプレースホルダーを作るにはplaceholder属性を付与する。
<input type="email" name="form" placeholder="ex) nekoneko@neko.com>
ページ読み込み時にフォーカスをあてる。
ページ読み込み時に入力フォームの一か所にフォーカスをあてることができる。
今回使う属性は、autofocusです。
ページの中の一つの要素だけにこの属性はあてることができる。
スペルや文法をチェックし制御する。
ブラウザにはスペルチェック機能が備わっている。そのためスペルを間違うと下線に赤色の線ができる。それを無効にするには、spellcheck属性をfalseにすればよい
<input name="nao" valuse="neko" spellcheck="false">
今回はこんなところになります。
今回も何か所もわかりにくいところができてしまったかもしれません。
ここおかしいよというのがあればぜひ教えてくれると助かります。