*

ウェッブ制作

Width =px

ホーム > HTML・CSS > HTM5/CSS3 >
18.フォーム MENU 

18.html5/css3 入力フォーム Chap 7

学習書の「sample_a」(Chap7)を表示しソースコードを見て下さい。IE9以前では、入力域に説明文は表示されない。
入力フォーム画面
HTML5の表記
  • 行番
  • 説 明
  • 3-6
  • 入力フィールドを「label」でマークアップ
  • 4-5
  • 「input type=」:特定情報の専用フィールドを指定
  • 5
  • 名前フィールド:「autofocus」の記述でページをロードしたとき、最初の入力フィールドにマウスがセットされる
  • 10
  • 「required」:必須入力フィールドを」指定し、CSSで注意マークを表示して入力したらマークを消去出来る。
  • 10
  • 「placeholder」:表示したい内容を指定 メールアドレスを入力してください

CSS3の表記
  • 行番
  • 説 明
  • 1-2
  • 入力域の横幅が広いと使いにくいので500px以下に制限
  • 3-9
  • スマホなど各種端末に対応するため、「border-box」を利用
  • 10
  • 「textarea」(コメント欄)の高さ指定
  • 11-12
  • 送信ボタンと背景色
  • 13-15
  • 入力が必須、また内容が正当でない場合、ビックリマークを背景に表示
  • 16
  • 内容が正当な場合、ビックリマークを消去
  • 17
  • 「必須」文字の色を赤に
input type= で指定出来る種類
  • type属性の値
  • 情報の種類
  • email
  • メールアドレス
  • url
  • URL
  • tel
  • 電話番号
  • searth
  • 検索
  • date
  • 年月日
  • month
  • 年月
  • week
  • 年&週ナンバー
  • type属性の値
  • 情報の種類
  • time
  • 時刻
  • datetime
  • 日付&時刻(UTC)
  • datetime-local
  • 日付&時刻(Local Time)
  • number
  • 数値
  • range
  • 数値(スライダー)
  • color
  • カラーピッカー
  •  
  •