I’ve been trying to get search results to open in a new window for hours now, but no luck. What am I doing wrong?
<form id="tfnewsearch" method="get" action="http://www.maps.google.com" target="_blank">
<input type="text" class="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" value="search" class="tfbutton">
</form>
Edit: Adding the CSS here
#tfnewsearch{
float:right;
padding:20px;
}
.tftextinput{
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
}
.tfbutton {
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
}
.tfbutton:hover {
text-decoration: none;
}
/* Fixes submit button height problem in Firefox */
.tfbutton::-moz-focus-inner {
border: 0;
}
Anybody that sees what's wrong?
you are doing it right. I've copied and pasted your code and test it and it works fine, check your css clases, or that your are not missing any label to be closed
Related
I have an issue where the cursor/blinker is right in the top left of the textarea with no margin or whatsoever. I don't know what could be causing this, the other inputs are working fine. Here is a screen shot:
I also wanna know how to change that black border color? I would like the border to stay the same when I click on it. I tried using textarea:focus to get rid of it but it's not working.
Lastly I wanna get rid of this whitish background when a form gets auto-completed, I haven't figured out how to get rid:
HTML:
<form class="form appear appear-hidden" method="post">
<h1>Contact Me</h1>
<div class="name-section">
<input type="name" placeholder="Name" required />
<input type="surname" placeholder="Surname" required />
</div>
<input type="email" placeholder="Email" required />
<textarea
class="message"
type="message"
placeholder="Message"
row="4"
required
></textarea>
<input class="submit" type="submit" placeholder="submit" />
</form>
CSS:
.name-section input {
width: 48%;
margin: 5px;
border: 2px solid white;
padding: 10px;
background-color: transparent;
font-weight: 600;
}
form input {
width: 98%;
margin: 5px;
border: 2px solid white;
padding: 10px;
/* background-color: #000; */
background-color: transparent;
font-weight: 600;
color: white;
font-family: 'Poppins', sans-serif;
}
input::placeholder {
font-family: 'Poppins', sans-serif;
color: white;
font-weight: 600;
}
input:focus {
border: 1px solid white;
}
textarea {
min-height: 100px;
background-color: transparent;
color: white;
font-family: 'Poppins', sans-serif;
width: 98%;
margin: 5px;
border: 2px solid white;
resize: none;
font-weight: 600;
}
textarea::placeholder {
color: white;
padding: 10px;
margin: 10px;
font-weight: 600;
}
Thanks in advance for the help.
You have no padding in your Textaria, try this: remove padding from textarea::placeholder and add padding to .message :
textarea::placeholder {
margin: 10px;
font-weight: 600;
}
.message{
padding:10px;
}
To remove the "black-border-color:
input:focus{
outline:solid 3px blue;
}
I didn't understand what you mean by this: "Lastly I wanna get rid of this whitish background when a form gets auto-completed, I haven't figured out how to get rid:"
I'm building a simple Web UI for an embedded system.
I have a couple of buttons to upload a file to the server, the code of the buttons is the following
.button {
background-color: #009999;
border: 0.5px solid #F0F0F0;
border-radius: 0px;
color: white;
display: inline-block;
font-family: Open Sans, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
width: 100%;
padding: 4px 4px;
text-decoration: none;
text-shadow: 0px 1px 0px #197276;
text-align: left;
}
<td style="width: 20%; vertical-align:top; background-color:#FFFFFF;">
<form action="cgi-bin/upload.cgi" method="post" enctype="multipart/form-data">
<input class="button" type="file" name="file">
<input class="button" type="submit" name="Submit" value="Upload">
</form>
</td>
The problem that I noticed is that the file buttons is always slightly bigger than the submit button.
Is there a way to align them? What am I doing wrong?
Thanks!
EDIT:
After trying Yasaman Mansouri (thanks) suggestion (overflow: hidden) i get the follwing output (on the right).
It's much better but still not aligned with the other button.
you can hide your form overflow
.button {
background-color:#009999;
border:0.5px solid #F0F0F0;
border-radius:0px;
color:white;
display:inline-block;
font-family:Open Sans, Helvetica, Arial;
font-size:14px;
font-weight:bold;
width:100%;
padding:4px 4px;
text-decoration:none;
text-shadow:0px 1px 0px #197276;
text-align:left;
}
form{
width: 200px;
overflow: hidden;
}
<td style="width: 20%; vertical-align:top; background-color:#FFFFFF;">
<form action="cgi-bin/upload.cgi" method="post" enctype="multipart/form-data">
<input class="button" type="file" name="file" >
<input class="button" type="submit" name="Submit" value="Upload">
</p>
</form>
</td>
We got it answered on Reddit, by adding "box-sizing:border-box;" to the button css
the alignment is OK.
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
.button {
background-color: #009999;
border: 0.5px solid #F0F0F0;
border-radius: 0px;
box-sizing:border-box;
color: white;
display: inline-block;
font-family: Open Sans, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
width: 100%;
padding: 4px 4px;
text-decoration: none;
text-shadow: 0px 1px 0px #197276;
text-align: left;
}
Thanks!
I'm looking to make an offline search page powered by Google. I am having a little trouble with the search button though, it just seems to do whatever it wants. I want it to be relative above the textarea on the left. I would like for it to stay in that corner of the textarea even when the textarea is expanded. (This webpage is not designed for multi-browser supported it is, designed for Firefox only.)
<style>
body{
background: url(bg.jpg);
background-size: cover;}
textarea{
display: block;
margin-left: auto;
margin-right: auto;
background-color: black;
border-radius: 12px;
color: #ffffff;
font-family:"Courier New", Courier, monospace;
font-size: 16px;
text-decoration: none;
cursor: poiner;
border: none;}
button{
background-color: #000000;
border-radius: 12px;
font-family: "Times New Roman", Times, serif;
font-size: 24px;
text-decoration: none;
cursor: poiner;
border: none;}
button:hover{
border: none;
background: #5B93F5;}
footer{
position: absolute;
bottom: 0px;
right: 0px;
text-align: right;
color: #FFFFFF;}
</style>
</head>
<body>
<div id="searchContainer">
<form id="searchForm" name="searchForm" onsubmit="onSearchSubmit(event)">
<button id="searchSubmit" type="submit" value="Search" title="Google Search">
<font color="blue">G</font><font color="red">o</font><font color="yellow">o</font><font color="blue">g</font><font color="green">l</font><font color="red">e</font>
</button>
<textarea id="searchText" type="text" name="q" maxlength="255" rows="3" cols="50" autocomplete="off" autofocus></textarea>
</form>
</div>
<footer>v5.0</footer>
</body>
</html>
Add following in your css code:
#searchContainer { text-align: center; }
#searchContainer > form { display: inline-block; text-align: left; }
it should resolve your issue.
For the code you have, you can add a padding to the container: JS Fiddle
Add this line to your CSS:
#searchContainer{padding: 2em; display: inline-block;}
For a little more style if you want them connected, you can adjust some border-radius' and margins of the button and text area: JS Fiddle 2
I am trying to make this form:
And this is what I get:
(I changed the button color, I know =) )
Here is my HTML:
<form method="post" action="">
<input type="text" id="email" name="email" value="Email" />
<input type="submit" value="Keep me notified" id="submitButton"
</form>
Here is my CSS:
form{
width:350px;
margin: 20px auto;
display:block;
}
input[type=text]{
display:inline-block;
font-family: 'PT Serif Caption', serif;
border:1px solid #CCCBC2;
display:inline;
font-size:14px;
width:300px;
line-height: 16px;
padding: 9px 10px;
height: 18px;
margin:0;
margin-bottom: 5px;
outline: 0;
vertical-align: middle;
width: 269px;
float:left;
-webkit-font-smoothing: antialiased;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
-ms-border-radius:3px;
border-radius:3px;
}
input[type=submit] {
display: inline-block;
background:none;
padding:0 14px;
height: 36px;
margin: 1px 0 0 15px;
text-align: center;
font-size: 15px;
overflow: visible;
color: white;
background-color: #2459a9;
border:none;
font-family: 'PT Serif Caption', serif;
text-transform: lowercase;
text-decoration: none;
cursor: pointer;
-webkit-font-smoothing: antialiased;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
-ms-border-radius:3px;
border-radius:3px;
}
My Q:
How do I get the floats right? Or is it something else?
Can you do it in html5? Cool, show me =)
How do a implement a placeholder in the inputbox
How do I get big letter in the button?
Two things:
The form is too narrow for the total width of the inputs. So for the fiddle you provided, it should be 464px.
Use white-space: nowrap; on the form.
See it at jsFiddle.
Demo
Your form rule makes the form too small, causing the button to wrap on a new line. Try this rule instead:
form {
width: 440px;
margin: 20px auto;
display: block;
}
EDIT:
This should work:
form {
width: 440px;
margin: 20px auto;
display: inline;
}
Demo
I am creating an e-mail form and would like the text box and submit button to be directly next to each other. They should be touching so that it looks like one continuous rectangle.
However, when I get them touching and set a height the submit button doesn't listen! It doesn't stay the same height. If I increase the submit button height alone by a lot the two boxes are not aligned!
HTML:
<div id="form">
<input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
<input type="submit" value="BUTTON" id="btn-submit" />
</div>
CSS:
#form input{
border: solid 2px #989898;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
outline:none;
background: #d8d8d8;
font-weight:bold;
color: #525252;
position: relative;
height: 25px;
}
#address{
text-align: right;
margin: 0 30 0 auto;
}
#btn-submit{
margin-left: -7px;
width: 44px;
text-align: center;
}
The key is to float:left the inputs and then set a height for them. Live example: http://jsfiddle.net/NweS6/
#form input{
border: solid 2px #989898;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
outline: none;
background: #d8d8d8;
font-weight: bold;
text-align: right;
color: #525252;
float: left;
height: 25px;
}
#form #btn-submit{
margin-left: -2px;
width: 44px;
text-align: center;
height: 29px;
}
The reason the submit needs a figure 4px higher than the input is because for some reason it does not take into the account the border on the button, which top and bottom adds up to 4px.
Float the submit button and the layout will look as expected.
http://jsfiddle.net/4HcWy/9/
This is how you write an HTML form:
<form method="POST" action"/page/to_post_to" >
<input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
<input type="submit" value="BUTTON" id="btn-submit" />
</form>
Then the elements inside it know it is a form, not just another div.
EDIT: Sorry I misread your question. I thought listening meant it was behaving wrong instead of displaying wrong.
Did you want it to look like the followin? http://jsfiddle.net/4HcWy/6/
form input
{
border:2px solid #989898;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
outline:none;
background: #d8d8d8;
font-weight:bold;
color: #525252;
position:relative;
height: 25px;
box-sizing: border-box;
}
#address{
text-align:right;
margin:0 30 0 auto;
border-right: none;
}
#btn-submit{
margin-left: -7px;
width:44px;
text-align:center;
border-left: none;
}
(Also, since I had used a form element I had to change #form input to form input.)*
It seems that 2 pixels can't work on the input and button but with 1 pixel borders, it's OK.
Look: http://jsfiddle.net/qwLV7/
Update
This seems to work, but I had to hack the height of the button to be higher than the input,
http://jsfiddle.net/qwLV7/1/
Update 2
How's that now?
http://jsfiddle.net/qwLV7/2/
CSS
#form1
{
border:solid 2px #989898;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
background: #d8d8d8;
font-weight:bold;
color: #525252;
position:relative;
width:194px;
}
input{
height:25px;
border:0px;
}
#address{
text-align:right;
margin:0 30 0 auto;
float:left;
width:150px;
}
#btn-submit{
width:44px;
text-align:center;
float:left;
}
HTML
<div id="form1">
<input type="text" class="text-input" name="address" id="address" value="" size="23" maxlegnth="30" />
<input type="submit" value="BUTTON" id="btn-submit" />
<div style="clear:both"></div>
</div>