Блог

Главная - Вопросы по программированию - HTML Граница не отображается в моей форме

HTML Граница не отображается в моей форме

#html #css

Вопрос:

Я новичок в HTML, и я спросил своего учителя, но он просто сказал мне Google so…

Я хочу создать такую границу, окружающие, размер, корку и т. Д., Но она не отображается

Мой выглядит так

Мой код выглядит примерно так

У кого-нибудь есть идея, как это сделать?? Я думал, что это проблема с CSS или что-то в этом роде, но потом мой учитель сказал, что для создания этой границы впоследствии не использовался css, поэтому я просто запутался.

Мой код выглядит так:

 form {
    font-family: Arial, Helvetica, sans-serif;
    padding: 30px;
    border: 10px solid olive;
}

label {
    display: inline-block;
    width: 100px;
    margin-left: 20px;
} 
 <form>
    <h1>Pizza Order Form</h1>
    <label>Pizza Type:</label>
    <select name="type" id="type">
        <option>Aloha Chicken</option>
        <option>Beef Pepperoni</option>
        <option>Chicken Delight</option>
        <option>Deluxe Cheese</option>
    </select>

    <label>Quantity:</label>
    <input type="number" min="1" max="4" value="1" /> <br /><br />

    <div>
        <label>Size:</label>
        <input type="radio" id="small" />
        <label for="small">Small</label>
        <input type="radio" id="medium" />
        <label for="medium">Medium</label>
        <input type="radio" id="large" />
        <label for="large">Large</label>
    </div>
    <br />

    <div>
        <label>Crust:</label>
        <input type="radio" id="thin" />
        <label for="thin">Thin</label>
        <input type="radio" id="thick" />
        <label for="thick">Thick</label>
        <input type="radio" id="deep dish" />
        <label for="deep dish">Deep Dish</label>
    </div>

    <br />
    <div>
        <label>Toppings:</label>
        <input type="checkbox" id="Mushroom" />
        <label for="Mushroom">Mushroom</label>
        <input type="checkbox" id="Sausage" />
        <label for="Sausage">Sausage</label>
        <input type="checkbox" id="Olives" />
        <label for="Olives">Olives</label>
    </div>

    <br />
    <label>Addons:</label>
    <select>
        <option>Please select addons if required</option>
        <option>Side of Buffalo Wings</option>
        <option>Garlic Bread</option>
    </select>

</form>

Комментарии:

1. Перейдите к fieldset элементу (и его спутнику legend ), который предназначен для группировки полей формы, и он отображает нужные вам границы по умолчанию.

Ответ №1:

Я обновил здесь, пожалуйста, проверьте здесь использование fieldset

Ответ №2:

проверьте этот codepen. это может вам помочь 🙂

Для HTML:

 <div class="container">
  <div class="content">
    form details
  </div>
</div>

Для CSS:

 * {
 box-sizing: border-box;
}

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black; 
  margin: 20px;
  padding: 4px;

}
.container .content {
  border: 10px solid olive; 
  height: 100%;
}
Метки: