如何使用css布局表单 [英] how to layout forms with css
问题描述
由于CSS的良好支持，我们不应该使用表格进行布局。而且我使用div和样式元素来定位它们，而不是使用表格来使用它们。
我想知道我们怎么做没有表格的布局表格，所以我们会将每个输入文本字段放在彼此之下。
例如：
NAME：INPUT字段
密码：输入字段
有什么建议吗？
-
http://www.archytas.nl/
网页设计，互联网应用， internetgestuurde elektronica
Hi,
Since the good support of CSS we shouldn''t use tables for layout. And I
am quite far in using divs and styling elements to position them without
the use of tables.
I was wondering how we could layout forms without tables so we would
have each input text field below each other.
for example:
NAME: INPUT FIELD
PASSWORD: INPUT FIELD
Any suggestions?
--
http://www.archytas.nl/
webdesign, internet applicaties, internetgestuurde elektronica
推荐答案
" Roderik" <毫安** @ roderik.net>在消息中写道
news：41 ********************** @ dreader2.news.tiscal i.nl ...
"Roderik" <ma**@roderik.net> wrote in message
news:41**********************@dreader2.news.tiscal i.nl...
由于CSS的良好支持，我们不应该使用表格进行布局。而且我很擅长使用div和样式元素来定位它们而不需要使用表格。
我想知道如何在没有表格的情况下布局表单，这样我们就可以了每个输入文本字段彼此相对。
例如：
名称：INPUT FIELD
密码：输入字段
Hi,
Since the good support of CSS we shouldn''t use tables for layout. And I
am quite far in using divs and styling elements to position them without
the use of tables.
I was wondering how we could layout forms without tables so we would
have each input text field below each other.
for example:
NAME: INPUT FIELD
PASSWORD: INPUT FIELD
我在营地里说这是一个表格式的安排：标签在一个
栏中，用户输入在另一个栏目中。如果你愿意，可以继续使用表格。
否则，使用CSS将标签浮动到左侧。 （以下代码未经测试。）
label {float：left;宽度：20em; padding-right：1em; }
....
< div>< label for =" userName">用户名：< / label>< input type =" ; text
name =" userName" value ="">< / div>
....
I''m of the camp that says that this is a tabular arrangement: labels in one
column, user input in another. So go ahead a use a table if you want.
Otherwise, float the labels to the left using CSS. (Code below is untested.)
label { float: left; width: 20em; padding-right: 1em; }
....
<div><label for="userName">User name:</label><input type="text"
name="userName" value=""></div>
....
2004年8月25日星期三23:01:06 +0200，Roderik< ma ** @ roderik.net>写道：
On Wed, 25 Aug 2004 23:01:06 +0200, Roderik <ma**@roderik.net> wrote:
由于CSS的良好支持，我们不应该使用表格进行布局。而且我很擅长使用div和样式元素来定位它们而不需要使用表格。
我想知道如何在没有表格的情况下布局表单，这样我们就可以了每个输入文本字段彼此相对。
例如：
名称：输入字段
密码：输入字段
任何建议？
Hi,
Since the good support of CSS we shouldn''t use tables for layout. And I
am quite far in using divs and styling elements to position them without
the use of tables.
I was wondering how we could layout forms without tables so we would
have each input text field below each other.
for example:
NAME: INPUT FIELD
PASSWORD: INPUT FIELD
Any suggestions?
没有CSS需要这样做。
< div>< label for =" realname">您的姓名（必填） ）：< / label>< input type =" text"
name =" realname" id =" realname">< / div>
< div>< label for =" email">电子邮件地址（必填）：< / label><输入
type =" text"名称= QUOT;电子邮件" id =" email">< / div>
如果您想将输入字段放到特定位置，请尝试此CSS
在上面的HTML上。
表格div {position：relative;}
表格div标签{width：12em;}
form div input {position：absolute; left：13em;}
No CSS needed to do this.
<div><label for="realname">Your Name (required):</label><input type="text"
name="realname" id="realname"></div>
<div><label for="email">Email Address (required):</label><input
type="text" name="email" id="email"></div>
If you want to put the input field over to a specific spot, try this CSS
on the above HTML.
form div {position: relative;}
form div label {width: 12em;}
form div input {position: absolute; left: 13em;}
2004年8月25日星期三17:17:27 -0400，Harlan Messinger
< h。** *******@comcast.net>写道：
On Wed, 25 Aug 2004 17:17:27 -0400, Harlan Messinger
<h.*********@comcast.net> wrote:
NAME：INPUT FIELD
PASSWORD：INPUT FIELD
NAME: INPUT FIELD
PASSWORD: INPUT FIELD
我是营地，说这是一个表格式的安排：
一栏中的标签，另一栏中的用户输入。
I''m of the camp that says that this is a tabular arrangement: labels in
one
column, user input in another.
但是，表格的目的不是提供数据之间的比较吗？我认为一个表需要比较类似数据的列和行，但是这个
真的不是为了这个目的。
当然，我不会开枪。
But isn''t the purpose of a table to offer a comparison amongst the data? I
think a table needs columns and rows which compare similar data, but this
isn''t for that purpose really.
Of course, I won''t shoot you.
这篇关于如何使用css布局表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
