Form in Html 4.01 strict and CSS

[Andrew Glasgow]

IMO a table is perfectly acceptable. A textbox is related to its
description.

If the form takes the form (different meanings of the word) of:

Label1 Textarea1
Label2 Textarea2
.. .
.. .
.. .

then it would be tabular.

But most forms are not so simple.

 

[Andrew Glasgow]

Well, the question is whether the form represents tabular data or not.
As to the design in CSS I do not understand why you find it "*very very
very* disorderly."
How many people in this NG think that this form represents tabular data?
Of course if they are tabular data I should try to convert in a table, if
not, I should try to improve the design in CSS and in this case mya-be you
have some suggestions.

It doesn't look like tabular data to me. True you've got labels and
then the text area but the labels aren't all of the same catagory. for
example the first section is firstname, lastname, address, phone number,
etc (if I guess correctly from the cognates) -- they aren't all items in
a catagory.

If it were, say, species of birds and you were entering how many of each
you had seen in a period of time, that'd be tabular: all of the items in
column 1 would be of one catagory (bird species) and all your entries in
column 2 would be of a catagory (number of sitings) and each entry in
the first column would correspond to an entry in the second column.
THAT is tabular information.

 

[Nico Schuyt]

Nico Schuyt wrote:

If the form takes the form (different meanings of the word) of:
Label1 Textarea1
Label2 Textarea2
. .
then it would be tabular.
But most forms are not so simple.

You're right
But I still see no harm in a table in this particular case. Especially in
complex forms it can be confusing for the visitor when labels and textboxes
are jumping all over the screen, so I like them to be in a fixed relation.
Nico

 

[Brian]

I presume you mean the layout of the forms? The same arguments for
tables v. css apply to form layout as they do to every other layout
issue.

Except that one could make the case for forms being tabular. There is
a semantic relation between a label and its input. I do not agree with
the argument, but it seems viable to me.

 

[Brian]

Should a form be made with tables or with CSS?

Those are 2 questions.

1. Should a form be marked up with tabular elements?

Some say yes: each input has a relation to a label, so each row
contains to td elements, one for label, the other for the associated
input.

That's viable, but it precludes the use of form markup such as
fieldset. So I say do not mark up form elements with tabular elements.
Use only the form markup, with div elements as needed. You could, for
example, mark up the labels with the <label> element and put each
<label> and its associated <input>, <textarea>, or other form element
in a div.

Here's what I use for contact forms:

<FORM ACTION="formmail.pl" METHOD="POST">

<DIV CLASS="formelement">
<LABEL FOR="yourRealName">name</LABEL>
<INPUT TYPE="text" NAME="realname" id="yourRealName">
</DIV>

<DIV CLASS="formelement">
<LABEL FOR="yourEmailAddress">email</LABEL>
<INPUT TYPE="text" NAME="email" id="yourEmailAddress">
</DIV>

<!-- etc. -->
</FORM>


2. How should form layout be accomplished?

Same as with anything else: use css.

may-be you can indicate some references (tutorials or W3 pages)
which help me redesign the page
http://www.italymap.dk/sv/formular.html
in Html 4.01 strict and CSS.

Using the markup that I suggested above, the basic idea is quite
simple: define a width for the <label> and float left.

LABEL {
width: 10.25em;
float: left;
clear: left;
margin-right: .4em;
text-align: right;
}

Examples of this technique:

http://www.tsmchughs.com/contact/

http://www.julietremblay.com/site/contact.html

[16 additional sig lines snipped.]
Your sig delimeter does not work. It should be "-- " (note the space
after the double hyphen). Also, could you trim the sig a bit? Or at
least trim the blank lines?

 

[Brian]

Add some validation to the form (at least e-mail address) and let
the script send a copy of the message to the sender. Easy for them
to know later what they sent you.

This does incur some risk of abuse: a malicious person could put
someone else's email address in your form and then submit it 1000
times. The resulting email attack would be traced to you.

Web based feedback is safer, though not as useful to legitimate users.

 

[Nico Schuyt]

This does incur some risk of abuse: a malicious person could put
someone else's email address in your form and then submit it 1000
times. The resulting email attack would be traced to you.

That's right, I didn't realise that.
But isn't it a problem in every form? I mean, I could send a form with some
nasty contents and abuse your email address. It's likely the receiver is
upset and will send you an unpleasant reply.
(perhaps easier to use some PHP and let a script send 10.000 messages using
your email address

Web based feedback is safer, though not as useful to legitimate users.

Ehhh, what do you exactly mean by that?
Regards, Nico

 

[Luigi Donatello Asero]

Should a form be made with tables or with CSS?

Those are 2 questions.

1. Should a form be marked up with tabular elements?

Some say yes: each input has a relation to a label, so each row
contains to td elements, one for label, the other for the associated
input.

That's viable, but it precludes the use of form markup such as
fieldset. So I say do not mark up form elements with tabular elements.
Use only the form markup, with div elements as needed. You could, for
example, mark up the labels with the <label> element and put each
<label> and its associated <input>, <textarea>, or other form element
in a div.

Here's what I use for contact forms:

<FORM ACTION="formmail.pl" METHOD="POST">

<DIV CLASS="formelement">
<LABEL FOR="yourRealName">name</LABEL>
<INPUT TYPE="text" NAME="realname" id="yourRealName">
</DIV>

<DIV CLASS="formelement">
<LABEL FOR="yourEmailAddress">email</LABEL>
<INPUT TYPE="text" NAME="email" id="yourEmailAddress">
</DIV>

<!-- etc. -->
</FORM>


2. How should form layout be accomplished?

Same as with anything else: use css.

may-be you can indicate some references (tutorials or W3 pages)
which help me redesign the page
http://www.italymap.dk/sv/formular.html
in Html 4.01 strict and CSS.

Using the markup that I suggested above, the basic idea is quite
simple: define a width for the <label> and float left.

LABEL {
width: 10.25em;
float: left;
clear: left;
margin-right: .4em;
text-align: right;
}

Examples of this technique:

http://www.tsmchughs.com/contact/

http://www.julietremblay.com/site/contact.html

[16 additional sig lines snipped.]
Your sig delimeter does not work. It should be "-- " (note the space
after the double hyphen). Also, could you trim the sig a bit? Or at
least trim the blank lines?

Thank you for your answer. I am not sure I understood what you meant about
the space after the double hyphen.
But I hope that I could eliminate the blank lines, anyway. Does it look
better now?

 

[picayunish]

Thank you for your answer. I am not sure I understood what you meant about
the space after the double hyphen.
But I hope that I could eliminate the blank lines, anyway. Does it look
better now?

No.
Still "--" instead of "-- " in your sig.
The best way is to select the line and see the difference.

 

[Luigi Donatello Asero]

No.
Still "--" instead of "-- " in your sig.
The best way is to select the line and see the difference.

Now?
"-- "
Luigi ( un italiano che vive in Svezia)
http://www.italymap.dk
http://www.scaiecat-spa-gigi.com/sv/boendeiitalien.html

 

[picayunish]

meddelandet



Now?
"-- "

Almost.
Remove the dubble goutes and than you have it ;-)
Like mine.

 

