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 14 7599
"Roderik" <ma**@roderik.net> wrote in message
news:41**********************@dreader2.news.tiscal i.nl... 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
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>
....
On Wed, 25 Aug 2004 23:01:06 +0200, Roderik <ma**@roderik.net> wrote: 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?
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;}
On Wed, 25 Aug 2004 17:17:27 -0400, Harlan Messinger
<h.*********@comcast.net> wrote: 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.
Neal wrote:
[form layout] 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;}
Here's me thinking: "this sounds so easy, but I'm sure it was a
heck of a lot more complicated when I tried it once" ...
Then I realised that was cause I wanted the labels right
aligned... :-)
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
On 25 Aug 2004 21:38:47 GMT, Els <el*********@tiscali.nl> wrote: Neal wrote:
[form layout]
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;}
Here's me thinking: "this sounds so easy, but I'm sure it was a heck of a lot more complicated when I tried it once" ... Then I realised that was cause I wanted the labels right aligned... :-)
form div {position: relative;}
form div label {display: block; width: 10em; text-align: right;}
form div input {position: absolute; top: 0; left: 13em;}
Works in Opera and IE.
On Wed, 25 Aug 2004 17:44:13 -0400, Neal <ne*****@yahoo.com> wrote: On 25 Aug 2004 21:38:47 GMT, Els <el*********@tiscali.nl> wrote: Here's me thinking: "this sounds so easy, but I'm sure it was a heck of a lot more complicated when I tried it once" ... Then I realised that was cause I wanted the labels right aligned... :-)
form div {position: relative;} form div label {display: block; width: 10em; text-align: right;} form div input {position: absolute; top: 0; left: 13em;}
Works in Opera and IE.
Until you change text size in IE, dammit.
This fixes that.
form div {position: relative; font-size: 100%;}
form div label {display: block; width: 10em; text-align: right;}
form div input {font-size: 100%; position: absolute; top: 0; left: 13em;}
Neal wrote: On Wed, 25 Aug 2004 17:17:27 -0400, Harlan Messinger <h.*********@comcast.net> wrote:
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 believe it's more intended to show a relationship between data in
associated cells, which is not the same thing. In this case, the left
column might even be considered a header (<th scope="row">) and the
input field the corresponding data.
WFM, YMMV
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Neal wrote: On Wed, 25 Aug 2004 17:44:13 -0400, Neal <ne*****@yahoo.com> wrote:
On 25 Aug 2004 21:38:47 GMT, Els <el*********@tiscali.nl> wrote: Here's me thinking: "this sounds so easy, but I'm sure it was a heck of a lot more complicated when I tried it once" ... Then I realised that was cause I wanted the labels right aligned... :-) form div {position: relative;} form div label {display: block; width: 10em; text-align: right;} form div input {position: absolute; top: 0; left: 13em;}
Works in Opera and IE.
What does it do in other browsers?
(too lazy to try - I'm happy with my little tabled form)
Until you change text size in IE, dammit.
<g>
This fixes that.
form div {position: relative; font-size: 100%;} form div label {display: block; width: 10em; text-align: right;} form div input {font-size: 100%; position: absolute; top: 0; left: 13em;}
Looks easy, and looks like it could work, but I'm sure I've
seen a far more complicated version, not sure if that had a
good reason or was just plain over the top. I think every row
had a div around it, then both the label and the input had a
div each, and there was floating somewhere too.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Neal wrote: Harlan Messinger wrote:
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?
It can be. But I think your definition is a tad too narrow.
I think a table needs columns and rows which compare similar data,
A table should present information that can be related. My test: if the
data is rearranged, can the user still make sense of the data? With
layout tables, yes. With form data, the answer is no. To me, that says a
table is appropriate for a form.
Of course, I won't shoot you.
Well, that's good! :-)
--
Brian (remove ".invalid" to email me) http://www.tsmchughs.com/
Neal wrote: Roderik wrote:
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
form div {position: relative;} form div label {width: 12em;} form div input {position: absolute; left: 13em;}
What a simple idea. I've always floated the label, but given all the css
float bugs, I wonder if this isn't a better solution.
--
Brian (remove ".invalid" to email me) http://www.tsmchughs.com/
Neal wrote: On Wed, 25 Aug 2004 17:44:13, Neal wrote: form div {position: relative;} form div label {display: block; width: 10em; text-align: right;} form div input {position: absolute; top: 0; left: 13em;}
Works in Opera and IE.
Until you change text size in IE, dammit.
Second time this has come up tonight.
This fixes that.
form div {position: relative; font-size: 100%;}
Yep. If you're going to do anything fancy layout-wise, you're best
off setting font-size: 100% in body.
--
Brian (remove ".invalid" to email me) http://www.tsmchughs.com/
Neal <ne*****@yahoo.com> wrote: On Wed, 25 Aug 2004 17:17:27 -0400, Harlan Messinger <h.*********@comcast.net> wrote:
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.
The purpose of a TABLE is to present tabular data. "Data" can be
anything, including user-entered data or places for them to enter it.
The first paragraph of the Tables section of the spec:
"The HTML table model allows authors to arrange data -- text,
preformatted text, images, links, forms, form fields, other tables,
etc. -- into rows and columns of cells."
--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.
On Thu, 26 Aug 2004 01:20:53 -0400, Harlan Messinger
<hm*******************@comcast.net> wrote: Neal <ne*****@yahoo.com> wrote:
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.
The purpose of a TABLE is to present tabular data. "Data" can be anything, including user-entered data or places for them to enter it. The first paragraph of the Tables section of the spec:
"The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells."
I was just thinking about Barry Pearson too. ;) In his honor, I'll start
from the start. :D
The definition describes damn near anything. Even tabular layout. The
definition isn't that good. The only way to make sense of it is to look at
the element's name, table.
Clearly, img is meant to deliver an image, not some other object. And form
is obviously for a form. Their descriptions in the W3C documentation
reflect these roles.
Therefore, it's sensible to deduce that it "allows authors to arrange data
.... into rows and columns of cells" only if it's a table. And so we must
look at what tables are in real life.
Most definitions I see describe a table as a "relational database system"
- which is to say, all the row items have something unique in common, and
all the columns have something - the same thing - in common with each row.
And, it implies that it's meant for providing a relationship to the viewer.
Now, is the form we've been discussing a table? Some have argued basically
that it's a chart of rows relating to specific input content, comparing
the author's queries and the user's responses. I guess I am seeing tables
as being meant to communicate this relationship to the user, not as merely
a relationship that develops through the user's interaction. An HTML
table's purpose is to deliver information based in relations of data to a
curious user, not to simply act as an egg carton, holding whatever data
relationships we or a random user chooses to plug in. The table element no
longer seems to have a semantic approach, but becomes simply a rendering
device to align stuff we have a hard time with otherwise - which is
exactly the slippery slope we all want to avoid!
Maybe my view is in error, I'll have to ponder it. Never really gave it
much thought before now. But then again, maybe it's not...
Neal <ne*****@yahoo.com> wrote: On Thu, 26 Aug 2004 01:20:53 -0400, Harlan Messinger <hm*******************@comcast.net> wrote:
Neal <ne*****@yahoo.com> wrote:
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. The purpose of a TABLE is to present tabular data. "Data" can be anything, including user-entered data or places for them to enter it. The first paragraph of the Tables section of the spec:
"The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells."
I was just thinking about Barry Pearson too. ;) In his honor, I'll start from the start. :D
The definition describes damn near anything. Even tabular layout. The definition isn't that good. The only way to make sense of it is to look at the element's name, table.
Clearly, img is meant to deliver an image, not some other object. And form is obviously for a form. Their descriptions in the W3C documentation reflect these roles.
Therefore, it's sensible to deduce that it "allows authors to arrange data ... into rows and columns of cells" only if it's a table. And so we must look at what tables are in real life.
Most definitions I see describe a table as a "relational database system" - which is to say, all the row items have something unique in common, and all the columns have something - the same thing - in common with each row. And, it implies that it's meant for providing a relationship to the viewer.
I agree with all of that, and it's fully applicable to the arrangement
of data labels and entry fields. Now, is the form we've been discussing a table? Some have argued basically that it's a chart of rows relating to specific input content, comparing the author's queries and the user's responses. I guess I am seeing tables as being meant to communicate this relationship to the user, not as merely a relationship that develops through the user's interaction.
I see no need to add that requirement to the definition of a table.
We're talking about a set of ordered pairs, (label, entry field), and
if you don't want to think of the fields as data, then the information
that the user will enter into them *is* data. Why would table-ness
depend on *who* enters the data into each cell?
An HTML table's purpose is to deliver information based in relations of data to a curious user, not to simply act as an egg carton, holding whatever data relationships we or a random user chooses to plug in.
Data is data, no matter who plugs it in.
The table element no longer seems to have a semantic approach, but becomes simply a rendering device to align stuff we have a hard time with otherwise - which is exactly the slippery slope we all want to avoid!
I don't see this as a consequence of using tables to arrange a form as
we have been discussing.. Maybe my view is in error, I'll have to ponder it. Never really gave it much thought before now. But then again, maybe it's not...
--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Ken Fine |
last post by:
I've made a content managment system that uses icons to represent page
layouts. To choose a different layout, the user clicks on a radio button
associated with each layout icon. On click of one of...
|
by: Zak McGregor |
last post by:
Hi all
Are there any good solutions to aligning form field names and input boxes
without resorting to tables? I am struggling to do this nicely at the
moment.
Thanks
Ciao
Zak
|
by: Neal |
last post by:
Patrick Griffiths weighs in on the CSS vs table layout debate in his blog
entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A
quite good article.
|
by: John |
last post by:
Hi,
This is my first experiment with C#, I'm trying to handle the resize
event. According to the documentation I should handle the Layout event
for this. My question is: how do I register this...
|
by: Anoop |
last post by:
Hi,
I am new to this newsgroup and need help in the following questions.
1. I am workin' on a GUI application. Does C# provides Layout Managers the
way Java does to design GUI? I know that it...
| |
by: ljungers |
last post by:
Hello to all you HTML experts. Have been searching the net for some type of open source or low cost form IDE designer. Have used Dream Weaver a few times and experimented with a couple of share ware...
|
by: ljungers |
last post by:
Have been searching the web for some type of open source or low cost form IDE designer. Have used Dream Weaver a few times and experimented with a couple of share ware IDE's. I find most to be an...
|
by: =?Utf-8?B?RnJhbmsgVXJheQ==?= |
last post by:
Hi all
It is maybe a stupid question, but I have some
trouble with Inheritance.
For example:
I create a new class with one form.
On this form I place on the bottom a Panel
and on this Panel...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
| |