I have the following form in a html5 document.I am a newbie as far as html and css goes.Basically,I am trying to learn with experimenting.
<form>
<ol style="list-style:none">
<li style="display: inline">
<label for="fname">First Name</label>
<input id="fname" type="text">
</li>
<li style="display: inline">
<label for="lname">Last Name</label>
<input id="lname" type="text">
</li>
<li>
<label for="dept">Department</label>
<input id="dept" type="text">
</li>
</ol>
</form>
Coming to the challenge I am facing,
1)I need to know how I can control the spacing between the label and the input field.
2)Also the space between the two li(first name and last names).
PS:I also have a CSS file which control the font,color,input width etc.
Try the following code.
For "ol li label" (in css code) you can also use margin instead of width, to control the distance between label and input items.
<head>
<style>
ol{
margin:0;
padding:0;
}
ol li{
margin:0 0 10px 0;
}
ol li label{
width:150px;
float:left;
}
ol li input{
float:left;
}
</style>
</head>
<body>
<form>
<ol>
<li>
<label for="fname">First Name</label>
<input name="fname" type="text">
</li>
<li>
<label for="lname">Last Name</label>
<input name="lname" type="text">
</li>
<li>
<label for="dept">Department</label>
<input id="dept" type="text">
</li>
</ol>
</form>
</body>
Try using margin-bottom and margin-top on your input elements.
See here for more info on margins in css.
Related
I'm creating a HTML form, and I'm using UL's and LI's to organize my fields.
Inside each LI i have a label and a Input. After some CSS to make LI display:inline-block, I get this result:
I have the example in this fiddle: https://jsfiddle.net/cygv07px/
The question is that I want that the street field to be in a new line, like this:
I achievied that by putting a <br /> element between the <LI>, but that doesn't seems to be a elegant solution, and I keep getting validation messages from Visual Studio, saying that I cant have a BR element inside a LI.
How can i specify a line break before Street Field (or after the name field) in a better way?
Use float:left and clear it for every odd child.
li {
list-style: none;
float: left;
}
label { display: block }
li:nth-child(odd) { clear: left;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
list-style: none;
float: left;
}
label { display: block }
li:nth-child(odd) { clear: left; }
</style>
</head>
<body>
<ul>
<li>
<label for="docNo">Doc Number</label>
<input type="text" id="docNo" />
</li>
<li>
<label for="name">Name</label>
<input type="text" id="name" />
</li>
<li>
<label for="street">Street</label>
<input type="text" id="street" />
</li>
<li>
<label for="houseNumber">House Number</label>
<input type="text" id="houseNumber" />
</li>
</ul>
</body>
</html>
One option is to use display block and floats.
li {
list-style: none;
display: block;
float: left;
margin: 0 1rem 1rem 0;
}
li:nth-child(odd) {
clear: left;
}
label { display: block }
<ul>
<li>
<label for="docNo">Doc Number</label>
<input type="text" id="docNo" />
</li>
<li>
<label for="name">Name</label>
<input type="text" id="name" />
</li>
<li>
<label for="street">Street</label>
<input type="text" id="street" />
</li>
<li>
<label for="houseNumber">House Number</label>
<input type="text" id="houseNumber" />
</li>
</ul>
I have a slightly different solution. When you use an HTML <table> element, you don't even need any CSS to format it. It also avoids float which in my experience can cause issues. My code is below or at https://jsfiddle.net/9myL5rbk/.
label {
display: block;
}
<table>
<tr>
<td>
<label for="docNo">Doc Number</label>
<input type="text" id="docNo" />
</td>
<td>
<label for="name">Name</label>
<input type="text" id="name" />
</td>
</tr>
<tr>
<td>
<label for="street">Street</label>
<input type="text" id="street" />
</td>
<td>
<label for="houseNumber">House Number</label>
<input type="text" id="houseNumber" />
</td>
</tr>
</table>
the previous solutions didn't work for me as I had some classes already set in my framework and I got weird resoluts, so I got a ver easy and simple solution!
If you have and ul displayed horizontaly and want to get a br: just add an extra 'empty' li with a 100% width, so it won't be displayed but it will produce a break line!
ul {
list-style-type: none;
}
li {
float: left;
padding-right: 20px;
}
<ul>
<li>your li element </li>
<li>your li element </li>
<li style="width: 100%;"></li>
<li>your li element </li>
<li>your li element </li>
</ul>
At some point I read that one should avoid float whenever possible as it breaks alot of other things you can potentially do with that element.
I think a flex-box based solution might be better.
Note that the container is not needed. I just used it to simulate the list having some finite space on the page.
label {
display: block;
}
ul {
display:flex;
flex-flow: wrap;
}
li {
list-style: none;
margin: 0;
padding: 0;
width: 50%;
}
.container {
width: 25rem;
margin: 1rem auto;
}
<div class="container">
<ul>
<li>
<label for="docNo">Doc Number</label>
<input type="text" id="docNo" />
</li>
<li>
<label for="name">Name</label>
<input type="text" id="name" />
</li>
<li>
<label for="street">Street</label>
<input type="text" id="street" />
</li>
<li>
<label for="houseNumber">House Number</label>
<input type="text" id="houseNumber" />
</li>
</ul>
</div>
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 have an issue where my style sheet isn't applying equally to all objects of the same type. Here is my HTML:
<form method="post" action="FILLTHISINLATER" name="NewFeaturesRequest" target="_blank">
<fieldset id="CustInfo">
<legend>Customer Information</legend>
<ol>
<p>Please provide the name of the person requesting this new feature.</p>
<li>
<label id="lblFName" for="txtFName">First Name:</label>
<input type="text" name="FName" tabindex="1" id="txtFName" />
</li>
<li>
<label id="lblLName" for="txtLName">Last Name:</label>
<input type="text" name="LName" tabindex="2" id="txtLName" />
</li>
</fieldset>
<fieldset id="FeatureInfo">
<legend>New Feature Information</legend>
<p align="left">What category does this feature fit into?</p>
<div id="radios" align="left">
<ol>
<li>
<input name="fType" type="radio" value="iPhone" />iPhone</li>
<li>
<input name="fType" type="radio" value="Messaging" />Messaging</li>
<li>
<input name="fType" type="radio" value="Contacts" />Contacts</li>
</ol>
</div>
</fieldset>
<fieldset id="AgentInfo">
<legend>Support Agent</legend>
<p>Your Name: <select id="ddbxAGENT" name="ddbxAGENT" onchange="display_unlisted_agent()">
<option selected="selected">Select Your Name</option>
<option value="Allen">Allen</option>
<option value="Ash">Ash</option>
<option value="Beau">Beau</option>
</select>
</p>
</fieldset>
I cut it down quite a bit. Next, my CSS for legend and fieldset (EDITED to include suggestion from misterManSam:
fieldset {
margin:0;
padding:0;
border-top: Green 2px solid;
border-left: none;
border-right: none;
border-bottom:none;
}
legend {
font-weight: bold;
color: Navy;
padding:0;
margin:0;
}
And finally, what it actually looks like:
Why, oh why, is that green border on the second fieldset sticking out so far? The same style is used as on the other two, so what the heck is going on here? It happens in Chrome, IE, and Firefox. It's purely cosmetic, but having an error like that is unprofessional.
There is a width on #infoboxes you need to remove.
#infoboxes {
/*width:650px;*/
float:left;
padding:10px;
}
Here is a Jsfiddle!
The fieldset borders are expanding to the width of the container, whatever that may be. You didn't show the code that's drawing the blue border around the whole form. If I correct the HTML validation errors and put a width on the body tag, I get this, which appears to display correctly, i.e. all the fieldset top borders are the same width:
<head>
<style type="text/css">
body {width: 500px;}
fieldset {
margin:0px;
border-top: Green 2px solid;
border-left: none;
border-right: none;
border-bottom:none;
}
legend {
font-weight: bold;
color: Navy;
}
</style>
</head>
<body>
<form method="post" action="FILLTHISINLATER" name="NewFeaturesRequest" target="_blank">
<fieldset id="CustInfo">
<legend>Customer Information</legend>
<p>Please provide the name of the person requesting this new feature.</p>
<ol>
<li>
<label id="lblFName" for="txtFName">First Name:</label>
<input type="text" name="FName" tabindex="1" id="txtFName" />
</li>
<li>
<label id="lblLName" for="txtLName">Last Name:</label>
<input type="text" name="LName" tabindex="2" id="txtLName" />
</li></ol>
</fieldset>
<fieldset id="FeatureInfo">
<legend>New Feature Information</legend>
<p align="left">What category does this feature fit into?</p>
<div id="radios" align="left">
<ol>
<li>
<input name="fType" type="radio" value="iPhone" />iPhone</li>
<li>
<input name="fType" type="radio" value="Messaging" />Messaging</li>
<li>
<input name="fType" type="radio" value="Contacts" />Contacts</li>
</ol>
</div>
</fieldset>
<fieldset id="AgentInfo">
<legend>Support Agent</legend>
<p>Your Name: <select id="ddbxAGENT" name="ddbxAGENT" onchange="display_unlisted_agent()">
<option selected="selected">Select Your Name</option>
<option value="Allen">Allen</option>
<option value="Ash">Ash</option>
<option value="Beau">Beau</option>
</select>
</p>
</fieldset>
I note some align="left" attributes which should be replaced with CSS, but they do not appear to be the cause of the problem.
I have a form with 4 textboxes, a checkbox and a select with their labels on their left. Here's my code:
<fieldset class="form-field">
<legend>
<label class="form-field k-checkbox">Parent Material</label>
</legend>
<ul class="form-field">
<li>
<label for="use_test_certificate" class="form-field">Use Test Certificate</label>
<input type="checkbox" name="use_test_certificate" class="k-checkbox form-field" />
</li>
<li>
<label for="parent_material" class="form-field">Material</label>
<select name="parent_material" class="form-field"></select>
</li>
<li>
<label for="proof_stress" class="form-field">0.2% Proof Stress</label>
<input type="text" name="proof_stress" size="24" maxlength="23" style="width:170px;" class="k-textbox form-field" />
</li>
<li>
<label for="do_weld_calculation" class="form-field">Do Weld Calculation</label>
<input type="checkbox" name="do_weld_calculation" class="k-checkbox form-field" />
</li>
<li>
<label for="weld_redistribution_factor" class="form-field">Weld Redistribution Factor</label>
<input type="text" name="weld_redistribution_factor" size="24" maxlength="23" style="width:170px;" class="k-textbox form-field" />
</li>
</ul>
</fieldset>
Problem is that the select displays next to the checkbox and not next to it's label. And when I increase the window size it jumps up to next to my first textbox. How can I tell it to show next to it's label. I'm not a CSS expert. I normally can work things out for myself, but this one baffles me completely. Any help is appreciated.
Amanda
Seeing as you haven't shown your CSS, I might as well show you the ideal solution using nothing but form elements :)
Note how I have changed the name attributes to id. The id, which needs to be unique, is used to identify the corresponding label by means of the labels for attribute.
Have a look at this fiddle!
CSS
fieldset {
width: 500px;
}
label {
display: block;
float: left;
clear: left;
width: 200px;
margin: 10px;
}
input, select {
display: block;
float: left;
margin: 10px;
}
input[type=text] {
width: 170px;
}
HTML
<fieldset class="form-field">
<legend>Parent Material</legend>
<label for="use_test_certificate" class="form-field">Use Test Certificate</label>
<input type="checkbox" id="use_test_certificate" class="k-checkbox form-field" />
<label for="parent_material" class="form-field">Material</label>
<select id="parent_material" class="form-field"></select>
<label for="proof_stress" class="form-field">0.2% Proof Stress</label>
<input type="text" id="proof_stress" maxlength="23" class="k-textbox form-field" />
<label for="do_weld_calculation" class="form-field">Do Weld Calculation</label>
<input type="checkbox" id="do_weld_calculation" class="k-checkbox form-field" />
<label for="weld_redistribution_factor" class="form-field">Weld Redistribution Factor</label>
<input type="text" id="weld_redistribution_factor" maxlength="23" class="k-textbox form-field" />
</fieldset>
I have the following element on my form:
<li>
<label class="fixed" for="Interests">Program genre interests:</label>
<label for="Sports"><%=Html.CheckBox("Sports")%>Sports</label>
<label for="Comedy"><%=Html.CheckBox("Comedy")%>Comedy</label>
<label for="News"><%=Html.CheckBox("News")%>News</label>
<label for="Drama"><%=Html.CheckBox("Drama")%>Drama</label>
<label for="Reality"><%=Html.CheckBox("Reality")%>Reality</label>
<label for="Kids"><%=Html.CheckBox("Kids")%>Kids'</label>
</li>
The "fixed" class simply makes the label an inline block with a fixed width (to align the fields properly). The problem shows up if the check boxes are forced to wrap for whatever reason, because the second row of check boxes starts back underneath the label, rather than left aligned with the first row of check boxes.
I'm trying really hard to minimize the necessary markup / styling here, but I'm not sure the most efficient way to achieve the alignment I'm looking for. What I'm getting is:
label text here: cb1, cb2, cb3, cb4
cb5, cb6, cb7, etc...
And what I want is
label text here: cb1, cb2, cb3, cb4
cb5, cb6, cb7, etc...
What is the shortest / simplest html / css to achieve this?
Edit: I should note that I'm trying to avoid using floats because the rest of the page will contain some floated elements and I've had issues with nested floats before.
I'm affraid the only way to achieve this is to wrap all your checkboxes into a div element:
<li>
<label class="fixed" for="Interests">Program genre interests:</label>
<div class="checkboxes-wrapper">
<label for="Sports"><%=Html.CheckBox("Sports")%>Sports</label>
<label for="Comedy"><%=Html.CheckBox("Comedy")%>Comedy</label>
<label for="News"><%=Html.CheckBox("News")%>News</label>
<label for="Drama"><%=Html.CheckBox("Drama")%>Drama</label>
<label for="Reality"><%=Html.CheckBox("Reality")%>Reality</label>
<label for="Kids"><%=Html.CheckBox("Kids")%>Kids'</label>
</div>
</li>
And use the following CSS:
.fixed, .checkboxes-wrapper { float:left }
.checkboxes-wrapper { width: 200px; } /* 200px should be replaced by whatever size you want it to be */
you could do something like this, assuming by "not using floats" you mean "not using float:" css. if by "floated" you mean "absolutely positioned", just tell me and I'll remove the answer.
<style type="text/css">
ul.Container
{
list-style-type:none;
display:block;
position:relative;
width:400px;
}
li.Label
{
display:block;
position:absolute;
width:150px;
left:0px;
top:0px;
}
li.Checkboxes
{
display:block;
position:absolute;
width:250px;
left:150px;
top:0px;
}
</style>
<ul class="Container">
<li class="Label">
program genre interests
</li>
<li class="Checkboxes">
<input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test <input type="checkbox">test
</li>
</ul>
though you'll have to wrap each checkbox and label into some inline tag, otherwhise you might end up with a break between a checkbox and it's label.
How about this:
*{margin:0;padding:0}
li {text-indent:-170px;margin-left:340px;overflow:show;display:block;}
.fixed {display:inline-block;width:160px;}
label {display:inline-block;width:80px;}
Works for me in firefox.
You'll need to play with the values a bit to get it to work with any margins and padding you already have set on the li's
I have always used an ordered list element to mark up each form element, and extend this for boolean lists such as yours. it gives the advantage of grouping each label/boolean input while only adding semantic markup to the mix - it actually benefits users without stylesheets to have the forms marked up in this way ...
<li>
<label for="...">Filter by date</label>
<input id="..." name="..." tabindex="1" type="text" value="" />
</li>
<li
<label for="...">Filter by status</label>
<ol>
<li class="containsBoolean">
<label for="...">Online</label>
<input id="..." name="..." type="checkbox" value="" />
</li>
<li class="containsBoolean">
<label for="...">Paused</label>
<input id="..." name="..." type="checkbox" value="" />
</li>
<li class="containsBoolean">
<label for="...">Disabled</label>
<input id="..." name="..." type="checkbox" value="" />
</li>
<li class="containsBoolean">
<label for="...">Deleted</label>
<input id="..." name="..." type="checkbox" value="" />
</li>
</ol>
</li>
<li class="containsBoolean">
<label for="...">Show Deleted</label>
<input id="..." name="..." type="checkbox" value="" />
</li>
<li>
<button type="submit">Filter</button>
</li>
It is then easy to address each list node and use a common class for the boolean input styling ...
form fieldset ol li {
margin-bottom:24px;
position:relative;
}
form fieldset ol li.containsBoolean input[type=checkbox],
form fieldset ol li.containsBoolean input[type=radio] {
left:0;
position:absolute;
top:0;
}
form fieldset ol li.containsBoolean label {
line-height:24px;
margin-left:30px;
}