Geek Answers Handbook

HTML structure semantics for data pages

What is the best structure used to design the form / detail view for maximum readability (accessibility) and versatility?

As an example, ASP.NET MVC framework frameworks create a set of fields with an inscription at the top and all fields in p (label, and then input / editor set).

What is the most universal structure to use, what do you think?

For example, if I want to change the layout later to have two or three fields side by side instead of top to bottom, I would like to do this only through CSS, since it has no structural meaning.

Thanks,
Kiron

EDIT: Friends recommendation was to use dl, dt and dds ... does anyone have any thoughts on this?

+4
source share
2 answers

I use a very similar structure to the one created using ASP.NET forests, except that I use divs instead of ps:

<form> <fieldset> <legend>Legendary Fieldset</legend> <div> <label for="textBox">Text Input</label> <input name="textBox" id="textBox" /> </div> <div> <label for="selectBox">Select box</label> <select name="selectBox" id="selectBox"> <option>1</option> <option>2</option> </select> </div> </fieldset> <!-- more fieldsets if required --> </form>

I use divs because for me it is more semantically correct than p elements, since they are intended for paragraphs of text.

When it comes to styling its also universal structure, because you could, for example, make the set of fields 500px wide and the fieldset div 250px wide and floating, thus reaching side by side. Or you can have the same width for the fieldset as the fieldset div. OR you could have a set of fieldset and fieldset of the same width, and then stick to the class on some divs (say "half") that are half width and float. The possibilities are really endless.

In any case, this is what I use for everyday work - although universal, it may not meet all the requirements.

EDIT . As for definition lists, they are specialized elements that should not be used semantically for form layouts.

+5
source

I would just create a basic form and let the structure grow around it.

 <form> <input> <input> <input> </form>

And then when you need groups

 <form> <div> <input> <input> </div> <input> </form>

And then make your entire presentation in CSS. The best way to check availability is to disable all stylesheets and see if the site makes sense.

Forms are block-level elements, so they are semantically correct for storing other elements.

0
source

More articles:


All Articles