For my first website, I had to create a simple HTML/CSS form. But my problem was in the fact that my radio buttons don't want to hear what I order him.
(this is without float)
I want it below the email input together, but the more I give margin-left, the more apart (in width) those two radio buttons get.
(this is the code below)
How to fix the radio button position problem?
As you can see I have tried last-child but it doesn't show any effect. In my code for the footer there is no auto height or width.
I am not allowed to use JavaScript. Only pure HTML and CSS.
HTML
<form>
<label class="field">Name:</label><input id="email" type="Name" placeholder="Name"><br>
<label class="field">Lastname:</label> <input id="lastname" type="lastname" placeholder="Lastname"><br>
<label class="field">Email:</label> <input id="Email" type="Email" placeholder="Email"><br>
<label class="radio">No<input type="radio" name="st" value="No"/></label><br>
<label class="radio">Yes<input type="radio" name="st" value="Yes" /></label><br>
<label class="textarea"><textarea></textarea></label><br>
<label class="submit"><input type="submit" value="Submit"></label><br>
<label class="feedback">Feedback:</label>
</form>
CSS
/*FORM*/
form {
width: 100%;
margin-top:5px;
}
label.field {
text-align: right;
width:100px;
float:left;
font-weight:bold;
padding-top:4px;
}
label.radio{
float:left;
margin-top: 20px;
margin-left: 15px;
padding:0px 0px 5px 0px;
border:1px solid black;
white-space: nowrap;
}
label.radio:last-child{
margin-right: 10px;
}
label.feedback{
text-align:right;
width:100px;
float:left;
font-weight:bold;
padding-top:4px;
margin-top: -40px;
}
Wrap them in a list, and clear on the LI. Get rid of the breaks. You should reset the list first: ul, li {margin:0;padding:0list-style:none}
li { clear:both }
HTML:
<ul>
<li>
<label class="field">Name:</label>
<input id="email" type="Name" placeholder="Name">
</li>
<li>
<label class="field">Lastname:</label>
<input id="lastname" type="lastname" placeholder="Lastname">
</li>
....
</ul>
Lists are semantic, which makes then good for people with disabilities. You can also use the list for formatting the layout by adjusting margin/padding.
See: A List Apart - Prettier Accessible Forms
Related
I'm new to all of this so I have a question and it's probably silly but here we go anyway.
I have this HTML for a form but I need to use CSS to align my labels to the left of the text box and not have it sit on top. I don't know what CSS to use in order to do this.
<form action="process.php">
<h1>Registration</h1>
<ol>
<li>
<label for="name">Name:</label>
<input type>"text" id="name" name="name">
</li>
</ol>
</form>
There are three more "labels" like this in my ol but I don't feel like typing them all out.
I need the labels to the left aligned with my text boxes.
I have tried:
label{display:inline-block}
And:
label ol{display:inline-block}
I've tried giving floats, the text book (yes this is for a college class) says to do this:
.label{
display:inline-block;
}
But that doesn't seem to work either. Please tell me how on earth I can do this.
Here is my exact CSS so far:
h1{font-family:Oregano;}
form{margin-bottom:1em;}
form ol{list-style-type:none;}
form li{width:100px;
border:1px solid black;
text-align:right;
background-color:black;
color:white;
margin:20px;
height:20px;
white-space:5px;}
It looks exactly like it should, I just have an issue with the alignment of the labels. Have I mentioned how much I hate this crap? I'm changing my major! (not really... but still)
Are you looking for something like this? If so, then no CSS is needed.
<ol>
<li>
<label for="name">Name:</label>
<input type="text" value="some text" />
</li>
<li>
<label for="name">Name:</label>
<input type="text" value="some text" />
</li>
<li>
<label for="name">Name:</label>
<input type="text" value="some text" />
</li>
</ol>
So using your updated CSS here is a Solution:
form {
margin-bottom: 1em;
}
form ol {
list-style-type: none;
}
form li {
margin: 20px;
height: 20px;
white-space: 5px;
}
form label {
width: 100px;
border: 1px solid black;
text-align: right;
background-color: black;
color: white;
}
<form>
<ol>
<li>
<label for="name">Name:</label>
<input type="text" value="some text" />
</li>
<li>
<label for="name">Name:</label>
<input type="text" value="some text" />
</li>
<li>
<label for="name">Name:</label>
<input type="text" value="some text" />
</li>
</ol>
</form>
Both the label and the input must me inline/inline-block
label, input{
display:inline-block;
}
They of course must be next to each other, with the label on the left side in your case.
Btw: it's not a good idea to have labels & inputs inside li elements
If you check your example:
<form action="process.php">
<h1>Registration</h1>
<ol>
<li>
<label for="name">Name:</label>
<input type="text" id="name" />
</li>
</ol>
</form>
you will see that its like you want by default.
So it must be a problem in some CSS rule that gives display block to the input or label tag (or both)
Try this:
label, input {display:inline-block !important}
"!important" at the end is there just in case you need to override some other rule.
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"
I have an example here: http://jsfiddle.net/3zSbt/
I don't know how I'd even up my input boxes with eachother...
Any help would be greatly appreciated.
HTML
<div id="contactContent">
<form>
Email: <input type="text" name="firstName">
<br>
Subject: <input type="text" name="lastName">
</form>
</div>
CSS
#contactContent { margin-top: 50px; margin-left: 300px;}
input { border: none; margin-left: 50px; margin-bottom: 30px; padding-right: 50px;}
There are many ways. One way is putting your value names in label. Example:
HTML
<label>Email:</label><input type="text" name="firstName" />
<br />
<label>Subject:</label><input type="text" name="lastName" />
CSS
label{
display:inline-block;
width:100px;
}
JSFiddle.
If you wanted to use HTML you could try putting it in a table, or if you just want to use CSS have you tried this;
input {
display:inline-block;
float:left;
}
I am just trying to float an unordered list left, and a set of textboxes to the right so that they are adjacent to each other and have a uniform look within a div tag. The issue is that the text boxes are to the right ... but are positioned below the ul items
.PersonLI
{
float: left;
clear: both;
width: 100px;
margin-bottom: 10px;
}
.PersonBox
{
float: right;
clear: both;
width: 99px;
margin-bottom: 10px;
}
.FirstObj
{
border: 1px solid black;
margin-left: 100px;
width: 300px;
height: 200px;
}
<div class="FirstObj">
<ul style="list-style: none;">
<li class="PersonLI">First Name:</li>
<li class="PersonLI">Last Name:</li>
<li class="PersonLI">Address:</li>
<li class="PersonLI">City:</li>
<li class="PersonLI">State:</li>
<li class="PersonLI">Zip Code:</li>
</ul>
<input id="txtFname" type="text" value="" class="PersonBox"/>
<input id="txtLname" type="text" value="" class="PersonBox"/>
<input id="txtAddr" type="text" value="" class="PersonBox"/>
<input id="txtCity" type="text" value="" class="PersonBox"/>
<input id="txtState" type="text" value="" class="PersonBox"/>
<input id="txtZip" type="text" value="" class="PersonBox"/>
</div>
Could it be that I need to NOT clear the float on the last list item?
Your markup is kind of weird. A semantic form adapting your styles would look like this:
.FirstObj ul {
list-style: none;
}
.FirstObj li {
margin-bottom: 10px;
clear: both;
}
.FirstObj label {
width: 100px;
float: left;
}
.FirstObj input {
float: right;
width: 99px
}
<div class="FirstObj">
<ul>
<li>
<label for="txtFname">First Name:</label>
<input id="txtFname" type="text" value="" />
</li><li>
<label for="txtLname">Last Name:</label>
<input id="txtLname" type="text" value="" />
</li><li>
<label for="txtAddr">Address:</label>
<input id="txtAddr" type="text" value="" />
</li><li>
<label for="txtCity">City:</label>
<input id="txtCity" type="text" value="" />
</li><li>
<label for="txtState">State:</label>
<input id="txtState" type="text" value="" />
</li><li>
<label for="txtZip">Zip Code:</label>
<input id="txtZip" type="text" value="" />
</li>
</ul>
</div>
It's alway a good idea to use labels. Here's the working version: http://jsfiddle.net/Fmzbm/
Is there any specific reason why you are not using <label> tags for these fields?
To answer your CSS question, clear:both is not needed on either of the elements if you want them side by side.
Consider changing your markup:
HTML:
First Name:
CSS:
.FirstObj label { float:left; }
.FirstObj input { float:right; }
The code hinting is jacked up, need to try some more formatting.
Demo http://jsfiddle.net/qnev2/
You may want to change the fixed width of the li CSS rule to suit your needs but also change the markup and use the more semantically correct label tag. This also avoids the float property which in my experience can lead to undesirable behaviour if the HTML is re-flowed.
I'm noticing most folks are talking about using DIVs and CSS for
label, textbox pairs. How would one convert a table such as:
<table>
<tr>
<td><some Label1> </td>
<td><some TextBox1> </td>
</tr>
<tr>
<td><some Label2> </td>
<td><some TextBox2> </td>
</tr>
...
</table>
From using a table into say a div with CSS, a sample would be helpful! Currently I was using a table for such a thing, imagine say a site that just displays some user information. How would I display the pairs (the label, the text box) using DIVs rather than table format?
Assume the labels / textbox's are ASP.net labels and textboxes.
Consider this article at Woork titled Clean and Pure CSS Form Design
I've implemented this style, including the fieldset and tweaked all the styles appropriately for the look/feel that was required.
Consider using <label runat="server"> to inherit the style of the label via CSS instead of asp:label. Alternatively you could put your asp:label within label tags. Since asp:label emits <span>, that would simply result in a set of <label><span></span></label>.
Consider this article titled Tableless forms using CSS from CssDrive.
A little bit of style really helps. I've been refactoring/replacing all my table'd forms with the pattern found in the article above.
With the following code:
asp:textbox works perfectly, needs no modification for all kinds of textboxes
asp:button works perfectly, needs no modification
asp:checkbox would likely need modification, perhaps wrapped in another div with a special style
Here's the basic example presented:
The CSS:
<style type="text/css">
label{
float: left;
width: 120px;
font-weight: bold;
}
input, textarea{
width: 180px;
margin-bottom: 5px;
}
textarea{
width: 250px;
height: 150px;
}
.boxes{
width: 1em;
}
#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
br{
clear: left;
}
</style>
The HTML:
<form>
<label for="user">Name</label>
<input type="text" name="user" value="" /><br />
<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" value="" /><br />
<label for="comments">Comments:</label>
<textarea name="comments"></textarea><br />
<label for="terms">Agree to Terms?</label>
<input type="checkbox" name="terms" class="boxes" /><br />
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
</form>
Extract from my code:
<div>
<label for="Password"> Password:</label>
<input id="Password" type="password" name="Password"/>
<label for="ConfirmationPassword"> Confirmation: </label>
<input id="ConfirmationPassword" type="password" name="ConfirmationPassword"/>
<div class="clear"/>
</div>
<div>
<label for="FirstName"> Prénom:</label>
<input id="FirstName" type="text" value="" name="FirstName"/>
<label for="LastName"> Nom:</label>
<input id="LastName" type="text" value="" name="LastName"/>
<div class="clear"/>
</div>
</div>
with the following css:
label {
float:left;
margin-right:0.5em;
margin-top:10px;
padding-left:5px;
text-align:justify;
width:200px;
}
input[type="text"], textarea, input[type="password"], input[type="checkbox"], select {
float:left;
margin-right:10px;
margin-top:5px;
}
.clear {
clear:both;
}
I've used basically the same idea for creating a tableless form layout. But, I use an unordered list to hold my labels and inputs. For example:
<form>
<fieldset>
<ul class="formFields">
<li>
<label for="user">
Name</label><input type="text" name="user" value="" /></li>
<li>
<label for="emailaddress">
Email Address:</label><input type="text" name="emailaddress" value="" /></li>
<li>
<label for="comments">
Comments:</label><textarea name="comments"></textarea></li>
<li>
<label for="terms">
Agree to Terms?</label><input type="checkbox" name="terms" class="boxes" /></li>
</ul>
<p>
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" /></p>
</fieldset>
</form>
The CSS styles can be just the same as what pcampbell has used in his example. The only difference for mine would be the addition of a style for the UL such as:
ul {list-style: none; margin: 0; padding: 0;}
Based on #p.cambell answer and the implementation with css, I wrote this code in asp.net for a login popup screen:
css
.flotante-login {
border:solid 2px #b7ddf2;
border-radius: 5px;
padding: 15px;
background:#ebf4fb;
}
.loginBox {
margin: 0 auto;
width: 400px;
padding: 10px;
}
#login{
}
#login h1 {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
#login p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#login label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#login .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#login input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#login a{
clear:both;
width:125px;
padding: 10px;
background-color: #E2B66B;
color:#FFFFFF;
text-align:center;
text-decoration: none !important;
line-height:30px;
font-weight:bold;
color: #FFF !important;
border-radius: 5px;
}
aspx page:
<div id="popupLogin" class="flotante-login" style="display:none;">
<asp:Panel ID="panelLogin" runat="server" DefaultButton="lbLogin">
<div id="login" class="loginBox">
<h1>Acceso</h1>
<label>
Usuario:
<span class="small">Ingresa tu email</span>
</label>
<asp:TextBox ID="txtUsuario" runat="server" MaxLength="250"></asp:TextBox>
<label>
Contraseña:
<span class="small">Ingresa tu contraseña</span>
</label>
<asp:TextBox ID="txtPassword" runat="server" MaxLength="8" TextMode="Password"></asp:TextBox>
<asp:LinkButton ID="lbLogin" Text="Ingresa" runat="server"></asp:LinkButton>
<div class="spacer"></div>
</div>
</asp:Panel>
</div>
The result is: