I have detailsview which has few dropdownlist and Checkboxes. Now I am trying to make these input fields 508 compliant.
Does anyone know about this fix?
The applicable paragraph of Section 508 is
(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
This corresponds to the section of WCAG on "context and orientation information." Proper use of the label element, including the for label, covers almost everything related to dropdown lists and checkboxes. For example:
<label for="mysel">Select a language:</label>
<select name="mysel" id="mysel">
<option value="en-us">US English</option>
etc., or
<input type="checkbox" name="mycb" id="mycb" value="Reminders - Yes"/>
<label for="mycb">I would like to receive email reminders</label>
Related
The lastpass autofill icon appears on certain form fields, and on my site it has appeared unexpectedly on an input, with autocomplete="off", with no id and a name of CatName_autocomplete.
I understand I can add an attribute to disable it, but unless I do this for everything in my site, plus any other rival password managers, it could potentially crop up elsewhere. It interferes with my own custom javascript autocomplete functionality that I have on the control because it doesn't trigger the correct events to work properly.
Is there a way to find out the specific underlying logic it uses to decide whether to appear in an input? This would allow me to check I don't accidentally write misleading inputs that trigger it, or that I can know to put the attribute to disable it onto those I know would trigger.
I'm sure it's far more complicated than this, but in case it helps anyone: I disabled the icon in many fields on my page just by removing 'id' from the name attribute of the FIRST input element.
<input type="text" class="form-control" placeholder="Schedule ID"
name="scheduleId" [(ngModel)]="scheduleId" aria-label="Schedule ID"/>
triggers icons on the page, not just on this form.
<input type="text" class="form-control" placeholder="Schedule ID"
name="schedule" [(ngModel)]="scheduleId" aria-label="Schedule ID"/>
does not.
I'm trying to scrape prices from this site:
https://www.pensketruckrental.com/quote/start.html
I can easily enter the form data, and I can activate the "Get A Quote" button and click it.
What I can't seem to do is get the form data to submit using a web scraper (I'm just doing it in VBA). When I input text using the scraper, the button remains grayed out, and even making a .click call on the button just displays errors on the form telling you not to leave the fields blank. Apparently it only recognizes data when you use an input device?
The code for one of the required fields, pickupLocation, is the following when I enter it manually (and thus the button works and the form can be submitted):
<input
type="text"
id="pickUpLocation"
name="pickUpLocation"
class="penskeValidateField penskeGoogleTypeAhead penskeInlineError ng-isolate-scope ng-touched ng-focused ng-dirty ng-valid-penske-err_loc_empty_sa ng-valid ng-valid-parse ng-valid-required"
aria-invalid="false"
aria-required="false"
country="rentalEntryCtrl.formItems.country"
penske-validate-field="pickuplocation"
required=""
autocompelete="off"
data-penske-placeholder="rentalEntryCtrl.activePlaceHolders.pickUpLocation"
ng-model="rentalEntryCtrl.formItems.pickupLocationSearchCriteria.address"
autocomplete="off">
And when I enter the data automatically using my scraper the tag & attributes read as follows:
<input
type="text"
id="pickUpLocation"
name="pickUpLocation"
class="penskeValidateField penskeGoogleTypeAhead penskeInlineError ng-pristine ng-isolate-scope ng-invalid ng-invalid-required placeholder ng-touched"
aria-invalid="true"
aria-required="true"
country="rentalEntryCtrl.formItems.country"
penske-validate-field="pickuplocation"
required=""
autocomplete="off"
data-penske-placeholder="rentalEntryCtrl.activePlaceHolders.pickUpLocation"
ng-model="rentalEntryCtrl.formItems.pickupLocationSearchCriteria.address"
autocompelete="off">
So of course I tried to copy the fields in the first code block into the second code block using setAttribute(), but even though I could change the attributes, I still couldn't get the form to submit properly.
I've looked at others that have dealt with something somewhat similar with autocorrect; their solutions have involved looking at the header and responses and just using the straight XHR to loop through the autocomplete queries, but the pricing information I'm scraping comes after several pages of form submissions, so that's not an option here.
I'm stuck I think; any ideas on how to populate the form and click the button/submit via my scraper?
I have this
<form id="form_837299" class="appnitro" method="post" action="insert.php"> <paper-input label="Title" name="title" maxlength="255">
</paper-input>
<paper-input floatinglabel multiline label="text" name="text"></paper-input>
<li class="buttons">
<input type="hidden" name="form_id" value="837299" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
I have problem with POST data - nothing is sended in "text" and "title" (all in paper-input).
I modified the template and attribute "name" now is in one div, which Polymer created. But no data are sent.
print_r($_POST); shows me only this:
Array ( [form_id] => 837299 [submit] => Submit )
Anybody knows how use Polymer and Material UI on form?
Only elements that extend native form elements automatically get submitted with forms. paper-input extends core-input which has an input inside it as opposed to extending it. See this mailing list discussion for additional discussion and this StackOverflow post for possible solutions.
Something like this jsbin maybe?
Update: Here's the same thing in web component form.
Update: Looks like the creator of ajax-form has added this functionality.
Update: Also consider using iron-form.
According to the Polymer docs the way to do this is to just create a regular form input and wrap it in the <paper-input-decorator>
https://www.polymer-project.org/docs/elements/paper-elements.html#paper-input
I've tried it out and it works fine. Some better form support would be cool, but oh well. This stuff still kind of rocks.
UPDATE: I've built a bower package (polymer-rails-forms) to deal with forms in polymer, tailored specifically to the ActiveRecord input naming scheme but it will work with any old form really. It's still relatively new, but it covers most input types, basic validations, xhr and non-xhr submits and has a couple cool extras like image, json, and location* fields.
the location fields depend on the Google Map Places API
I know you can do this with the API, but not sure about the regular signup form.
Does anyone know if it is possible to add some code to the advanced signup form in MailChimp that would automatically add them to a specific group within my list?
I am only collecting the email address and I don't want the subscriber to have to select the group manually. If they are using that form, I want them added to that group.
I have asked MailChimp for help, but they tell me that their customer support doesn't code and that I should hire an expert.
Perhaps a segment of the relevant code may help:
<form action="http://lalala.us2.list-manage1.com/subscribe/post" method="post">
<input type="hidden" name="u" value="345fc4974810ef65c8276c8">
<input type="hidden" name="id" value="25c4d1b28">
<table cellpadding="5" cellspacing="0" border="0" align="center">
<tr>
<td align="right" class="formLabel"><strong>Email Address</strong> <span class="asterisk">*</span>:</td>
<td align="left">
<input type="email" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="*|MERGE0|*">
<br><span class="error">*|HTML:EMAILERROR|*</span></td>
</tr>
Is there a hidden input type that I can add with a list grouping name that will auto add them to a group?
This is an old question, but I came across it looking for the answer myself and couldn't find a good answer anywhere (including the other answer here which is poor at best). When I couldn't find anything on this I was able to figure it out with a little experimentation.
It requires a couple steps. First, add your Group and the options you want the Group to contain (it can only be 1 if you want). Initially make sure the Group is not set to hidden. Go to your main default sign-up form in MailChimp under Sign Up Forms > General Forms. Verify the Group option(s) are visible and then use the Sign up form URL to visit your hosted sign-up form. Now, open the raw HTML in your browser using right-click > View Source. You need to find the INPUT element for the group / option you want. It will probably look something like this:
<input type="checkbox" data-dojo-type="dijit/form/CheckBox" id="group_8" name="group[13257][8]" value="1" class="av-checkbox">
The name parameter is the critical thing here. Copy and paste that entire input element inside your custom form. Now, use inline CSS to hide it and HTML to hard-code it to checked. You can also remove extra stuff too. The final version in your custom form should look something like this:
<input type="checkbox" id="group_8" name="group[13257][8]" value="1" checked="checked" style="display:none">
This will ensure that it is not visible to the user but it will automatically add them to the group defined by the name parameter that you grabbed from the form which showed it.
The final step is to go back and make sure you set that Group to Hidden to make sure it doesn't inadvertently show up on other forms.
Pretty simple!
All I did was delete the other checkboxes (as well as the unordered list and list item tags around them) and change the checkbox representing the default group I wanted into a hidden field. Literally just type="hidden" instead of type="checkbox" and that did the trick.
You should be able to add a hidden input field with the name of the MERGE TAG set for the specific group.
However, for this functionality it would be much easier to utilize the MailChimp API (even though your question suggests you'd rather not).
If I have a SELECT tag that will filter a table based on a user choice, does the SELECT tag need to be in a FORM tag (to be valid HTML5), if the resulting functionality will not work if JS disabled (i.e. we'll show the entire table or a 'more' link instead of doing a server-side filter on select of the form action/submit option (We may write the select in JS so it disappears from the markup if JS disabled.
Or do all form elements need to be in a form tag regardless of usage (and therefore a null 'action' attribute value).
I know HTML5 allows almost anything, I just couldn't find a definitive answer on W3, so thought I'd get your thoughts. Hope that makes sense.
Cheers.
All the form controls can be used anywhere where phrasing content is expected, which means they can appear just about anywhere in the body of the document. If you don't need to have them submitted back to a server then there's no need for them to be associated with a form, however I've noticed that in some browsers you can't take advantage of the form validation features unless the elements can potentially be submitted.
One feature new to HTML5 is that form controls no longer need to be the direct child of a form element in order to be submitted with that form, the form attribute allows you to specify the id of the form the element should be submitted with.
It would appear that in HTML5 form elements can be outside of a <form> tag and still be valid;
<!DOCTYPE html>
<html>
<head>
<title>Just making this valid</title>
</head>
<body>
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</body>
</html>
The above code validates successfully (minus the obvious character encoding errors).
I haven't read the entire HTML5 Spec, however the validator is usually correct on these sorts of matters.
The HTML5 spec specifically allows <input>s (and other form-associated elements) not to have a <form>:
A form-associated element can have a relationship with a <form> element, which is called the element’s form owner. If a form-associated element is not associated with a <form> element, its form owner is said to be null.
So feel free to use them wherever your heart desires!