テキスト入力
<div>
<label>お名前<input type="text"></label>
</div>
<div>
<label>パスワード<input type="password"></label>
</div>
<div>
<label>数量<input type="number"></label>
</div>
<div>
<label>日付<input type="date"></label>
</div>
複数行のテキスト入力
<label>内容<textarea></textarea></label>
チェックボックス
複数選択できるものに使用する。
<label><input type="checkbox">商品A</label>
<label><input type="checkbox">商品B</label>
<label><input type="checkbox">商品C</label>
ラジオボタン
1つだけ選ばせるものに使用する。
同じnameを付けることにより1つだけ選択できるようになる。
<label><input type="radio" name="warranty">加入済み</label>
<label><input type="radio" name="warranty">未加入</label>
<label><input type="radio" name="warranty">わからない</label>
グループ化
チェックボックスやラジオボタンを枠で囲うことができる。
<!-- グループ化 -->
<fieldset>
<!-- フィールド説明/-->
<legend>対象の商品</legend>
<label><input type="checkbox">商品A</label>
<label><input type="checkbox">商品B</label>
<label><input type="checkbox">商品C</label>
</fieldset>
ドロップダウンリスト
<select>
<option>-- お問合せ種別を選択してください --</option>
<option>商品が届かない</option>
<option>商品が壊れた</option>
<option>間違えて注文した</option>
<option>決済手段を変えたい</option>
<option>その他</option>
</select>
リストボックス
<!-- multipleと記述することで複数選択が可能になる。 -->
<select size="3" multiple>
<option>商品が届かない</option>
<option>商品が壊れた</option>
<option>間違えて注文した</option>
<option>決済手段を変えたい</option>
<option>その他</option>
</select>
ボタン
<!-- 画像を含めることができる -->
<button>送信</button>
<!-- テキストのみ -->
<input type="submit" value="送信">