Besides <input type="button" value="Click me" />, <input type="submit" value="Click me" />, <a>Click me</a>, is there another way that can make "Click me" clickable?
With Javascript and CSS, you can make almost everything click-able.
<img src="photo-thumbnail.jpg" onclick="popup_image('photo.jpg');" style="cursor:pointer;" alt="" />
Setting cursor:pointer will make an element look clickable.
But again, that will only work if Javascript is enabled.
You can use Javascript:
<span onclick="...">Eat me</a>
This of course only provides the reaction to the click, if you want to make it look clickable also you have to add some styling.
By clickable do you mean something other than that it causes JavaScript onClick events to fire? Any DOM component should do that. If you want to change the cursor to indicate that something will happen when text is clicked, you can do that with CSS.
Related
hello all a quick question..
i am building a static html page, and would like to like one page to another using a button, now using a link is the easier option but i would like the effect of a button without any javascript going off..
so i would like to use a input button but it to link to a html page like an tag can href.
i was thinking along the lines of this example but without the js..
<form>
<input type="button" value="Read more" class="button" onclick="window.location.href='testimonials.html'">
</form>
this doesnt work but i am looking for this functionality?? is it possible?
Just submit the form to the URL.
<form action="testimonials.html">
<input type="submit" value="Read more">
</form>
… but buttons are supposed to do stuff. Links go places. Don't send people mixed messages, use a link.
you've misspelled "onclick" :)
EDIT: if you want to avoid javascript, you can create a button-like link with CSS:
Read More
Try this code:
<form>
<input type="button" value="Read more" class="button" onlick="window.location='testimonials.html'">
</form>
I have a default button. So now how do I make it a button image? So when you click on the button the normal thing happens. What I just want is an Image on the button. Thanks.
You may try this:
<INPUT TYPE="image" SRC="image location" ALT="SUBMIT">
Try putting an image instead of a button and handle its onclick event.
You can use an image as a button by specifying the src property:
<input type="image" name="submit" value="submit" src="images/button.gif" />
you could try:
<button style="display:block; background: url(/path/to/image.png) no-repeat center;">
Push me!
</button>
you can use javascript with some logic.
create one button with style attribute style="display:block"
also create required image just next to button with style="display:none"
onclick of button call javascript function.
function disphide()
{
btn.style.display='none';
img.style.display='block';
}
This should work
I have buttons on a page that look like:
<p>
<a href="view.php">
<input type="button" name="view" value="View Database" />
</a>
</p>
IE does not support these buttons or multiple buttons I am not sure which one. Does anyone know how to fix this to work with IE?
Embedding a button within an <a> tag is not normally done, and really doesn't make any sense. If you want your link to look like a button, then just use the <input> tag with some script on the onclick event, or use css to make your link look button-ish (start by using display:block or display:inline-block);
You can't put an input into the tag, instead, you can create a form, and change your button to a submit one. Then you can choose the target url in the form, like this:
<form action="view.php">
<input type="submit" name="view" value="View Database" />
</form>
I would recommend this over using javascript, because buttons are not designed for navigating a site. If you want to submit information, which is what they are used for, you won't be able to do it so cleanly using javascript.
What exactly are you trying to achieve? If you want a custom button to redirect to view.php, you can use onclick:
<input type="button" name="view" value="View Database" onclick="window.location.href='view.php';" />
or something similar.
<input type="button"
onclick="javascript:document.location='view.php';"
value="View Database"/>
Try with this ugly monster:
<input type="button" name="view" value="View Database" onclick="javascript:window.location='view.php'"/>
I have ASP.Net code generating my button's HTML for me using divs to get it to look and behave how I want. This question is regarding the HTML produced by the ASP.Net code.
A standard button is easy, just set the onClick event of the div to change the page location:
<div name="mybutton" id="mybutton" class="customButton" onClick="javascript:document.location.href='wherever.html';">
Button Text
</div>
This works great, however, if I want a button like this to submit the form in which it resides, I would have imagined something like below:
<form action="whatever.html" method="post">
<div name="mysubmitbutton" id="mysubmitbutton" class="customButton" onClick="javascript:this.form.submit();">
Button Text
</div>
</form>
However, that does not work :( Does anyone have any sparkling ideas?
onClick="javascript:this.form.submit();">
this in div onclick don't have attribute form, you may try this.parentNode.submit() or document.forms[0].submit() will do
Also, onClick, should be onclick, some browsers don't work with onClick
Are you aware of <button> elements? <button> elements can be styled just like <div> elements and can have type="submit" so they submit the form without javascript:
<form action="whatever.html" method="post">
<button name="mysubmitbutton" id="mysubmitbutton" type="submit" class="customButton">
Button Text
</button>
</form>
Using a <button> is also more semantic, whereas <div> is very generic. You get the following benefits for free:
JavaScript is not necessary to submit the form
Accessibility tools, e.g. screen readers, will (correctly) treat it as a button and not part of the normal text flow
<button type="submit"> becomes a "default" button, which means the return key will automatically submit the form. You can't do this with a <div>, you'd have to add a separate keydown handler to the <form> element.
There's one (non-) caveat: a <button> can only have phrasing content, though it's unlikely anyone would need any other type of content when using the element to submit a form.
To keep the scripting in one place rather than using onClick in the HTML tag, add the following code to your script block:
$('#id-of-the-button').click(function() {document.forms[0].submit()});
Which assumes you just have the one form on the page.
Why does everyone have to complicate things. Just use jQuery!
<script type="text/javascript">
$(document).ready(function() {
$('#divID').click(function(){
$('#formID').submit();
)};
$('#submitID').hide();
)};
</script>
<form name="whatever" method="post" action="somefile.php" id="formID">
<input type="hidden" name="test" value="somevalue" />
<input type="submit" name="submit" value="Submit" id="submitID" />
</form>
<div id="divID">Click Me to Submit</div>
The div doesn't even have to be in the form to submit it. The only thing that is missing here is the include of jquery.js.
Also, there is a Submit button that is hidden by jQuery, so if a non compatible browser is used, the submit button will show and allow the user to submit the form.
A couple of things to note:
Non-JavaScript enabled clients won't be able to submit your form
The w3c specification does not allow nested forms in HTML - you'll potentially find that the action and method tags are ignored for this form in modern browsers, and that other ASP.NET controls no longer post-back correctly (as their form has been closed).
If you want it to be treated as a proper ASP.NET postback, you can call the methods supplied by the framework, namely __doPostBack(eventTarget, eventArgument):
<div name="mysubmitbutton" id="mysubmitbutton" class="customButton"
onclick="javascript:__doPostBack('<%=mysubmitbutton.ClientID %>', 'MyCustomArgument');">
Button Text
</div>
You have the button tag
http://www.w3schools.com/tags/tag_button.asp
<button>What ever you want</button>
is it possible to use a button as an hyperlink in html. and it should be working for all the browsers?
If you want to separate content (html) from behaviour (JavaScript), as oppose to what Darrel suggested I would use:
<form action="http://www.google.com">
<input type="button" value="go to goole" />
</form>
Even thought this is not a form proper, it will work fine, and degrade gracefully when JS is disabled.
Not really a hyperlink per se but you can take the user elsewhere with a button.
<input type="button" value="Go To Google" onclick="window.location='http://google.com'" />
As a third alternative to the ones suggested here, you could use CSS to style a hyperlink to look like a button. If it works more like a link (goes somewhere, not performs an action), it may be better this way - for example, as far as I know, search engines may not always submit forms, but they would follow a link.
<form action="file1.php" method="get">
<button type="submit">Submit</button><br>
<button type="submit" formaction="file2.php">Submit to another page</button>
</form>