※ 当サイトではアフィリエイト広告を利用しています。
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 | 電話番号の入力欄を作成する |
| メールアドレスの入力欄を作成する | |
| password | パスワードの入力欄を作成する （入力値は隠して表示される） |
| number | 数値の入力欄を作成する （数値以外の入力を受けつけない） |
| url | urlの入力欄を作成する |
| 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: 色の指定;}
