I am trying to style my form with labels and the label styles don't seem to work correctly.
Here is what my html looks like for the form:
<h1 class="allpages">Questions or Concerns about Compliance Issues?</h1>
<h3>We welcome all compliments and constructive criticism!</h3>
<form class="webform" action="http://hsc.unm.edu/scripts/cfmailform/cfmailer.cfm" method="post">
<!--Required hidden operators-->
<input name="recipient" type="hidden" value="bfloran#salud.unm.edu" />
<input name="subject" type="hidden" value="HSC Compliance Office Email Form" />
<input type="hidden" name="cc" value="mgwilson#salud.unm.edu" />
<input name="redirect" type="hidden" value="http://hsc.unm.edu/admin/compliance/ThankYOU.html" /> <!-- Field validation for the user -->
<!-- Our form in HTML -->
<label for "name">Your Name (optional):</label>
<br />
<input name="name" type="text" id="name" value="" /><br />
Your E-mail (Optional):<br />
<input name="mail" type="text" value="" />
<br /> comment:<br /> <textarea name="comment" value="" ></textarea><br /> <br /> <input type="submit" value="Send" /> <br /> <input type="reset" value="Reset" /></div>
My css for this part looks like this:
.allpages {text-align:center;color:#007a86;}
h3{text-align:center;}
.webform {background-color: #eeeeee;
width: 655px; border: solid;
border-color: #e9e9e9;margin-left: auto; margin-right: auto; padding: 15px 0px 15px 17px;}
.webform .label {display:inline-block; width:200px; vertical-align:top; text-align:right;}
label is not a class... it is a tag.
Working CSS for that piece:
.webform label { } /* see .label changed to label */
Also: Your elements were not laid out properly in HTML, some were not even labels.
Fixed fiddle: http://jsfiddle.net/digitalextremist/mt4jK/2/
Excerpt:
.webform label {
width:200px;
vertical-align:top;
text-align:right;
float: left
}
<label for="name">Your Name (optional):</label>
<input name="name" type="text" id="name" value="" />
You created a class selector to reference some tag with class=label
Related
I was given a homework assignment to re-create a site that he made Here.
I have gotten it to look almost similar but cant seem to find out how to get the radio bubbles to the right of the checkbox items.
I did some research and have tried verticle-align but that has not worked out.
This is the HTML that I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type= "text" name="corpName" id="corpName" size="40" /></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40" /></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40" /></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15" /></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15"</label>
</fieldset>
<fieldset>
<legend>Service Information</legend>
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount" />Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice" />Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod" />Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form" /> <input type="reset" />
<br>
<form>
</div>
</body>
And here is my CSS:
/*CSS Document*/
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
vertical-align: middle;
}
Any help would be great.
Here try this fiddle
http://jsfiddle.net/Lsh3rqLj/3/
I just wrapped the checkboxes in a div and set both the checkboxes and radiobuttons div's float to left.
#radioButtons{
vertical-align: middle;
float: left;
}
#first{
float:left;
}
The float is what you need here. you can play with it some more to get a perfect positioning.
EDIT: IF you wanted to make it EXACTLY like you are instructed in your assignment add padding-top: 10px; to your checkboxes. I have updated the fiddle to give you the exact effect as you'd see in the img you posted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Form Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<h1>Client Registration</h1>
<form>
<fieldset>
<legend>Identity Information</legend>
<label>Corporate Name: <input type="text" name="corpName" id="corpName" size="40"></label><br><br>
<label>Address: <input type="text" name="address" id="address" size="40"></label><br><br>
<label>Contact Name: <input type="text" name="cname" id="cname" size="40"></label><br><br>
<label>Contact Phone: <input type="text" name="cphone" id="cphone" size="15"></label> <label>Contact Email: <input type="text" name="cemail" id="cemail" size="15" <="" label="">
</label></fieldset>
<fieldset style="
">
<legend>Service Information</legend>
<div id="checkBox"><input type="checkbox" name="Delivery" id="Delivery" value="yes"> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes">Confirmation<br>
</div>
<div id="radioButtons">
<input type="radio" name="paymentType" id="creditAccount" value="creditAccount">Credit Account<br>
<input type="radio" name="paymentType" id="Invoice" value="Invoice">Invoice<br>
<input type="radio" name="paymentType" id="cod" value="cod">Cash On Delivery<br>
</div>
</fieldset>
Comments: <br>
<textarea name="comments" id="comments" rows="3" cols="55">Please submit any comments here</textarea><br>
<input type="submit" value="Send Form"> <input type="reset">
<br>
</form>
</div>
</body>
#container{
background-color: #C0C0C0;
border: 2px solid black;
width: 500px;
margin: auto;
}
form{
padding: 4px;
}
#radioButtons{
float:left;
}
#checkBox{
float:left;
}
please remember that always wrap the content with a div tag. so you will not face such problems.
here is the working demo: Working Demo
wrap the check boxes with a div tag, later give float left for both div id
i hop this will be helpful to you...
You can get the <input type="radio"> elements to align properly by adding a div element around the checkboxes and then floating the checkboxes and radio elements left. You should also add padding to the checkboxes for consistency.
HTML:
<div id="checkboxes"> <!-- add this div -->
<input type="checkbox" name="Delivery" id="Delivery" value="yes" /> Delivery<br>
<input type="checkbox" name="Confirmation" id="Confirmation" value="yes" />Confirmation<br>
</div>
CSS:
#checkboxes {
float: left;
padding-top: 10px;
}
#radioButtons {
float: left;
}
Try it Online!
I am new on here and would really appreciate some help, I am trying to format an input form with css however the the form has a text area that I need to format to the same as the rest of the form.
Here is what I have so far:
<div id="login">
<h2>Data Archive</h2>
<hr/>
<form action="" method="post">
<label>HDD Name :</label>
<input type="text" name="hdd_name" id="hdd_name" required="required" placeholder="Please enter HDD name"/><br /><br />
<label>Date Archived :</label>
<input type="text" name="date_archived" id="date_archived" required="required" placeholder="Date data was archived"/><br/><br />
<label>Project Name :</label>
<input type="text" name="project_name" id="project_name" required="required" placeholder="Project name"/><br/><br />
<label>Client :</label>
<input type="text" name="client" id="client" required="required" placeholder="Client name"/><br/><br />
<label>Archived by :</label>
<input type="text" name="archived_by" id="archived_by" required="required" placeholder="Name of person archiving data"/><br/><br />
<label>Editor :</label>
<input type="text" name="editor" id="editor" required="required" placeholder="Editor name"/><br/><br />
<label>Other information :</label>
<div class="textarea"><textarea name="other_information" id="other_information" wrap="virtual"/>Any other information</textarea><br/><br /> </div>
<input type="submit" value=" Submit " name="submit"/><br />
</form>
</div>
and the CSS:
textarea{
width: 290px;
height: 75px;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
}
#login{
width:300px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
margin-top: 70px;
}
Really hoping you can shed some light on this for me.
You need to give each item that you want to be the same a CSS class.
<input class="mytextboxes" type="text" ... />
<textarea class="mytextboxes" name="other_information" ... />Any other information</textarea>
Then you can use the CSS class like this:
.mytextboxes{
/* styling here */
}
Here's a tutorial from W3 schools to get you started.
http://www.w3schools.com/cssref/sel_class.asp
You can do the styling of inputs of type by using a CSS like this.
input[type="text"] {
/* Your styles*/
}
I created a jfiddle. I'm sure it is easy to fix, but I can't figure it out.
http://jsfiddle.net/mt4jK/8/
<h1 class="allpages">Questions or Concerns about Compliance Issues?</h1>
<h3>We welcome all compliments and constructive criticism!</h3>
<form class="webform" action="http://hsc.unm.edu/scripts/cfmailform/cfmailer.cfm" method="post">
<!--Required hidden operators-->
<input name="recipient" type="hidden" value="bfloran#salud.unm.edu" />
<input name="subject" type="hidden" value="HSC Compliance Office Email Form" />
<input type="hidden" name="cc" value="mgwilson#salud.unm.edu" />
<input name="redirect" type="hidden" value="http://hsc.unm.edu/admin/compliance/ThankYOU.html" /> <!-- Field validation for the user -->
<label for "name">Your Name (optional):</label>
<input name="name" type="text" id="name" value="" /><br />
<label for "name">Your E-mail (Optional):</label>
<input name="mail" type="text" value="" /><br>
<label for "name">Comment:</label>
<textarea name="comment" value="" ></textarea>
<p>
<div class="submit">
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</div>
</form>
CSS:
h3{text-align:center;}
.webform {background-color: #eeeeee;
width: 655px; border: solid;
border-color: #e9e9e9;margin-left: auto; margin-right: auto; padding: 15px 0px 15px 17px;}
.webform label { width:200px; vertical-align:top; text-align:right; padding: 5px; float:left; font-size:14px; font-weight:bold;}
.webform textarea {width:200px; text-align:right; float:left; }
.submit{width:50px:}
edit: formatting the CSS code to easy visibility.
you have a float:left in textarea remove it like this:
.webform textarea {width:200px; text-align:right; }
instead of this:
.webform textarea {width:200px; text-align:right; float:left; }
DEMO
It looks like the margin-bottom of your comment boxes is messing with the .submit div. I found that adding some margin top to your .submit wrapper pushes it far enough down to clear the other container's margin-bottom. Try adding this to your ".submit" class:
css:
width: 230px;
margin: 50px auto;
First: you must see the following picture.
As you see, the red rectangle, the two fields does not line up, there is a little space in the start of the top field, while the next field does not.
Note: this problem occurs in all browsers.
HTML
<body>
<br /><br /><br /><br /><br />
<div id="loginForm">
<form action="login.php" method="post">
<label> Username: <input type="text" name="username" id="username" /></label><br />
<label> Password: <input type="password" name="password" id="password" /></label><br /><br />
<input type="submit" name="sbmtLogin" value="login" />
</form>
</div>
</body>
CSS
body {margin:0; padding:0;}
div#loginForm {width:270px; max-width:270px; margin:0 auto; padding:10px; text-align:center; background-color:#8de3fd;}
div#loginForm input {margin:3px; padding:5px; color:#5b5b5b; width:150px; border:1px solid #9a9a9a;}
div#loginForm input[type=submit] {width:70px;}
How can I fix that problem ?
Why the input text and password fields are not line up?
Username and Password are different length words
How can I fix that problem ?
Use a monospace font
Wrap the words in an element that you set to display: inline-block; width: ??? where ??? is a fixed value.
That element could be the labels.
<label for="username"> Username:</label> <input type="text" name="username" id="username" /></label><br />
<label for="password"> Password:</label> <input type="password" name="password" id="password" /></label>
label {
display: inline-block;
width: 7em; /* adjust to taste */
}
Keep in mind that you will get different fonts on different systems, so give yourself some leeway with the width of the elements if you take the second approach.
"Username:" is slightly wider than "Password:"
That is why they are not aligned.
You want to do something like putting the fields in a table or defined width divs.
It's because the text of Username: is a few pixels longer than Password: ?
You need to close the label tags, so the text is actually in the label (setting the for attribute will also make the inputs selectable by clicking the label)
<body>
<br /><br /><br /><br /><br />
<div id="loginForm">
<form action="login.php" method="post">
<label for="username"> Username:</label> <input type="text" name="username" id="username" /></label><br />
<label for="password"> Password:</label> <input type="password" name="password" id="password" /></label> <br /><br />
<input type="submit" name="sbmtLogin" value="login" />
</form>
</div>
</body>
Then put a common width on the labels with css
div#loginForm form label {
display: inline-block;
width: 200px; // whatever looks best
}
Not all characters of the font has the same width for all fonts. In your case Username is slightly larger than the Password, therefore the alignment issue.
To fix the issue you need to put the labels in a fixed with box
HTML - wrapped each input element in a div
<body>
<br /><br /><br /><br /><br />
<div id="loginForm">
<form action="login.php" method="post">
<div><label>Username:</label><input type="text" name="username" id="username" /></div>
<div><label>Password:</label><input type="password" name="password" id="password" /></div>
<div><input type="submit" name="sbmtLogin" value="login" /></div>
</form>
</div>
</body>
CSS - set width of label and set display to inline-block
body {margin:0; padding:0;}
div#loginForm {width:270px; max-width:270px; margin:0 auto; padding:10px; text-align:center; background-color:#8de3fd;}
div#loginForm input {margin:3px; padding:5px; color:#5b5b5b; width:150px; border:1px solid #9a9a9a;}
div#loginForm input[type=submit] {width:70px;}
#loginForm label { width: 100px; display: inline-block; }
I'm learning some css and want to make a two column form, without any table tags and such.
This is what i have got (code from CSS Cookbook 3ed edition).
JSfiddle HERE...
HTML code:
<div class="container">
<form id="regform" name="regform" method="post" action="/regform.php">
<div id="register">
<h4>Register</h4>
<label for="fmlogin">Login</label>
<input type="text" name="fmlogin" id="fmlogin" />
<label for="fmemail">Email Address</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmemail2">Confirm Address</label>
<input type="text" name="fmemail2" id="fmemail2" />
<label for="fmpswd">Password</label>
<input type="password" name="fmpswd" id="fmpswd" />
<label for="fmpswd2">Confirm Password</label>
<input type="password" name="fmpswd2" id="fmpswd2" />
</div>
<div id="contactinfo">
<h4>Contact Information</h4>
<label for="fmfname">First Name</label>
<input type="text" name="fmfname" id="fmfname" />
<label for="fmlname">Last Name</label>
<input type="text" name="fmlname" id="fmlname" />
<label for="fmaddy1">Address 1</label>
<input type="text" name="fmaddy1" id="fmaddy1" />
<label for="fmaddy2">Address 2</label>
<input type="text" name="fmaddy2" id="fmaddy2" />
<label for="fmcity">City</label>
<input type="text" name="fmcity" id="fmcity" />
<label for="fmstate">State or Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmzip">Zip</label>
<input type="text" name="fmzip" id="fmzip" size="5" />
<label for="fmcountry">Country</label>
<input type="text" name="fmcountry" id="fmcountry" />
<input type="submit" name="submit" value="send" class="submit" />
</div>
</form>
</div>
CSS code:
label {
margin-top: .33em;
display: block;
}
input {
display: block;
width: 250px;
}
#register {
float: left;
}
#contactinfo {
padding-left: 275px;
}
Because you float one div and not the other.
With a few simple CSS changes it'll work (as long as the h4 does not span multiple lines):
#register {
float: left;
width: 275px;
}
#contactinfo {
float: left;
}
See the updated fiddle.
Here's how I'd debug (except I'd use Firebug or another Inspect/devtools): http://jsfiddle.net/PhilippeVay/yuxTA/2/
As stated by #Arjan in his answer, this is due to floating and its effects.
Uncomment the last CSS declaration for a solution that won't modify layout. Also add margin-top to both columns or padding-top if you want a vertical margin back...
Another option is to remove the margins from the h4 (although, as said in other answers, floating [or similar] both columns makes more sense).
h4 {margin: 0;}
You have to float all the div in your containter
#register {
float: left;
}
#contactinfo {
float:left;
margin-left:30px; /*increase or decrease if you like*/
}