我怎样才能有一个输入组？

Question

我正在开展一个创建医院软件的项目。我需要创建一个带有矩形的表单来选择一个组，就像设计中一样。我不知道该怎么做。请问我怎样才能实现这个目标？

这是我的代码：

<form>
      <label>Groupe</label>
      <ul>
        <li><input type="radio" name="group" id="">Groupe 1</li>
        <li><input type="radio" name="group" id="">Groupe 2</li>
        <li><input type="radio" name="group" id="">Groupe 3</li>
      </ul>
      <label>Place trouvée</label>
      <input type="checkbox" name="place_trouvee"><br>
      <label>Date et heure prévue de mutation</label>
      <input type="datetime" name="date_heure_mutation" placeholder="jj/mm/aaaa --:--"><br>
      <label>Mobilité</label>
      <select name="mobilité">
        <option value="" selected disabled>-- sélectionner une option --</option>
      </select><br><br>
      <button type="reset">Réinitialiser</button>
      <button type="submit">Enregistrer et fermer</button>
  </form>

这是我的设计

Answer 1

您可以使用 Bootstrap 5 结合此来实现 https://getbootstrap.com/docs/5.0/forms/checks-radios/#outlined-styles 有了这个 https://getbootstrap.com/docs/5.0/components/button-group/#mixed-styles

或使用香草

input[type="radio"] {
    display: none;
}

/* Styling label as buttons */
.radio-group label {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
}

/* Changing label style on hover */
.radio-group label:hover {
    background-color: #ddd;
}

/* Styling for selected label */
input[type="radio"]:checked + label {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

<div class="radio-group">
    <input type="radio" id="option1" name="options" checked>
    <label for="option1">Option 1</label>

    <input type="radio" id="option2" name="options">
    <label for="option2">Option 2</label>

    <input type="radio" id="option3" name="options">
    <label for="option3">Option 3</label>
</div>