Jump to content
Sign in to follow this  
kurt.santo

Form layout

Recommended Posts

How would you implement a form if have a three columne structure as such: text box label, text box and field, which is only displayed next to postcode (and expands down) and want them all the be left aligned with text label to middle of text box? I would like all text boxes to start at same point from left side and not like them all start whenever the label text ends (hope you know what I mean)...Kurt

Share this post


Link to post
Share on other sites
might be best for you to draw what you want to give us a better idea:)
Have a long under http://www.jalp.co.uk/testing/form.htm. What I am trying to do is to have the input boxes all start at the same distance from the left side (whatever the lenght of the text before, but obviously enough space available so the longest text does is not cut off). I used tables in the past, but in "my new life" enploying CSS for any layout I am looking for alternatives to do so. How do you guys do that?Kurt

Share this post


Link to post
Share on other sites

You can align the text of the form to the right and make all the input fields the same width.CSS:

form { text-align: right; }input,textarea,select {width: 200px;}

Share this post


Link to post
Share on other sites
You can align the text of the form to the right and make all the input fields the same width.CSS:
form { text-align: right; }input,textarea,select {width: 200px;}

Ingolme,Forgot to mention that the text should not be right aligned...Kurt

Share this post


Link to post
Share on other sites

Hmm, that makes things difficult, because if you put the text in one <div> and the fields in another you can't be sure their vertical position will coincide.Whenever I decided to make forms I decided not to worry about that. To do it the best thing would probably be absolute positioning, but I don't really like that.Hmm... after a bit of thinking, it might possibly work like this:

<form><div style="width: 100%"><!-- put the desired form width here -->   <div>	  Field name:	  <div style="float:right"><input /></div>   </div>   <div>	  Field name 2:	  <div style="float:right"><input /></div>   </div>   <div>	  An even longer field name:	  <div style="float:right"><input /></div>   </div></div></form>

Share this post


Link to post
Share on other sites
Hmm, that makes things difficult, because if you put the text in one <div> and the fields in another you can't be sure their vertical position will coincide.Whenever I decided to make forms I decided not to worry about that. To do it the best thing would probably be absolute positioning, but I don't really like that.Hmm... after a bit of thinking, it might possibly work like this:
<div><label for="name">Field name:</label> <input id="name"/></div>     <div><label for="surname">Field name 2:</label><input id="surname"/></div><div><label for="address1">Address line 1:</label><input id="address1"/></div>

with a style info:

div {padding:5px 0 5px 0;}input {position:absolute;left:250px;text-transform:capitalize;}

which does the job;-)Cheers,Kurt

Share this post


Link to post
Share on other sites

But tables aren't for that type of data.Tables are for tabular data, not just any data. You're using that table for layout purposes.This is the way tables are meant to be used:

| Wind speed | Wind direction | Temperature | Humidity |--------------------------------------------------------| 12 km/h	| NE			 | 25ºC		| 65%	  |--------------------------------------------------------| 14 km/h	| N			  | 23ºC		| 66%	  |--------------------------------------------------------| 15 km/h	| NE			 | 22ºC		| 59%	  |--------------------------------------------------------

Share this post


Link to post
Share on other sites
But tables aren't for that type of data.Tables are for tabular data, not just any data. You're using that table for layout purposes.This is the way tables are meant to be used:
| Wind speed | Wind direction | Temperature | Humidity |--------------------------------------------------------| 12 km/h	| NE			 | 25ºC		| 65%	  |--------------------------------------------------------| 14 km/h	| N			  | 23ºC		| 66%	  |--------------------------------------------------------| 15 km/h	| NE			 | 22ºC		| 59%	  |--------------------------------------------------------

This what I also thought...Kurt

Share this post


Link to post
Share on other sites

Forms are tabular data. The data is just being input instead of displayed. Using tables for forms is fairly common. I also use tables for forms, especially complex forms.

Share this post


Link to post
Share on other sites

No, you're using the table to locate the form elements into the page, therefore you're using it for layout purposes.Tabular data is data that can not be displayed in any other way than a table, it's data like what I showed before, that has various different fields. It can be experiment results, weather information, sports event timing... etc.

Share this post


Link to post
Share on other sites

Please read the HTML specs (or at least the first sentence of that part) before you make incorrect conclusions.

