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?! :-/
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.)
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.
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?!)
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)
