フォームのパーツ

css

※ 当サイトではアフィリエイト広告を利用しています。

formで利用するinput要素、select要素、ラジオボタン、チェックボックス、テキストエリア、buttonのサンプルです。

サンプルはこちら。

input:入力欄(フォーム入力)要素について説明します。

<label for="name">お名前<sup>★</sup></label>
<input type="text" id="name" name="name" class="form-control" placeholder="例:花田花子" autofocus required>

labelのfor と input のidを紐づけることにより、labelの項目分を選択してもinput自体を選択した場合と同じようになります。

【input のtype属性について】

属性値用途
text(初期値)一行のテキストボックスを作成する
tel電話番号の入力欄を作成する
emailメールアドレスの入力欄を作成する
passwordパスワードの入力欄を作成する
(入力値は隠して表示される)
number数値の入力欄を作成する
(数値以外の入力を受けつけない)
urlurlの入力欄を作成する
date日付の入力欄を作成する
checkboxチェックボックスを作成する
radioラジオボタンを作成する
submit送信ボタンを作成する
reset入力をリセットするボタンを作成する

【name属性】データを送信したプログラムで項目を区別する。

【value属性】項目の初期値を指定。
 例:value=”http://” とすると、url入力欄で”http://”を入力する手間が省ける。

【placeholder属性】薄く入力例が表示される。

【require属性】必須入力項目に ”required”と入れておくと、入力がない場合にポップアップで警告表示されます。(ブラウザにより差異があり)

【maxlength/minlength】最大文字数/最小文字数を指定できます。

★追記で…cssを使ってユーザビリティを高める方法

・必須入力項目の背景色を指定

input:required{background: 色の指定;}
input:valid{background: transparent;} /* 入力内容が正しかった場合は背景色が消える設定 */

・入力不備を背景色で喚起する(例はemail)

input[type="email"]:invalid{background: 色の指定;}/*不備があった場合の背景色*/
input:valid{background: transparent;} /* 入力内容が正しかった場合は背景色が消える設定 */

・選択されたフィールドの背景色を指定

input:focus{background: 色の指定;}

サンプルはこちら。

css parts
スポンサーリンク
Web Parts Box
タイトルとURLをコピーしました