Basically I want to create a form which will have all the text in one "column" and all the input fields in another, so it looks decent. It almost works, the problem is that when I make a new line, the line continues from the width of the previous one. I will post the source code below:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.asd {
width: 100px;
height: 50px;
float:left;
}
.op {
float:left
}
</style>
</head>
<body>
<form action="demo_form.asp" autocomplete="on">
<div class="asd">First name:</div><input type="text" name="fname" class="op"><br />
<div class="asd">Last name:</div> <input type="text" name="lname" class="op"><br />
E-mail: <input type="email" name="email" autocomplete="off"><br />
<input type="submit">
</form>
</body>
</html>
You need to add an element with the style clear: both after each line. That will reset the floating position so the next elements will be positioned all the way to the left.
Instead of float: left; in your CSS, try using display: inline-block; on both of your classes.
Also, wrap the email label in the div tag, like you did for first/last name.
I think you don't need any height there. Just put whole line in div and float the elements inside..
My DEMO: http://jsfiddle.net/goodfriend/pt4Ua/20/
HTML:
<form action="demo_form.asp" autocomplete="on">
<div class="line"><span class="asd">First name:</span><input type="text" name="fname" /></div>
<div class="line"><span class="asd">Last name:</span> <input type="text" name="lname" /></div>
<div class="line"><span class="asd">E-mail:</span> <input type="email" name="email" autocomplete="off" /></div>
<div class="line"><input type="submit" /></div>
</form>
CSS:
.asd {
width: 100px;
float:left;
}
.line {
margin:7px;
display:block;
}
Hope this helps a bit.
1) Clean up the html by using form html elements
2) Simplify the css
3) Enjoy
JSFiddle: http://jsfiddle.net/Bushwazi/XHtUL/
HTML:
<form action="demo_form.asp" autocomplete="on">
<fieldset>
<label for="fname">First name:</label>
<input type="text" name="fname" class="op">
</fieldset>
<fieldset>
<label for="lname">Last name:</label>
<input type="text" name="lname">
</fieldset>
<fieldset>
<label for="email">E-mail:</label>
<input type="email" name="email" autocomplete="off">
</fieldset>
<input type="submit">
</form>
CSS:
form {
width:100%;
}
fieldset {
width:100%;
display:block;
padding:0.5em 0;
border:none;
}
label {
display:inline-block;
width:40%;
padding:0 5%;
}
input[type=text],
input[type=email] {
height:100%;
width:45%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type=submit] {
float:right;
margin:0 5% 0 0;
}
Related
I'm trying to make my check boxes align and stack such as http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_checkbox for example.
The page that I'm working on is http://juniorgoldreport.com/landing-page/
I've tried to use display: inline; and text-align: left; as well as float: left;. I'm not sure how to go about fixing this. The class chk_bx is there only because I was trying my best to try and target just that section of the form.
This is my html:
<form action="action_page.php">
<fieldset>
<div id="form_jgrsh">
First name:<br>
<input type="text" name="firstname" placeholder="Please enter first name">
<br>
Last name:<br>
<input type="text" name="lastname" placeholder="Please enter last name">
<br>
Email:<br>
<input type="text" name="email" placeholder="Please enter email">
<br><br>
<div class="chk_bx">
<input type="checkbox" name="sub_list" value="SH">Subscribe me to Stockhouse
<br>
<input type="checkbox" name="sub_list" value="JGR">Subscribe me to Junior Gold Report
</div>
<input type="submit" value="Submit">
</div>
</fieldset>
</form>
css
#form_jgrsh {
width:300px;
margin:0 auto;
text-align:left;
}
#form_jgrsh .chk_bx{
}
#form_jgrsh input, textarea {
width:100%;
border: 2px solid black;
line-height: 30px;
}
.exc-form {
text-align:center;
}
Problem is width:100%. give width to checkbox
#form_jgrsh {
width:300px;
margin:0 auto;
text-align:left;
}
#form_jgrsh .chk_bx{
}
#form_jgrsh input, textarea {
width:100%;
border: 2px solid black;
line-height: 30px;
}
.exc-form {
text-align:center;
}
.chk_bx input {
width:20px !important;
}
<form action="action_page.php">
<fieldset>
<div id="form_jgrsh">
First name:<br>
<input type="text" name="firstname" placeholder="Please enter first name">
<br>
Last name:<br>
<input type="text" name="lastname" placeholder="Please enter last name">
<br>
Email:<br>
<input type="text" name="email" placeholder="Please enter email">
<br><br>
<div class="chk_bx">
<input type="checkbox" name="sub_list" value="SH">Subscribe me to Stockhouse
<br>
<input type="checkbox" name="sub_list" value="JGR">Subscribe me to Junior Gold Report
</div>
<input type="submit" value="Submit">
</div>
</fieldset>
</form>
Change this line here:
// First line
#form_jgrsh input[type="text"], textarea {
width:100%;
border: 2px solid black;
line-height: 30px;
}
You were setting all inputs to width: 100% which was pushing the text below the checkboxes. Only set it to to type="text" inputs.
Fiddle: https://jsfiddle.net/xa5fv1p0/
Your problem is that you have width:100% assigned to all input fields, which is causing the checkboxes to take up the entire width.
Assign a class to the checkboxes and overwrite the width attribute like so:
#form_jgrsh .checkbox {
width: auto;
}
Fiddle: https://jsfiddle.net/yhc4rujh/
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 trying to render a html form like this: http://i.imgur.com/V53sv8F.jpg
The problem I am facing are:
I am not able to make the fields go in next line after the label
I haven't been able to get the firld length of first and last combined to be as long as that of the email (or password)
Any help is much appreciated.
HTML Code:
<form>
<label for="Name"><strong> Your Name:</strong></label>
<input type="text" id="Name_First" name="Name_First" required>
<input type="text" id="Name_Last" name="Name_Last" required>
<label for="Email">Email Address:<input type="email" id="Email" name="Email" vrequired></label>
<label for="RegPassword">Password:<input type="password" id="RegPasswordRegPassword" name="RegPassword" required></label>
<form>
JS Fiddle link: http://jsfiddle.net/d6a4h9o8/
For starters, your HTML is wrong, so no solution will work if you don't fix it first. So let's start with that:
<form>
<div class="row">
<label for="Name"><strong> Your Name:</strong></label>
<input type="text" id="Name_First" name="Name_First" />
<input type="text" id="Name_Last" name="Name_Last" />
</div>
<div class="row">
<label for="Email">Email Address:</label><input type="email" id="Email" name="Email" />
</div>
<div class="row">
<label for="RegPassword">Password:</label><input type="password" id="RegPasswordRegPassword" name="RegPassword" />
</div>
<form>
Now that we have proper markup and have added some divs to aid with styling (pay attention to those class="row" divs) we can apply CSS this way:
form {
background:#ccc;
padding:30px;
margin:0 auto;
width:50%
}
form label {
display: block;
}
input {
width:300px;
}
.row {
width:300px;
clear:both;
display:block;
position:relative;
margin:5px auto
}
.row:first-child input {
width:142px;
}
.row:first-child input:last-child {
position:absolute;
right:-5px;
width:144px
}
See fiddle to see the result
Now, there are MANY ways to do it, this is just one, but the most important part is to have your markup fixed, then styling it is really easy.
Here is working example similar to the picture.
HTML
<form>
<label for="Name"><strong> Your Name:</strong></label>
<input type="text" id="Name_First" name="Name_First" required>
<input type="text" id="Name_Last" name="Name_Last" required>
<label for="Email">Email Address:</label>
<input type="email" id="Email" name="Email" vrequired>
<label for="RegPassword">Password:</label><input type="password" id="RegPassword" name="RegPassword" required>
<form>
CSS.
form{
max-width: 500px;
background: #d4d4d4;
padding: 20px;
}
form label {display: block;}
input{padding: 7px 0;font-size: 25px;}
input[type="text"]{width:48.2%;}
input[type="email"],input[type="password"]{width: 98%;}
}
Try this:
label {
display: block;
clear: both;
}
You'll still have to do additional styling, of course.
use
#Name_First {
...
}
to target specific element with your css styles.
and try read through http://www.htmldog.com/guides/css/beginner/applyingcss/
what you want to focus on should be "display" and "width"
Hy,
This are my HTML Code:
<h2>Advertising over Push Notifications</h2>
<h3>Login</h3>
<label for="infoLabel_CheckUserLoginWeb"></label>
<form id="form_CheckUserLoginWeb" name="form_CheckUserLoginWeb" method="POST" onsubmit="" action="">
E-Mail: <input type="text" size="30" name="email_CheckUserLoginWeb" id="email_CheckUserLoginWeb" ></br>
Passwort: <input type="text" size="30" name="passwort_CheckUserLoginWeb" id="passwort_CheckUserLoginWeb" ></br>
<input type="submit" value="Login" id="submit_CheckUserLoginWeb" name="submit_CheckUserLoginWeb" />
</form>
and i want that the text "Benutzername...." will be shown in the red area, i don't want a new wordwrap.
i want this:
<h3> elements have margins by default. Add CSS to remove it:
h3{
margin: 0;
}
You could insert a id into h3 and add CSS to remove it. Note: if you modify the tag h3 without an id or class, all h3 tags in your code will be modified.
HTML
<h3 id="login">Login</h3>
CSS
h3#login{
margin-bottom: 0;
}
Demo
HTML
<h2>Advertising over Push Notifications</h2>
<h3 class="login">Login</h3>
<span>Benutzername....</span>
<label for="infoLabel_CheckUserLoginWeb"></label>
<form id="form_CheckUserLoginWeb" name="form_CheckUserLoginWeb" method="POST" onsubmit="" action="">E-Mail:
<input type="text" size="30" name="email_CheckUserLoginWeb" id="email_CheckUserLoginWeb">
</br>Passwort:
<input type="text" size="30" name="passwort_CheckUserLoginWeb" id="passwort_CheckUserLoginWeb">
</br>
<input type="submit" value="Login" id="submit_CheckUserLoginWeb" name="submit_CheckUserLoginWeb" />
</form>
css
.login {
margin: 0;
}
Add additional div in html like this: DEMO
HTML
<div class="error">
<label for="infoLabel_CheckUserLoginWeb"></label>
</div>
then define a rule in css:
CSS
.error { float:left; height:20px; width: 100%;}
.login {margin:0;}
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;