Question

我是html的新手。我有一个项目，我被要求在fieldset元素中对齐标签。这就是我使用表环境的原因。可能正因为如此，如果我尝试使用行和列设置地址字段的大小，则没有变化。我有以下代码：

＆＃13;

<fieldset class="">
  <legend>Your Contact information</legend>
  <table>
    <tr>
      <label for="mail"></label>
      <td align="right">Email: </td>
      <td align="left"><input type="email" name="mail" id= "mail" value="" required>
    </tr>
    <tr>
      <label for="mob"></label>
      <td align="right">Mobile: </td>
      <td align="left"><input type="tel" name="mob" id = "mob" value="">
    </tr>
    <tr>
      <label for="add"></label>
      <td align="right">Address:  </td>
      <td align="left"><input type="textarea" rows = "4" cols = "20" name="add" id = "add" value="">
    </tr>
    </table>
</fieldset>

＆＃13;

Answer 1

您不能将textarea用作输入类型

<input type="textarea" rows = "4" cols = "20" name="add" id = "add" value="">

您应该像这样编辑

<textarea col="4" rows="25" name="add" id = "add"></textarea>

Answer 2

在下面的示例中，我更正了一些问题，其中label作为tr的直接子项是不允许的，input的类型不是textarea {1}}所以我切换到<textarea></textarea>，在提交表单期间，它将与其余的input字段一起传递。

我可以建议您在设置textarea的宽度时使用属性width而不是cols。有了它，您可以更轻松地将其与输入字段匹配，使其看起来更好。

.contactinfo {
  background:lightyellow;
  border:10px solid yellow;
  margin-bottom:10px;
  width: 720px;
}
.contactinfo input,
.contactinfo textarea {
  width: 180px;
  box-sizing: border-box;    /* have border/padding included in the given width */
}
.contactinfo td {
  vertical-align: top;
}

<fieldset class="contactinfo">
  <legend>Your Contact information</legend>
  <table>
    <tr>      
      <td align="right"><label for="mail">Email: </label></td>
      <td align="left"><input type="email" name="mail" id= "mail" value="" required>
    </tr>
    <tr>
      <td align="right"><label for="mob">Mobile: </label></td>
      <td align="left"><input type="tel" name="mob" id = "mob" value="">
    </tr>
    <tr>      
      <td align="right"><label for="add">Address: </label></td>
      <td align="left"><textarea rows = "4" name="add" id = "add"></textarea>
    </tr>
  </table>
</fieldset>

使用div作为包装，它将在响应式布局中允许更多选项。

.contactinfo {
  background:lightyellow;
  border:10px solid yellow;
  margin-bottom:10px;
  width: 720px;
}
.contactinfo label {
  display: inline-block;
  width: 60px;
  text-align: right;
  vertical-align:top;
}
.contactinfo div ~ div {
  margin-top: 2px;
}
.contactinfo input,
.contactinfo textarea {
  width: 180px;
  box-sizing: border-box;    /* have border/padding included in the given width */
}

<fieldset class="contactinfo">
  <legend>Your Contact information</legend>
  <div>
    <label for="mail">Email: </label>
    <input type="email" name="mail" id= "mail" value="" required>
  </div>
  <div>
    <label for="mob">Mobile: </label>
    <input type="tel" name="mob" id = "mob" value="">
  </div>
  <div>
    <label for="add">Address: </label>
    <textarea rows = "4" name="add" id = "add"></textarea>
  </div>
</fieldset>

Answer 3

试试这个;

＆＃13;

<fieldset class="">
      <legend>Your Contact information</legend>
      <table width="100%">
        <tr>
          <label for="mail"></label>
          <td align="right">Email: </td>
          <td align="left"><input type="email" name="mail" id= "mail" value="" required>
        </tr>
        <tr>
          <label for="mob"></label>
          <td align="right">Mobile: </td>
          <td align="left"><input type="tel" name="mob" id = "mob" value="">
        </tr>
        <tr>
          <label for="add"></label>
          <td align="right">Address:  </td>
          <td align="left"><textarea rows = "4" cols = "20" name="add" id = "add" value=""></textarea>
        </tr>
        </table>
    </fieldset>

＆＃13;

Answer 4

我会用CSS来调整它们的大小。

 <tr>
  <label for="mail"></label>
  <td align="right">Email: </td>
  <td align="left"><input type="email" name="mail" id= "mail" style="width:200px; height:200px;" value="" required>
</tr>

这应该有用。

在html中更改表环境中的地址字段大小

4 个答案: