why isn't a href around an input type submit not working in IE? (and what can I do to fix it)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>
<input type="submit" class="button_active" value="1">
<input type="submit" class="button" value="2">
<input type="submit" class="button" value="3">
</body>
</html>
style.css:
* {
margin: 0;
padding: 0;
}
/* CSS Buttons: http://www.web4site.de/css/css-buttons.php */
.button {
padding:0;
margin:0;
border:none;
font-size:14px;
background: url(../img/button.gif) no-repeat center;
color: #000000;
height:27px;
width:134px;
font-variant:small-caps;
}
.button:hover {
padding:0;
margin:0;
border:none;
font-size:14px;
background: url(../img/button.gif) no-repeat center;
color: #FF0000;
height:27px;
width:134px;
text-decoration:none;
font-variant:small-caps;
}
.button_active {
padding:0;
margin:0;
border:none;
font-size:14px;
background: url(../img/button.gif) no-repeat center;
color: #FF0000;
height:27px;
width:134px;
font-variant:small-caps;
}
This works fine in firefox ...
Why would you want to put a submit button inside an anchor? You are either trying to submit a form or go to a different page. Which one is it?
Either submit the form:
<input type="submit" class="button_active" value="1" />
Or go to another page:
<input type="button" class="button_active" onclick="location.href='1.html';" />
It doesn't work because it doesn't make sense (so little sense that HTML 5 explicitly forbids it).
To fix it, decide if you want a link or a submit button and use whichever one you actually want (Hint: You don't have a form, so a submit button is nonsense).
<input type="text" class="button_active" value="1">
<input type="text" class="button" value="2">
<input type="text" class="button" value="3">
Try that. Unless you truly need to stick with the type as submit, then what I provided should work. If you are going to stick with submit, then everything mentioned above is correct, it makes no sense.
Place the link location in the action="" of a wrapping form tag.
Your first link would be:
<form action="1.html">
<input type="submit" class="button_active" value="1">
</form>
I agree with Quentin. It doesn't make sense as to why you want to do it like that. It's part of the Semantic Web concept. You have to plan out the objects of your web site for future integration/expansion. Another web app or web site cannot interact with your content if it doesn't follow the proper use-case.
IE and Firefox are two different beasts. There are a lot of things that IE allows that Firefox and other standards-aware browsers reject.
If you're trying to create buttons without actually submitting data then use a combination of DIV/CSS.
You can do do it. The input type submit should be inside of a form. Then all you have to do is write the link you want to redirect to inside the action attribute that is inside the form tag.
Related
I'm currently working on a RoR website. I have a search bar wherein the user can input--however, the suggestions in the searchbar seem to come from recent searches based on internet history. Is there a way to style the search suggestions? I want the background of the search suggestions to be transparent. However I cannot seem to access the dropdown through css. Here's my HTML:
<form action="/search">
<input name="search_query" class="lanSearch" placeholder="" size="14" autofocus="autofocus"><br>
<input type="submit" value="Submit" class="hide"/>
</form>
Here's my css:
.lanSearch{
background-color: transparent;
font-size: 5vw;
color:white;
border:0;
border-bottom:solid 3px white;
margin-top: 2vh;
}
You cannot style the internal autocomplete, but you can create an entirely custom search suggestions / autocomplete handling with the help of some CSS and JS and disable the internal one with:
<input type="text" name="foo" autocomplete="off">
I have a form whose submit input button has a background-image and is shifted left over the top of the input field:
This works in all current browsers. My problem is that it also needs to work in IE8 on Windows XP (!), and it doesn't. When you hover over the input (the magnifying glass), the pointer does not change, and the button is not clickable. Any ideas where I'm going wrong please?
HTML:
<form id="" action="" method="post">
<label for="search">Search</label>
<input type="text" id="search" name="search" value="" />
<input type="submit" name="searchsub" class="searchsub" value="" />
</form>
CSS:
#search {
width:222px;
height:36px;
padding-left:223px;
padding-right:10px;
float:left;
}
input.searchsub {
width:23px;
height:23px;
float:left;
background-image:url(../images/magnifier.jpg);
margin:8px 0 0 -32px;
border:0;
cursor:pointer;
}
This is a start: (demo: http://jsfiddle.net/KYL3A/)
I removed your floats and added a div as a "border wrapper". I think this will make IE8 play :) though I couldn't test it myself as I don't have IE8
<form id="" action="" method="post">
<div id="searchwrap">
<label for="search">Search</label>
<input type="text" id="search" name="search" value="" />
<input type="submit" name="searchsub" class="searchsub" value="" />
</div>
</form>
CSS
#searchwrap {
display: inline-block;
border: 1px solid #333;
padding: 0 10px;
}
#search {
width:150px;
height:36px;
border:0;
}
input.searchsub {
width:23px;
height:23px;
background:red url(); // added red as i dont have your image
margin:8px 0 0 0px;
cursor:pointer;
}
If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the and tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
Therefore this would not work in the web browser you are saying (IE + XP) because that browser does not support it. There is no problem in your code. So i would say that just leave it like this, because there would not be many users of your website who are running Internet Explorer on XP but if there are many then you may want to put some text in there.
Source:
The first answer on this page and this source
I have a contact form that was pieced together. The form works exactly the way I need it after much struggling, but doesn't look right.
The first two fields for the phone number have a different appearance then then others.
How can I get the first two to look like the other 3?
*yes im sure there is lots of errors in this code as im learning, but currently it is working. Ill go back after reading/learning more to correct issue(hopefully).
How can I make first two look the same?
Thanks
<div style="background-color: #ff69b4;"margin: -5px 12px 0px 10px"><div style="margin-left:10px; margin-right: 10px;">
<center><br><br><div id="contentinner">
<div class="content">
<div class="form">
<form id="form1" method="post" action="form-process.php" onsubmit="return checkSelection('form1');">
<input type="hidden" name="thank_you_url" value="./thank you" />
<input type="hidden" name="error_url" value="./contact-us.php" />
<input type="hidden" name="subject" value="Contact from Website" />
<div style="width:50%">
<!-- Start Form Fields -->
phone number<br>
<input name="phone" required="required" type="phone" id="phone" />
<br>confirm phone
<br>
<input name="phone_confirm" required="required" type="phone" id="phone_confirm" oninput="check(this)" />
<script language='javascript' type='text/javascript'>
function check(input) {
if (input.value != document.getElementById('phone').value) {
input.setCustomValidity('Phone Number Must be Matching.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
<br>
<form action="demo_form.asp">
name<input type="text" name="name" required>
email<input type="email" name="email" required>
<label>more information<?php form_error('Comments');?></label>
<textarea name="Comments" cols="" rows="" class="textarea" required></textarea>
<!-- End Form Fields -->
<input type="submit" class="button" value="Submit" />
</div>
</div>
</div>
<script type="text/javascript">
<!--
function checkSelection(whichform) {
if(document.forms[whichform].required.value) {
var required = document.forms[whichform].required.value.split(','), errors = false;
for(var i = 0; i < required.length; i++) {
if(document.forms[whichform][required[i]].value == "") {
errors = true;
}
}
if (errors) {
alert ('Whoops! You must fill in all required fields before you can continue.');
return false;
}
else {
return true;
}
}
}
//-->
</script>
</form>
</div></div>
</center>
#wrapper {
background-color: #ff69b4;
width:600px;
height:400px;
}
.outer {
margin-left:10px;
margin-right: 10px;
width:300px;
margin:auto;
background-color:grey;
height:350px;
}
input
{
width:150px;
height:20px;
}
textarea
{
width:150px;
}
fiddle
Dont ever use the <Center > tag..!
This feature has been removed from the Web. Though some browsers may
still support it, it is in the process of being dropped. Do not use it
in old or new projects. Pages or Web apps using it may break at any
time.
To give effects to phone text box add class to the input text box and add css to the class
HtMl
<input class="phones" name="phone" required="required"
type="phone" id="phone" />
<br>
confirm phone
<br>
<input class="phones" name="phone_confirm" required="required"
type="phone" id="phone_confirm" oninput="check(this)" />
Css
.phones
{
background-color:#003366;
color:white;
}
Demo
Updated fiddle
You'll first need to remove the quote between your background color and margin in the uppermost style.
I think its because you've placed the second form in the div with a 50% width. Its being centered because it has <center> as a parent element. The center is deprecated in HTML5. This should be done up in CSS. See here for details.
For your code, try using either Brackets or Sublime Text. I use Brackets for work.
Also, you don't need to declare type="text/javascript" anymore. You can remove that for cleaner code.
For learning how to do front-end, this is a great try. When you feel you're beginning to understand, check out Twitter Bootstrap.
Here's my go at cleaning up your code. Notice the one warning it has given you in the JavaScript. http://jsbin.com/hijec/1/edit
I guess you are talking about the line breaks... just remove them! http://jsfiddle.net/L92dp/1/
confirm phone
<br> <!-- remove this -->
You should have a look at a CSS framework like bootstrap or foundation, it will help you write beautiful forms easily.
I think your both input field look alike same .it depends on what style using from imported Css file.First Check in your Css file there should be same type of style for fields
if style written on the basis for ID then
id="phone" & id="phone_confirm" have same style
or
on the basis of name both phone and phone_confirm should be same.
.content { /*color: #fff;*/ }
and / or
.form { /*color: #fff;*/ }
and / or
#form1 { /*color: #fff;*/ }
and / or
input { /*color: #fff;*/ }
and cool link
http://css-tricks.com/styling-texty-inputs-only/
It could also be easier to read if you removed your inline and unnecessary nested divs etc:
<div style="background-color: #ff69b4;"margin: -5px 12px 0px 10px"><div style="margin-left:10px; margin-right: 10px;">
to
.pickaclassname {
background-color: #ff69b4;
margin: -5px 12px 0px 10px;
margin-left:10px;
margin-right: 10px;
}
Try using comments to help organize your code to compare and contrast with the forms.
<!-- my awesome form 1 -->
(all the form code)
<!-- // end form 1 -->
<!-- my awesome form 2 -->
(all the form code)
<!-- // end form 2 -->
It is possible to use a HTML anchor link...
link
...to produce a GET request to foo with query params bar=baz.
Is it also possible to write the anchor link in such a way that it produces a POST request to foo with the params bar=baz encoded in the HTTP request body (like a form with method POST does) ?
No
Alternatives: You can modify the request made by the anchor tag using javascript,
or
use a form, and emulate a anchor by styling the submit button to look like a link
In the html file the anchor file doesn't support the POST values.
You can get the post values for html file only through the form tag.
<form action="test.php" method="post" >
<input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
You can create a hidden form with the values you want to submit; and you link can trigger the submit() action on that form. This is easily done with jquery (or your favorite javascript library).
This is untested, but something like this should do it:
<form method="POST" id="the_form" action="foo/">
<input type="hidden" name="bar" value="baz" />
</form>
Send values
<script type="text/javascript">
$('#submit_link').click($('#the_form').submit());
</script>
As Matt Ball commented, you can accomplish this with a form and no JS:
<form method="post" action="YOUR_ACTION">
<input type="hidden" name="foo" value="bar" />
<input type="submit" value="link" class="submitLink" />
</form>
and then style the submit to look like a regular link:
<style type="text/css">
input.submitLink {
background: none;
border: medium none;
color: blue;
cursor: pointer;
margin: 0;
padding: 0;
text-decoration: underline;
}
</style>
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.