can someone explain what the the contextmenu attribute does and if it can be used with all the HTML elements and can someone point me to some online demos/examples?
The contextmenu attribute refers to the <menu> element the user agent should render when a context menu is requested by the user (e.g. using the right mouse button or the Menu/Hyper key on modern keyboards.
You can find an example here.
You can see how it may look like in this demo:
https://bug617528.bugzilla.mozilla.org/attachment.cgi?id=554309
At the time of writing only FireFox 8 supports it.
The context menu appears when the user right-clicks on an interface element. The contextmenu attribute is the ID of a <menu> element to open when the user right clicks on the element with this attribute.
Quoting for you to understand easily:
The contextmenu attribute allows you
to display a menu without taking up
valuable UI space for the menu. It is
a menu which fires on events, such as
mouseup or keyup providing a bubble
menu which provides options and
actions based on those selections.
Source: http://net.tutsplus.com/tutorials/html-css-techniques/html5-globals-and-you/
See official link for more information:
http://www.w3.org/TR/html5/interactive-elements.html
The contextmenu should be used on an input field to specify which menu element is for the field. The menus look sort of like the right click menu or a dropdown box however they are not implemented in any browser yet so you should avoid using them.
This may help clear things up:
http://dev.w3.org/html5/spec-author-view/interactive-elements.html
<form name="npc">
<label>Character name: <input name="char" type="text" contextmenu="namemenu" required></label>
<menu type="context" id="namemenu">
<command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
<command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
</menu>
</form>
http://www.w3.org/TR/html5/interactive-elements.html#context-menus
Related
I have 4 links. Previously implemented as A tags.
My goal is to switch the request method (GET) with POST. Everything else have to remain the same!
The problem - it must be implemented using pure HTML - to be exact - no ajax and no window.open().
My solution is half way there. Hopefully to get a creative second half from you (impossible is also an answer)
Here is the (simplified) HTML:
<form
id = "resultsForm"
target="_blank"
action="http://example.com"
method="post"
>
<input type="hidden" name="data" value="someData">
<button type="submit" value="submit">
<p class="contextual"> title </p>
<span></span>
</button>
</form>
Now, it looks and feels like the old implementation and also sends POST requests
But - contrary to a link - a button can't be middle clicked or opened in new window when right clicking on it (by default...)
Can I somehow wrap it in an A tag to achieve the explained behavior without using js events or be conflicted with form subbmission?
Your help is really appreciated
No, this is impossible.
Anchor elements cannot contain interactive elements such as button elements.
Forms should be posted to the target window, so a normal click on the submit button, by virtue of the _blank value, should open an unnamed browsing context (a new window or tab).
Users should be accustomed to not middle-clicking on buttons, although there is a habit of developers to style links to look like buttons, throwing off users' expectations (end rant:)).
My company is doing some ADA conformance revision. I need to have the button text read when the user interacts with it. Will that happen with aria-label or .. how do you do it?
The button text should be read when the user navigates to the button. That could be done with the tab or a screen reader shortcut key such as B to go to the next button, and several other ways.
Are you saying you want the button label announced when the user navigates to it and when the user selects it? That sounds like unusual behavior but perhaps it makes sense in the context of your app.
If you want something announced when the button is selected, you can do that with aria-live. You'd have to trick the screen reader into saying it. You can have a visually hidden element such as
<div id="foo" aria-live="polite" class="sr-only"></div>
(Note: See What is sr-only in Bootstrap 3? for info on the "sr-only" class.)
When the button is selected, inject the text you want announced into the <div> and it'll be read.
A Screen Reader will announce the title of the button when it comes into tab focus, and let the user know that it's a button to begin with. As a base requirement though, a native <button> element should be used since the functionality is already built in. With that said, you don't need any other particular aria tags by default.
I'm guessing you just want to know how to mark up a button so that JAWS says its text when the user tabs or cursors to it.
If it's a native button with text written on it:
<button>Next</button>
JAWS will read it automatically.
If it's an input:button with a text value:
<input type="button" value="Next" />
again, JAWS will speak its text automatically.
If it's a button with an icon:
<button><span class="fas fa-arrowRight"></span></button>
mark it up like this and JAWS will speak its name (remember to change the aria-label text if you're using a different language):
<button aria-label="Next"><span aria-hidden="true" class="fas fa-arrowRight"></span></button>
Hope this helps.
In Mozilla html tutorial it says
Don't place interactive elements such as anchors or buttons inside a label. Doing so will make it difficult for people to activate the form input associated with the label.
Don't
<label for="tac">
<input id="tac" type="checkbox" name="terms-and-conditions">
I agree to the Terms and Conditions
</label>
Do
<label for="tac">
<input id="tac" type="checkbox" name="terms-and-conditions">
I agree to the Terms and Conditions
</label>
<p>
Read our Terms and Conditions
</p>
I tried both and can't find any serious problem with the first usage, what does "make it difficult for people to activate the form input associated with the label" exactly mean?
If you click on the link in the "Don't" example, you'd be taken to that page before you've had a chance to submit the form on the page that link and the checkbox were in. (Though, I guess, technically, you've still managed to activate the checkbox...)
HTML doesn't actually stop you from putting links inside labels though. But it does stop you from putting other form controls inside labels, particularly if they have an ID and the label has a for attribute that's trying to point to another control (since a label can only be associated with one control at a time).
In a nutshell, click in the label associated with a checkbox or radio button. By adding a link the behavior becomes inconstant, clicking part of the label does one thing, yet does something different on another.
On a side note, labels associated with other fields also perform a function. Clicking on those labels bring focus to the associated field.
The general rule of thumb is that interactive elements should not be nested. In this instance the label can be considered an interactive field (though a special case is where the label encapsulates the associated element).
In my AngularJS project I have an account details page where you can change your personal account information. This page allows for multiple phone numbers and e-mailaddresses to be supplied. Using mouse input (or tabbing to buttons and pressing them with space bar) works perfectly, however I'd like to add the convenience of the enter key pressing the 'logical' buttons.
My form looks like (accidentally forgot to translate a few items):
A simplified version of the HTML for the form can be found on PasteBin, I've mainly removed the directives for managing the lists.
All buttons are <button> elements except for the cancel button which an <a> to the previous page, and the submit button is <button type="submit">.
When selecting any text box and pressing enter, the first (non-disabled) <button> element is 'clicked'. Meaning if I would change the last name, hit enter, the first phone number would be removed.
When you're in a new entry of phone numbers or e-mailaddresses (the row with the green + button) it should click that button, and if it's disabled do nothing.
When you're in any other text box on the form it should hit the save button, and also if the save button's disabled, do nothing.
Both buttons will be disabled based on form validation.
There'd be no trouble in changing the type of a button from button to submit if that'd help.
I would preferably have an all HTML solution, using just semantics, but I doubt that's really possible. So the logical alternative would be to use an AngularJS directive.
Please do not provide a jQuery or plain JavaScript solution relying on IDs or something like that. I don't want to hack my way around AngularJS, rather embrace it.
In the meantime I've worked on a directive that allows me to declare what I've called 'submit scopes'.
In essence you have actions (inputs) and targets (buttons), they're bound through a service by a key you can assign in the template. To avoid keys from clashing and from simple annoying work you can create a submit-scope which will cause it's children to prepend a unique key to the value they're accessing.
Within a submit-scope you can still override an action to use a global key instead by setting the attribute global-submit="true".
Example code:
<div submit-scope>
<input type="text" submit-action />
<button type="button" submit-target>Pressing enter in the above field will click this button.</button>
</div>
You can view the entire source code and a slightly larger example on Plnkr.
I just tried to replace
<button>Cancel</button>
with
<input type="button" value="Cancel">
and it seems to work correctly...
I'd like to create an HTML form submit button with the value 'add tag', however, the web page is in Swedish, so I'd like to have a different button text.
That is, I want to have a button like
but I want to have my code like
if (request.getParameter(cmd).equals("add tag"))
tags.addTag( /*...*/ );
Is this possible? If so, how?
It's possible using the button element.
<button name="name" value="value" type="submit">Sök</button>
From the W3C page on button:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content.
Following the #greg0ire suggestion in comments:
<input type="submit" name="add_tag" value="Lägg till tag" />
In your server side, you'll do something like:
if (request.getParameter("add_tag") != null)
tags.addTag( /*...*/ );
(Since I don't know that language (java?), there may be syntax errors.)
I would prefer the <button> solution, but it doesn't work as expected on IE < 9.
There are plenty of answers here explaining what you could do (I use the different field name one) but the simple (and as-yet unstated) answer to your question is 'no' - you can't have a different text and value using just HTML.
I don't know if I got you right, but, as I understand, you could use an additional hidden field with the value "add tag" and let the button have the desired text.
If you handle "adding tag" via JScript:
<form ...>
<button onclick="...">any text you want</button>
</form>
Or above if handle via page reload