I need to disable a submit button and innerText by using angularJS,
but jquerymobile wrap the input tag in div.
If I don't want the wraping,or render the by my self,how can i do that?
Use
data-role="none"
as an attribute on that button.
There are several other methods and you can find them here or here, just look for an topic: Methods of markup enhancement prevention
Related
I want to remove the default autocomplete from all input fields of my web application using CSS only. I will put that CSS in the header of my web application to get the effect of that css on all web pages. I can't put autocomplete=off in all input fields individually. as there are more than 200 input in the application.
It is not possible since autocomplete=off is not a css attribute, but a html5 one.
Maybe you want to do it with js by setting element's attr, or just find and replace those 200 entries once and for all.
More info on autocomplete=off can be found in MDN.
It's not possible in CSS. You can achieve it by using JS.
I'm trying to learn the best way to create buttons via HTML/CSS.
I was using clickable div's before, but looks like this was not the best idea ever.
What about button's? Or a href's
Which way is the best to go with today (html5 css3)?
It depends on the behavior you are looking for. If its purpose is to link to another page then use an <a>. If it is for submitting a form or doing some sort of post or get I would use a button.
There is a web based project management product called Basecamp. When they first launched they were using <a> tags as delete buttons next to each individual task. Users who visited their internal pages while using the google web optimizer plugin for chrome were seeing all of their tasks marked as deleted. Google page optimizer looks for links in the page and triggers a click to pre-load future pages.
Let form follow function and you should be good to go :0)
One reason to favor buttons is that buttons are naturally better for accessibility, while using links, spans or other tags fails on that count. To get proper accessibility with those other elements, you have to use ARIA roles to fix them.
That's not a hack per se, since that's part of what ARIA roles are for. But it's an extra thing to learn about and make sure that you get right.
the best way to create buttons in html is to use
or
because when you buttons and inputs of type submit are used by default by the browser when you try to submit a form
for example :
<form action="somepage.php" method="POST">
<input type="text" name="name1">
<textarea></textarea>
<input type="submit" value="submit the form with a input of type submit">
</form>
only when the user click the submit button the form data are submited
BUT , when we use a or divs to play the role of buttons you need to call javascript and ask for help
FINNALY THE GOOD PRACTICE IS TO USE BUTTONS AND INPUT OF TYPE SUBMIT TO PLAY THE ROLE OF BUTTON EVERYTHING ELSE IS A CUSTOMIZATION THAT CAN INCREASE THE TIME TO LOAD THE PAGE
Is it okay to use an anchor tag without including the href attribute, and instead using a JavaScript click event handler? So I would omit the href completely, not even have it empty (href="").
In HTML5, using an a element without an href attribute is valid. It is considered to be a "placeholder hyperlink."
Example:
<a>previous</a>
Look for "placeholder hyperlink" on the w3c anchor tag reference page: https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element.
And it is also mentioned on the wiki here:
https://www.w3.org/wiki/Elements/a
A placeholder link is for cases where you want to use an anchor element, but not have it navigate anywhere. This comes in handy for marking up the current page in a navigation menu or breadcrumb trail. (The old approach would have been to either use a span tag or an anchor tag with a class named "active" or "current" to style it and JavaScript to cancel navigation.)
A placeholder link is also useful in cases where you want to dynamically set the destination of the link via JavaScript at runtime. You simply set the value of the href attribute, and the anchor tag becomes clickable.
See also:
https://stackoverflow.com/a/10510353/19112
http://www.html5in24hours.com/2012/06/8-ways-to-get-started-with-html5-today/
http://webdesign.about.com/od/html5tutorials/qt/html5-placeholder-links.htm
My advice is use
If you're using JQuery remember to also use:
.click(function(event){
event.preventDefault();
// Click code here...
});
If you have to use href for backwards compability, you can also use
link
instead of # ,if you don't want to use the attribute
Short answer: No.
Long answer:
First, without an href attribute, it will not be a link. If it isn't a link then it wont be keyboard (or breath switch, or various other not pointer based input device) accessible (unless you use HTML 5 features of tabindex which are not universally supported). It is very rare that it is appropriate for a control to not have keyboard access.
Second. You should have an alternative for when the JavaScript does not run (because it was slow to load from the server, an Internet connection was dropped (e.g. mobile signal on a moving train), JS is turned off, etc, etc).
Make use of progressive enhancement by unobtrusive JS.
The tag is fine to use without an href attribute. Contrary to many of the answers here, there are actually standard reasons for creating an anchor when there is no href. Semantically, "a" means an anchor or a link. If you use it for anything following that meaning, then you are fine.
One standard use of the a tag without an href is to create named links. This allows you to use an anchor with name=blah and later on you can create an anchor with href=#blah to link to the named section of the current page. However, this has been deprecated because you can also use IDs in the same manner. As an example, you could use a header tag with id=header and later you could have an anchor pointing to href=#header.
My point, however, is not to suggest using the name property. Only to provide one use case where you don't need an href, and therefore reasoning why it is not required.
From an accessibility perspective <a> without a href is not tab-able, all links should be tab-able so add a tabindex='0" if you don't have a href.
The <a> tag without the "href" can be handy when using multi-level menus and you need to expand the next level but don't want that menu label to be an active link. I have never had any issues using it that way.
In some browsers you will face problems if you are not giving an href attribute. I suggest you to write your code something like this:
Link
you can replace yourcode() with your own function or logic,but do remember to add return false; statement at the end.
Just add bellows code in your working component on top to remove this warning, that's it.
/* eslint-disable jsx-a11y/anchor-is-valid */
Hai,
I have seen something that when mouseover is done on a link/word in a HTML page, an information will be popping up.
Can any one post some sample code or link to achieve that.
Thanks in Advance.
Here's a list of 10 plugins, which might be interesting:
http://www.reynoldsftw.com/2009/03/10-excellent-tooltip-plugins-with-jquery/
or - if you want to add tooltips to links - just use the title attribute:
Hello
Well that depends entirely on what javascript framework you use.
For instance in jquery, this plugin tooltip(http://jquery.bassistance.de/tooltip/demo/) makes it trivial to do this.
If you are not using any frameworks then use onMouseover etc.
eg
Link
You could use JQuery QTip to accomplish this.
Source and examples here
You can use the standard HTML attributes
<img src="path_to_image" title="Information tip about the image"/>
Or use JS librery to produce more friendly tooltips
jQuery with a tooltip plugin
Prototype with a tooltip extension
To add a tooltip to anything, use the tag <acronym>, or in german: (great html reference page). Style with css if necessary.
Short Version:
Do you know of any way to get an input button (submit) and an anchor tag to render the same visually using CSS and no Javascript?
Long Version:
I'm developing an ASP.NET MVC application. The site contains pages to view the details of or to create or update my models. The page actions are contained at the bottom of the form and typically include Update and Cancel or Edit, Delete and List (if on a details view page). The Update, Edit, and Delete actions post data from a form to the server, while the Cancel and List actions are/can be handled by appropriate GET requests. It's important to note that one of my design goals is to make the site work as identically as possible if Javascript is disabled to the way it does when Javascript is enabled. I also want the UI elements to render the same visually whether the element causes a postback or fires off a GET request.
In order to get the form submissions to work in the absence of Javascript, I think I must use submit buttons. I'm overriding, with CSS, the visually styling of the buttons to render much like the "buttons" on the top of the SO page -- flat, solid-color with plain text. I'd like the actions that generate GET requests to be handled with anchor tags, but I had problems getting these tags and the styled buttons to render identically. There seem to be issues with alignment and font-sizing. I was able to get them close but not identical.
EDIT: Styling differences using buttons and anchors included not being able to get the fonts to render in the same position relative to the baseline within the bounding box and getting the bounding box itself to render at the same size and alignment relative to the container. Things were just a few pixels off one way or the other regardless of my tweaks. If you've been able to get it to work, please let me know. Knowing that it's possible would make it easier to keep trying things until I could get it to work.
One thing I tried was wrapping the GET-actions around a button, styled like the form buttons. This worked great in Firefox, but not in IE7. Clicking on such a button in IE7 didn't propogate the click back to the anchor. What I've come up with now is to create a new form for the GET, using method="GET", associated with the required action. I wrap that around a submit button that has an onclick handler that sets location.href to the URL of the desired action. This renders visually the same and seems to work, even if the form is nested in another form. A minor niggle is that if Javascript is disabled, then my GET url contains a ? at the end instead of being the nice clean url that you would desire.
What I'd like to know is whether anyone else has solved this in a different way that would work better (and maybe require less HTML)? Do you have any other ideas that I could try? Any way to fix the ? on the GET url when the request is submitted as a post when Javascript is turned off?
Sample code below from a details view. I realize that I could (and arguably should) add the onclick handlers via javascript as well, but the code actuall reads better when I do it inline. I'm using HtmlHelper extensions to generate all of the mark up below. I have reformatted it to improve readability.
<form action="../Edit/2" class="inline-form" method="get">
<input class="button"
onclick="location.href='../Edit/2';return false;"
value="Edit"
type="submit" />
</form>
<form action="../Delete/2" class="inline-form" method="post">
<input class="button"
value="Delete"
type="submit" />
</form>
<form action="../List" class="inline-form" method="get">
<input class="button"
onclick="location.href='../List';return false;"
value="List Donors"
type="submit" />
</form>