I have the below jsfiddle I need to know how should I increase the space for error message in span so that the entire message is displayed correctly.
JSFiddle
<form method="post" action="" id="subscribeForm" name="subscribeForm">
<fieldset>
<label>Name: </label><input type="text" class="effect" name="name" id="name" autocomplete="off" >
<span id="nameInfo">What's your name?</span>
</fieldset>
<fieldset>
<label>Email: </label><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>
<div id="button">
<input type="submit" value="Subscribe" name="subscribeForm"/>
</div>
<div id="success">
<strong>Data Saved Successfully.</strong>
</div>
</form>
CSS Code
#subscribeForm span.error{
color: #e46c6e;
}
#subscribeForm input.error{
background: #f8dbdb;
border-color: #e77776;
}
#subscribeForm span.error{
color: #e46c6e;
}
#subscribeForm span{
margin-left: 50px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
}
JSFiddle
Try increasing the height of the fieldset.
fieldset {
overflow:hidden;
border:0;
height:50px;
margin:3px 0;
}
JSFiddle
Increasing the width of the fieldset or the form will display the error text fully.
So try,
form {
...
width: 285px;
...
}
if you do not want to display bigger form try to set the width of fieldset alone like,
fieldset {
...
width: 270px;
...
}
Check the demo here
, i have set the width of the fieldset here, form size is not changed.
Related
I am making a web form which I have working and am simply trying to style it using CSS before building a site for it. I have found that after adding label tags I am getting errors when I click on another box it jumps to the First Name box, the only way to fill out the form is to use Tab.
my HTML:
<label>
<form action="Register Keys site/form.php" method="post">
First Name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
Email: <input type="text" name="email"><br>
Phone Number: <input type="text" name="phonenumber"><br>
Information on Key: <input type="text" name="keyinfo"><br>
Password: <input type="text" name="password"><br>
Password Hint: <input type="text" name="passwordhint"><br>
<textarea rows="5" name="message" cols="30" placeholder="Please add any additional comments here"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>
</label>
CSS:
label
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
input
{
border:0;
padding:5px;
font-size:0.7em;
color:#aaa;
border:solid 1px #ccc;
margin:0 0 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 160px ;
}
textarea
{
border:0;
padding:5px;
font-size:0.7em;
color:#aaa;
border:solid 1px #ccc;
margin:0 0 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 160px ;
}
input:focus
{
border:solid 1px #EEA34A;
}
The written form is not correct, 'cos the entire form is wrapped in Label
when conventionally set so
<form action="">
<div> <label for=""> </ label> </ div>
<div> <input type="text"> </ div>
</form>
Which is possible without the div
You have wrapped a form element inside a label element. That’s invalid markup and has strange effects. See #verdesrobert’s answer for adequate use of label. And you should use label that way, for reasons of functionality.
But what are now trying to do, the styling of a form as a whole, can be done simply by setting CSS properties on the form element. For example:
form
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
(To use your styling. I would not recommend setting the width and the indentation in pixels but in em units.)
This is how you should use Label tag
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
To resolve this issue you need to modify html part.
You just need to replace tag label to div. Also replace css class name label to div. By doing this you may have this issue resolved.
Regards,
Vishal Bagdai
Because of the way label tags work, if the user clicks on anything inside the label tag, it will refocus, toggling control to the form (thus putting the cursor in the first textbox).
See: http://www.w3schools.com/tags/tag_label.asp
Instead of label, you want to use a div, and give it an ID (eg. divID), then change your css to:
#divID
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
or give it a class (eg. divClass) and change your css to:
.divClass
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
I have been trying to edit this easy form to just look good for 3 hours now and Im still not quite there. I want the input fields to be on the same row as the labels naturally, but somehow the inputs are a bit lower than the labels and I cant seem to edit them with margins. What am I doing wrong?
Heres a snaggy picture of what the form looks like:
// CONTACT FORM
<label for="name"><p>Name:</p></label>
<input type="text" name="name" id="name" tabindex="1" />
<br/>
<label for="email"><p>Email:</p></label>
<input type="text" name="email" id="email" tabindex="2" />
<br/>
<label for="subject"><p>Subject:</p></label>
<input type="text" name="subject" id="subject" tabindex="3" />
<br/>
<label for="comments"><p>Comments:</p></label>
<textarea name="comments" id="comments" cols="45" rows="5" tabindex="4"></textarea>
<br/>
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="5" />
<label for="reset"></label>
<input type="reset" name="reset" id="reset" value="Clear" tabindex="6" />
// CSS
label {
float: none;
font-size: 100%;
width: 250px; /* just this width evens out input box placement */
font-weight: bold;
}
input { /*I think these just fall in because they are naturally following the labels!*/
width: 250px;
padding:5px;
margin-top: -10px;
}
textarea {
width: 250px;
height: 150px;
resize:none;
}
guestbook {
margin-top:50px;
text-align:center;
font-size:26px;
color:#05924b;
font-family:Gisha;
}
gb p {
color:#05924b;
font-family:Gisha;
text-align:left;
margin-left:85px;
margin-top:0px;
margin-bottom:0px;
}
// SOLUTION: Removed the "p" paragraph from within the form and adjusted the rest from CSS, added float:left to the different inputs fields and rows, lowered the label width so the input came closer, then calculated and put the correct margin-right to both input{} and textarea{} and last to #submit to get everything in nice order.
Heres a screenshot from the new code: http://snag.gy/PwpbQ.jpg
// CSS
/* Input */
label {
float: left;
font-size: 100%;
width: 50px; /* just this width evens out input box placement */
font-weight: bold;
margin: 2px 0;
padding:5px;
font-family: Gisha;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-align: left;
}
input { /*I think these just fall in because they are naturally following the labels!*/
width: 300px;
padding:5px;
margin: 5px 0;
font-size:24px;
margin-right:192px;
}
textarea {
width: 300px;
height: 150px;
resize:none;
margin:5px 0;
padding:5px;
margin-right:192px;
}
#submit {
margin-right:225px;
}
/* End of input */
Remove all of the <p> tags from the labels. A <p> tag is a block level element, therefore it should not be nested within the inline element <label>. Block level elements also clear, meaning they do not allow content on either side (unless floated). I believe this is causing your issue.
<label for="name">Name:</label>
<input type="text" name="name" id="name" tabindex="1" />
<br/>
<label for="email">Email:</label>
<input type="text" name="email" id="email" tabindex="2" />
<br/>
<label for="subject">Subject:</label>
<input type="text" name="subject" id="subject" tabindex="3" />
<br/>
<label for="comments">Comments:</label>
<textarea name="comments" id="comments" cols="45" rows="5" tabindex="4"></textarea>
<br/>
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="5" />
<label for="reset"></label>
<input type="reset" name="reset" id="reset" value="Clear" tabindex="6" />
Once the markup has been adjusted the label and input tags have no vertical spacing. To add vertical spacing you can add a margin to both elements.
label {
font-size: 100%;
width: 250px;
font-weight: bold;
margin: 2px 0;
}
input {
width: 250px;
padding:5px;
margin: 2px 0;
}
Example: http://jsfiddle.net/KZrXD/
html code
<div id="signup">
<p>
<label>Frist Name</label>
<input type="text"/>
<p>
<p>
<label>Last Name</label>
<input type="text"/>
<p>
<p>
<label>Email</label>
<input type="text"/>
<p>
<p>
<label>Mobile Number</label>
<input type="text"/>
<p>
<p>
<label>Password</label>
<input type="password"/>
<p>
<p>
<label>Re Password</label>
<input type="password"/>
<p>
</div>
and this is css
css
#signup{
width: 860px;
background-color: white;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup p label{
padding: 0.4em;
color: #0986e3;
}
#signup p input{
width: 300px;
padding: 0.4em;
}
if u run this code u will see the input files right and left , and that is not good , i can correct this problems using div or li , but i want the best practice for doing that , i want the input filds to be exaclty below each other
,this is the code in jsfiddle
http://jsfiddle.net/Wiliam_Kinaan/EfBD7/
Make the labels display as block elements. That way, you can set it's width. But you still need them to be inline. You need to apply either float:left, or display:inline-block so they act inline as well as block.
#signup p label{
display:inline-block;
width:100px;
}
/*or*/
#signup p label{
float:left;
width:100px;
}
If you want to support older browsers, then use the float:left. If you target new browsers, then display:inline-block is better. If you use the float approach, add this to the CSS to clear the float:
#signup p{
overflow:hidden;
zoom:1;
}
Here, I did it how I would do it. I stripped out the p and some css to make text right side. but you can of course add display:inline-block;width:300px; to the label and swap the label and input locations in html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#signup{
width: 500px;
background-color: #ececec;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup label{
font:12px arial;
color: #0986e3;
}
#signup input{
margin:10px;
width: 300px;
padding 0.4em;
}
#signup input[type=button]{
margin:10px;
width: 80px;
padding 0.4em;
}
</style>
</head>
<body>
<div id="signup">
<input type="text"/>
<label>Frist Name</label>
<input type="text"/>
<label>Last Name</label>
<input type="text"/>
<label>Email</label>
<input type="text"/>
<label>Mobile Number</label>
<input type="password"/>
<label>Password</label>
<input type="password"/>
<label>Re Password</label>
<input type="button" value="click me!" />
</div>
</body>
</html>
Give the label a definite width, like:
#signup p label{
padding: 0.4em;
color: #0986e3;
width: 100px;
display: inline-block;
}
Can you use table , might help your cause , see the example , sorry for not aligning the markup well.
What would be a proper css method to make the following so it is the same with the exception that the text input fields vertically line up along their left side?
So the check boxes will still be right up against the input fields and in between the label and input fields, but the input fields still all light up.
Current HTML:
<p><label for="search_uri">Uri:</label><input id="search_uri" type="text" name="Uri" /></p>
<p><label for="search_server">Server:</label><input type="checkbox" name="server_like" /><input id="search_server" type="text" name="Server" /></p>
<p><label for="search_host">Host:</label><input id="search_host" type="text" name="Host" /></p>
Current CSS:
label {
font-size: 90%;
float:left;
width: 15em;
}
Why not just use a negative margin?
.checkbox {margin-left: -16px;}
Depending on the rest of your setup might require a bit of tweaking for cross-browser pixel-perfectness.
I would personally probably also just float both the labels and the inputs and get rid of the <p>:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
label {
display: block;
font-size: 90%;
width: 15em;
clear:left;
}
label, input {
float:left;
}
input[type=checkbox]
/* use .checkbox and add 'class="checkbox"' if you want to support IE6*/
{
margin-left: -2em;
}
</style>
</head>
<body>
<form>
<label for="search_uri">Uri:</label>
<input id="search_uri" type="text" name="Uri" />
<label for="search_server">Server:</label>
<input type="checkbox" name="server_like" />
<input id="search_server" type="text" name="Server" />
<label for="search_host">Host:</label>
<input id="search_host" type="text" name="Host" />
</form>
</body>
</html>
Do this.
HTML Markup:
<form><fieldset>
<legend>Login Details</legend>
<label>Your Email:</label><input type="text" name="email" maxlength="32" />
<label>Your Password:</label><input type="password" name="password" maxlength="30" />
</fieldset>
<input id="submit" type="submit" value="Create Account" /></form>
Css Markup:
fieldset {padding: 10px 0;}
legend {font-weight: bold; padding: 0 0 3px 0; color: #f00;}
input {padding: 2px; border-radius: 3px; width: 130px; float: left; margin: 0 0 5px 0;}
label {float: left; width: 150px; text-align: right; margin: 1px 3px 0 0;}
#submit {width: auto; margin: 0 0 0 153px;}
Then add a width to your form, depending on the input sizes, with your checkbox, just float it in between and use margins.
I would do something like this;
<div class="label">Uri:</div><div class="field"><input type="text" /></div>
Then give the div with the class 'label' an default width and float them next to eachother.
EDIT: Saw you changed your post;
<label for="search_uri">Uri:</label>
<input id="search_uri" type="text" name="Uri" />
Your css could be something like
label
{
width: 150px;
float:left;
clear:both; /*Clear the previous row with label and field, not sure if this is needed*/
}
input
{
float:left;
}
If your form is small, you can just use a <table>.
i'm a beginner at CSS and trying to do a NETTUTS , but there's a portion in the webpage that i don't know what exactly to do in CSS to make it look right ...
I just can't get this input text boxes, textarea and the button to be aligned like that , and to be honest the tutor isn't doing a great job to clearing stuff out
Using alternative and absolute positioning, and setting top and right spacing is kinda no a good idea i think ... I'm trying to align them using FlexBox feature but don't know why those elements are not moving at all ...
Here's my HTML & CSS3 code (for chrome) :
<section id="getAfreeQuote">
<h2>GET A FREE QUOTE</h2>
<form method="post" action="#">
<input type="text" name="yourName" placeholder="YOUR NAME"/>
<input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
<textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
<input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
<button>Submit</button>
</form>
#getAfreeQuote form {
display:-webkit-box;
-webkit-box-orient:vertical;
height:500px;
}
#getAfreeQuote input[name="yourName"]{
-webkit-box-ordinal-group:1;
}
#getAfreeQuote input[name="yourEmail"]{
-webkit-box-ordinal-group:1;
}
#getAfreeQuote textarea{
-webkit-box-ordinal-group:2;
}
#getAfreeQuote input[name="timeScale"]{
-webkit-box-ordinal-group:3;
}
#getAfreeQuote button {
-webkit-box-ordinal-group:4;
}
and the result :
Here's how I'd do it:
<section id="getAfreeQuote">
<form method="post" action="#">
<h2>Get a free quote</h2>
<input type="text" name="yourName" placeholder="YOUR NAME"/>
<input type="email" name="yourEmail" placeholder="YOUR EMAIL"/>
<textarea name="projectDetails" placeholder="YOUR PROJECT DETAILS."></textarea>
<br /><input type="text" name="timeScale" placeholder="YOUR TIMESCALE"/>
<br /><input type="submit" value="Submit!" />
<div class="clear"></div>
</form>
</section>
<style>
#getAfreeQuote h2 {
text-transform: uppercase;
color: blue;
}
div.clear {
clear: both;
}
#getAfreeQuote form {
width: 25em;
position: relative;
}
#getAfreeQuote input[name="yourName"]{
width: 43%;
}
#getAfreeQuote input[name="yourEmail"]{
width: 55%;
float: right;
}
#getAfreeQuote textarea{
width: 100%;
height: 10em;
}
#getAfreeQuote input[name="timeScale"]{
width: 100%;
}
#getAfreeQuote input[type="submit"]{
text-transform: uppercase;
background: orange;
border: none;
padding: 1em 2em;
color: white;
float: right;
}
</style>
You have a good start, but you need to know the basics of CSS layout properties. A good start would be to learn the basics from Sitepoint where a very useful guide is present. Good luck.
If you do not have to use a FlexBox you can use width: 50% for the top two text inputs and width: 100% for the textarea and bottom text input. After setting the form with to the desired width of the form