Hi I would like the form width to be 100%. I would like the text box to extend almost the entire width of the page, and have the small "GO" button directly to the right of the text box, all on the same line (or block).
Right now my text box is only about the width of the text within it ("Enter an address here") Thank you!
CSS
#search1{
height: 25px;
padding:5px;
padding-left:11px;
display:inline-block;
background-color:#62564A;
width:100%;
}
HTML
<div id="search1">
<form style="margin: 0px; padding: 0px;" name="search_form" action="view" method="get" onsubmit="codeAddress(); return false">
<input id="address" style="color:#333" value="Enter an address here" onfocus="if(this.value==this.defaultValue) this.value='';"/>
<input type="button" value="GO" onclick="codeAddress()"/>
</form>
</div>
By default the form with is 100% if you do not change it. If you want the input field to be longer you can use the size attribute.
<input id="address" size="90" style="color:#333" value="Enter an address here" onfocus="if(this.value==this.defaultValue) this.value='';"/>
FIDDLE
Or you can achieve it through CSS by adding this:
#address{
width:80%;
}
css:
#search1{
height: 25px;
padding:5px;
padding-left:11px;
display:inline-block;
background-color:#62564A;
width:100%;
}
#search1 button {width:10%;}
#search1 input#address {width:85%;margin-left:5%;}
HTML
<div id="search1">
<form style="margin: 0px; padding: 0px;" name="search_form" action="view" method="get" onsubmit="codeAddress(); return false">
<input id="address" style="color:#333" value="Enter an address here" onfocus="if(this.value==this.defaultValue) this.value='';"/>
<button type="button" onclick="codeAddress()"> GO </button>
</form>
</div>
You could also do this with a bit of Jquery
CSS:
#search1{
height: 25px;
padding:5px;
padding-left:11px;
display:inline-block;
background-color:#62564A;
width:99%;
}
input {
display: inline-block;
}
Jquery:
$(document).ready(function () {
var $ww = $(window).width();
var $input = $('input#address');
$input.width($ww - 90);
$(window).resize(function() {
$input.width($(window).width() - 90);
});
});
I have kept the HTML the same.
include the Jquery library in your <head> tag with <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
You may need to tweek the - 90 to a lower or higher value depending on where you place the form.
Here is a link to the working example.
Related
this is my first topic here, I've already tried some solutions for my scenario but withou success, so I think I could use some help:
I'm working in a existing html page and I'm intern, so I need to change without modifying anything else (or at least the minimum).
So here's my problem:
<form action="">
<center>
<div class="example-class">
<input type="text" id="example3" name="fname" value="John"><br>
<input type="text" id="example2" name="lname" value="Doe"><br>
<input type="text" id="example2" name="lname" value="Example"><span>myText</span><br>
<input type="submit" value="Submit">
</div>
</center>
</form>
In the code above the elements are showed centered.
I want to add some text, like "myText" of span tag, when I click the button in the right side of an input element , but when I try to do this, the input element loses the "align" of others inputs (it comes left). So how can I add this "span text" but keep the input elements aligned?
I need to avoid changing the others elements css.
Im attaching an example code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#button").click(function(){
$("#myText").show();
return false;
})
});
</script>
</head>
<body>
<style>
input{
width: 92%;
text-align: center;
align: left;
align-items: start;
}
.example-class{
width: 400px;
height:300px;
padding:5%;
}
.myText{
display:none;
}
</style>
<h2>Example</h2>
<form action="">
<center>
<div class="example-class">
<input type="text" id="example3" name="fname" value="John"><br>
<input type="text" id="example2" name="lname" value="Doe"><br>
<input type="text" id="example2" name="lname" value="Example"><span class="myText" id="myText">!!!</span><br>
<button id="button">Show element</button>
<input type="submit" value="Submit">
</div>
</center>
</form>
</body>
</html>
So you basically want to add myText next to the value of the input?
Like in your example, it would become "Example !!!" in the input box.
In that case just use javascript. Get the current input value and append myText to it.
$(document).ready(function() {
$("#button").click(function(){
let myText = '!!!'
let currentValue = $("#example2").val();
$("#example2").val(currentValue + ' ' + myText)
return false;
})
});
// EDIT (I understand more clearly what you want after your comment)
You could play around with position: relative and position: absolute in your css.
.example-class{
position:relative; // add this
width: 400px;
height:300px;
padding:5%;
}
.myText{
display:none;
position:absolute; // add this
right: 80px; // play with this one.
}
Normally that should do the trick.
Set position absolute to your span
$(document).ready(function() {
$("#button").click(function() {
$("#myText").show();
return false;
})
});
input {
width: 92%;
text-align: center;
align: left;
align-items: start;
}
.example-class {
width: 400px;
height: 300px;
padding: 5%;
}
.myText {
display: none;
position: absolute; /*<-- the change */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h2>Example</h2>
<form action="">
<center>
<div class="example-class">
<input type="text" id="example3" name="fname" value="John"><br>
<input type="text" id="example2" name="lname" value="Doe"><br>
<input type="text" id="example2" name="lname" value="Example"><span class="myText" id="myText">!!!</span><br>
<button id="button">Show element</button>
<input type="submit" value="Submit">
</div>
</center>
</form>
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 have successfully changed the width and height of input file tag by using different instructions available online. But when I display text on my button the <input type="file"> does not remain click-able.
This is my HTML code
<button id="fileInput">
<label><strong>Browse</strong></label>
<input type="file" value="Browse"/>
</button>
This is my CSS
#fileInput{
z-index: 9;
width: 250px;
height:40px;
overflow: hidden;
padding:0px;
margin-left:10px;
margin-top:0px;
}
#fileInput input{
margin:0px;
height:50px;
opacity:0;
z-index: 99;
width:350px;
}
#fileInput label strong{
z-index:100;
font-size:30px;
}
The button is clicked but the <input type="file"> is not clicked.
You tried to put file input into button but I think it doesn't work. So, you can change the view of input instead of adding button, like accepted answer here: How to customize <input type="file">?
Or you can do something ,which I advise , like that:
HTML
<
button id="fileInput"><label><strong>Browse</strong></label> </button>
<input type="file" id="input" style="display:none;"/>
JQUERY
<script>
$(document).ready( function() {
$('#fileInput').click(function(){
$("#input").click();
});
});
</script>
It is changed form of second answer of the question that I gave above.
The HTML
<form id="test_form">
<input type="file" id="test">
<button>Browse</button>
</form>
The CSS
input{position:absolute; top:-100px;}
The JQuery
$("button").click(function() {
$("#test").click();
})
$('#test').change(function() {
$('#test_form').submit();
});
JSFiddle: http://jsfiddle.net/yboss/WxYLA/1/
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 -->
The form and button are on the left hand side of the screen, how do I get them in the center?
If I don't include "display: inline;" the form is centered in the middle of the page but as soon as I include it the form is on the left hand side of the screen.
HTML
<div class="rounded">
<FORM name="myForm" method="POST" action=""; onsubmit="validate();">
<input type="text" value="Start time">
<input type="submit" value="Save">
</form>
<button type="submit" onclick="validate1();" >Cancel</button>
</div>
CSS
rounded{
text-align:center;
align:center;
}
form {
margin:0 auto;
text-align:center;
align:center;
display: inline;
}
Check with this fiddle and css.
.rounded{
text-align:center;
}
form {
margin:0 auto;
text-align:center;
display: inline-block;
}
You also need to keep button within form
<div class="rounded">
<FORM name="myForm" method="POST" action=""; onsubmit="validate();">
<input type="text" value="Start time">
<input type="submit" value="Save">
<button type="submit" onclick="validate1();" >Cancel</button>
</form>
</div>
rounded matches <rounded> elements, but your container is a <div> with class="rounded".
Use .rounded to match elements that are members of the rounded class.
Try adding a width and margin to the css of the rounded box like this:
.rounded {
width: auto;
margin: 0 auto;
text-align: center;
/* align: center; - Remove this */
}
This worked on my test of your code.
Try
.rounded
{
text-align:center;
align:center;
}