But tables aren't for that type of data.Tables are for tabular data, not just any data. You're using that table for layout purposes.This is the way tables are meant to be used:
| Wind speed | Wind direction | Temperature | Humidity |--------------------------------------------------------| 12 km/h	| NE			 | 25ºC		| 65%	  |--------------------------------------------------------| 14 km/h	| N			  | 23ºC		| 66%	  |--------------------------------------------------------| 15 km/h	| NE			 | 22ºC		| 59%	  |--------------------------------------------------------

Or like this:
----------------------------| name	 | input		 |----------------------------| address  | input		 |----------------------------| email	 | input		  |----------------------------

E.g.

<form><table><tr><td><label> </label><td><input></table></form>

Share this post


Link to post
Share on other sites
Please read the HTML specs (or at least the first sentence of that part) before you make incorrect conclusions.
Perfect!

Share this post


Link to post
Share on other sites

I hate to say it because of my dislike for tables, but I agree with crotiankid on this one. There are cases where fields in tables make sence, and where they don't. This is one case where they do.If you take the data as a literal data, instead of a field, and it still makes sence as a table, then it makes sence to include input fields in a table. Otherwise it doesn't.It seems fair to me in this case to use a table to present, and thus fill in, this data as a table.

Share this post


Link to post
Share on other sites

I back up Ingolme. It just says "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". It does not say that this is the way to do it, especially as it lists images. If you read to the end of the main paragraph it says "Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media."But let us all live in peace:-)Kurt

Share this post


Link to post
Share on other sites

You're not using it purely for visual layout. You're giving it meaning (semantics) by using a table, which is what I said in my first post. But if semantics aren't important for you, by all means use only DIVs and SPANs in your web pages.

Share this post


Link to post
Share on other sites
You're not using it purely for visual layout. You're giving it meaning (semantics) by using a table, which is what I said in my first post. But if semantics aren't important for you, by all means use only DIVs and SPANs in your web pages.
No offence, but I don't think it is wrong not to use tables. I mean if my styles are unavailable the labels and corresponding input boxes are still next to each other as there is only one div with all the form elements inside (just a bit closer than with my CSS). This does not mean that you are wrong about the correctness of using tables if you choose to do so:-) I have to admit that I flipped through a great book on CSS where it did not say that you should use tables for forms, but is uses one example with a table).Kurt

Share this post


Link to post
Share on other sites

I disagree with the concept of using tables for Form Layout. Tables are being used for defining the page structure if you use them here. And Forms do not require them. Table layout should be used for TABULAR DATA, ie: information which is extracted from a Database and is, therefore, Tabular in nature.http://jlhaslip.com/samples/misc/demo/form_styling.htmlThe sample above is ugly, I admit, but it shows that Forms can be properly defined without Tables.

Share this post


Link to post
Share on other sites
I disagree with the concept of using tables for Form Layout. Tables are being used for defining the page structure if you use them here. And Forms do not require them. Table layout should be used for TABULAR DATA, ie: information which is extracted from a Database and is, therefore, Tabular in nature.http://jlhaslip.com/samples/misc/demo/form_styling.htmlThe sample above is ugly, I admit, but it shows that Forms can be properly defined without Tables.
I don't know about crotiankid, but I never meant to say you should "always" use or not use tables to lay out forms. Let go of the fact that this is a form, and imagine you're instead presenting data. If the data makes sence as a table when just "presented", it's also OK to fill it in with a form, that is layed out as a table. If not - it's not OK.

Share this post


Link to post
Share on other sites
I disagree with the concept of using tables for Form Layout. Tables are being used for defining the page structure if you use them here. And Forms do not require them. Table layout should be used for TABULAR DATA, ie: information which is extracted from a Database and is, therefore, Tabular in nature.
Same thing if you use DIVs. You can use CSS in either case.The HTML specs mention, among other things, forms as being suitable as content for tables.
Table layout should be used for TABULAR DATA, ie: information which is extracted from a Database and is, therefore, Tabular in nature.
This is quite incomplete, and actually false (i.e. - id est - that is). Information extracted from a database is definitely NOT the only content that is suitable to go into an HTML table. That would discriminate against all sites that don't use a database (and a programming language). Silly saying you need a database to use tables.Tables here are describing the structure (being meaningful and semantic (I hate using pleonasms, picked it up the habit from HTML forums)) of the page as a table. Meaningless tags such as span and div don't. On the contrary, you are only using them so that you can use CSS to style the page.Also check out this (w3c) example of a form using tables.By the way, your page doesn't validate under the doctype it's using, and you have an error in your CSS.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...