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

时间:2011-10-28 15:42:15

标签: html css

所以我有一个这样的表单,目前有一堆文本输入框和一个提交按钮。我想使用CSS,而不是使用表(看起来像一个混乱的方法)。我如何以一种看似合适/专业的方式对其进行格式化(希望对问题不要太模糊?)

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

3 个答案:

答案 0 :(得分:5)

有些建议:

  1. 您应该使用POST代替GET,因为GET旨在检索信息(More info)。

  2. 您还应该在表单中使用<label>标记,例如:

    <label for="uname">Username:</label>
    <input type="text" name="uname" size="12"/>
    
  3. 尝试将字段上方的标签对齐。它更容易阅读。 More tips on forms usability.

  4. 除此之外,你真的应该阅读一些CSS教程。您可以尝试HTMLdogDev.Opera

答案 1 :(得分:2)

首先,如果您的数据表示为“表格”,那么使用<table>并不是一个坏主意。

其次,如果您要为此<form>设置样式,最佳做法是为您的标签添加<label>。怎么样:

<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:

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

另外,我注意到你在一些元素属性周围遗漏了不少"个。要小心,因为它会破坏你的代码。

答案 2 :(得分:0)

用于构建语义列表的另一个好的标记元素是定义列表。 Dan Cederholm在这里写了关于这种技术的文章:http://www.devarticles.com/c/a/Web-Design-Standards/Web-Forms/2/

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

但是为了回应tcurvelo的回答和David Barker的评论,你应该在建立结构后开始尝试使用CSS。我建议使用sitepoint来了解您可以使用的不同表单元素:http://reference.sitepoint.com/html/elements-form

还有很多教程可以使用CSS实现表单的不同外观。重要的是从没有CSS的良好结构开始。