[creativecoding]

so for awhile now whenever I create a new form, I use a table to make it look nice and pretty. Then I realized, "oh no, I'm going to be that guy who uses tables on forms!". So this brought me to asking, what are some alternatives to tables that are as simple as tables?

It seems as if everybody's response is "use css". However, I have no idea how to do that. If you mention some complicated way, do provide an example.


Thanks.

[Dormilich]

something like that?

[e_i_pi]

Speaking of which, have you seen HTML for out-of-the-box MS Sharepoint? It's like a table templating machine got stuck in an endless loop.

But on topic, I understand your pain. I sometimes fall for using tables in this situation too, but the only other option that I can see is floated elements of fixed width. I have a personal aversion to floated elements, since every time I go to use them, I look for a tutorial and realise I can't understand it without A. access to the Rosetta Stone, and B. membership in the Freemason's Guild

This post has been edited by e_i_pi: 10 August 2011 - 03:34 PM

[antshockey]

I don't see a major problem with using tables for them.
I use tables to format forms all the time, usually for speed and laziness though.

[Lemur]

Just set them as list items. It's far more effective, less code, and easier to manipulate in the long run of things. This automatically makes them behave as box level elements instead of inline and also lines them up.

I would highly recommend reading dorm's link on the subject.

[souptoy]

Lemur, on 10 August 2011 - 06:01 PM, said:

Just set them as list items. It's far more effective, less code, and easier to manipulate in the long run of things. This automatically makes them behave as box level elements instead of inline and also lines them up.

I would highly recommend reading dorm's link on the subject.

I must admit, I never thought of using them like that. I have a set of 3 divs I usually use to create a row, a label, and an input field. Way cleaner than using tables and easier to manipulate. But list items seem to be cleaner on the HTML side.

I'll have to try that on my next form.

[Lemur]

Again, my patch knowledge continues to curse me. I found Dictionary List. It could potentially be used more effectively for this.

[TweeTmyFreaK]

creativecoding, on 10 August 2011 - 11:16 AM, said:

so for awhile now whenever I create a new form, I use a table to make it look nice and pretty. Then I realized, "oh no, I'm going to be that guy who uses tables on forms!". So this brought me to asking, what are some alternatives to tables that are as simple as tables?

It seems as if everybody's response is "use css". However, I have no idea how to do that. If you mention some complicated way, do provide an example.


Thanks.

Forms are used so your visitors can interact with your site and send data.
Tables are used so you can place the content on specific point you want to.


My advise is to learn CSS.
Try this course w3c schools offer and I think everyone can manage it: http://www.w3schools.com/css/

[Lemur]

TweeTmyFreaK, on 13 August 2011 - 02:39 AM, said:

Forms are used so your visitors can interact with your site and send data.
Tables are used so you can place the content on specific point you want to.


My advise is to learn CSS.
Try this course w3c schools offer and I think everyone can manage it: http://www.w3schools.com/css/

Careful on advisories. If you'll pay attention the OP knows a handful of CSS and has stated that he wishes to learn ways to do something specific, generally implying that he knows enough CSS to get around and at least tread water.

[RudiVisser]

Unless you're going to use only <labels> and <input> elements, wrapping your forms in a list (of either unordered or definition type) is probably the best way to go.

Best Way

<fieldset>
     <legend>Personal Info</legend>
     <label for="firstname">First Name</label>
     <input type="text" name="firstname" id="firstname" />
     <label for="surname">Surname</label>
     <input type="text" name="surname" id="surname" />
</fieldset>
<!-- etc .. -->

Unordered List

<fieldset>
     <legend>Personal Info</legend>
     <ul>
         <li>
             <label for="firstname">First Name</label>
             <input type="text" name="firstname" id="firstname" />
         </li>
         <li>
             <label for="surname">Surname</label>
             <input type="text" name="surname" id="surname" />
         </li>
     </ul>
</fieldset>
<!-- etc .. -->

Definition List (You are losing semantics here as you're not defining anything)
Within that you have 2 sub-elements, <dt> and <dd>, a definition term and description respectively.
By using these it's pretty easy to layout your forms like this:

<fieldset>
     <legend>Personal Info</legend>
     <dl>
         <dt><label for="firstname">First Name</label></dt>
         <dd><input type="text" id="firstname" name="firstname" /></dd>
         <dt><label for="surname">Surname</label></dt>
         <dd><input type="text" id="surname" name="surname" /></dd>
         <!-- etc .. -->
      </dl>
</fieldset>

This post has been edited by RudiVisser: 15 August 2011 - 07:06 AM