This question already has answers here:
How do I create an HTML button that acts like a link?
(35 answers)
Closed 7 years ago.
How do I make a <input type=button> act like a hyperlink and redirect using a GET request?
You can make <button> tag to do action like this:
<a href="http://www.google.com/">
<button>Visit Google</button>
</a>
or:
<a href="http://www.google.com/">
<input type="button" value="Visit Google" />
</a>
It's simple and no javascript required!
NOTE:
This approach is not valid from HTML structure. But, it works on many modern browser. See following reference :
For <button>; and
For <input type="button />
There are several different ways to do that -- first, simply put it inside a form that points to where you want it to go:
<form action="/my/link/location" method="get">
<input type="submit" value="Go to my link location"
name="Submit" id="frm1_submit" />
</form>
This has the advantage of working even without javascript turned on.
Second, use a stand-alone button with javascript:
<input type="submit" value="Go to my link location"
onclick="window.location='/my/link/location';" />
This however, will fail in browsers without JavaScript (Note: this is really bad practice -- you should be using event handlers, not inline code like this -- this is just the simplest way of illustrating the kind of thing I'm talking about.)
The third option is to style an actual link like a button:
<style type="text/css">
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
}
// :hover and :active styles left as an exercise for the reader.
</style>
<div class="my_content_container">
Go to my link location
</div>
This has the advantage of working everywhere and meaning what you most likely want it to mean.
<script type="text/javascript">
<!--
function newPage(num) {
var url=new Array();
url[0]="http://www.htmlforums.com";
url[1]="http://www.codingforums.com.";
url[2]="http://www.w3schools.com";
url[3]="http://www.webmasterworld.com";
window.location=url[num];``
}
// -->
</script>
</head>
<body>
<form action="#">
<div id="container">
<input class="butts" type="button" value="htmlforums" onclick="newPage(0)"/>
<input class="butts" type="button" value="codingforums" onclick="newPage(1)"/>
<input class="butts" type="button" value="w3schools" onclick="newPage(2)"/>
<input class="butts" type="button" value="webmasterworld" onclick="newPage(3)"/>
</div>
</form>
</body>
Here's the other way, it's simpler than the other one.
<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />
It's simpler.
For those who stumble upon this from a search (Google) and are trying to translate to .NET and MVC code. (as in my case)
#using (Html.BeginForm("RemoveLostRolls", "Process", FormMethod.Get)) {
<input type="submit" value="Process" />
}
This will show a button labeled "Process" and take you to "/Process/RemoveLostRolls".
Without "FormMethod.Get" it worked, but was seen as a "post".
Do not do it. I might want to run my car on monkey blood. I have my reasons, but sometimes it's better to stick with using things the way they were designed even if it doesn't "absolutely perfectly" match the exact look you are driving for.
To back up my argument I submit the following.
See how this image lacks the status bar at the bottom. This link is using the onclick="location.href" model. (This is a real-life production example from my predecessor) This can make users hesitant to click on the link, since they have no idea where it is taking them, for starters.
You are also making Search engine optimization more difficult IMO as well as making the debugging and reading of your code/HTML more complex. A submit button should submit a form. Why should you(the development community) try to create a non-standard UI?
I think that is your need.
a href="#" onclick="document.forms[0].submit();return false;"
Related
How to prevent user-selection / highlighting of an <input>?
This:
input {
user-select: none;
}
<input type="number" value="123" />
and the methods from How to disable text selection highlighting and CSS disable text selection and don't work on an input.
Note: if possible, I don't want to put the input on disabled mode.
You can hide the selection like this:
input::selection {
background-color:transparent;
}
The illusion will be broken if the user drags the text after selecting it, but I don't think there's any other way to do it.
(Why would you want to do this though)?
You could try to (almost instantly) remove the selection when someone selects something inside the input element with .getSelection().removeAllRanges();.
It is still possible to copy the text if someone is quick.
$("input").select(function() {
window.getSelection().removeAllRanges();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="123">
You can improve this by making it look like text is not selectable (see Samuel's answer), I added it into an extra code snippet:
$("input").select(function() {
window.getSelection().removeAllRanges();
});
input::selection {
background-color:transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="123">
After all of this you can also make it imposible for the user to copy anything inside an input field by adding onCopy="return false" to the input field. (It is still selectable but not possible to copy).
<input type="number" value="123" onselectstart="return false" oncopy="return false;" />
You might only want to use 1 or a combination of 2 of those things inside your project. Combine the things you need and you can make an unselectable/uncopy-able input field.
You can also disable cutting/pasting or right clicking according to this article.
Reading your requirements, it seems you'd probably fulfil them best by not using user-facing number input at all, or more precisely, progressively enhance it to some "ticker" structure.
Such progressively enhanced number input without possibility to select the value could be something like:
<form onsubmit="alert('Value is: ' + this.v.value); return false">
<label for="o">Value: </label>
<!-- Displays the value: -->
<output id="o" for="plus minus"
style="min-width: 2em;
display: inline-block;
text-align: right; border: 1px solid;
padding-inline: .5em;
user-select: none;
/* user-select: none; is probably not necessary here anymore
since keyboard input here does not affect the value
*/
">0</output>
<!-- Holds actual value: -->
<input name="v" type="hidden" value="0" onchange="o.value=value">
<!-- Controls: -->
<button id="plus" type="button" aria-label="Increase value"
onclick="v.value=Number(v.value)+1;v.onchange()"
>+</button>
<button id="minus" type="button" aria-label="Decrease value"
onclick="v.value=Number(v.value)-1;v.onchange()"
>-</button>
<hr>
<input type="submit">
</form>
(Again, this structure is for demonstration only, underlying element should be regular number input. Both should work with screen readers and other assistive technologies, but haven't verified this one ATM.)
This seems to work, as a first approximation:
input {
pointer-events: none;
}
<input type="number" value="123" />
This question already has answers here:
<button> vs. <input type="button" />. Which to use?
(16 answers)
Closed 8 years ago.
In order to use an image as a form's submit button, I have come across two ways and would like to know which one is correct/best-practice.
Version 1:
<button type="submit">
<img src="mybutton.jpg" alt="Submit" />
</button>
Version 2:
<input type="image" src="mybutton.jpg" border="0" alt="Submit" />
I personally feel that the first version is better because it makes semantic sense and has a type of "submit". In the second version its saying the input is of type "image" which doesn't mean much to me as a human.
Which one should I go with?
Personally I would set it as a background rather than an image inside the button. So you would get the following.
<button type="submit" class="styledButton></button>
<style>
.styledButton {
background: url('mybutton.jpg') no-repeat;
}
</style>
That is just a matter of style, there is not really a "better" way, use the way you feel your code to be more clean with.
My personal opinion is that all form elements should be "<input>" because that feels more natural for me. I don't like it when things doing the same stuff (being form-elements in this case) looks different of having a different syntax, so I declared this to my personal standard.
However the most annoying thing is that an image, or <input type="image"> will not transfer name="" and value="" when submitting a form, that's why it is bad to use incase you have multiple "buttons" decorated as images in a form and you want to know which one was pressed.
In that case the best opinion is to make an <input type="submit"> and let it look like an image using CSS.
However, my statement for this question is: do it the way you feel best but keep it that way and don't switch around. Decide for one "standard" and use it always. Will make your code more strict and easier to read.
I personally use CSS to apply an image to submit button
Reason behind this is : you don't need to write the same code everywhere, just calling the css class will be sufficient
Instead of above 2 versions mentioned by you.
Try This:
<div id="submitForm">
<input type="submit" value="Submit" name="submit">
</div>
CSS
div#submitForm input {
background: url("mybutton.jpg") no-repeat scroll 0 0 transparent;
color: #000000;
cursor: pointer;
font-weight: bold;
height: 20px;
padding-bottom: 2px;
width: 75px;
}
The wordpress theme I've been using has been acting up so I'm trying my hand at editing my site using style sheets (I've 0 experience with html or CSS). I'm finding the googling process to discover the selector names I must use to edit each element within my site very time consuming so I've started looking at the source code to try and identify the selector I need.
For the example below I'm looking to change the signup form's button's background colour.
<div class="notif">
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup_appstage">
<form action="http://HUDKingPro.us7.list-manage.com/subscribe/post?u=0c2c35acf6b36619d521176a9&id=8d4d76b2db" method="post" id="mc-embedded-subscribe-form_appstage" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL_appstage" placeholder="Enter your email address" required />
<input type="submit" value="Notify me !" name="subscribe" id="mc-embedded-subscribe_appstage" class="button" />
So far using the selectors I have identified I've come up with this but it doesn't appear to work, is there a methodology for identifying the CSS selector from the HTML source code?
#notif input {
background: #1A1A18;
}
Apologies if this is overly naive, I've an app to launch for next week so I've had insufficient time to develop a thorough understanding of CSS.
Have you tried to use the class the button has? i.e. .button
So it will be:
.notif .button {
background: #1A1A18;
}
Your div has <div class="notif"> therefore you're CSS is invalid with the #
You use . for classes and # for id's.
Edit
It's taking this stylesheet http://hudkingpro.com/wp-content/themes/apptamin-a-hor/yourstyles-example4.css
Edit the background colours by line 76 or:
This is the class or input you want to edit:
.notif input#mc-embedded-subscribe_appstage{
background: #1A1A18 !important;
}
Add the above to the Appearance - Editor.
# is for IDs, whereas you have class="notif". Additionally, without further restriction it will affect the email input as well as the submit button.
So try .notif input[type=submit]
I have a browse button that I want to edit. Here is how I made it:
<input type = "file" id = "myBrowseButton" class = "BrowseButtons" name = "Browse" />
The button looks like you regular browse button but I want it to look like this:
I have been asking around and doing research, and from what I can tell the only (not incredibly long and time consuming) way to edit this would be to find some utility that will do it for me and mess around with that. Where would I be able to find said utility/ is there another (not extremely time consuming) way to edit this?
This is just little trick, maybe you can use.
I'm using a span to cover the file button.
<script type="text/javascript">
$(function() {
$("#button1").button();
$("#button1").click(function() {
$("#fileUpload1").click();
});
});
</script>
<span id="span1" style="overflow: hidden;width: 300px;white-space: nowrap; display: inline-block;">
<input type="file" id="fileUpload1" name="fileUpload1" size="100" style="width: 400px;"/>
</span>
<input type="button" id="button1" value="Browse Custom 1"/>
This works for me, using Firefox & IE but not in Chrome, because the UI is different.
Second, when using a jQuery dialog with file upload in it, the width of file upload is changed back according to span width. So the trick is to set the width again after opening the dialog:
$("#button3").click(function() {
$('#dialog1').dialog('open');
$("#fileUpload2").width(1000);
$("#span2").width(200);
//$("#fileUpload2").css('margin-left', '300');
});
<div id="dialog1" style="display: none;">
<span id="span2" style="overflow: hidden;width: 300px;white-space: nowrap; display: inline-block;">
<input type="file" id="fileUpload2" name="fileUpload2" size="100" style="width: 400px; margin-left: 300px;"/>
</span>
<input type="button" id="button2" value="Browse Custom 2"/>
This is just a trick, I don't think it works for everyone, sorry if can't help you all. A simple solution for a simple case.
I've started doing all my form buttons (and many links for that matter) using Jquery's UI Button functionality. With a relatively small grouping of files, it automatically rounds, styles, and improves functionality while the included Theme Roller system allows you to change styling with a simple, configurable download...or even allows switching on the fly.
Getting this look is as simple as adding: class="fg-button ui-state-default ui-corner-all" These styles work on other elements too, so you can round divs, images, etc.
Here's a primer: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/
Once you become familiar with ThemeRoller, it's even possible to use it to style other elements of your page/app. I have one application that I've done entirely this way, so to re-theme the app for a different client I simply generate a new ThemeRoller theme.
Hey guys I want a form to be submitted but it just won't work in IE. Altough in mozilla and other browsers it is working. The code:
<input type="image" name="zoeken" src="knop_go.jpg" value="zoek" alt="zoek" />
What's the solution for this problem ?
It does work — it just doesn't send the value, just the co-ordinates.
If you are testing to see if that button each clicked, look to see if an x or y co-ordinate is set (as well as testing for the value).
A possible workaround would be a regular button with a css style for the image:
<form action="blah.aspx" method="post">
<input type="submit" class="button" name="zoeken" value="zoek" />
</form>
And in css:
.button {
border: 0px;
background: url("./knop_go.jpg");
width: 100x;
height: 60px;
}
You could try this inside a form tag (in fact, this will work):
<button type="submit">
<img src="btnaceptar.jpg"/>
</button>
OK, update, it works IF I press the button, but if I press enter, it still doesn't work...
fixed it by checking if another field isset, now it works...
But I saw if you don't press the submit button, he doesn't send a value.