This is probally small question for a pro.
i want to know if i replace input submit button with button (type=submit), would it still be trigger on enter (keyboard) and if yes, then which browser wont trigger it?
<button type="submit"><span>i was replaced from input button</span></button>
span was added just for css fancy button style
It should be triggered in all standard compliant browsers, since type="submit" creates a submit button:
Buttons created with the BUTTON
element function just like buttons
created with the INPUT element, but
they offer richer rendering
possibilities:
same thing, the button allows you to put content, like text or images
Related
I have an anchor tag within a button tag description in HTML as below:
<button type="submit" onClick="handleSubmit()">Desc....
Click here for more details
</button>
Now when I click on the anchor text, the action "handleSubmit()" executes instead of going to my https:// link.So apparently, my text is also being treated as a button instead of a hyperlink.
I tried adding the z-index property to my CSS for (z-index: 1) in order to make it independently clickable so it overlays on top of the button tag, but no joy!
But if I right-click on the text, I do see the option of opening the https link in a new tab and it does so perfectly. Only when I click on it normally(left click), the button click handler executes as if its the button being clicked instead of the anchor tag.
How can I fix this? Any help would be much appreciated, thank you.
I don't quite understand if you intend to use the function inside the onClick in any situation.
You can swap the wrapping of elements so that the button is inside the link; also you could move the link inside the onClick like this:
onClick="window.location.href='link'"
Thought these can be a couple solutions, you need to clarify the exact behaviour you expect to obtain from your code.
there is a button that when it is clicked, It scroll to the bottom of the page
<form action="#demo-section">
<button id="demo" >demo</button>
It is linked tho this div as below:
<div id="demo-section" >
but when I click a page, it refresh and then go to bottom and also ? in the address bar:
http://xxxx.xx/?#demo-section
If the "type" attribute is not mentioned, All buttons inside a form element act as type="submit". So just add the type="button" to the button and it will work.
EDIT: (As Mike 'Pomax' Kamermans suggest on his comment) you better use anchor tag and style it as a button if that is what your form aiming to achieve..
As already mentioned, you should add the type attribute to the button with the value "button", so changing
<button id="demo" >demo</button>
to
<button id="demo" type="button">demo</button>
should work as intended.
Furthermore, you can also investigate if what is needed is to use an anchor tag (<a>) and setting the href attribute to #demo-section instead of using a form. This will have the same effect, but without the element having to be a button (and without having to have a wrapping form - forms are not intended for navigation, as mentioned by Mike 'Pomax' Kamermans's comment, and thus the most correct approach would probably be this one).
Example of the mentioned method:
demo
This will be shown as a hyperlink with text "demo" but can be changed to any other thing, including other HTML elements, thus being more flexible than using a form and a button (you can also style the anchor tag with CSS, so it can even be a button, if it is so desired).
When I search for a css button generator they always have code that styles an anchor.
The Button
But I'm wondering why they don't ever try to style a generic button:
<input type="button" value="The Button" />
is it because it's harder to style an input of type button?
The styling will make buttons and anchors look the same. However the functional aspects are what make you decide to use a button or a link.
I would recommend using a link if you are going to follow a link, and a button if you want to submit a form or perform an action, say AJAX call.
Typically the input buttons are going to look like whatever the users computer defaults to for a button. Using anchor tags along with image sprites lets you have more control over what the "button" is going to look like.
I can use a different way to put to prompt phrase in an input box, but I like the way that the prompt phrase stays even when the cursor is blinking, so this is how it is like:
The website is http://store.apple.com/us
At the TOP-RIGHT corner of the page, there is a search box, with a prompt phrase which is a <span>, which is position: absolute in the container.
Also in the container is the <input> element, with position: static
So the prompt span is imposed on top of the input, to have the current effect.
But what I don't understand is, when the user clicks on the prompt phrase span, won't the clicking be on the <span>? So the <input> will not get the focus, and there will be no cursor blinking, user cannot type into the box. How is that overcome?
I don't think using Javascript to handle this is a good way, because what if the user disabled Javascript? The Apple Store's website also has the effect that with Javascript disabled, if clicking on the prompt phrase span, the prompt phrase span will disappear -- how is that done? I am guessing it is done by some CSS :focus pseudo class or some other ways.
This is a JSFiddle if you want to play with it: http://jsfiddle.net/hndWc/6/
Update: Please don't use Javascript make the input have focus, just like Apple Store with Javascript disabled, it can still make the input have focus.
I updated your fiddle just a bit to show a rough example : http://jsfiddle.net/hndWc/8/
$('#prompt-text').click(function(){
$('#prompt-text').hide();
$('#input-element').focus();
});
This is not complete of course. I'd put in some code to see whether the input or the span has focus so that we can capture the keyboard navigation stuff as well. Not just the click.
EDIT
Apple may not be layering functionality. Having a closer look, they are using HTML5. They are using the placeholder attribute of input elements
http://davidwalsh.name/html5-placeholder
JavaScript is being used. If you disable JavaScript, then you no longer get the initial text.
The way they have it done is, they wrap the span tag with the label tag. Initial text is inside the span tag. On keyuyp, the label tag get hidden so span tag is no longer showing since it's parent is hidden. If you disable JavaScript then you get no label or span tag by default which means no initial text since we can no longer use keyup to hide it.
UPDATE
They use the :focsed CSS selector to achieve background change when input is focused. Check below screenshot.
I'm trying to apply a theme to my buttons (input type="button", input type="submit" and button) , but I haven't been able to get it to work, at least not in all of them, just in one, the "Add" button. According to this page, the only markup I need to apply a theme to a button , is simply this <button>Button Label</button>. , but it just doesn't work.
I added a working demo on JSFiddle
I really hope you can help me out with this
You need to apply the button() function for each <button> or <input> that you want styled as a button. You could add the following to your code:
$("button, input:submit, input:button").button();
Which would apply the jQueryUI button styles to all button elements and input elements of type button or submit.
I updated your example: http://jsfiddle.net/hjYyb/