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

比較的よく使う要素（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>

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