フォーム
ラベル 選択してください 選択肢1 選択肢2 選択肢3 選択肢4 選択肢5 選択肢6 コード <div class="form-group"> <label for="select" class="form-label"&g
選択肢 選択肢 コード <div class="form-check"> <label class="form-check-label" for="check-box1">選択肢</label> <input class="form-check-input" type="checkbox" value="" id="check-box1"> </div> <div class="form-check"> <label class="form-check-label" fo
Input type=“text” ラベル コード <div class="form-group"> <label for="" class="form-label">ラベル</label> <input type="text" class="form-input" id="" placeholder=""> </div> Textarea ラベル コ
フォームをデザインするときに、ラベルやinputをきれいに囲って表示するためのグループ .form-group { display: flex; flex-direction: column; gap: 8px; .form-label { order: 1; } .form-select, .form-textarea, .form-input { order: 3; } .form-help { order: 2; } .form-error-feedback {
デフォルト型 選択肢 選択肢 コード <div class="form-radio"> <input class="form-radio-input" type="radio" name="test" id="form-check1"> <label class="form-radio-label" for="form-check1"> 選択肢 </label> </div> <div class="form-radio"> <input class="form-radio-input" type="radio" name="test" id="form-check2"> <label class="form-radio-label" for="form-check2"> 選択肢 </label> </div> タイル型