In html5 can I use <button> outside the <form>, like this:
<body>
<form action="page.html" method="get" id="myForm">
...
</form>
<button type="submit" form="myForm" value="Submit">Send</button>
</body>
But I do not want to use the form, only the <button>, because my project is all done with Javascript/Ajax
I wanted to make a "noscript-friendly" design, but it is a closed intranet and for a company project and do not have much time for this.
Use <button> without <form> is semantic?
<body>
<div>
<button type="button">test</button>
</div>
</body>
Or would be better to continue to use <a href="javascript:void(0)">?
Note: Remember not all valid code by W3 is a semantic code
Your use of the button element is appropriate.
That’s why there is the Button state in the first place. The HTML5 spec also shows an example, very similar to your use case:
The following button is labeled "Show hint" and pops up a dialog box when activated:
<button type=button
onclick="alert('This 15-20 minute piece was composed by George Gershwin.')">
Show hint
</button>
Note: Your question has nothing to do with the Semantic Web. There is a difference between "semantic (markup)" and "Semantic Web".
Your use of the button element is "semantic" in the sense that you are using it correctly according to the HTML5 specification, and that there is no other element defined which would be more appropriate.
You might want to use the a element in cases where you are navigating to another resource (no matter how it’s implemented technically). For apps, the difference is sometimes not very clear. A rule of thumb: if the URL changes (could users want to bookmark/share it?) and/or you could use a link type (even only theoretically), it’s likely that you should use a instead of button. But as this is a different question, please take it just as a side note.
Related
I'm trying to find the semantically correct way to describe an HTML element that represent a way to get help (e.g. help icon) and its help content.
I tried to search on this topics but searching help on help isn't an easy business. Here would be a simple example of what I have in mind (using a simple script to show/hide the help content as well as leveraging the "title" attribute):
<div>
Please enter your password
<a class="help" title="Your password must have 5 characters">
<img src="/images/help.svg" alt="">
</a>
<span class="helpText displayNone">
Your password must have 5 characters.
</span>
<input type="password>
</div>
Is there a better way to represent this (in this format). The idea is to have an accessible and SEO friendly way to describe "toggleable help content".
The question is about HTML/HTML5 and WAI-ARIA attributes (not JavaScript) - I'm looking for the best element representation of my example (if such concept exists).
I think this question is larger than you intend based on your markup. First let's clean up your example so there are appropriate semantic and structural elements in place that also make this accessible to users:
<div>
<label for="pwd">Please enter your password</label>
<input type="password" id="pwd">
</div>
That makes for an accessible field. No script, no ARIA. Just a <label> that is properly associated with the field.
Now you want to offer some help to the user and still associate it with the field.
First, do not use an anchor. That tells users of assistive technology that it will take them away from the page and they may not want to click or activate the control. Use <button>.
Then you can use ARIA to associate that tip with the field. In this case aria-describedby will be announced along with the field.
You also need to fill out the alt attribute, or your image will not be announced to a screen reader user at all.
The best ARIA role to use in this context is the role=tooltip (read more in the ARIA spec).
Here is one way you could approach it:
<div>
<label for="pwd">Please enter your password</label>
<button><img src="/images/help.svg" alt="Help"></button>
<span id="pwd-tip" role="tooltip">Your password must have 5 characters.</span>
<input type="password" id="pwd" aria-describedby="pwd-tip">
</div>
You can use CSS to determine if the button has focus and display the following sibling span (button:focus + span) if you must avoid script, but that is sloppy. You can use script to toggle a class on the button which uses similar CSS to then display the span.
You can put the text into the <label> and hide it by using a CSS off-screen technique, meaning it will always be announced to screen readers and then you can dump the aria-describedby.
Frankly, you can skin this a few different ways. Check out the keyboard interactions you must consider also over at the ARIA Practices description for a tooltip.
However, for the most part you are better off making your help text always visible (especially if you want to satisfy the nebulous notion of SEO). In a vacuum I would just put this text in the <label> and be done with it.
Is it a valid thing to put a <section> inside a <form>?
Now, I know it works, so I'm not asking whether it works or not. I also know that they both are (both section and form) "box-model" elements and "may be inlined inside each other" -- according to the W3 definitions. And yet, I'm wondering if it's a legit thing to do?
Example for clarity:
<form action="foo.bar">
<section>
<input type="foo" />
</section>
</form>
In HTML5 you should use the tags that are most semantically appropriate for a given task.
And indeed there is a section tag for forms – it is called fieldset.
So instead of using a section tag inside your form, you might use a fieldset:
<form action="foo.bar">
<fieldset>
<legend>The fiedlset heading</legend>
<input type="foo" />
</fieldset>
</form>
Please also refer to the „html5 Doctor Element Flowchart“ (PNG, also as PDF).
On the same page we can read:
In addition to the element, it's also common practice to use HTML titles (e.g. , ) and sectioning (e.g. ) to structure complex forms.
I am using anchor tag for linking my welcome page to my main page. It is working on chrome but not in mozilla.
Code:
<div id="wel1"><h1>WELCOME TO ASSESMENT ENGINE</h1></div>
<div id="wel2">
<div id="wel3"><p id="wel4">Instruction:</p><br>
<p id="lang">Total number of questions : 5.<br><br>
Time alloted : 3 minutes.<br><br>
Each question carry 10 mark, no negative marks.</p>
</div>
<div id="wel5">
<p id="wel4">
Note:</p><br>
<p >
<ul>
<li><p>Click the 'Submit Test' button given in the bottom of this page to Submit your answers.</p></li>
<li><p>Test will be submitted automatically if the time expired.</p></li>
<li><p>Don't refresh the page.</p></li>
</ul>
</p>
</div>
<button id="bu">START THE TEST</buttton>
</div>
In this image START THE TEST button working on chrome perfectly but not on mozilla.
You have invalid close tag </buttton>
Try:-
<button id="bu">START THE TEST</button>
Demo
Although the code works if the end tag spelling error is corrected, it is illogical and forbidden in HTML5 to nest interactive elements: the a element must not have interactive content like a button element. A click on such an element could activate the outer element, or the inner element, or both. Although this might not matter in this specific case, it’s still not recommended.
Instead, you can use an image of a button an make it a link:
<img src="start.png" alt="START THE TEST" border="0">
or use a minimal form (submitting a form is different from following a link, but the differences often don’t matter, or could be an improvement):
<form action="as.html"><button type="submit">START THE TEST</button></form>
Spell mistake in the Closing button tag, Use </button> instead </buttton>
I declared an iFrame in my html, and the source is my XQuery file. In my XQuery, I defined a <div>, within which I also declared a button named "convert".
My XQuery file basically looks like this (this is the source for the iFrame）
return
<div id="content">
<table>
....
<tbody>
{
...
<td>
<a id="{$t/#id}"
rel="nofollow"
target="_new"
name="{util:document-name($t)}:{util:node-id($t)}"
href=
"http://localhost:8080/exist/rest/db/motorola/xquery/toDita.xql?xml={
util:document-name($t)
}&xsl=mot2dita.xsl">
<input type="submit" value="convert"/>
</a>
</td>
...
}
</tbody>
</table>
</div>
As you can see, in a td, I declared a button called "convert", and the "href" gives the link. Right now this button works perfectly in Firefox and Chrome(opening a new window to do the task), but in IE, after clicking it, it just doesn't do anything.
I wonder if this is a browser issue or my XQuery script has problems. Thanks in advance for helping out.
<input> tags are not valid inside <a> tags. The XHTML code is therefore not valid, which will account for the inconsistent behaviour - some browsers are better at compensating for odd cases like this than others.
Recommend you remove the <input> entirely and use CSS to style your <a> tag to look like a button, if it's just the look of a button that you're after.
Unless you're inside a form, it's not going to submit anything...definitely not an A tag.
I prefer to do these with Jquery UI's button feature. It gets the desired behavior you're looking for, is progressively enhanced and tested to handle the full gamut of browsers, and can be done use a href links, button elements, or input type=submit elements. Plus, styling looks great and is instantaneous.
Here's a quick tut: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/
Is it possible to create a tooltip for an html button. Its the normal HTML button and there is no Title attribute as it is there for some html controls. Any thoughts or comments?
Simply add a title to your button.
<button title="Hello World!">Sample Button</button>
both <button> tag and <input type="button"> accept a title attribute..
Use title attribute.
It is a standard HTML attribute and is by default rendered in a tooltip by most desktop browsers.
For everyone here seeking a crazy solution, just simply try
title="your-tooltip-here"
in any tag. I've tested into td's and a's and it pretty works.
A button accepts a "title" attribute. You can then assign it the value you want to make a label appear when you hover the mouse over the button.
<button type="submit" title="Login">
Login</button>
The title attribute is meant to give more information. It's not useful for SEO so it's never a good idea to have the same text in the title and alt which is meant to describe the image or input is vs. what it does. for instance:
<button title="prints out hello world">Sample Buttons</button>
<img title="Hms beagle in the straits of magellan" alt="HMS Beagle painting" src="hms-beagle.jpg" />
The title attribute will make a tool tip, but it will be controlled by the browser as far as where it shows up and what it looks like. If you want more control there are third party jQuery options, many css templates such as Bootstrap have built in solutions, and you can also write a simple css solution if you want. check out this w3schools solution.
If your button still doesn't show anything with title, check if your button is NOT disabled
You should use both title and alt attributes to make it work in all browsers.
<button title="Hello World!" alt="Hello World!">Sample Button</button>