I am trying to create a form to create a new user for my website. I would like to have the form fields horizontally aligned, to make it look nicer. I have tried doing this using some simple CSS, but I cannot get it to work*.
<html>
<form name="newUserForm" method="post" action="createUserScript.php">
<p>Username: <input name="username" type="text" autofocus class="formField"> </p>
<p>E-mail: <input name="email" type="text" class="formField"> </p>
<p>Password: <input name="password" type="text" class="formField"> </p>
<p>Repeat password: <input name="passwordRepeat" type="text" class="formField"> </p>
<p>Administrator: <input type="checkbox" name="isAdmin" class="formField"> </p>
</form>
</html>
And the CSS for the .formField class is
.formField {
margin-left: 150px;
width: 200px;
}
The whole thing is located in a <div> with the following properties (I dont know if this has anything to say)
#content {
padding: 10px;
margin-left: 250px;
font-family: arial;
}
Currently it seems to be making the margin from where the text ends, but I am not sure. What am I missing here?
*I could probably find some crazy workaround to make it work, but I cannot think of anything that seems reasonable.
Another thing you can do is use table alignment. That way you don't have to pick a width:
<form>
<p><label>Username:</label><input>
<p><label>Password:</label><input>
<p><label>Shoe size:</label><input>
<p><label>Favorite color:</label><input>
</form>
CSS:
form {
display: table;
}
form > p {
display: table-row;
}
form > p > label, form > p > input {
display: table-cell;
}
label {
font-weight: bold;
font-family: sans-serif;
text-align: right;
padding: 0 5px 0 5px;
}
Here's a CodePen. You can also do this with a <ul> if you've got some name/value pairs outside of a form:
<ul class=pairs>
<li><label>Whatever:</label><p>Some stuff ...
<li><label>Something Else:</label><p>More stuff ...
</ul>
The <ul> would be the table, each <li> is a row, and the <label> and <p> elements are the cells.
This is what I'd do (using labels):
<html>
<style type="text/css">
label{display:block; float:left; width:130px;}
.formFeild{width:200px;}
p{clear:both; margin-bottom:5px;}
</style>
<form name="newUserForm" method="post" action="createUserScript.php">
<p><label>Username:</label><input name="username" type="text" autofocus class="formField"> </p>
<p><label>E-mail:</label><input name="email" type="text" class="formField"> </p>
<p><label>Password:</label><input name="password" type="text" class="formField"> </p>
<p><label>Repeat password:</label><input name="passwordRepeat" type="text" class="formField"> </p>
<p><label>Administrator:</label><input type="checkbox" name="isAdmin" class="formField"> </p>
</form>
</html>
Related
I'm currently styling a WordPress site's contact form. The desired result should look something like this:
Normally, this could be easily achieved with a wrapper div around the text fields. Since this is WordPress, I can't do this without digging into the plugin (which is the last thing I want to do). The HTML WordPress produces looks like this:
<form ...>
<p class="..." data-id="name" data-type="input">
<label ...>Naam Achternaam</label>
<input type="text" ...>
</p>
<p class="..." data-id="company" data-type="input">
<label ...>Bedrijf</label>
<input type="text" ...>
</p>
<p class="..." data-id="email" data-type="input">
<label ...>E-mail</label>
<input type="email" ...>
</p>
<p class="..." data-id="phone" data-type="input">
<label ...>Telefoonnummer</label>
<input type="text" ...>
</p>
<p class="..." data-id="message" data-type="text">
<label ...>Vragen / opmerkingen</label>
<textarea ...></textarea>
</p>
...
</form>
which currently looks like this:
Is it possible to achieve what I'm after with this HTML structure or do I need to find a way to accommodate a wrapper div?
You could use position: absolute on the last p... not the nicest solution but a possible workaround without changing the HTML
form {
background: #00CDD4;
display: flex;
flex-direction: column;
position: relative;
}
form p {
margin: 1em;
display: flex;
flex-direction: column;
width: 45%;
}
form p label {
text-transform: uppercase;
font-family: sans-serif;
opacity: .87;
}
form p input {
border: none;
padding: 1em;
}
form p:last-of-type {
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
form p:last-of-type textarea {
height: 100%;
}
<form>
<p class="..." data-id="name" data-type="input">
<label ...>Naam Achternaam</label>
<input type="text" ...>
</p>
<p class="..." data-id="company" data-type="input">
<label ...>Bedrijf</label>
<input type="text" ...>
</p>
<p class="..." data-id="email" data-type="input">
<label ...>E-mail</label>
<input type="email" ...>
</p>
<p class="..." data-id="phone" data-type="input">
<label ...>Telefoonnummer</label>
<input type="text" ...>
</p>
<p class="..." data-id="message" data-type="text">
<label ...>Vragen / opmerkingen</label>
<textarea ...></textarea>
</p>
</form>
I tried alot but following your requirements it seems only possible through position absolute. Just for fun I tried to make without display: flex;
body {
background-color: #2dccd3;
font-family: 'Montserrat', sans-serif;
}
form.contact{
position: relative;
}
p.contact-field {
width: 45%;
}
p.contact-field input{
width: 100%;
}
input, label {
display:block;
}
p.contact-field:last-child{
margin: 0px;
}
.contact-field:last-child{
position: absolute;
right: 0px;
top: 0px;
width: 50%;
height: 89%;
}
textarea#message{
height: 100%;
}
<form class="contact">
<p class="contact-field" data-id="name" data-type="input">
<label for="name">Naam Achternaam</label>
<input id="name" type="text" name="name">
</p>
<p class="contact-field" data-id="company" data-type="input">
<label for="company">Bedrijf</label>
<input id="company" type="text" name="company">
</p>
<p class="contact-field" data-id="email" data-type="input">
<label for="email">E-mail</label>
<input id="email" type="email" name="email">
</p>
<p class="contact-field" data-id="phone" data-type="input">
<label for="phone">Telefoonnummer</label>
<input id="phone" type="text" name="phone">
</p>
<p class="contact-field" data-id="message" data-type="text">
<label for="message">Vragen / opmerkingen</label>
<textarea id="message" name="message"></textarea>
</p>
</form>
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/
What I have:
I have a login form with username and password text box fields. The fields are wrapped in labels.
What I need:
I need to remove the text of the labels because I want to apply placeholder values instead.
My code:
Note: I've managed to target the breaks but can't target the rendered text of the labels.
label[for=user_login] > br,
label[for=user_pass] > br {
display: none;
}
<p>
<label for="user_login">Username
<br>
<input type="text" name="log" id="user_login" class="input" value="" size="20">
</label>
</p>
<p>
<label for="user_pass">Password
<br>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20">
</label>
</p>
I require a CSS-based solution. Editing the mark-up is not an option.
Add this property on particular label class
label {
color: transparent;
}
Or create class for specific label and add this class on label
.txtlbl label{
color: transparent;
}
i have tried to give a solution according what you said above....
What i did is:
I have shifted the label text (with TEXT-INDENT property) and removed extra spances around "P" tag so that text will not appear and space
also will not be there, you can only see the textbox as you wanted.
Hope this helps you.
so your code will be like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
label[for=user_login] > br,
label[for=user_pass] > br {
display: none;
}
label {
text-indent: 9999px;
width: 100%;
display: block;
overflow: hidden;
}
p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>
<label for="user_login">Username
<br>
<input type="text" name="log" id="user_login" class="input" value="" size="20">
</label>
</p>
<p>
<label for="user_pass">Password
<br>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20">
</label>
</p>
</body>
</html>
Another idea...You could have the input field lay overtop of the label. This will mitigate potential accessibility issues such as discoverability, screen reader "focus", and possible scrolling caused by moving the label text offscreen when using a screen-reader or switch device.
[for^=user_] > br {
display: none;
}
[for^=user_] {
position: relative;
}
input[id^=user_] {
position: absolute;
left: 0;
top: 0;
margin: 0; //solve for Safari showing a bit of text due to 2px default margin
}
<p>
<label for="user_login">Username
<br>
<input type="text" name="log" id="user_login" class="input" value="" size="20">
</label>
</p>
<p>
<label for="user_pass">Password
<br>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20">
</label>
</p>
as for your situation that you can't edit the markup, what you can do is just give the input a margin-left -85px; so it covers the label and there is no space of where the label was.
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;
}
I want to create a form so there is text on the left side and the inputs on the right, currently I am doing
<div id="labels">
<ul>
<li>The Label</li>
</ul>
</div>
<div id="inputs">
<ul>
<li><input type="text /></li>
</ul>
</div>
And the CSS
input[type=text] {
height: 14px;
}
#labels {
float: left;
}
#inputs {
float: right;
}
li {
padding-top: 4px;
padding-left: 10px;
}
// Text size is 14px
What happens is that the text and fields are not aligned perfectly (the inputs get progressively lower as I add items). I am thinking this is because not all the inputs can be 14px (I use drop downs, checkboxes, radios, etc.).
What would be the correct way to create this? I know a table would fix the problem but is that semantic?
This sort of question has been asked multiple times here in SO, you can do a simple search and find many solutions.
But here is a simple form to get you started:
HTML
<form>
<div class="line">
<label for="input">Full Name</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="input">Company</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="nselect">Dropdown Menu</label>
<div class="input">
<select name="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="line">
<label for="input">Text 1</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="input">Text 2</label>
<div class="input">
<input type="text" size="30" name="input">
</div>
</div>
<div class="line">
<label for="input">Text 3</label>
<div class="input">
<input type="text" size="15" name="input">
</div>
</div>
</form>
CSS
form {
margin:10px 0;
}
label {
color: #404040;
float: left;
font-size: 13px;
line-height: 18px;
padding-top: 6px;
text-align: right;
width: 130px;
}
label, input, select, textarea {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: normal;
}
input, textarea, select {
-moz-border-radius: 3px 3px 3px 3px;
border: 1px solid #CCCCCC;
color: #808080;
display: inline-block;
font-size: 13px;
height: 18px;
line-height: 18px;
padding: 4px;
width: 210px;
}
select {
height: 27px;
line-height: 27px;
}
form .input {
margin-left: 150px;
}
form .line {
margin-bottom: 18px;
}
Here is a demo: http://jsfiddle.net/5aduZ/1/
A lot of people will not agree with my use of divs to separate the form elements but through testing i found this format to be the safest and surefire way to go about it as it separates the fields cleanly, and it works just fine under IE. Plus, it is the format used by the big boys (facebook, twitter, google).
It makes sense for the label to be next to the input in the HTML - it's easier to read and more maintainable. Typical HTML for this would be:
<div class="fieldWrapper">
<label for="something">Something</label>
<input type="text" id="something" name="something">
</div>
<div class="fieldWrapper">
<label for="something">Something</label>
<input type="text" id="something" name="something">
</div>
And CSS would be:
label, input {
float:left;
}
input {
font-size:14px;
padding: 2px; // instead of using fixed height
}
label {
width: 100px; // can use JavaScript if it needs to be dynamic
padding-top: 3px; // to make the label vertically inline with the input element
}
.fieldWrapper {
clear:left;
}
If you really can't change your HTML, you could set a CSS height on the <li> tag to fix the alignment problem. But I strongly recommend you to choose one of other proposed solutions, because your HTML is very hard to read in its current state. And you should use the <label> tag.
Write this <input type="text" name="firstname" /> and set the height width and padding
At my company, way back when we first started our first web application back in 2001, we used a table.
<table class="formTable">
<tbody>
<tr>
<td><label>Name:</label></td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td><label>E-mail:/label></td>
<td><input type="text" name="email" /></td>
</tr>
</tbody>
</table>
And while this works, philosophically I don't like the approach, because as far as I am concerned, a table should hold table-ized data.
You could use CSS and DIV's, as well:
<style>
.formLabel, .formInput {
display:inline-block;
}
</style>
<div class="formField">
<div class="formLabel"><label>Name:</label></div>
<div class="formInput"><input type="text" name="name" /></div>
</div>
<div class="formField">
<div class="formLabel"><label>E-Mail:</label></div>
<div class="formInput"><input type="text" name="email" /></div>
</div>
See here: http://jsfiddle.net/9P7pg/
Or, you could avoid the use of div's all together, and just apply the display: inline-block for each label and input (or use classes). But then you will also have to remember to use a breaking space for carriage returns in between the label-field combination.
there is a special list for this actually! it's called definition list (dl) and is comprised of definition terms and definition definitions (dt/dd). i usually put the text in the dt and the input box in the dd. like this:
<form action="bla">
<dl>
<dt>Name*</dt>
<dd><input type="text" name="name" />
<dt>Email</dt>
<dd><input type="text" name="email" />
</dl>
<p><input type="submit" /></p>
</form>