'
[Irl-dean] HTML Question - Forms, labels and table based layouts
Eamon Mag Uidhir
eamon at maguidhir.com
Thu Apr 17 10:42:37 IST 2008
Eoin, unless I am misinterpreting the information you supplied, it
looks like you are complicating your life by trying to take in
multiple books at the same time. Better to take in one book at a time
so you simply have a Title field and not Book 1, Book 2 etc multiple
fields. You might start at the other end and see what the database
schema wants from the person filling out the form in the way of data
and not try and design the system from the front-end back. A report
derived from the data can come back in tabular form with Book 1, Book
2 etc as rows or columns, but for the data input keeping it "as simple
as possible and no simpler" seems the best way to go.
Screenreader applications like well-tempered forms better than they
like tables because proper form mark-up gives a very clear idea of the
semantic structure, while tables impose a geometric and visual
structure instead. Forms with CSS beat tables anytime for creating a
form that is very usable with a screenreader.
Eamon
Éamon Mag Uidhir
'''''''''''''''''''''''''''''''''''''''''''
eamon at maguidhir.com
RESPONSE TO "MacIonmhain, Eoin" <emacionm at revenue.ie>:
>
> Hi all,
>
>
> I made an attempt at sending this question yesterday, but it didn't work - so
> apologies in advance if the original one actually turns up, and you end up
> having to read this twice!
>
> I've got a HTML accessibility question that has been bugging me all day -
> I've yet to find a comprehensive answer on the web - was hoping that someone
> on the list might be able to give me a few tips!!
>
> For arguments sake, lets say I have a form for some online Library
> application in order for new books to be added to the catalogue - something
> that looks like this (hopefully the formatting will be preserved!):
>
> Author Name Date Published
> Publisher ISBN Number
> Book 1 <text input box> <text input box> <text
> input box> <text input box>
> Book 2 <text input box> <text input box> <text
> input box> <text input box>
> Book 3 <text input box> <text input box> <text
> input box> <text input box>
> Book 4 <text input box> <text input box> <text
> input box> <text input box>
>
>
> If I were to code this up as a table -
>
> with Author Name, Date Published, Publisher, ISBN Number, Book 1, Book 2,
> Book 3, Book 4 all marked up as <th> table headers,
>
> and with each <input type="text"... input boxes inside a table cell with the
> headers attribute included -
>
> (for example:
> <table>
> <tr>
>
> <th id="authorname">Author Name</th>
>
> ...etc
>
> </tr>
> <tr>
> <th id="book1">Book 1</th>
>
> <td headers="authorname book1">
> <input type="text".....
> </td>
>
> ...etc
>
>
> </tr>
> </table>
> )
>
> would a screenreader understand that the "Author Name and Book 1 headers"
> were essentially the "label" for the input field?
>
> Or do I need to define a label for every input field? Like so:
>
> <label for="book1_authorName">Book 1 - Author Name</label><input type="text"
> id="book1_authorName" />
> <label for="book1_datePublished">Book 1 - Date Published</label><input
> type="text" id="book1_datePublished" />
> <label for="book1_Publisher">Book 1 - Publisher</label><input type="text"
> id="book1_publisher" />
> <label for="book1_ISBN">Book 1 - ISBN Number</label><input type="text"
> id="book1_ISBN" />
>
> <label for="book2_authorName">Book 2 - Author Name</label><input type="text"
> id="book2_authorName" />
> <label for="book2_datePublished">Book 2 - Date Published</label><input
> type="text" id="book2_datePublished" />
> <label for="book2_Publisher">Book 2 - Publisher</label><input type="text"
> id="book2_publisher" />
> <label for="book2_ISBN">Book 2 - ISBN Number</label><input type="text"
> id="book2_ISBN" />
>
> and so on...
>
>
> I would rather not have to define a label for every input field - since it
> then means that the user will see loads of label text that to my mind adds a
> huge amount of clutter to the form!
>
> I realise that you're not supposed to use tables for layout, and only for
> tabular data - but in this case I'm hazy as to whether the table is being
> used to lay out the form, or whether we can view the data being entered into
> the form as tabular data, therefore making the use of a table ok.
>
> Any ideas you have would be greatly appreciated :)
>
> Cheers
>
> Eoin
>
>
>
> ************************
>
> This message has been delivered to the Internet by the Revenue
> Internet e-mail service (OP)
>
> *************************
> _______________________________________________
> Irl-dean mailing list
> Irl-dean at list.eeng.dcu.ie
> http://list.eeng.dcu.ie/mailman/listinfo/irl-dean
>
More information about the CEUD-ICT
mailing list