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
Related
As you can see in the picture above, the placeholder text of the search bar is a bit to the middle, how do move it to the left side?
The HTML code for this part is
<form class="navbar-form" action="/action_page.php">
<input type="text" class="form-control" placeholder="Search" name="search">
<input class="search-icon" type="image" src="Assets/search.svg" alt="Submit" width="20px" height="20px">
</form>
.form-control {
padding: 20px 60px;
}
^CSS
It is happening because of padding within the input field. Try this:
input[type="text"]{
padding-left:5px;
}
UPDATE: After you have updated your question. Below code will also work fine. But above CSS is a generic one.
.form-control {
padding: 20px 5px;
}
I am working on a site and have a Google CSE input that works fine, except the input field text does not display properly in Firefox. It looks fine in Chrome and Safari. But is absolutely microscopic in FF. The input field is in the upper right corner of the page.
Here is the code:
<form action="http://dev.rouviere.com/search-results/" id="cse-search-box">
<div>
<label for="q">search</label>
<input type="hidden" name="cx" value="017425724926122041548:nrhzbynfo9u" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="q" autocomplete="on" size="31" style="font-size: 13px; color:#797979;" />
</div>
</form>
Here is the CSS:
form input#q {
height: 20px !important;
font-size: 13px !important;
color: #797979;
float: right;
margin-top: 5px;
}
Note on the inline styling. Because Google applies some styling and my css styling was not having effect, I added the inline styling as well.
It's not rendering microscopic, it's being hidden by your padding/input height.
If you change the following rules it should work:
input#q {
height: 25px !important;
...
}
form input {
padding: 5px 2% !important;
...
}
Although I would suggest restructuring your css to avoid having to use !important everywhere and being more specific about what you're trying to select in your rules.
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 -->
ere is my code (including css):
<form id="contactform" action="#" method="post">
<label for="name">Name</label>
<input type="text" class="fieldbox" name="name" id="name" value=""/>
<label for="email">Email</label>
<input type="text" class="fieldbox" name="email" id="email" value=""/>
<label for="msg">Message</label>
<textarea class="area fieldbox" id="msg" name="msg" rows="8" cols="20"></textarea>
<input type="submit" value="Send Message" id="sendbutton" name="sendbutton"/>
</form>
#sendbutton {
background:top left no-repeat url(../images/send-button.jpg);
color:#000;
font-family: Arial, sans-serif;
font-size:14px;
text-transform:uppercase;
padding:14px 57px 14px 13px;
float:right;
margin:10px 5px 0 0;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;}
I have tested this code in Firefox, IE, and Chrome. Firefox and IE display the submit button as intended. Although Chrome displays the button, I cannot click it. It appears only as text. How can I fix this?
Note: Sorry for the poor code formatting. I am new here and I couldn't figure out how to format the code properly.
Update: I have identified the problem and fixed it. Changed from float:right; to position:relative and that did the trick.
I couldn't see any issue. I added one line of php code in front of your code, and I was able to see all what I entered on the trip back:
<?php
echo var_export($_POST);
?>
I ran it through Chrome... works fine
I ran it through IE... works fine
Is there something on your machine that is preventing the button from being displayed?
Chrome 52.0.274 was showing my as an input text box instead of a submit button until I modified the "DOCTYPE" from HTML 4 version (DTD...) to HTML 5 version . Hope that helps.
Add a name attribute to the Form tag, it tells the browser how to communicate the form to the server?
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.