18.html5/css3 入力フォーム Chap 7
学習書の「sample_a」(Chap7)を表示しソースコードを見て下さい。IE9以前では、入力域に説明文は表示されない。
入力フォーム画面
HTML5の表記
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<form action="http://www.www.www/..." method="POST"> <p> <label>名前 <span>(必須)</span>:<br> <input type="text" name="namae" size="40" required placeholder="名前を入力してください" autofocus> </label> </p> <p> <label>メールアドレス <span>(必須)</span>:<br> <input type="email" name="mail" size="40" required placeholder="メールアドレスを入力してください"> </label> </p> 略 </form> |
- 行番
- 説 明
- 3-6
- 入力フィールドを「label」でマークアップ
- 4-5
- 「input type=」:特定情報の専用フィールドを指定
- 5
- 名前フィールド:「autofocus」の記述でページをロードしたとき、最初の入力フィールドにマウスがセットされる
- 10
- 「required」:必須入力フィールドを」指定し、CSSで注意マークを表示して入力したらマークを消去出来る。
- 10
- 「placeholder」:表示したい内容を指定 メールアドレスを入力してください
CSS3の表記
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
form {max-width: 500px; margin: 30px auto} input, textarea {width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border: solid 1px #aaaaaa; border-radius: 0; -webkit-appearance:none} textarea {height:110px} input[type="submit"] {width: 200px; background-color: #cef178} input:required, input:invalid {background-image: url(caution.png); background-repeat: no-repeat; background-position: right center} input:valid {background-image: none} label span {color: #ff0000} |
- 行番
- 説 明
- 1-2
- 入力域の横幅が広いと使いにくいので500px以下に制限
- 3-9
- スマホなど各種端末に対応するため、「border-box」を利用
- 10
- 「textarea」(コメント欄)の高さ指定
- 11-12
- 送信ボタンと背景色
- 13-15
- 入力が必須、また内容が正当でない場合、ビックリマークを背景に表示
- 16
- 内容が正当な場合、ビックリマークを消去
- 17
- 「必須」文字の色を赤に
input type= で指定出来る種類
- type属性の値
- 情報の種類
- メールアドレス
- url
- URL
- tel
- 電話番号
- searth
- 検索
- date
- 年月日
- month
- 年月
- week
- 年&週ナンバー
- type属性の値
- 情報の種類
- time
- 時刻
- datetime
- 日付&時刻(UTC)
- datetime-local
- 日付&時刻(Local Time)
- number
- 数値
- range
- 数値(スライダー)
- color
- カラーピッカー