I have a simple HTML form with some validations but the text labels get misplaced when the form appears.
This is the form before (PLEASE NOTE: The red square around it is not part of the form, I just placed it with Paint to help you see the problem quick):
And after:
Any hint to keep the label aligned with the text field please?
UPDATE:
This is the code:
<form name="senstageaddform">
<div class="form-element">
<label for="ed_senStartDate" class="text-label">
{{i18n "EDUCATION_SEN_START_DATE"}} <span class="required">*</span>
</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senStartDate" name="startDate"/>
</div>
<div class="form-element">
<label for="ed_senEndDate" class="text-label">{{i18n "EDUCATION_SEN_END_DATE"}}</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senEndDate" name="endDate"/>
</div>
</form>
Here is the CSS:
.form-element {
display: inline-block; margin: 5px; width: 98%; clear: both; vertical-align:top
.text-label {
width: 20%; text-align: right; display: inline-block; padding: 3px 5px 0px 1px;
}
.standard-text-field {
width: 10em;
}
Related
I have defined a simple form to learn about clear. I am surprised the 'Submit' button is not going to the next line. My understanding of clear:both is that there should be no floated element to the left or right of the element to which clear is applied. Given this definition, I was expecting Submit to move the last line since I have applied clear to input and label.
can someone pls explain why this is not working? Pls note my goal is to understand where my understanding is flawed and not how to bring the Submit button to the next linec
label {
color: blue;
float: left;
margin-right: 2px;
clear: left;
width: 3em;
}
input {
border: 2px black solid;
float: left;
width: 10em;
}
button {
clear: both;
margin-left: auto;
margin-right: auto;
}
<form action="#">
<fieldset>
<label>Name </label>
<input type="text" value="Enter name" />
<label>Phone </label>
<input type="text" value="Enter phone" />
<button type="button">Submit </button>
</fieldset>
</form>
9.5.2 Controlling flow next to floats: the 'clear' property
Applies to: block-level elements
Button, is by default, an inline level element, not a block level element. To make clear apply, give it display:block;
label {
color: blue;
float: left;
margin-right: 2px;
clear: left;
width: 3em;
}
input {
border: 2px black solid;
float: left;
width: 10em;
}
button {
display:block;
clear: both;
margin-left: auto;
margin-right: auto;
}
<form action="#">
<fieldset>
<label>Name </label>
<input type="text" value="Enter name"/>
<label>Phone </label>
<input type="text" value="Enter phone"/>
<button type="button">Submit </button>
</fieldset>
</form>
I'm trying to get certain elements of this form to be displayed on the same line: I want the output of the form to be displayed on the same line as "Total: $ " - (I still want the price per lb ($1.00 in this example) to be displayed on the line above and the number spinner to be displayed to the right). I tried to wrap the whole thing in a <span> that I set the CSS of to be display:inline but it didn't work (& I've tried a few other things as well which also didn't work).
Here's a selection of my code:
HTML:
<div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
<legend>$1.00</legend>
<span class="quant"><p><label for="quant">QTY</label>
<input type="number" min="1" max="5" id="quantity" name="quantity"></p></span>
<span class="inline"><p>Total:$<output name="amount" for="quantity"></output></p></span>
</form>
</div>
CSS:
legend { float: left;
margin-top: 35px;
padding-top: 20px;
margin-bottom: 5px;
}
.inline { display: inline; }
.quant { text-align: right;
max-width: 30em;
float: right;
margin-top: 25px;
padding-bottom: 5px;
margin-bottom: 10px;
}
legend { float: left;
}
.inline { display: inline; }
.quant { text-align: right;
max-width: 30em;
float: right;
}
form > * { border:1px solid red; line-height:2em }
<div class="caption">
<form onsubmit="return false" oninput="amount.value = (quantity.valueAsNumber * (1))">
<legend>$1.00</legend>
<span class="quant">
<label for="quant">QTY</label>
<input type="number" min="1" max="5" id="quantity" name="quantity">
</span>
<span>Total:$<output name="amount" for="quantity"></output></span>
</form>
</div>
Get rid of your p tags. Try not to use dispensable containers and classes. Your code would be more readable. You can change the line-height value of form > *
Am designing the 'Login' page, here, the page look okay before I press the submit button, but, just after I pressed the submit button, it looks not okay. The second div moved little bit downward. Any help to solve this issue? pls refer the below image
html
<div class="LogIn">
<form id="UserLogIn" name="loginForm" method="post"> <!-- onsubmit="return validateForm(this);" -->
<label>Firstname Lastname</label><input type="text" name="username" placeholder="Firstname Lastname"/>
<span class="user-name">Name should not be empty</span>
<label>Password</label><input type="password" name="password" placeholder="Password"/>
<label>Confirm password</label><input type="password" name="password1" placeholder="Confirm password"/>
<span class="password">Password does not be match</span>
<label>Email</label><input type="email" name="email" placeholder="Email"/>
<span class="email">Email is not valid</span>
<label>Website</label><input type="url" name="url" placeholder="Website"/>
<span class="urlcontent">Invalid Website URL</span>
<input name="submit" type="submit" value="Submit"/>
</form>
</div>
<div class="BusinessConnect">
<p>Business Unit</p>
<div id="BuCheck" class="BusinessCont">
<p><input type="checkbox" name="checkboxG1" id="checkbox1" class="form-checkbox" value="Sapient"/><label for="checkbox1" class="form-label">Test</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox2" class="form-checkbox" value="SapientNitro"/><label for="checkbox2" class="form-label">TestNitro</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox3" class="form-checkbox" value="Test Global Market"/><label for="checkbox3" class="form-label">Test Global Market</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox4" class="form-checkbox" value="Test Government Services"/><label for="checkbox4" class="form-label">Test Government Services</label></p>
<p><input type="checkbox" name="checkboxG2" id="checkbox5" class="form-checkbox" value="Test (m)PHASIZE"/><label for="checkbox5" class="form-label">Test (m)PHASIZE</label></p>
</div>
</div>
css
.BusinessConnect {
float: left;
font-size: 80%;
height: 30%;
margin-right: 0;
position: relative;
top: 3px;
width: 35%;
}
.LogIn {
float: left;
margin-left: 256px;
margin-top: 15px;
width: 30%;
}
After the 'submit' button pressed,
One of the way you can follow is by seperating the divs like this,
<section>
<div id="LogIn">
You can put your thing here
</div>
<div id="BusinessConnect">
<p>Business Unit</p>
Your second part
</div>
</section>
/// Your CSS
section {
width: 100%;
height: 200px;
margin: auto;
padding: 10px;
}
div#BusinessConnect {
border:1px solid #000000;
margin-left:50%;
height: 200px;
}
div#LogIn {
width: 45%;
float: left;
border:1px solid #000000;
height:200px;
}
Its just a sample, you can further work on it.
And I myself prefer using % instead of pixels, because they are helpful for responsive layouts.
Many different ways to accomplish what you'd like, but if floating isn't a necessity you could try the following:
.BusinessConnect {
display: table-cell;
vertical-align: top;
font-size: 80%;
height: 30%;
margin-right: 0;
position: relative;
top: 3px;
width: 35%;
}
.LogIn {
display: table-cell;
vertical-align: top;
margin-left: 256px;
margin-top: 15px;
width: 30%;
}
I am making a simple (ha!) table. There are problems with what I've included that I would like to fix.
I would like the left hand edges of the input fields to line up. The checkbox and button don't.
I would like to vertically center the text in the labels w.r.t. the associated text input controls.
I would like to avoid the 12em margin on the final submit button.
Thanks. Any ideas appreciated.
p {
text-align: center;
}
p label {
float: left;
clear: left;
width: 20em;
text-align: right;
margin: .25em 1em 0em 0em;
padding: .25em;
}
p label input {
float: right;
clear: right;
padding: .25em;
}
#submit {
clear: both;
float: left;
margin: 1em 0em 0em 12em;
clear: left;
width: 6em;
text-align: center;
background: yellow;
}
p > input {
text-align: center;
}
span {
padding: 0em 1em 0em 0em;
}
<form>
<div>
<p>
<label><span>Name:</span>
<input id="name" type="text" placeholder="Name" autofocus required>
</label>
</p>
<p>
<label><span>Password:</span>
<input id="password" type="password" placeholder="Password" required>
</label>
</p>
<p>
<label><span>Are you a photographer?:</span>
<input id="photog" type="checkbox">
</label>
</p>
<p>
<input type="submit" id="submit" value="Register">
</p>
</div>
</form>
This doesn't do everything you want but it's a start. I've taken <input> elements outside of the <label> elements allowing the <label>s to get a fixed width by adding display: inline-block. I also gave the <label>s a for attribute to keep them linked to their corresponding <input> field. By adding an empty <label> in front of the submit button it gets the proper layout.
In general it's a good idea to use float as little as possible and to style using classes instead of styling the html elements directly. I personally always look at Bootstrap (in this case its forms styling) to see how they do it.
label {
width: 11em;
display: inline-block;
text-align: right;
margin-right: .25em;
padding: .25em;
}
input {
padding: .25em;
}
#submit {
margin: 1em 0em;
text-align: center;
background: yellow;
}
<form>
<div>
<p>
<label for="name">Name:</label>
<input id="name" type="text" placeholder="Name" autofocus required>
</p>
<p>
<label for="password">Password:</label>
<input id="password" type="password" placeholder="Password" required>
</p>
<p>
<label for="photog">Are you a photographer?:</label>
<input id="photog" type="checkbox">
</p>
<p>
<label></label>
<input type="submit" id="submit" value="Register">
</p>
</div>
</form>
My suggestion is to use a table (ha!) in the first place.
Consider using: http://jsfiddle.net/qy911wrb/
<table><tr><td></td></tr></table>
has been added and some CSS was adjusted that you requested.
Please indicate if there should be any other visual adjustments.
I have a basic css question. I'm trying to add css to my form, the code is below:
<div id="content">
<form id="form1" method="post" action="">
<p>
<label for="name" class="title">Your name:</label>
<input name="name" type="text" class="widebox" id="name">
</p>
<p>
Colour: <select name="colour_pref" size "1">
<option value="1">Pink</option>
<option value="2">Blue</option>
<option value="3">White</option></select>
</p>
<p class="submit">
<input type="submit" name="add" value="add_colour" id="add">
</p>
</form>
</div>
and this is the css:
#content p {
border-bottom: 1px solid #efefef;
margin: 10px;
padding-bottom: 10px;
width: 260px;}
.title {
float: left;
width: 100px;
text-align: right;
padding-right: 10px;}
.submit {
text-align: right;}
The problem is the select element is not aligned with the name field, I tried to add class="title" to it but it made it even messier.
Would really appreciate if you could help me align this select element VERTICALLY with the text field. thanks
Something like this DEMO http://jsfiddle.net/kevinPHPkevin/XzHG2/1/
.submit input {
margin-left:110px;
}
Just add display inline to your pararaph:
p {
display: inline;
}
Demo