We have a website to sell books to parents.
We are developing a page where parents tupe a brief information about them and select the class of their child.
I thought use radio buttons in order they are forced to select just one option.
A test page with 5 classes to see it is (it has fixed sections up and down, and a form with radio buttons in the middle):
Is it radio buttons a good idea? Or is there any other object more suitable?
How can I improve how it looks using CSS?
Should I wrap the form with a div or something like this?
Same questions for the labels. Should I wrap them in order to have more distance between them?
And a last question … how can I make mandatory to select one radiobutton and also fill all three labels?
Is it radio buttons a good idea? Or is there any other object more suitable?
Radio buttons are used to select a single item from the group.
Checkboxes can allow multiple items to be selected from a group.
A drop-down (single-select box) is used to select a single item from a group.
Hopefully these can help you determine what you’re really looking for, since I’m not exactly clear on what you’re doing with the “class of their child” options.
Should I wrap the form with a div or something like this?
Only if you intend to apply padding/margin/borders to the form. In this case, I would eliminate the surrounding P tag, and use a div, and apply any padding/margins/borders to that. But, if you don’t want any of that, then a wrapper isn’t necessary, since that’s what the form element is for.
How can I improve how it looks using CSS?
Some padding/margin space on the form elements and labels. Right now the form is all crunched together, which can make it hard to read for some people. Also, include some padding on the left for the form, so that it isn’t hugging the left side of the content area.
Using div tags to surround each form element (the label and field, or a group of radiobuttons/checkboxes) is one school of thought, which is probably the most common.
Other schools of thought recommend using ordered lists or definition lists instead for each form element to be more accessible for screen readers and such.
You should probably put the enter/submit button below everything, rather than listed along with the radio buttons. It seems a little confusing the way it is.
Are any of the fields required for submission? You might want to indicate that so that users know.
I’ll be considering moving the botton as you said.
About your question, I’d appreciate if you could help me …
how can I make mandatory to select one radiobutton and also fill all three labels?
Do you mean in the PHP code?
If yes, could you please show me an example with these elements? (input type text and radio buttons)
I haven’t started it yet, so any help would be greatly appreciated
