Bit of awierd form scenario
Hi All,
Nearly completed the forms coversion on our site and was wondering what people made of this page
https://www.skipdev.com/life_cover/quotation/index.asp
Ordinarily I would a label around title and id the text entry box, BUT there are 2 text entry boxes, do I just put the id around them both or put id on each of them?
Any help appreciated
Cheers
Share: 
Hi sygad,
That URL wouldn't work for me.
Jon
Jon Gibbins, dotjay.co.uk, accessibility.co.uk wiki.
Share:
Hmmm,
I couldn't get the URL working at the weekend either, will have to speak to the network guys about that one...
Anyway
The scenario is for a quotation system (form) that we have in place on our website, for each question asked on the form there is a possible 2 applicants that can fill it in,
here is an example of the code that is puzzling me
----------------------------------------------------------------------------
<tr>
<td>
<label for="smoked">Have you smoked any form of tobacco during the last 12 months? </label></td>
<td width="25%">
<input id="smoked" name="smoked" type="radio" value="Yes" <% if Session("smoked") = "Yes" Then Response.write "checked" %>>Yes
<input id="smoked" name="smoked" type="radio" value="No" <% if Session("smoked") = "No" Then Response.write "checked" %>>No </td>
<td width="5%"> </td>
<td width="25%">
<input id="smoked" name="smoked2" type="radio" value="Yes" <% if Session("smoked2") = "Yes" Then Response.write "checked" %>>Yes
<input id="smoked" name="smoked2" type="radio" value="No" <% if Session("smoked2") = "No" Then Response.write "checked" %>>No </td>
</tr>
----------------------------------------------------------------------
Applicant 1 or 2 can answer yes or no to the question.
My question is, is the id which corresponds to the label in the right place and is it assigned the right value, I have a niggling feeling that the id for each radio button should be "yes" and "no" as per the choice given.
Any help appreciated
Cheers
Share:
| sygad wrote: |
| My question is, is the id which corresponds to the label in the right place and is it assigned the right value, I have a niggling feeling that the id for each radio button should be "yes" and "no" as per the choice given. |
Firstly, I should probably point out that only one ID can be assigned per page - it doesn't act in the same way as class. Having said that, I've now confused myself about radio button implementation - having not used them in quite a while. Even though, you seem to have two sets of radio button inputs, all with the same ID.
So, secondly, having confused myself, I won't be answering the actual question, but going away to try to figure it out!
Jon
Jon Gibbins, dotjay.co.uk, accessibility.co.uk wiki.
Share:
Shouldn't this be implemented something like this?
| Code: |
| <input id="smoked_yes" name="smoked_yes" type="radio" value="Yes">
<input id="smoked_no" name="smoked_no" type="radio" value="No"> <input id="smoked2_yes" name="smoked2_yes" type="radio" value="Yes"> <input id="smoked2_no" name="smoked2_no" type="radio" value="No"> |
The labels shouldn't be around the question for the two options - each input should have a label, so the "Yes" and "No" should be the labels for each input. The question could be marked up as a fieldset legend, or just as a paragraph,
Jon Gibbins, dotjay.co.uk, accessibility.co.uk wiki.
Share:
| dotjay wrote: |
| Having said that, I've now confused myself about radio button implementation |
radio buttons: same name, different IDs, e.g.
| Code: |
|
<fieldset> <legend>Choose your destiny:</legend> <input type="radio" name="destiny" id="destiny_novice" value="1" /> <label for="destiny_novice">novice</label> <input type="radio" name="destiny" id="destiny_beginner" value="2" /> <label for="destiny_beginner">beginner</label> <input type="radio" name="destiny" id="destiny_warrior" value="3" /> <label for="destiny_warrior">warrior</label> <input type="radio" name="destiny" id="destiny_master1" value="4" /> <label for="destiny_master1">master I</label> <input type="radio" name="destiny" id="destiny_master2" value="5" /> <label for="destiny_master2">master II</label> </fieldset> |
... "redux wins...fatality!"
Patrick H. Lauke / splintered
Share:
| dotjay wrote: |
| Shouldn't this be implemented something like this? |
not quite...the names of mutually exclusive radio buttons need to be the same (but not their IDs)
Patrick H. Lauke / splintered
Share:
| redux wrote: | ||
not quite...the names of mutually exclusive radio buttons need to be the same (but not their IDs) |
Heh, I was close...
Jon Gibbins, dotjay.co.uk, accessibility.co.uk wiki.
Share:
| Quote: |
| ... "redux wins...fatality!" |
So for my implementation it would be:
<input id="smoked1_yes" name="smoked" type="radio" value="Yes">
<label for="smoked1_yes">Yes</label>
<input id="smoked1_no" name="smoked" type="radio" value="No">
<label for="smoked1_no">No</label>
<input id="smoked2_yes" name="smoked" type="radio" value="Yes">
<label for="smoked2_yes">Yes</label>
<input id="smoked2_no" name="smoked" type="radio" value="No">
<label for="smoked2_no">No</label>
This keeps all the name values the same, I then wrap the option yes or no with a lable then assign the HTML radio button with that label id, just as you do with a more simple version say for instance name and text box.
Share:
| sygad wrote: |
| So for my implementation it would be: |
all radio buttons with the same name will be mutually exclusive. in your code, if you had them all with the same name, you could only choose one of the 4 radio buttons, whereas i think you want 1-2 and 3-4 to be mutually exclusive only. so:
| Code: |
|
<input id="smoked1_yes" name="smoked1" type="radio" value="Yes"> <label for="smoked1_yes">Yes</label> <input id="smoked1_no" name="smoked1" type="radio" value="No"> <label for="smoked1_no">No</label> <input id="smoked2_yes" name="smoked2" type="radio" value="Yes"> <label for="smoked2_yes">Yes</label> <input id="smoked2_no" name="smoked2" type="radio" value="No"> <label for="smoked2_no">No</label> |
Patrick H. Lauke / splintered
Share:
doh!
yeah you are right, just had a look at the original code and they have different values for applicant 1 & 2 ie smoked1 and smoked 2...well spotted.
Again for the same form I have spotted something else.....when it gets to the name and address type questions there is "Title" and 2 text entry boxes for each applicant, unlike the radio buttons where I could hook the label around the yes or no text, there is nothing here this time, if it was 1 request for "Title" then I would label the text but how do you do it with 2 entry boxes and 1 piece of text?
Will I have to write the word "Title" next to each entry box?
Cheers
Share:
| sygad wrote: |
|
Will I have to write the word "Title" next to each entry box? |
| Code: |
|
<label for="title1">Title (first applicant)</label> <input type="text" name="title1" id="title1" /> <label for="title2">Title (second applicant)</label> <input type="text" name="title2" id="title2" /> |
(by the way, haven't looked at the original form, just going by what you say...i know, i'm lazy...)
Patrick H. Lauke / splintered
Share:
cheers for that but how would I do it for only 1 label ie.
<label for="title">Title</label>
<input type="text" name="title1" id="title" />
<input type="text" name="title2" id="title" />
Is this allowed? Unfortunately I cannot change the appearance of the form as it is also a printed form and they must be consistent.
However if it is not accessible then I can present my case for the change
FYI, this scenario exists for multiple elements on the form ie name, tel#, email address, D.O.B etc
Cheers
Share:
No, that's not allowed. You can't have two elements with the same ID. Think of ID as a social security number; it's unique to an individual.
There is no easy solution for this, that I know of. Assign the label to the first input field, and use a title attribute for the second one.
It might be possible to do this, but I'm not sure how assistive technologies deal with it:
| Code: |
| <label>Title
<input type="text" name="title1"/> <input type="text" name="title2"/> </label> |
Tommy has left the building
Share:
| sygad wrote: |
| FYI, this scenario exists for multiple elements on the form ie name, tel#, email address, D.O.B etc |
It would be best to label each input, e.g. for a name you would label surname and forename.
However, if you want to group the inputs, say "Personal Details" you would use fieldset.
| Code: |
| <fieldset>
<legend>Personal Details</legend> <label for="surname">Surname<input type="text" id="surname" /></label> <label for="forename">Forename<input type="text" id="forename" /></label> <label for="email">E-mail<input type="text" id="email" /></label> </fieldset> |
Jon Gibbins, dotjay.co.uk, accessibility.co.uk wiki.
Last edited by dotjay on 05 Oct 2004 11:06 am; edited 1 time in total
Share: