HTML的边界没有显示在我的表单

Question

我是HTML的新手，我问了我的老师，但他只是告诉我谷歌所以…

我想创建一个像这样的边框，包括周围，大小，地壳等但是它没有显示

我的是这样的

我的代码看起来像这样

有谁知道怎么做吗?我以为这是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>

Answer 1

我在这里更新了，请检查这里使用fieldset

Answer 2

结帐。这可能对你有帮助:)

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%;
}