I've been trying to get my form elements to align for ages and tried restarting multiple times, but it's just not working with me. This is what I'm trying to get:
This is what I get:
JSFiddle demo
My main problem is probably the radio buttons, which I can't get text to the right of when they're floated right, and for some reason can't get to float left without floating everything left.
I am really new to HTML, so I might just be missing something obvious?
.container {
margin-left: 300px;
margin-right: 600px;
margin-bottom: 200px;
line-height: 3;
display: inline-block;
}
.container input {
width: 700px;
float: right;
}
.container select {
width: 400px;
float: right;
}
<div class="container">
<form action="user data.php">
<input type="text" name="fname" value="First Name"> <br>
<input type="text" name="lname" value="Last Name"> <br>
<input type="text" name="email" value="e-mail Address"> <br>
<input type="text" name="cell" value="Cell Number"> <br>
<input type="text" name="id" value="ID/Passport Number"> <br>
<input type="text" name="dob" value="Date of Birth"> <br>
<label for="course">Course:</label>
<select name="course"></select> <br>
<label for="hlevel">Highest Education Level:</label>
<select name="hlevel"></select> <br>
<p>Identification Type:</p>
<input type="radio" name="idtype" id="passnum" style="width: 5px;" value="Passport Number">
<label for="passnum"> Passport Number </label> <br>
<input type="radio" name="idtype" id="idnum" value="ID Number">
<label for="idnum"> ID Number </label> <br>
<label for="gender">Gender:</label>
<label for="pgroup">Population Group:</label>
<select name="pgroup"></select> <br>
<input type="submit" name="submitbtn" value="Submit Info">
</form>
</div>
In HTML, add class to submit button
<input class="submit-btn" type="submit" name="submitbtn" value="Submit Info">
In CSS, add below
form {
max-width: 700px;
}
input {
max-width: 700px;
}
.submit-btn {
max-width: 80px;
}
Related
I am attempting to align the two cells for the address input. The one that is inline I can shift, but the ones that are not I do know know how to shift right. If I could get some creative feed back I would appreciate it.
.EMBody {
position: relative;
background-color: navajowhite;
}
.EMSpace {
display: inline-block;
width: 100px;
}
.EMAdj {
display: inline-block;
margin-right: 20%;
}
input[type="text"] {
width: 60%;
}
<section class="EMBody">
<div>
<label class="EMSpace">Full Name:</label>
<input type="text" placeholder="Enter your name">
</div>
<div>
<label class="EMSpace">Address:</label>
<input type="text" placeholder="Street address">
<input type="text" class="EMAdj" placeholder="City">
<input type="text" class="EMAdj" placeholder="Zip">
</div>
<div>
<label class="EMSpace">Phone Number:</label>
<input type="text" placeholder="9999999999">
</div>
<div>
<label class="EMSpace">Email:</label>
<input type="text" placeholder="email#email.com">
</div>
<div>
<label class="EMSpace">Brief Message: </label>
<textarea cols="25" rows="5" class="message" placeholder="Please give a brief discription of your Iguana issues. Green or Spiny Tailed? In the attics, flowerbed, canal?"></textarea>
</div>
</section>
use nth-child :
.EMBody {
position: relative;
background-color: navajowhite;
}
.EMSpace {
display: inline-block;
width: 100px;
}
.EMAdj {
display: inline-block;
margin-right: 20%;
}
input[type="text"] {
width: 60%;
}
input:nth-child(3),input:nth-child(4)
{
margin-left:104px;
}
<section class="EMBody">
<div>
<label class="EMSpace">Full Name:</label>
<input type="text" placeholder="Enter your name">
</div>
<div>
<label class="EMSpace">Address:</label>
<input type="text" placeholder="Street address">
<input type="text" class="EMAdj" placeholder="City">
<input type="text" class="EMAdj" placeholder="Zip">
</div>
<div>
<label class="EMSpace">Phone Number:</label>
<input type="text" placeholder="9999999999">
</div>
<div>
<label class="EMSpace">Email:</label>
<input type="text" placeholder="email#email.com">
</div>
<div>
<label class="EMSpace">Brief Message: </label>
<textarea cols="25" rows="5" class="message" placeholder="Please give a brief discription of your Iguana issues. Green or Spiny Tailed? In the attics, flowerbed, canal?"></textarea>
</div>
</section>
The easiest fully responsive solution would be to use CSS-Grid. THis would allow you to cut the code down a lot.
simply use a 2 column layout and let the label for the address span 3 rows.
.EMBody {
display: grid;
grid-template-columns: min-content auto;
column-gap: 10px;
}
.EMBody {
white-space: nowrap;
}
.EMBody label:nth-of-type(2) {
grid-row: span 3;
}
<section class="EMBody">
<label class="EMSpace">Full Name:</label>
<input type="text" placeholder="Enter your name">
<label class="EMSpace">Address:</label>
<input type="text" placeholder="Street address">
<input type="text" class="EMAdj" placeholder="City">
<input type="text" class="EMAdj" placeholder="Zip">
<label class="EMSpace">Phone Number:</label>
<input type="text" placeholder="9999999999">
<label class="EMSpace">Email:</label>
<input type="text" placeholder="email#email.com">
<label class="EMSpace">Brief Message: </label>
<textarea cols="25" rows="5" class="message" placeholder="Please give a brief discription of your Iguana issues. Green or Spiny Tailed? In the attics, flowerbed, canal?"></textarea>
</section>
I am creating a form and I would like all of the text boxes to line up along with having the submit button centered. These were the directions I was given:
create a label element selector to float to the left with block
display set text alignment to right assign width of 8em set an
appropriate amount of padding configure and input element and
textarea element selectors with block display of 12em bottom margin
Here is the code I have so far:
form{
float:left;
display:block;
text-align:right;
width:8em;
}
input {
display: block;
margin-bottom:1em;
}
textarea#feedback {
display: block;
margin-bottom:1em;
}
.form{
margin-left: 12em;
}
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required> <br>
<label for="Experience">Experience*</label>
<textarea rows="2" cols="20">
</textarea><br>
<input type="submit" value="Apply Now">
</div>
</form>
I have no idea what I am doing wrong with my CSS. I tried changing the padding and the margins but nothing worked. What am I missing from my code? Any feedback would be greatly appreciated.
Here's the working fiddle: https://jsfiddle.net/qptgsc1e/
Just some minor changes, Replace this CSS and HTML and you're good to go.
If you want to see the code changes Check it here
form{
float:left;
display:block;
width:50%;
}
input {
display: block;
margin-bottom:1em;
width: 50%;
}
input[type='submit']{
width:30%;
margin:0 auto;
}
textarea#feedback {
display: block;
margin-bottom:1em;
width:50%;
}
.submit-wrap{
width:50%;
}
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required> <br>
<label for="Experience">Experience*</label><br>
<textarea rows="2" id="feedback">
</textarea><br>
<div class="submit-wrap"><input type="submit" value="Apply Now"></div>
</div>
</form>
First lets start with fixing your HTML.
This line is formatted wrong.
<input type="email" name="email" id= value"" required> <br>
Needs to be
<input type="email" name="email" id="" value="" required> <br>
To be.
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label><br>
<input type="form" name="Name" id="" value="" required>
<label for="Email">Email*</label><br>
<input type="email" name="email" id="" value="" required>
<label for="Experience">Experience*</label><br>
<textarea rows="2" cols="20"></textarea><br>
<input type="submit" value="Apply Now">
</div>
</form>
Now that we have that fixed as well as some spacing we can start on centering the submit button.
Now we will wrap the submit button with a div
<div class="buttonHolder">
<input type="submit" value="Apply Now">
</div>
Then all that is left is to style the div, you can do this which ever way you find best margin, text-align, etc.
.buttonHolder{ text-align: center; }
Final HTML:
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label><br>
<input type="form" name="Name" id="" value="" required>
<label for="Email">Email*</label><br>
<input type="email" name="email" id="" value="" required>
<label for="Experience">Experience*</label><br>
<textarea rows="2" cols="20"></textarea><br>
<div class="buttonHolder">
<input type="submit" value="Apply Now">
</div>
</div>
</form>
Check if this style works for you.
form{
float:left;
display:block;
/* text-align:right; */
width:8em;
margin-left: 12em;
min-width: 180px;
}
input, textarea{
min-width: 180px;
}
label{
display: block;
}
input {
display: block;
margin-bottom:1em;
}
input[type="submit"]{
display: block;
margin: auto;
width: auto;
min-width: 50px;
}
textarea#feedback {
display: block;
margin-bottom:1em;
}
<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required> <br>
<label for="Experience">Experience*</label>
<textarea rows="2" cols="20">
</textarea><br>
<input type="submit" value="Apply Now">
</div>
</form>
please include style in the submit button.
<input type="submit" value="Apply Now" style="margin:0 auto;">
refer : center form submit buttons html / css
Is there a way to fix a form in such a way that the form does not fluctuate?
The desired shape of the form is:
The actual shape of the form fluctuates:
Here is the .css:
form {
background-color: white;
padding: 20px;
border: 1px solid black;
position: fixed;
top: 80%;
left: 50%;
transform: translate(-50%, -80%);
float: left;
}
#textarea-container {
float:right;
}
#inputs-container {
float: left;
width: 145px;
}
input[type=text] {
width: 100%;
}
input, textarea {
display: block;
}
textarea {
height: 100px;
width: 140px;
}
If you look at the .css, the form property for position is marked as fixed but the form still fluctuates.
Here is the HTML
<form name="contactform" method="post" action="mail.php">
<div id="textarea-container">
<textarea name="questions" placeholder="Questions" maxlength="1000" cols="25" rows="6"></textarea>
</div>
<div id="inputs-container">
<input type="text" name="first_name" placeholder="First Name">
<input type="text" name="last_name" placeholder="Last Name">
<input type="text" name="email" placeholder="Email">
<input type="text" name="telephone" placeholder="Telephone">
</div >
<input id="submit" type="submit" value="Submit">
</form>
Since you have floats on the two divs inside the form, you'll need to put a wrapper around them and set a fixed width, ie:
<form name="contactform" method="post" action="mail.php">
<div id="wrapper">
<div id="textarea-container">
<textarea name="questions" placeholder="Questions" maxlength="1000" cols="25" rows="6"></textarea>
</div>
<div id="inputs-container">
<input type="text" name="first_name" placeholder="First Name">
<input type="text" name="last_name" placeholder="Last Name">
<input type="text" name="email" placeholder="Email">
<input type="text" name="telephone" placeholder="Telephone">
</div >
</div>
<input id="submit" type="submit" value="Submit">
</form>
and
#wrapper{
width:250px;
}
I am wanting to make a label on a form that is much longer than the other labels in the form appear on multiple lines. I then want to align the inputs to the labels on the colons of the labels.
Here is a picture of the current set up:
Basically, I need Releasse Date to appear as
Release Date
(YYYY-MM-DD): [input box]
HTML Code:
<form action="http://localhost/songadded.php" method="post" id="songform">
<h4>Add a New Song</h4>
<div>
<label for="name">Name:</label>
<input type="text" name="name" size="30" value=""/>
</div>
<div>
<label for="artist">Artist:</label>
<input type="text" name="artist" size="30" value=""/>
</div>
<div>
<label for="album">Album:</label>
<input type="text" name="album" size="30" value=""/>
</div>
<div>
<label for="genre">Genre:</label>
<input type="text" name="genre" size="30" value=""/>
</div>
<div>
<label for="release_date" id="rdlabel">Release Date (YYYY-MM-DD):</label>
<input type="text" name="release_date" size="30" value="" id="rdinput"/>
</div>
<div>
<label for="bpm">BPM:</label>
<input type="text" name="bpm" maxlength="3" value=""/>
</div>
<div id="songsubmit">
<input type="submit" name="submit" value="Add Song"/>
</div>
</form>
CSS Code:
#songform {
margin: 20px;
}
label {
float: left;
width: 250px;
margin-top: 20px;
clear: right;
}
input{
margin-top: 20px;
}
#songsubmit {
margin-left: 80px;
}
Use display:inline-block and vertical-align:bottom. No floats or absolute positioning needed.
#songform {
margin: 20px;
}
#songform > div {
position: relative;
margin-top: 20px;
}
label {
display:inline-block;
width: 250px;
vertical-align:bottom;
}
#songsubmit {
margin-left: 80px;
}
<form action="http://localhost/songadded.php" method="post" id="songform">
<h4>Add a New Song</h4>
<div>
<label for="name">Name:</label>
<input type="text" name="name" size="30" value=""/>
</div>
<div>
<label for="artist">Artist:</label>
<input type="text" name="artist" size="30" value=""/>
</div>
<div>
<label for="album">Album:</label>
<input type="text" name="album" size="30" value=""/>
</div>
<div>
<label for="genre">Genre:</label>
<input type="text" name="genre" size="30" value=""/>
</div>
<div>
<label for="release_date" id="rdlabel">Release Date<br>(YYYY-MM-DD):</label>
<input type="text" name="release_date" size="30" value="" id="rdinput"/>
</div>
<div>
<label for="bpm">BPM:</label>
<input type="text" name="bpm" maxlength="3" value=""/>
</div>
<div id="songsubmit">
<input type="submit" name="submit" value="Add Song"/>
</div>
</form>
I've made a fiddle with code for your case: http://jsfiddle.net/862xc2j1/
You can solve it with adding clear:left to each div wrapper for each form field block.
<div class="form-item">
<label for="name">Name:</label>
<input type="text" name="name" size="30" value=""/>
</div>
.form-item {
clear: left;
}
To get this alignment next to the colon, you can use absolute positioning. Here is a working example - I made a few more changes to get it to work:
#songform {
margin: 20px;
}
#songform > div {
position: relative;
margin-top: 20px;
}
#songform > div:after {
/* Clearfix */
content:"";
display:table;
clear:both;
}
#songform > div > input {
position: absolute;
bottom: 0;
}
label {
float: left;
width: 250px;
clear: right;
}
#songsubmit {
margin-left: 80px;
}
<form action="http://localhost/songadded.php" method="post" id="songform">
<h4>Add a New Song</h4>
<div>
<label for="name">Name:</label>
<input type="text" name="name" size="30" value=""/>
</div>
<div>
<label for="artist">Artist:</label>
<input type="text" name="artist" size="30" value=""/>
</div>
<div>
<label for="album">Album:</label>
<input type="text" name="album" size="30" value=""/>
</div>
<div>
<label for="genre">Genre:</label>
<input type="text" name="genre" size="30" value=""/>
</div>
<div>
<label for="release_date" id="rdlabel">Release Date<br>(YYYY-MM-DD):</label>
<input type="text" name="release_date" size="30" value="" id="rdinput"/>
</div>
<div>
<label for="bpm">BPM:</label>
<input type="text" name="bpm" maxlength="3" value=""/>
</div>
<div id="songsubmit">
<input type="submit" name="submit" value="Add Song"/>
</div>
</form>
hello i'm creating a login form .but my check box and term text related to it not positioning correctly .i have add <br> tag but no effect .i tried clearfix it's not work either.here is the fiddle preview.
this is my html code
<div class="mainlog">
<form>
<label class="la" for="xname">Name</label><input name="xname" class="in" value="" type="text"><br>
<label class="la" for="xemail">Email</label><input name="xemail" class="in" value="" type="text"><br>
<label class="la" for="xpass">password</label><input name="xpass" class="in" value="" type="text"><br>
<label class="la" for="xpasscon">confirm</label><input name="xpasscon" class="in" value="" type="text"><br>
<input type="checkbox" name="term"/><label class="lb" for="term" >I have read and agree to the Terms of Use and the Privacy Policy</label><br>
<input type="submit" value="Sign Up" />
</form>
</div>
Wrap the checkbox and text in a div and float it left. Avoid the usage of <center> it will not be supported in HTML5
.mainlog {
width: 450px;
height: 250px;
border: 5px solid #DBDBDB;
border-radius: 5px;
padding: 20px;
}
.in {
padding: 8px;
border: 1px solid #DFDFDF;
width: 250px;
float: left;
margin-bottom: 10px;
border-radius: 5px;
}
.la {
width: 120px;
float: left;
text-align: left;
text-transform: uppercase;
color: #6B6B6B;
clear: both;
}
.lb {} .checkbox {
float: left;
}
}
<center>
<div class="mainlog">
<form>
<label class="la" for="xname">Name</label>
<input name="xname" class="in" value="" type="text">
<br>
<label class="la" for="xemail">Email</label>
<input name="xemail" class="in" value="" type="text">
<br>
<label class="la" for="xpass">password</label>
<input name="xpass" class="in" value="" type="text">
<br>
<label class="la" for="xpasscon">confirm</label>
<input name="xpasscon" class="in" value="" type="text">
<br>
<div class="checkbox">
<input type="checkbox" name="term" />
<label class="lb" for="term">I have read and agree to the Terms of Use and the Privacy Policy</label>
<br />
</div>
<input type="submit" value="Sign Up" />
</form>
</div>
</center>
Quick fix: wrapp checkbox with it's label into div with class "width".
Then in CSS add ".width" with styles: width:100%; clear:both.
.width{
width:100%;
clear:both;
}
Demo
I did a minor change in your code and it looks good to me. I am not sure if this is what you were looking for.
Please check the fiddle here.
These were the changes I made.
HTML:
<div class="lb"> <!-- added class "lb" to <div> and removed it from <label> -->
<input type="checkbox" name="term" />
<label for="term">I have read and agree to the Terms of Use and the Privacy Policy</label>
</div>
CSS:
.lb {
float:left; /* Floats the element to left */
}
I hope this works for you. :)
P.S. I have removed all the <br> tags inside the <form>