I am designing HTML form, but I am facing two problems.
The first problem is that when I click inside the text field, the value text does not disappear.
The second thing is that I want to display the form in the bottom left corner of the screen, like you were sitting infront of a computer, and dragged the mouse down to the bottom left corner of the screen (with your right hand).
The link for the form is given
Code for the form:
<!DOCTYPE HTML>
<html>
<head>
<title>Facebook Add PHP Example</title>
<style type="text/css">
#formwrapper{
width:340px;
border:0;
background-color:#dce37f;
margin: 70px auto;
padding: 20px 0;
display:block;
}
#headdiv{
width:340px;
border:0;
margin: 10px 10px 10px 18.5px;
}
form {
display:block;
width:340px;
margin: 0 auto;
}
.text{
width: 275px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 18.5px;
}
.text:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.fname{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 18.5px;
}
.fname:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.lname{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 1px;
}
.lname:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.gatadress{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 18.5px;
}
.gatadress:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.postnr{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 1px;
}
.postnr:focus{
outline: none;
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
#Jag{
display: inline;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 22px;
}
.label{
padding:0px;
margin: 10px 10px 10px 0px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="formwrapper">
<div id="headdiv">
<img src="original_hembakat_besta_ll.png" />
</div>
<form id="demo-form" parsley-validate>
<input type="email" name="email" value= "E-Post*" parsley-trigger="change" required class="text" /><br/>
<input type="text" name="firstname" value= "Fornamn*" required size="18px" class="fname" />
<input type="text" name="lastname" value= "Efternamn*" required size="18px" class="lname" /><br/>
<input type="text" name="telephone" value= "Telefon*" required size="43px" class="text" /><br/>
<input type="text" name="gatuadress" value= "Gatuadress*" required size="43px" class="gatadress"/>
<input type="text" name="postnr" value= "Postnr*" required size="43px" class="postnr"/><br/>
<input type="text" name="postort" value= "Postort*" required size="43px" class="text" /><br/>
<input type="checkbox" id="Jag" value = "Jag godkänner villkoren" />
<label for = "jaggod" class="label">Jag godkanner villkoren</label><br/>
<input type="submit" value="Send" />
</form>
</div>
</body>
</html>
For placeholders, use placeholders, like:
<input type="text" placeholder="Your name" name="name">
This is considered bad design practice though, since you're making the usability of the form depend on whether there's data in there - if someone puts crap inside it, they have no way to find out what the field was originally for, which is a Bad Idea(tm) from a user experience perspective. Also, placeholders don't work in IE<=9.
You can emulate a simple placeholder with some simple Javascript, like:
<input type="text" value="placeholder" onfocus="undoPlaceholder(this)">
And JS:
function undoPlaceholder(e)
{
if(e.undone) return;
e.undone = true;
e.value = '';
}
The first of the two problems can be solved with the 'placeholder' attribute. Use that instead of 'value':
<input type="text" name="telephone" placeholder="Telefon*" required size="43px" class="text" />
I don't understand what the second problem is.
To make the text actually disappear when you click in the box, and re-appear when you click out, use this:
<input type="text" name="telephone" placeholder="Telefon*" onfocus="this.placeholder = ''" onblur="this.placeholder='Telefon*'" required size="43px" class="text" />
As far as the 2nd question, I too am confused.
fiddle here: http://jsfiddle.net/J6kHa/
For the placing form on the right bottom put this styles for the form wrapper
#formwrapper {
width: 340px;
border: 0;
background-color: #dce37f;
position: absolute;
bottom: 0;
right: 0;
}
Related
I have created the an HTML form and I want to assign the values with CSS to the input fields not by value="Email" I have an ID assigned to each field and I want to use that ID and assign the values to the field.
The cod for the form is given. Please help me in this case, I will be thankful
<!DOCTYPE HTML>
<html>
<head>
<title>Facebook Add PHP Example</title>
<style type="text/css">
#formwrapper{
width:340px;
border:0;
background-color:#dce37f;
margin: 70px auto;
padding: 20px 0;
display:block;
}
form {
display:block;
width:340px;
margin: 0 auto;
}
.text{
width: 275px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 18.5px;
}
.text:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.fname{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 18.5px;
}
.fname:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
.lname{
display: inline;
width: 116px;
border-radius:6px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#fcfcfc;
border:3px solid #cccccc;
box-shadow:0px 0px 3px 1px #cccccc;
outline: none;
padding:10px;
margin: 10px 10px 10px 1px;
}
.lname:focus{
background:#e6edfc;
border:3px solid #deb93e;
box-shadow:0px 0px 3px 1px #cccccc;
}
</style>
<script type="text/javascript">
</script>
</head>
<body class="body">
<div id="mainwrapper">
<div id="formwrapper">
<div id="content_image4" class="ss_box_content ss_image_content">
<img class="no_hotspots" src="original_hembakat_besta_ll.png" />
</div>
<form id="demo-form">
<input type="email" name="email" id="Email" parsley-trigger="change" required class="text" /><br/>
<input type="text" name="firstname" id= "Fornamn" required size="18px" class="fname" />
<input type="text" name="lastname" id= "Efternamn" required size="18px" class="lname" /><br/>
<center><input type="submit" name="submit" value="Send" /></center>
</div>
</form>
</div>
</div>
</body>
</html>
<input placeholder="This grey text will be deleted if the user clicks on the input" />
You can see support here, make it work for IE lte 9 here, and see the spec here.
I found the answer....
Using for labels
#Email:before {
content: "Email address: ";
}
#Fornamn:before {
content: "Email address: ";
}
#Efternamn:before {
content: "Email address: ";
}
for placeholder
::-webkit-input-placeholder::beforeor ::-webkit-input-placeholder::after
Unfortunately to add more placeholder content doesn't work anymore. Think its a new Chrome update.
I have the below form,
I want the green image on the right side of text box instead of getting below the text box.
The image is visible if the field is validated.
My css
<style type="text/css">
.formcontainer{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 4px #ccc;
-webkit-box-shadow: 0 0 4px #ccc;
-moz-box-shadow: 0 0 4px #ccc;
border:1px solid #ccc;
padding:15px;
width: 300px;
margin:0 auto;
}
form {
margin:0 auto;
text-align:left;
width:100%;
background:#fff;
behavior: url(./border-radius.htc);
font-family:Calibri;
height: auto;
}
fieldset.border{
overflow:hidden;
border:1;
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px;
margin:3px 0;
padding:10px;
border:solid 1px #C0C0C0;
}
fieldset.no_border{
overflow:hidden;
border:0;
padding:0 0 10px 0;
margin:0;
}
fieldset.no_border_submit{
overflow:hidden;
border:0;
text-align:center;
margin:3px 0;
}
input.effect {
border:1px solid #ccc;
height: 20px;
padding:3px;
width:70%;
font-size:14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cssSubmitButton {
font-size: 12px;
background: #fff no-repeat 4px 5px;
display: inline-block;
padding: 5px 20px 6px;
color: #333;
border:1px solid #ccc;
text-decoration: none;
font-weight: bold;
line-height: 1.9em;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
position: relative;
cursor: pointer;
outline:none;
}
.cssSubmitButton:visited {}
.cssSubmitButton:hover {
border:1px solid #333;
}
#subscribeForm span{
margin-left: 0px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
display:none;
}
fieldset.border{
overflow:hidden;
border:1;
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px;
margin:3px 0;
padding:10px;
border:solid 1px #C0C0C0;
}
fieldset.no_border{
overflow:hidden;
border:0;
padding:0 0 10px 0;
margin:0;
}
fieldset.no_border_submit{
overflow:hidden;
border:0;
text-align:center;
margin:3px 0;
}
#subscribeForm input.error{
background: #f8dbdb;
border-color: #e77776;
}
#subscribeForm span.error{
color: #e46c6e;
display:block;
}
#success{
display:none;
}
#button{
text-align:center;
}
</style>
my html
<div class="formcontainer">
<form method="post" action="" id="subscribeForm" name="subscribeForm">
<fieldset class="no_border">
<label>Login ID: </label><br /><input type="text" class="effect" name="login_id" id="login_id" autocomplete="off" ><img id="login_id_correct" style="display:none" src="./images/tick.png" />
<span id="login_idInfo">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<fieldset class="no_border">
<label>Name: </label><br /><input type="text" class="effect" name="name" id="name" autocomplete="off" >
<span id="nameInfo">What's your name?</span>
</fieldset>
<fieldset class="no_border">
<label>Contact No: </label><br /><input type="text" class="effect" name="contact_no" id="contact_no" autocomplete="off" >
<span id="contact_noInfo">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<fieldset class="no_border">
<label>Email: </label><br /><input type="text" class="effect" name="email" id="email" autocomplete="off" >
<span id="emailInfo">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<fieldset class="no_border">
<label>Password: </label><br /><input type="password" class="effect" name="password1" id="password1" autocomplete="off" >
<span id="password1Info">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<fieldset class="no_border">
<label>Retype: </label><br /><input type="password" class="effect" name="password2" id="password2" autocomplete="off" >
<span id="password2Info">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<div id="button">
<input type="submit" value="Subscribe" name="subscribeForm"/>
</div>
<div id="success">
<strong>Data Saved Successfully.</strong>
</div>
</form>
</div>
Also is there any way i an create a css class for it so that the image is added to the right side of text box once each text box is validated.
try
fieldset input {
float:left;
}
maybe you also need to set the input to inline or inline block if you have set it to block previously.
http://jsbin.com/akiviw/1/edit
or change js
$('#login_id_correct').css('display','block')
to
$('#login_id_correct').css('display','inline-block')
I have the below CSS code written for the form,
.formcontainer{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 4px #ccc;
-webkit-box-shadow: 0 0 4px #ccc;
-moz-box-shadow: 0 0 4px #ccc;
border:1px solid #ccc;
padding:15px;
width: 740px;
margin:0 auto;
}
form {
margin:0 auto;
text-align:left;
width:100%;
background:#fff;
behavior: url(./border-radius.htc);
font-family:Calibri;
height: auto;
}
fieldset.border{
overflow:hidden;
border:1;
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px;
margin:3px 0;
}
fieldset.no_border{
overflow:hidden;
border:0;
margin:3px 0;
}
fieldset.no_border_submit{
overflow:hidden;
border:0;
text-align:center;
margin:3px 0;
}
input.effect {
float:left;
border:1px solid #ccc;
height: 20px;
padding:3px;
width:97%;
font-size:14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cssSubmitButton {
font-size: 12px;
background: #fff no-repeat 4px 5px;
display: inline-block;
padding: 5px 20px 6px;
color: #333;
border:1px solid #ccc;
text-decoration: none;
font-weight: bold;
line-height: 1.9em;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
position: relative;
cursor: pointer;
outline:none;
}
.cssSubmitButton:visited {}
.cssSubmitButton:hover {
border:1px solid #333;
}
#personal_details span{
margin-left: 50px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
}
.ui-datepicker{
font-size:12px;
}
#guardian_one_details{
display:none;
}
#guardian_two_details{
display:none;
}
#guardian_three_details{
display:none;
}
#nominee_one_details{
display:none;
}
#nominee_two_details{
display:none;
}
#nominee_three_details{
display:none;
}
#nominee_percentage{
display:block;
}
#total_nominees{
display:none;
}
#first_nominee_percent{
display:none;
}
#second_nominee_percent{
display:none;
}
#third_nominee_percent{
display:none;
}
#nominee_percent_allocation{
display:none;
}
.float_left {
float:left;
width:33%;
}
.float_left_nominee_percent {
float:left;
width:25%;
}
.float_left_guardian {
float:left;
width:69%;
}
.float_right_guardian {
float:left;
width:29%;
}
The problem is that the form is rendered properly in Chrome but in IE 8 the fields are too close to each other.
How can I get the rendering done in IE and Chrome as it is in Chrome.
Form in IE
Form in Chrome
I want the spacing to be done properly in IE as it is in Chrome.
My html code (partially)
<form id="personal_details" name="personal_details" action="">
<fieldset class="no_border">
<div class="float_left">
<input type="radio" value="nominee_no" name="nomination" id="nomination_no"/>I don't want to nominate.
</div>
<div class="float_left">
<input type="radio" value="nominee_yes" name="nomination" id="nomination_yes"/>I would like to nominate.
</div>
<div class="float_left" id="total_nominees">
Total Nominees:
<select name="nominees" id="nominees" class="effect">
<option value="one">Single Nominee</option>
<option value="two">Two Nominees</option>
<option value="three">Three Nominees</option>
</select>
</div>
</fieldset>
<fieldset class="border" id="nominee_one_details"><legend>Nominee One Details:</legend>
<fieldset class="no_border">
<label>Name:</label><br /><input type="text" class="effect" name=""/>
</fieldset>
<fieldset class="no_border">
<label>Address:</label><br /><input type="text" class="effect"/>
</fieldset>
<fieldset class="no_border">
<div class="float_left"><label>Date of Birth:</label><br /><input type="text" class="effect" name="input" id="nominee_one_dob" style="width:40%";/></div>
<div class="float_left"><label>Age in years:</label><br /><input readonly="readonly" type="text" class="effect" name="input" id="nominee_one_years" value="0" style="width:20%;" /></div>
<div class="float_left"><label>Relationship:</label><br /><input type="text" class="effect" style="width:95%" /></div>
</fieldset>
<fieldset class="no_border" id="guardian_one_details">
<div class="float_left_guardian">
<label>Guardian Name:</label><br /><input type="text" class="effect" /></div>
<div class="float_right_guardian"><label>Guardian PAN:</label><br /><input type="text" class="effect" /></div>
</fieldset>
</fieldset>
use the following style in css
fieldset.no_border{
overflow:hidden;
border:0;
padding:0;
margin:0 0 10px 0;
}
.float_left_guardian{
overflow:hidden;
margin-bottom:10px;
}
hope this will solve your issue.
I am trying to place a contact form at the bottom of my website, but the bottom of the form is sliced off. You can see a fiddle here:
http://jsfiddle.net/qKnzp/
The code for the webform is as follows:
CSS
div.box{
margin:0 auto;
width:500px;
background:#222;
position:relative;
top:50px;
border:1px solid #262626;
}
div.box h1{
color:#FFF5CC;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712;
}
div.box label{
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}
div.box label span{
display: block;
color:#bbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}
div.box .input_text{
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333;
border-right:1px double #333;
}
div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333;
border-right:1px double #333;
overflow:hidden;
height:150px;
}
div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}
HTML
<form name="htmlform" method="post" action="html_form_send.php">
<div class="box">
<h1>Contact Form</h1>
<label>
<span>Full name *</span>
<input type="text" class="input_text" name="name" id="name"
/>
</label>
<label>
<span>Email *</span>
<input type="text" class="input_text" name="email" id="email"
/>
</label>
<label>
<span>Description of the product wanted *</span>
<input type="text" class="input_text"
name="subject" id="subject" />
</label>
<label>
<span>Estimated Quantity *</span>
<input type="text" class="input_text" name="quantity"
id="quantity" />
<input type="submit" class="button" value="Submit Form" />
</label>
</div>
The form should look like this:
http://aceinfowayindia.com/blog/wp-content/uploads/2009/06/how-to-create-good-looking-form-without-table.html
Please could anyone explain why the bottom is missing and why the style of the forms header is different from what it should be.
Any help is much appreciated :)
#wrapper {
overflow: hidden;
}
Generally the code is poorly written. Learn how to write good html and css.
I am trying to make my text-fields expand when the container does. This is a picture of my container along with my text fields:
Now when I expand the Product Link text-field it results to this:
When it should be making the box bigger in height. This is my css I am using for the container and text-fields:
CSS
/* UserPrice Container & Fields */
#user-price-container {
background:#FFFFFF;
border:black solid 1px;
font-family:Arial, Helvetica, sans-serif;
margin-top:5px;
width: 950px;
}
.user_price_labels {
margin-left:5px;
font-weight:bold;
color:#78AF00;
}
.user-price-fields {
font-family:Arial, Helvetica, sans-serif;
border-right: 1px solid #90BF22;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 #FFFFFF, 0 1px 1px rgba(0, 0, 0, 0.17) inset;
color: #333333;
font-size: 13px;
-moz-box-sizing: border-box;
background: #FFFFFF;
border-color: black;
border-radius: 1px 1px 1px 1px;
display: inline-block;
height: 25px;
padding-left: 8px;
margin-left:5px;
}
/* Individual Text-fields*/
#user-price-price, #user-price-product, #user-price-exact-url {
margin-top:-2px;
}
#user-price-product-container {
margin-top:5px;
margin-left:5px;
}
#user-price-price-container {
margin-top:5px;
}
#user-price-product-store-container {
margin-top:-14px;
height:35px;
}
#user-price-exact-url-container {
margin-left:44px;
margin-top:-14px;
height:35px;
}
HTML(960gs)
<div id="user-price-container" class="grid_24">
<p id="user-price-product-container" class="grid_12"><label class="user_price_labels" for="user_prices_0_product_name">Product*</label><br />
<input class="user-price-fields" data-autocomplete="/prices/autocomplete_product_name" id="user-price-product" name="user_prices[0][product_name]" size="60" type="text" /></p>
<p id="user-price-price-container" class="grid_4"><label class="user_price_labels" for="user_prices_0_price">Price*</label><br />
<input autocomplete="off" class="user-price-fields" id="user-price-price" name="user_prices[0][price]" placeholder="00.00" size="10" type="text" /></p>
<p id="user-price-product-store-container" class="grid_11"><label class="user_price_labels" for="user_prices_0_product_store">Location*</label><br />
<input class="product_store" id="user_prices_0_product_store" name="user_prices[0][product_store]" size="30" type="text" /></p>
<p id="user-price-exact-url-container" class="grid_9"><label class="user_price_labels" for="user_prices_0_exact_url">Product Link</label><br />
<textarea class="user-price-fields" cols="40" id="user-price-exact-url" name="user_prices[0][exact_url]" rows="20"></textarea></p>
</div>
How can I get it to expand dynamically in width?
Thank you for taking the time to read this.
Remove the height from this class and I think it will work, maybe change it to min-height instead of removing it.
#user-price-exact-url-container {
margin-left:44px;
margin-top:-14px;
height:35px;
}
#user-price-exact-url-container{
resize: both;
overflow: auto;
min-width: 400px; /*suggest a mid-width & min-height*/
min-height: 400px;
}
I suggest the code above.