html - 输入文本框和标签 - 如何使它们相等？

Question

所以我正在尝试输入文本框及其描述，我希望每个文本框最终都具有相同的长度。例如，我会有一个如下所示的文本框:

Username: [             ]

但是，假设我还有一个输入文本框，上面写着“操作系统:”

我希望它是这样的:

Username: [             ]
OS:       [             ]

而且我希望对于表内的每个输入字段都是如此(或者不在表内？我不确定)

我该怎么做？

编辑:

我有多个字段，我希望所有字段的长度都相同，即:

Username:     [             ]      Machine Name: [             ]
OS:           [             ]      Model:        [             ]

这是我的代码:

<form action="addrecord.psp" method="get">
<table>
<tr><td>Username: <input type="text" name="uname" size="12"/></td>
<td>Machine Name:<input type="text" name="mname" size="8" /></td>
<td>Make: <input type=text" name="make" size="8" /></td>
<td>Model: <input type="text" name="model" size="8"/></td>
<td>Service Tag: <input type="text" name="service" size="8"/></td></tr>
<tr><td>Processor: <input type="text" name="processor" size="12"/></td>
<td>Processor Speed: <input type="text" name="speed" size="4"/></td>
<td>Amount of RAM: <input type="text" name="ram" size="3"/></td>
<td>Type of RAM: <input type="text" name="ram2" size="4"/></td>
<td>RAM Speed: <input type="text" name="rspeed" size="4"/></td></tr>
<td>Graphics Card: <input type="text" name=graphics" size="8"/></td>
<td>Wired Mac Add: <input type="text" name="wired" size="17"/></td>
<td>Wireless Mac Add: <input type="text" name="wireless" size="17"/></td></tr>
<tr><td>OS: <input type="text" name="os" size="12"/></td>
<td>Deploy Date: <input type="text" name="deploy" size="12"/></td>
<td>Last Check-up: <input type="text" name="checkup" size="12"/></td>
<td><input type="submit" value="Submit" /></td></tr>
</table>
</form>

我不相信我的新表单，字段集提交正确，我收到以下回调:

追溯(最近的调用最后):

HandlerDispatch 中的文件“/usr/lib/python2.7/dist-packages/mod_python/importer.py”，第 1537 行 default=default_handler, arg=req, silent=hlist.silent)

文件“/usr/lib/python2.7/dist-packages/mod_python/importer.py”，第 1229 行，在 _process_target 结果 = _execute_target(配置、请求、对象、参数)

文件“/usr/lib/python2.7/dist-packages/mod_python/importer.py”，第 1128 行，在 _execute_target 结果 = 对象(arg)

处理程序中的文件“/usr/lib/python2.7/dist-packages/mod_python/psp.py”，第 337 行 p.run()

文件“/usr/lib/python2.7/dist-packages/mod_python/psp.py”，第 243 行，在运行中 在 global_scope 中执行代码

文件“/var/www/inventory/addrecord.psp”，第 34 行，位于 值(%s、%s、%s、%s、%s、%s、%s、%s、%s、%s、%s、%s、%s、%s、%s、%s) """, (username, mname, make, model, service, processor, speed, ram, ram2, rspeed, graphics, wired, wireless, os, deploy, checkup))

文件“/usr/lib/pymodules/python2.7/MySQLdb/cursors.py”，第 174 行，在执行中 self.errorhandler(self, exc, value)

文件“/usr/lib/pymodules/python2.7/MySQLdb/connections.py”，第 36 行，在 defaulterrorhandler 中 提高错误类，错误值

OperationalError: (1048, "Column 'user' cannot be null")

Answer 1

更有效的方法:

<style>

fieldset { 
    overflow: hidden; 
    margin-bottom: 5px;
    display: inline-block;
    width: 270px;
}

label { float: left; width: 120px; }

input { width: 120px; }

</style>

<fieldset>
  <label for="username">Username:</label>
  <input type="text" id="username" />
</fieldset>
<fieldset>
  <label for="mname">Machine Name:</label>
  <input type="text" id="mname" />
</fieldset>
<fieldset>
  <label for="os">OS:</label>
  <input type="text" id="os" />
</fieldset>
<fieldset>
  <label for="model">Model:</label>
  <input type="text" id="model" />
</fieldset>

通过这种方式，您还可以将焦点光标放在字段上，然后单击它们的标签。

示例:http://jsfiddle.net/6SVp7/1/