I want to display an HTML form containing labelled text fields, like this:

      First Name:  [_____________]
       Last Name:  [_____________]
   Date of Birth:  [________]

My obvious approach is to use a <TABLE> and simply place the labels and text fields in its cells, but is there a better way, e.g. a CSS-based approach?

EDIT:

I'm looking for a way that reduces the verbosity in the HTML file.
And yes, I'm looking for auto-sizing of the labels. See a related question about wrapping labels

标签： html css forms layout html-form

9条回答

一纸荒年 Trace。

2楼-- · 2019-03-08 14:31

In terms of usability and if vertical space is not a limiting factor, a list of fields with the label above each field is the quickest to read and fill out, and can be done aesthetically. See many of the usability studies on the web for more info, eg. http://www.lukew.com/resources/articles/web_forms.html

0人赞添加讨论(0) 举报

劫难

3楼-- · 2019-03-08 14:34

I think something like this is what i do but also won't autosize to the length of the text but it's cleaner in my opinion

<form>
  <label for="firstName">First Name</label>
  <input type="textfield" name="firstName" />

  <label for="lastName">Last Name</label>
  <input type="textfield" name="lastName" />
</form>

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

input {
  float:left;
  margin-left:30px;
}

0人赞添加讨论(0) 举报

Bombasti

4楼-- · 2019-03-08 14:36

Typically, I have found that there are at least some issues when not using Tables for forms. The general things I have not been able to solve:

Background-color for fields/inputs is not really possible without a faux background
Auto-sizing columns, but I think this is OK
Field hover with CSS, you could use JS but Tables can do this with pure CSS

I might be missing a few things, but the most flexible mark-up if you are using CSS is as below:

<div class='form-field'>
   <label>Name</label>
   <input />
</div>

You have issues if you want multiple fields per label section, so you have to introduce another div to hold the inputs (to allow the label to still float left etc):

<div class='form-field'>
   <label>Name</label>

   <div class='form-inputs'>
      <input />
      <input />
   </div>
</div>

With the above mark-up you can achieve very flexible forms, I won't post the CSS as it's very similar to a 2 Column-Layout.

I still need to sit down and try and figure out if pure CSS forms are viable for all occasions but tbh it's very unlikely!

Forms are the worst thing to style using CSS. The only major Cross Browser problems i've had are when styling the FieldSet and Legend elements. No real hacks, but they take some work to look good.

0人赞添加讨论(0) 举报

Animai°情兽

5楼-- · 2019-03-08 14:38

Use a CSS framework like Blueprint and use that to style the forms.

Another trick would be to create virual "columns" with css and float them next to each other. Labels in one column and inputs in another. Put that (both columns) in a div with a large enough width and float the columns the opposite way you want to align them.

Here's some code (because I am creating a form) that will work for basic forms. The only constraint is the large right margin on inputs.

form input, form select
{
    float: right;
    margin-right: 650px;
}
form label
{
    float: right;
    margin-top: 5px;
    margin-right: 10px;
}
form .nofloat
{
    float: none;
    margin: 0;
}
form br
{
    clear: both;
}

And layout like so

<input type="text" id="name" />
<label for="name">Name</label>
<br />

On top of this small, narrowly written code, there is an entire article related to creating tableless forms in CSS.

0人赞添加讨论(0) 举报

女痞

6楼-- · 2019-03-08 14:43

The article is a bit old, but I've always found a list apart's advice to be solid: (if you do want to get rid of your tables)

http://www.alistapart.com/articles/prettyaccessibleforms/

0人赞添加讨论(0) 举报

啃猪蹄的小仙女

7楼-- · 2019-03-08 14:43

CSS Table Display

From IE8+ you can use CSS Table Display for this:

enter image description here

<!DOCTYPE html>
<html>
<head>
<style>
form > div > label { text-align: right; vertical-align: top }
form { display: table; }
form > div { display: table-row; }
form > div > label,
form > div > textarea,
form > div > input { display: table-cell; }
</style>
</head>
<body>
<form method="post">

<div>
<label for="name">Name</label>
<input type="text" id="name" size="14"/>
</div>

<div>
<label for="message">Message</label>
<textarea id="message"></textarea>
</div>

<div>
<label for="ssn">Social Security Number</label>
<input type="text" id="ssn"/>
</div>

<div>
<label></label>
<input type="submit" value="Send"/>
</div>

</form>
</body>
</html>

0人赞添加讨论(0) 举报

1 2 下一页

Best way to layout in HTML forms?

CSS Table Display

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间