When customising the look of a checkbox using CSS, to be able to work the magic we first need to link an element (eg. label) to the checkbox.
<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">
However I am using Contact form 7 (wordpress plugin) and I cannot find where to add the id within the checkbox. If you specify an id in CF7 it adds it to the containing div (.wpcf7-form-control), and not the checkbox itself.
Therefore I can't get it working.
Am I missing something? is there another way to link the label and the checkbox?
Many thanks
The format used by Contact Form 7 is a little different from your HTML, but there are some targeting options that should be sufficient to grab any element you need.
When creating your form, you'll generate a checkbox shortcode that looks something like this.
[checkbox my-checkbox id:my-checkboxes use_label_element "foo" "bar"]
This code will generate:
A set of two checkboxes
Each of the two is wrapped in a <label> element (the text itself is in a <span>)
A parent element with the id="my-checkboxes"`
So the output markup will look something like this (along with some wpcf7 and Wordpress classes).
<span id="my-checkboxes">
<label>
<input type="checkbox" value="foo" /><span>foo</span>
</label>
<label>
<input type="checkbox" value="bar" /><span>bar</span>
</label>
</span>
Since you have an ID on the parent element, you can target this specific part of the form and elements within it using selectors in CSS or JQuery.
For example #mycheckboxes > label > input and #mycheckboxes > label > input + span.
For better targeting options, you can also create one checkbox per shortcode and assign an ID to each <span> checkbox container.
[checkbox my-checkbox id:a-checkbox use_label_element "foo"]
[checkbox my-checkbox2 id:another-checkbox use_label_element "bar"]
Since you're ultimate goal is to feed the information into Contact Form 7 (presumably to email it somewhere), it doesn't matter if you create each checkbox with a separate shortcode.
Related
I put a check box on the input function to make a secret comment on one post and put a secret comment function.
The first post was applied without any problem, but the problem is that when I put a secret comment on the second post and click on the check box, the first check box is selected. If you click on the check box of the third post, the check box of the first post is selected. And I think it's a check box problem, but how do we solve this problem?
I didn't seem to explain well, so I brought it to the picture to see what my post looked like....;D
https://imgur.com/dCgA1Z7
<form action="#">
<p class="secretWrap">
<label for="secret">
<input type="checkbox" id="secret" class="checkbox" name="secret" />
<span>SECRET</span>
</label>
</p>
</form>
https://jsfiddle.net/4wd56t7a/
It's because you're using the same 'id' and 'for' attributes on both of your checkboxes. They need to be unique or else you're associating that label with the first instance of the id.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
When I run the robot framework code:
Wait Until Element Is Visible xpath=//span[contains(text(),'Add to Cart')] 10
Click Element xpath=//div/input[#id='_wdmaf']
I get the error
20190423 14:05:32.525 : FAIL : WebDriverException: Message: unknown error: Element
<input tabindex="0" bh="CHKGAT" id="_wdmaf" type="checkbox" value="1" class="w-chk-native" hasaction="true"> is not clickable at point (311, 221).
Other element would receive the click: <label bh="CHK" class="w-chk w-chk-dsize"></label>
The element I'm trying to click looks like this:
<td class="noWrap">
<input tabindex="0" bh="CHKGAT" id="_wdmaf" type="checkbox" value="1" class="w-chk-native" hasaction="true">
<label bh="CHK" class="w-chk w-chk-dsize"></label>
No matter how I try to change the selector, I keep getting that error. It is a checkbox with no text that then selects all of the items in a shopping list.
Any ideas?
It very well may be the case the label element is supposed to be clicked by the user - after all, selenium complains it is overlapping the input one in the layout, so it may be placed there intentionally.
If for all intents and purposes clicking the label leads to the desired functional change on the page (selecting all elements), I would go with it. The target xpath would be something like:
//div/input[#id='_wdmaf']/following-sibling::label
That will select the label that follows the input and is on the same label in the hierarchy. If you want to be a bit more specific about it, you can suffix it with the condition [#bh='CHK']
I'm trying to implement this "filtered dropdown" pattern for mobile users:
By default, of course, a <select> control is closed, until the user clicks it open.
Is there a simple way to keep it always open? I understand it wouldn't strictly be a "dropdown" then - more like a traditional Windows "list" control.
(Multiple select is not appropriate for this application).
I'm using VueJS if that's relevant.
My current code:
<p>Start typing your suburb name...</p>
<input type="text" length="50" v-model="suburbFilter">
<br>
<select id="suburb-select" v-model="suburb" >
<option v-for="suburb in filteredSuburbs">
{{ suburb }}
</option>
</select>
i use this component
https://paliari.github.io/v-autocomplete/, it's pretty customizable
If it's always open, then you could use <input type="radio">.
Create a filterable list a la: https://www.w3schools.com/howto/howto_js_filter_lists.asp
Then, instead of the <a> tags they're using, you can style a radio input in place of it.
Facing a strange problem with aria-live="polite", if the loaded content has form controls, like radio buttons or checkbox.
NVDA just reads the text of radio buttons, but doesn't announce anything about which one is selected or checked.
<a aria-label="Click Me" href="#">Click Me</a>
<div id="myForm" aria-live="polite"></div>
Here is the plunker.
Sorry you haven't gotten a good answer yet. Welcome to the world of accessibility.
Your issue isn't with aria-live=“polite” -- it's just the way that NVDA works. So I guess the good news is you did it right. For the following example I changed the default option to "Two Day" so I could confirm what was being read wasn't just the first option.
With your code, I hear:
Click me link
I then press SPACE to activate the link, and I hear:
Choose a shipping method:
Overnight
Two day <-- You want this to say "selected/checked/etc"
Ground
If I tab into the group, I hear:
Choose a shipping method:
radio button not checked Two day
To get your desired behavior I updated your HTML to generate an invisible <span> that contains the text Default is "Two day". Now what I hear is:
Click me link
I then press SPACE to activate the link, and I hear:
Choose a shipping method default is Two Day:
Overnight
Two day
Ground
This is what it looks like (Note the span inside the legend):
<fieldset role="radiogroup" aria-labelledby="shipMethod" id="myFieldSet">
<legend id="shipMethod">Choose a shipping method<span style="display:none;"> Default is "Two day"</span>:</legend>
<input name="shipping" id="overnight" type="radio" value="overnight">
<label for="overnight">Overnight</label>
<br>
<input name="shipping" id="twoday" type="radio" value="twoday" checked="checked">
<label for="twoday">Two day</label>
<br>
<input name="shipping" id="ground" type="radio" value="ground">
<label for="ground">Ground</label>
</fieldset>
You can also get a similar affect by messing around with changing the control focus, but that's a bit un-cool to the user with a screen reader.
This isn't hard to implement and in a way is a kind of elegant in that the users that need the extra help get it without changing it for other users.
I know the process of creating a normal Contact Form using Dreamweaver CS6.
But for my contact form, I don't want labels like Name: Email: Message:
I want to state the label inside the textfield as initial value. When you click on the Name Textfield, the "Name" label disappears.
How do I make this effect?
You need to use the placeholder attribute in your input tag.
<input type="text" ... placeholder="First Name">
In Dreamweaver, you can find this attribute in the properties panel:
You can use place holders in the fields boxes but i do not recommend that.
here is a link.
http://www.pardot.com/faqs/forms/placeholders-and-labels/
if you dont want a label outside the input this is how it is normally achieved:
<input type="text" placeholder="Label Goes Here!">
if you notice when you input text it will dissapear and when you remove your text the placeholder will re appear!