HTML表单中能否使用table布局？如何设置input输入框不占满整页宽度

表单使用table布局的可行性 #

可以使用table实现表单对齐布局，该方案兼容所有浏览器版本，仅不符合现代前端语义化规范，不会出现功能异常。

现有代码的错误点 #

• HTML结构不规范：table的行标签<tr>下必须嵌套单元格标签<td>才能放内容，现有代码直接在<tr>下放标题、表单元素，浏览器解析会出现异常
• 标签嵌套顺序错误：<form>标签开启后中途嵌套了多个<tr>标签，闭合位置却在<table>、<fieldset>之外，层级混乱
• 未给输入框设置宽度限制，默认会自适应父容器宽度，导致占满整行

优化方案 #

核心实现小尺寸输入框的方法

给input元素设置固定宽度即可，两种常用写法：

• 行内样式写法：<input style="width: 180px;" 其他属性...>
• 全局样式统一控制：在head内加入样式规则 input { width: 200px; max-width: 90%; }

修复后完整代码

<!DOCTYPE html>
<html>
<head>
<style>
/* 可自行调整输入框宽度数值 */
form input {
  width: 180px;
}
table td {
  padding: 8px 4px;
}
</style>
</head>
<body>
<h1>GEB Research</h1>
<hr>
<form method="post" action="/trigger">
  <fieldset>
    <h2>Create Open ADR Event</h2>
    <table>
      <tr>
        <td><label>VEN ID:</label></td>
        <td><input type="text" name="VEN ID" value="" required></td>
      </tr>
      <tr>
        <td><label>Open ADR Payload Simple Signal:</label></td>
        <td><input type="number" name="Payload Signal" value="" required></td>
      </tr>
      <tr>
        <td><label for="meeting-time">Choose start date and time for event:</label></td>
        <td><input type="datetime-local" id="meeting-time" name="Event-Start" value="2020-07-12T19:30" min="2020-06-07T00:00" max="2024-06-14T00:00" required></td>
      </tr>
      <tr>
        <td><label>Event Duration in Minutes:</label></td>
        <td>
          <input type="number" name="Minutes" value="" min="30" max="720" required>
          <br>
          <small>Minimun requirement of 30 and maximum of 720 Minutes</small>
        </td>
      </tr>
    </table>
  </fieldset>
  <br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

内容的提问来源于stack exchange，提问作者bbartling