Help with Registration Form

Hello, my wife and I are trying to start a business selling T-Shirts online. Being the technical one, I am in charge of trying to build an E-commerce site.

While I work on learning PHP, OOP, and MySQL, it is probably time to start fleshing out some of the actual website too.

As such, I need help creating the Registration Form.

I have used XHTML and CSS in the past, but haven’t used them actively in several years.

I sketched out what the website will look like in a spiral-bound notebook, and now need to make it come to life online!

As far as this Registration Form, I’m not sure where to begin. I sketched out what it should look like today, but now need an “eloquent” way to code it so that it passes good web design standards.

Not sure what I should provide so that I can get some help here?! :-/

Sincerely,

TomTees

As with any HTML, the first bit of the process is to decide what the content is (which you have done), and the second bit is to decide what elements you need to represent that content. In the case of a form, that’s goint to be fieldsets, inputs, labels and probably generic container elements as well.

Once you’ve worked out the structure of the form, you can then start to think about the styling.

Where you’ve got additional notes to the right, I would include these as paragraphs before the item they refer to. That way, (a) you can give them a nice easy float:right;, and (b) when linearised, it’s more helpful to give the informative note before the input than after.

Nice article - I’m sure - but before I go read tomes of information it would help to get some advice on general approaches.

I already read Sitepoint’s CSS book last year, although most of it escapes me!

Maybe if we could get a conversation going on various approaches, it ill jog my mind?!

I know that using tables is a bad/archaic way of doing things.

I remember things like “lliquid design” and “one, two, and three column” approaches, and “flexible columns”…

Most importantly, I’m not asking yet for actual code, but rather on the thought process on how to create what I want. (I do like the sample I attached and would like something very close to it, unless I get compelling reasons otherwise.)

TomTees

You don’t say…

ahhhh now I get you!
You want to mock up a form and then we give you the best plan of action to achieve it…

if so then OO as an image would be ok, photoshop saved as a jpg or gif would also be good.
Heck, you could scan your drawing in if all else fails!

Bueller Bueller Bueller…

Doesn’t anyone want to help?

TomTees

Ummm… all I originally asked was what format people wanted to see my envisioned form in.

(I didn’t want to waste time creating something if people wanted something else.)

I can do a mock-up in OpenOffice if that works.

TomTees

We’d be happy to help, if we knew what you wanted help with!

If you’ve got an idea for what the form needs to do, communicate it to us in some way. Mock it up in OpenOffice and post it as a PDF. Scan your hand-drawn sketch. Send it by carrier pigeon, anything really.

This isn’t tabular data, so you shouldn’t use <table> to lay it out.

I don’t think I can offer any better advice than to read Sitepoint’s own article on form design:

It’s a 7-part series on how to build and style your form from scratch.

Didn’t take long. haha

I agree tables are for tabular data but for a quick and simple form it doesn’t hurt and is easily implemented across browsers quickly and easily.

Again a quick way. Not the ideal way but it still works.

Hello Tom,

There are plenty of online resources for this.

Martin

the easiest way I go about it (though others may disagree) is to wrap a simple 2 column table inside of a fieldset.


<fieldset>
<legend>blah</legend>
<table>
first column labels second column fields...
</table>
</fieldset>

Judging from your mockup you could very easily implement this jquery validation plugin.

http://jquery.bassistance.de/validate/demo/

Re-assessing it looks as though those aren’t error messages. Two things if these are instructions on the right. I would move these above the form fields as a prompt. Make them smaller text and black, not red. Red signifies something’s wrong to your users.

Attached is a mock-up that I did in OpenOffice Calc.

This is how I would like my Registration Form to look. (Purdy, isn’t it?!) :smiley:

So, how can I convert this mock-up into a Web Form using proper XHTML and CSS??

I realize this may be hard to accomplish on the web, but this is how I want things to look. (And, besides, you guys are gurus here, so I’m sure it can be done?!)

From the little I know, it looks like if I maybe had 3 columns then that would be a starting point. (Column 1 –> Label, Column 2 –> Text Boxes, Column 3 –> Right Comments)

Please enlighten me!!

TomTees

but it is late and this is the CSS forum… ducks and runs

ding ding ding Bonus round!!!

You know, I did say…

:wink:

if so then OO as an image would be ok, photoshop saved as a jpg or gif would also be good.
Heck, you could scan your drawing in if all else fails!

I just used OO Calc. (I do everything in spreadsheets!!)

TomTees

You missed my point…

I was wondering what is the best way to communicate what I am looking to build in order to get some help in this forum.

Attach a GIF of a mock-up down in something like OpenOffice?

Just describe in prose what I want?

Other?

TomTees