I have a wizard-style HTML form with a row of submit buttons for the Back/Next/Cancel actions (in that order). The form can also contain a varying number of input fields, such as text fields, radio buttons, checkboxes, dropdowns (select tags), and textareas. The customer requires the "Next" button to be the default action, so that if the user types into a text field and presses Enter, it should submit the form as if they had clicked the "Next" button.
The problem is that in this scenario, the browser (at least IE, which is what 99% of our customers use) submits the form using the first button declared in the form, which as you can see from the above list is "Back", not "Next" as desired.
One fix I read about is to declare the Back and Next buttons in reverse order (i.e. Next first) then use CSS to display them around the right way, like so:
<html>
<head>
<style type="text/css">
.formSubmitButtons {
direction: rtl;
float: left;
}
.formSubmitButtons input {
direction: ltr;
float: none;
}
</style>
</head>
<body>
<form action="blah" method="POST" enctype="application/x-www-form-urlencoded">
<div class="formSubmitButtons">
<input type="submit" name="btnNext" value="Next">
<input type="submit" name="btnBack" value="Back">
</div>
<input type="submit" name="btnCancel" value="Cancel">
<br/>Some text fields go here...
</form>
</body>
</html>
This provides the desired behaviour and button order in both Firefox and IE, however the spacing of the Cancel button relative to the others is inconsistent. In IE6 it looks nice enough, but in Firefox 3.0.5, the Cancel button is jammed up against the Next button.
Does anyone know what CSS magic I need to weave in order to get these three buttons to space evenly in both browsers?
(avoiding the issue by sorting the buttons Next/Back/Cancel is not an option)
(also thanks to everyone who suggested JavaScript-based solutions, but not all our customers allow JS, so it has to be a straight HTML and/or CSS solution)
Here's what I ended up doing that worked nicely (based on Cletus's suggestion):
<!--
<input type="submit" name="btnNext" style="position: absolute; left: -9999px" tabindex="-1">
<input type="submit" name="btnBack" value="Back">
<input type="submit" name="btnNext" value="Next">
<input type="submit" name="btnCancel" value="Cancel">
-->
(ignore the wrapping comment tags, they're just so you can see the HTML)
Have you considered using this trick? Basically you just have a hidden button appear first which does the desired action.
Could you just define a style
.btnMargin {
margin-left:5px;
margin-right:5px;
}
And just apply it to the buttons
<input type="submit" name="btnNext" class="btnMargin" value="Next">
<input type="submit" name="btnBack" class="btnMargin" value="Back">
...
<input type="submit" name="btnCancel" class="btnMargin" value="Cancel">
?
If you have the same style to all, it seems to yield in a few pixel differences between Next/Back and Back/Cancel. If it's crucial that this wouldn't happen, you could define individual margins to buttons. ?
This plasces the buttons in the back, next, cancel order, right next to each other. The only drawback is that you have to set a apecific width on the first button container to make it work in IE7. It works fine without that in Firefox and IE8.
The doctype is important so that the page is rendered in standards compliant mode. Without it the page displays in quirks mode which makes IE display the form elements with completely different spacing.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.formButtons { float: left; }
.formSubmitButtons { width: 120px; }
.formSubmitButtons input { float: right; }
.formFields { clear: both; }
</style>
</head>
<body>
<form action="blah" method="POST" enctype="application/x-www-form-urlencoded">
<div class="formButtons formSubmitButtons">
<input type="submit" name="btnNext" value="Next">
<input type="submit" name="btnBack" value="Back">
</div>
<div class="formButtons">
<input type="submit" name="btnCancel" value="Cancel">
</div>
<div class="formFields">
Some text fields go here...
</div>
</form>
</body>
</html>
Make the buttons type="button" instead of type="submit". Then, add a hidden field, e.g.:
<hidden name="continue" value="Next"/>
Finally, add javascript onclick handlers to the buttons, which first set the value of the hidden field to the name of the pressed button, and then submit the form.
Why do you not just float the Cancel button right?
If it is only a firefox problem you could use an attribute selector like this
input[name="btnCancel"] {float: right;} or margin-left or whatever you want. Otherwise just use classes on the inputs.
Related
I'm trying to create an input form on a web page, and I want all of the input elements to be lined up along a certain column. My idea was to use absolute positioning to just shift all of the input elements over to a specific point on the page. It's working fine, except for one problem: the input elements are overlapping with each other a little bit, vertically.
Here's a MVCE:
<!DOCTYPE html>
<html><head>
<style>
span.right_align {
display: inline;
position: absolute;
left: 80px;
}
div.form_container {
position: relative;
}
</style>
<title>World's Best GUI</title></head>
<body type="text/css" style="background-color: #F7D879; font-family: Georgia, serif">
<div class="form_container">
<form name="guiForm" method="post" action="return false;">
Input 1: <span class="right_align"><input type="text"></span><br>
Input 2: <span class="right_align"><select autocomplete="off">
<option value="yes">Yes</option>
<option value="no">No</option></select></span><br>
Input 3: <span class="right_align"><input type="text" size="50"></span><br>
Input 4: <span class="right_align"><input type="text"></span>
</form>
</div>
</body>
</html>
As far as I can tell, the problem is because the font is smaller than the size of the input box, but it's the size of the font that determines where a new line "begins". If you comment out or remove everything in the right_align class, they stop overlapping (but they also stop lining up so nicely).
I'll also note that the reason I went for the span-class solution is because I need to 1) have some lines dynamically disappear and reappear, depending on the current state of a drop-down, and 2) dynamically create new input items that will also line themselves up nicely. This seemed like a solution that would interfere very little with the current workings of my web page.
Is there a simple way to fix this? Should I be creating these columns in an entirely different way? I'm open to totally new ideas as well.
EDIT: someone suggested I create a jsfiddle, so I did: http://jsfiddle.net/uy9comxk/
EDIT 2: there will be lines where I have multiple inputs that have to appear beside each other on the same line (for date inputs). I didn't include them because it would have increased the MCVE size by a lot.
In your css, use a line-height and it will work:
div.form_container {
position: relative;
line-height: 25px;
}
With a fiddle
Since you're using a form, you should use the label tag and set the width of each - ideally a little longer than than width of the inputs' names to account for longer ones. Using the label for the inputs will also fix the overlapping issue of the inputs.
CSS:
label {
display: inline-block;
width: 80px;
}
input {
margin-left:10px;
}
HTML:
<form name="guiForm" method="post" action="return false;">
<label for="input1">Input 1:</label> <input name="input1" type="text"><br>
<label for="input2">Input 2:</label> <input name="input2" type="text"><br>
<label for="input3">Input 3:</label> <input name="input3" type="text"><br>
<label for="input4">Input 4:</label> <input name="input4" type="text"><br>
<label for="input5">Input 5:</label> <input name="input5" type="text"><br>
</form>
http://jsfiddle.net/ub3bw1rv/
I have a quantity selector on a webpage. I used a trick to make them inline without any gaps.
<div id="quantitybar">
<span class="inputwrapper">
<button id="piece_plus">+</button>
<input type="text" value="1" id="pieces" />
<button id="piece_minus">-</button>
</span>
<input type="submit" value="Add to cart" />
</div>
Here's my fiddle: http://jsfiddle.net/86sZ7/
It looks nice in Chrome, but in Firefox the bottom border of the text imput field is missing a piece. If I set overflow: hidden to the span then it looks OK, but the submit button is shifted down.
I want to make it look the same in Chrome and Firefox. Plus: it would be nice to have the submit button align with the other inputs too, because now it's a little off.
I'm trying to remove the margin between the search bar and the "Go!" button at the top of this page: http://beta.linksku.com/
I've tried removing all styles and adding margin:0;padding:0;border:none;, but there is still a margin between the two elements. I cannot replicate this problem on JSFiddle, but it occurs in all browsers on my website.
This is how elements function as inline-block.
Normally when you use inline-block elements, you often use them inside a paragraph, so the space between the letters must be consistent. inline-block elements apply to this rule too.
If you want to remove the space completely, you can float the elements.
float: left;
You can also remove the whitespace from your template document. Like so:
<input type="text" name="s" tabindex="2" /><input type="submit" value="Go!" class="btn" />
The space you're seeing is the default padding applied to inline elements. Simplest hack? Set font-size: 0 on the form, then reset the actual font-size on the input and button.
Magic.
form {
font-size: 0;
}
form input {
font-size: 12px;
Why does this occur? The browser interprets the whitespace between the inputs as a textual space, and renders accordingly. You can also smush all your elements together on one line, but that's ugly code soup.
That whitespace is relative to your font-size. You can remove it by adding font-size:0 on the container of your inputs, in this case a form, like so:
form {
font-size: 0;
}
Using chrome on the Mac, I can get rid of the space if I edit the form node as HTML in the Developer tools, and remove the space between the two closing tags so:
<form id="search" method="get" action="http://beta.linksku.com/">
<input type="text" name="s" tabindex="2">
<input type="submit" value="Go!" class="btn">
</form>
becomes:
<form id="search" method="get" action="http://beta.linksku.com/">
<input type="text" name="s" tabindex="2"><input type="submit" value="Go!" class="btn">
</form>
One way is to remove space, but if you're not willing to have an unreadable one-line mess, you can use HTML comment:
<form id="search" method="get" action="http://beta.linksku.com/">
<input type="text" name="s" tabindex="2"><!--
!--><input type="submit" value="Go!" class="btn">
</form>
My navbar doesn't line up in IE... how can I fix this without using Javascript...
http://opentech.durhamcollege.ca/~intn2201/brittains/labs/index2.php
Also it has to be able to work on all resolutions.
And it has to validate in strict.
You don't need to put absolute position to every single button, just position:aboslute to the parent element (navbar) and for the forms (no need of a separate style for every form) just put float:left
Put all the buttons inside a div, instead of using position relative on each button.
Then each button should be next to each other.
Put all the buttons inside one div.
You have:
<div id="navbar">
<form class="navbarForm1" method="get" action="index2.php">
<div><input type="submit" value="Home" /></div>
</form>
Remove the nested divs. And also you're missing a closing div after your last form close.
<div id="navbar">
<form class="navbarForm1" method="get" action="index2.php">
<input type="submit" value="Home" />
</form>
<form class="navbarForm2" method="get" action="lab1noscript.php">
<input type="submit" value="Lab1" />
</form>
</div>
This question already has answers here:
Multiple submit buttons in an HTML form
(27 answers)
Closed 3 years ago.
I have a form that has three submit buttons as follows:
<input type="submit" name="COMMAND" value="‹ Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset" name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next ›">
<input type="button" name="NOTHING" value="Skip ›" onclick="location = 'yada-yada.asp';">
The row of buttons is a mix of submit, reset and JavaScript buttons. The order of buttons is subject to change, but in any case the save button remains between prev and next buttons.
The problem here is that when a user hits Enter to submit the form, the post variable "COMMAND" contains "Prev"; normal, as this is the first submit button on the form. I however want the "Next" button to be triggered when the user submits the form via the Enter button. It is kind of like setting it as the default submit button, even though there are other buttons before it.
The first button is always the default; it can't be changed. Whilst you can try to fix it up with JavaScript, the form will behave unexpectedly in a browser without scripting, and there are some usability/accessibility corner cases to think about. For example, the code linked to by Zoran will accidentally submit the form on Enter press in a <input type="button">, which wouldn't normally happen, and won't catch IE's behaviour of submitting the form for Enter press on other non-field content in the form. So if you click on some text in a <p> in the form with that script and press Enter, the wrong button will be submitted... especially dangerous if, as given in that example, the real default button is ‘Delete’!
My advice would be to forget about using scripting hacks to reassign defaultness. Go with the flow of the browser and just put the default button first. If you can't hack the layout to give you the on-screen order you want, then you can do it by having a dummy invisible button first in the source, with the same name/value as the button you want to be default:
<input type="submit" class="defaultsink" name="COMMAND" value="Save" />
.defaultsink {
position: absolute; left: -100%;
}
(note: positioning is used to push the button off-screen because display: none and visibility: hidden have browser-variable side-effects on whether the button is taken as default and whether it's submitted.)
My suggestion is don't fight this behaviour. You can effectively alter the order using floats. For example:
<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>
with:
#buttons { overflow: hidden; }
#buttons input { float: right; }
will effectively reverse the order and thus the "Next" button will be the value triggered by hitting enter.
This kind of technique will cover many circumstances without having to resort to more hacky JavaScript methods.
Set type=submit to the button you'd like to be default and type=button to other buttons. Now in the form below you can hit Enter in any input fields, and the Render button will work (despite the fact it is the second button in the form).
Example:
<button id='close_button' class='btn btn-success'
type=button>
<span class='glyphicon glyphicon-edit'> </span> Edit program
</button>
<button id='render_button' class='btn btn-primary'
type=submit> <!-- Here we use SUBMIT, not BUTTON -->
<span class='glyphicon glyphicon-send'> </span> Render
</button>
Tested in FF24 and Chrome 35.
Quick'n'dirty you could create an hidden duplicate of the submit-button, which should be used, when pressing enter.
Example CSS
input.hidden {
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
outline: none;
border: 0px;
}
Example HTML
<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />
If someone now hits enter in your form, the (hidden) next-button will be used as submitter.
Tested on IE9, Firefox, Chrome and Opera
If you're using jQuery, this solution from a comment made here is pretty slick:
$(function(){
$('form').each(function () {
var thisform = $(this);
thisform.prepend(thisform.find('button.default').clone().css({
position: 'absolute',
left: '-999px',
top: '-999px',
height: 0,
width: 0
}));
});
});
Just add class="default" to the button you want to be the default. It puts a hidden copy of that button right at the beginning of the form.
I'm resurrecting this because I was researching a non-JavaScript way to do this. I wasn't into the key handlers, and the CSS positioning stuff was causing tab ordering to break since CSS repositioning doesn't change tab order.
My solution is based on the response at https://stackoverflow.com/a/9491141.
The solution source is below. tabindex is used to correct tab behaviour of the hidden button, as well as aria-hidden to avoid having the button read out by screen readers / identified by assistive devices.
<form method="post" action="">
<button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button>
<div class="form-group">
<label for="test-input">Focus into this input: </label>
<input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" />
</div>
1st button in DOM
2nd button in DOM
3rd button in DOM
Essential CSS for this solution:
.default-button-handler {
width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
}
Another solution, using jQuery:
$(document).ready(function() {
$("input").keypress(function(e) {
if (e.which == 13) {
$('#submit').click();
return false;
}
return true;
});
});
This should work on the following forms, making "Update" the default action:
<form name="f" method="post" action="/action">
<input type="text" name="text1" />
<input type="submit" name="button2" value="Delete" />
<input type="submit" name="button1" id="submit" value="Update" />
</form>
As well as:
<form name="f" method="post" action="/action">
<input type="text" name="text1" />
<button type="submit" name="button2">Delete</button>
<button type="submit" name="button1" id="submit">Update</button>
</form>
This traps the Enter key only when an input field on the form has focus.
You should not be using buttons of the same name. It's bad semantics. Instead, you should modify your backend to look for different name values being set:
<input type="submit" name="COMMAND_PREV" value="‹ Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset" name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next ›">
<input type="button" name="NOTHING" value="Skip ›" onclick="window.location = 'yada-yada.asp';">
Since I don't know what language you are using on the backend, I'll give you some pseudocode:
if (input name COMMAND_PREV is set) {
} else if (input name COMMAND_SAVE is set) {
} else if (input name COMMENT_NEXT is set) {
}
bobince's solution has the downside of creating a button which can be Tab-d over, but otherwise unusable. This can create confusion for keyboard users.
A different solution is to use the little-known form attribute:
<form>
<input name="data" value="Form data here">
<input type="submit" name="do-secondary-action" form="form2" value="Do secondary action">
<input type="submit" name="submit" value="Submit">
</form>
<form id="form2"></form>
This is standard HTML, however unfortunately not supported in Internet Explorer.