Edited at

【備忘録】フォームの中身(input要素、textarea要素、select要素、button要素)について、比較的よく使うものを全部まとめたHTML

More than 1 year has passed since last update.

比較的よく使う要素(input要素、textarea要素、select要素、button要素)についてのメモ的なHTMLです。

classやid等、属性はすべてよしなに書いている状態で、特別な意味はありません。

完全に私個人の備忘録で恐縮ですが、何かの参考になれば幸いです。


表示例

よしなにCSSを書き足してます。見え方のご参考迄に。

See the Pen フォーム要素一覧 by kako3 (@kako3) on CodePen.



HTML


HTML


<form action="【データを送信すべき場所のURL】" name="form-type1" method="post">

<div class="form-group">
<label for="input-name" class="form-label">氏名</label>
<input type="text" class="form-control" id="input-name" placeholder="お名前を入力">
</div>

<div class="form-group">
<label for="input-family-name" class="form-label"></label>
<input type="text" class="form-control" id="input-family-name" placeholder="姓を入力">
<div class="form-group"> </div>
<label for="input-first-name" class="form-label"></label>
<input type="text" class="form-control" id="input-first-name" placeholder="名を入力">
</div>

<div class="form-group">
<label for="input-url" class="form-label">URL</label>
<input type="url" class="form-control" id="input-url" value="https://">
</div>

<div class="form-group">
<label for="input-tel" class="form-label">電話番号</label>
<input type="tel" class="form-control" id="input-tel" placeholder="電話番号を入力">
</div>

<div class="form-group">
<label for="input-email" class="form-label">E-mailアドレス</label>
<input type="email" class="form-control" id="input-email" placeholder="E-mailアドレスを入力">
</div>

<div class="form-group">
<label for="input-password" class="form-label">パスワード</label>
<input type="password" class="form-control" id="input-password" placeholder="パスワードを入力">
</div>

<fieldset class="form-group">
<legend class="form-legend">入力コントロールの内容グループの見出し(legend:れじぇんど)</legend>
<div class="form-group-inner">
<p>for属性によって入力コントロールにlabelをつけるタイプ(name="radio-type1")</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio-type1" id="radio1" value="option1" checked>
<label class="form-check-label" for="radio1"> 項目1(予め選択した状態にする要素)※input要素に「checked(ちぇっくと)」と記載 </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio-type1" id="radio2" value="option2">
<label class="form-check-label" for="radio2"> 項目2 </label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio-type1" id="radio3" value="option3" disabled>
<label class="form-check-label" for="radio3"> 項目3(押せない要素)※input要素に「disabled(でぃすえぃぶるど)」と記載 </label>
</div>
</div>
</fieldset>

<fieldset class="form-group">
<legend class="form-legend">入力コントロールの内容グループの見出し(legend:れじぇんど)</legend>
<div class="form-group-inner">
<p>入力コントロールを内包する形でlabelをつけるタイプ(name="radio-type2")</p>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radio-type2" value="option1" checked>
項目1(予め選択した状態にする要素)※input要素に「checked(ちぇっくと)」と記載 </label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radio-type2" value="option2">
項目2 </label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radio-type2" value="option3" disabled>
項目3(押せない要素)※input要素に「disabled(でぃすえぃぶるど)」と記載 </label>
</div>
</div>
</fieldset>

<fieldset class="form-group">
<legend class="form-legend">入力コントロールの内容グループの見出し(legend:れじぇんど)</legend>
<div class="form-group-inner">
<p>for属性によって入力コントロールにlabelをつけるタイプ</p>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="checkbox-type1" id="checkbox1" value="check1">
<label class="form-check-label" for="checkbox1">チェック項目1</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="checkbox-type1" id="checkbox2" value="check2">
<label class="form-check-label" for="checkbox2">チェック項目2</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="checkbox-type1" id="checkbox3" value="check3">
<label class="form-check-label" for="checkbox3">チェック項目3</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="checkbox-type1" id="checkbox4" value="check4">
<label class="form-check-label" for="checkbox4">チェック項目4</label>
</div>
</div>
</fieldset>

<fieldset class="form-group">
<legend class="form-legend">入力コントロールの内容グループの見出し(legend:れじぇんど)</legend>
<div class="form-group-inner">
<p>入力コントロールを内包する形でlabelをつけるタイプ</p>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="checkbox-type2" value="check1">
チェック項目1</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="checkbox-type2" value="check2">
チェック項目2</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="checkbox-type2" value="check3">
チェック項目3</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="checkbox-type2" value="check4">
チェック項目4</label>
</div>
</div>
</fieldset>

<fieldset class="form-group">
<legend class="form-legend">入力コントロールの内容グループの見出し(legend:れじぇんど)</legend>
<div class="form-group-inner">
<p>プルダウンメニュー</p>
<div class="form-pulldown">
<select name="select-type1">
<option value="">メニューを選んでください</option>
<option value="プルダウンメニュー1">プルダウンメニュー1</option>
<option value="プルダウンメニュー2">プルダウンメニュー2</option>
<option value="プルダウンメニュー3">プルダウンメニュー3</option>
<option value="プルダウンメニュー4">プルダウンメニュー4</option>
</select>
</div>
<div class="form-pulldown">
<p>プルダウンメニュー(オプショングループ)</p>
<select name="select-type2">
<option value="">メニューを選んでください</option>
<optgroup label="メニュー1">
<option value="プルダウンメニュー1-1">プルダウンメニュー1-1</option>
<option value="プルダウンメニュー1-2">プルダウンメニュー1-2</option>
</optgroup>
<optgroup label="メニュー2">
<option value="プルダウンメニュー2-1">プルダウンメニュー2-1</option>
<option value="プルダウンメニュー2-2">プルダウンメニュー2-2</option>
<option value="プルダウンメニュー2-3">プルダウンメニュー2-3</option>
</optgroup>
</select>
</div>
<div class="form-pulldown">
<p>メニューリスト</p>
<select name="select-type3" size="3">
<option value="メニューリスト1">メニューリスト1</option>
<option value="メニューリスト2">メニューリスト2</option>
<option value="メニューリスト3">メニューリスト3</option>
<option value="メニューリスト4">メニューリスト4</option>
<option value="メニューリスト5">メニューリスト5</option>
</select>
</div>
</div>
</fieldset>

<fieldset class="form-group">
<legend class="form-legend">入力コントロールの内容グループの見出し(legend:れじぇんど)</legend>
<div class="form-group-inner">
<p>テキスト入力欄(テキスト)</p>
<label for="input-text" class="form-label">テキスト</label>
<input type="text" class="form-control" name="input-text-type1" id="input-text" placeholder="テキストを入力" size="30">
<p>テキスト入力欄(数字)</p>
<label for="input-number" class="form-label">数字</label>
<input type="number" class="form-control" name="input-number-type1" id="input-number" placeholder="0~100" min="0" max="100">
<p>テキストエリア</p>
<textarea class="form-textarea" name="textarea-type1" id="textarea1" cols="70" rows="10" placeholder="コメントを入力"></textarea>
</div>
</fieldset>

<div class="form-group">
<p>ボタン諸々</p>
<button type='submit' name='action' value='send'>送信</button>
<button type='submit' name='action' value='preview'>入力内容の確認</button>
<button type='submit' name='action' value='reset'>入力内容を消去</button>
<button type='submit' name='action' value='save'>保存</button>
</div>

</form>


※ 記載ミスや、こう書いたほうが良いのでは?とい情報があれば、教えていただけると幸いです。