'

[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