Html 用于设置此表单样式的CSS方法

我有一个这样的表单，目前有一堆文本输入框和一个提交按钮。我希望使用CSS，而不是使用表（这似乎是一种混乱的方法）。我将如何以一种看起来像样/专业的方式来编排这篇文章（希望不是一个太模糊的问题？）

将记录添加到数据库
用户名：
计算机名称：
制作：
有线Mac地址：
无线Mac添加：

操作系统：
部署日期：
最后检查：

一些建议：

您应该使用

POST

而不是

GET

，因为

GET

是用来检索信息的（）

您还应该在表单中使用

标记，例如：

<label for="uname">Username:</label>
<input type="text" name="uname" size="12"/>

用户名：

尝试在字段上方对齐标签。它使阅读更容易

除此之外，您还应该阅读一些CSS教程。你可以试试看

---

另一个用于构建语义列表的好标记元素是定义列表。Dan Cederholm在这里写到了这项技术：

这为您提供了一个很好的结构，以便在设置表单样式时与CSS挂钩

但为了回应tcurvelo的回答和David Barker的评论，一旦你的结构建立起来，你就应该开始尝试CSS。我建议sitepoint对您可以使用的不同表单元素有一个基本的了解：

---

还有很多教程可用于使用CSS实现表单的不同外观。重要的是从一个好的结构开始，这个结构在没有CSS的情况下是有意义的。

首先，如果您的数据表示为“表格”，那么使用

不是一个坏主意

其次，如果您想设置此

的样式，最好将

包含在标签中。这个怎么样：

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

---

另外，我注意到您丢失了很多

“

围绕一些元素属性。小心这一点，因为它会破坏您的代码。

这是非常模糊的。你想让它看起来像什么？我们无法知道你想要的效果是什么。一些建议：尝试一下造型。阅读CSS教程以及如何在CSS标记中使用特定的HTML标记。(). 如果你遇到了具体的问题，那么回来问一个问题。我相信人们会帮助你的。W3SSC学校不是一个很好的选择。解释原因并建议其他来源。你应该去看看——你可能会得到比这里更友好的回复。（说真的，伙计们，对新来的家伙好一点。）我还建议在标签上设置一个宽度。还可以为标签和输入框设置宽度。您可能还想在谷歌上搜索CSS样式的表单

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

#myform {
    border: 1px solid #CCC;
    padding: 20px;
}
#myform label {
    display: block;
}