[Michael Fesser]

If it were, say, species of birds and you were entering how many of each
you had seen in a period of time, that'd be tabular: all of the items in
column 1 would be of one catagory (bird species) and all your entries in
column 2 would be of a catagory (number of sitings) and each entry in
the first column would correspond to an entry in the second column.
THAT is tabular information.

All of the items in column 1 would be of one category (label) and all
your entries in column 2 would be of a category (form element) and each
entry in the first column would correspond to an entry in the second
column. Now this is no tabular information?

Micha

 

[Luigi Donatello Asero]

Almost.
Remove the dubble goutes and than you have it ;-)
Like mine.

I changed a few things on this page
http://www.italymap.dk/sv/formular.html
May-be it looks better now, does it?
But how could I reduce the space between the header 2 "Dina uppgifter"
and the first part of the form?

 

[PeterMcC]

I changed a few things on this page
http://www.italymap.dk/sv/formular.html
May-be it looks better now, does it?
But how could I reduce the space between the header 2 "Dina uppgifter"
and the first part of the form?

The gap's there in IE6 but in Opera, Netscape and Mozilla the design falls
apart so badly that the gap's the least of your problems - sorry

 

[Luigi Donatello Asero]

The gap's there in IE6 but in Opera, Netscape and Mozilla the design falls
apart so badly that the gap's the least of your problems - sorry

Could you please give more information about why you find that the design
falls
apart badly? May-be you could also suggest a design of a form which you like
so that I could see if I like it or not.
You could also write why you like the other design better.

 

[Nico Schuyt]

PeterMcC skrev

Could you please give more information about why you find that the
design falls apart badly?

Are you serious?????? Did you see how it looks in Mozilla?

Suggestions:
- Place the following line on top op your stylesheet:
div {border: 1px solid red}
and see in the browsers how the boxes look like.
- Clean up the css.
Still all the empty lines that make it difficult to debug. And (still) the
word '<style>' at the end of the page.

Nico

 

[Luigi Donatello Asero]

Are you serious?????? Did you see how it looks in Mozilla? No, I did not.
Suggestions:
- Place the following line on top op your stylesheet:
div {border: 1px solid red}
and see in the browsers how the boxes look like.

It looks
awful
http://www.italymap.dk/sv/test.html

- Clean up the css.
Still all the empty lines that make it difficult to debug. And (still) the
word '<style>' at the end of the page.

I eliminated </style>.
Which empty lines do you mean?

 

[Luigi Donatello Asero]

No, I did not. I do not have Mozilla. How does
http://www.italymap.dk/sv/formular.html
look now?It looks
awful
http://www.italymap.dk/sv/test.htmlI eliminated </style> and the empty lines between the header 2 "Dina
uppgifter" and the first part of the form


Does it look better now?

 

[Nico Schuyt]

"Luigi Donatello Asero skrev i

No, I did not. I do not have Mozilla.

You should. Download it from http://www.mozilla.org/

It looks awful
http://www.italymap.dk/sv/test.html

Good. It's an easy way to test if your div boxes make sense. As you can see
now it's a mess.
Start from scratch with, as example, the form. If it looks ok, add the other
elements and see how it looks after every step.

I eliminated </style> and the empty lines between the header 2 "Dina
uppgifter" and the first part of the form

That was not what I meant.
Compare:

div#menu{color:#000000;
background:#ffffcc;
width:25ex;



border:1px solid white;
text-align:center;



float:left;}

with:

div#menu{
color:#000000;
background:#ffffcc;
width:25ex;
border:1px solid white;
text-align:center;
float:left;}

The latter (without all the blank lines and a uniform indentation) is easier
to debug.

Does it look better now?

Ehhh, you don't expect us to answer that do you?
Nico

 

[Luigi Donatello Asero]

You should. Download it from http://www.mozilla.org/



Good. It's an easy way to test if your div boxes make sense. As you can see
now it's a mess.
Start from scratch with, as example, the form. If it looks ok, add the other
elements and see how it looks after every step.

You misunderstood me. It looks much better without the div {border: 1px
solid red}
which you suggested me to try. Please compare
http://www.italymap.dk/sv/formular.html
with http://www.italymap.dk/sv/test.html


What do you mean by "debug"?