Question

我对HTML相对较新。

我希望在类似的表单元素周围找到边框。

例如，对于注册表单：

我该怎么做？

Answer 1

你是说这样的意思吗？

<!DOCTYPE html>
<html>
<body>

<form>
 <fieldset>
  <legend>Personalia:</legend>
  Name: <input type="text"><br>
  Email: <input type="text"><br>
  Date of birth: <input type="text">
 </fieldset>
</form>

</body>
</html>

在这里演示：https://jsfiddle.net/991avcmv/

Answer 2

您要查找的代码是<fieldset>

<fieldset style="width:270px">
<legend>Contact details</legend> 
<label>Name:<br /></label>
<input type="text" name="name"><br />
<label>Email:<br />
<input type="text" name="email"></label><br /> 
<label>Mobile:<br />
<input type="text" name="mobile"></label><br /> 
</fieldset>

结果将是这样的：

您的legend标记中的任何内容都会在框中显示为该组的标题。

宽度决定了盒子的大小。如果没有提到宽度，或者您没有使用任何CSS，则矩形的大小将是浏览器窗口的大小。

Answer 3

使用<legend>Sign Up</legend>代码

Answer 4

您可以这样做： -

<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br />
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" /></label>
</fieldset>

Answer 5

<!DOCTYPE html>
<html>
<body>

<form>
 <fieldset>
  <legend>Sign up:</legend>
   <label>Name:</label>
   <br>
   <input type="text" name="name"/><br>
   <label>Email: </label>
   <br>
   <input type="email" name="email"/><br>
    <label>Date of birth:</label>
   <br>
  <input type="text" name="dob"/>
 </fieldset>
</form>

</body>
</html>

如何在HTML表单中对元素进行分组？绕过他们的边界？

5 个答案: