This question already has answers here:
Positioning Form Elements [duplicate]
(4 answers)
How to align input forms in HTML
(17 answers)
Closed 4 months ago.
I am attempting to have my form input text boxes all line up. However, they are unaligned and I have been unable to solve this. What should I do?
body{
background-color: rgb(134, 210, 221)
}
.event{
display: inline;
float: left;
clear: both;
}
.radio1{
display: inline;
float: left;
}
.radio2{
float: left;
}
.gender{
display: block;
float: left;
clear: both;
}
.required{
color: red;
}
p{
clear: both;
}
label{
display: block;
float: left;
}
#date{
float: left;
}
.submit{
text-align: center;
}
input{
display: inline-block;
margin-left: 10px;
clear: both;
}
<body>
<form>
<p class="event"><span class="required">*</span>Select Event:</p>
<div class="radio1">
<p><input type="radio" id="stock">Stock</p>
<p><input type="radio" id="modified">Modified</p>
</div>
<p><span class="required">*</span>Last Name: <input type="text" name="lastname" id="lastname" />
</p>
<p><span class="required">*</span>First Name: <input type="text" name="firstname" id="firstname"></p>
<p><span class="required">*</span>Address: <input type="text" name="address" id="address"></p>
<p><span class="required">*</span>City: <input type="text" name="city" id="city"></p>
<p><span class="required">*</span>Province: <select name="selectprovince" id="selectprovince">Select Province
<option value="provinces">...</option>
<option value="provinces">AB</option>
<option value="provinces">BC</option>
<option value="provinces">MB</option>
<option value="provinces">NB</option>
<option value="provinces">NL</option>
<option value="provinces">NT</option>
<option value="provinces">NS</option>
<option value="provinces">NU</option>
<option value="provinces">ON</option>
<option value="provinces">PE</option>
<option value="provinces">QC</option>
<option value="provinces">SK</option>
<option value="provinces">YT</option>
</select></p>
<p><span class="required">*</span>Postal/Zip Code: <input type="text" name="postal" id="postal"></p>
<p><span class="required">*</span>Country: <input type="text" name="country" id="country"></p>
<p><span class="required">*</span>Email: <input type="text" name="country" id="country"></p>
<label for="date"><span class="required">*</span>Date of Birth</label>
<input type="date" name="date" id="date">
<p class="gender"><span class="required">*</span>Gender: </p>
<div class="radio2">
<p><input type="radio">Male</p>
<p><input type="radio">Female</p>
<p><input type="radio">Other</p>
</div>
<div class="bottom">
<p><span class="required">*</span>Boat Name: <input type="text" name="boat" id="boat"></p>
<p class="comments">Comments <textarea name="comments" form="form" id="comments" rows="7" cols="20"></textarea></p>
</div>
<p><span class="required">*</span>I agree to the waiver <input type="checkbox"> Yes </p>
<div class="submit">
<input type="submit" id="submit">
</div>
</form>
</select>
HTML structure is very important to understand and to learn how it works and how to put elements together. If you have a good HTML structure, it will be easy to edit and style.
One of your mistakes is that you put the input inside the p. So what you should do is put each row (elements group) in a container with flex display. and put them separated properly in a good structure. then give all elements on the left, the same width to align all right elements properly in a vertical line.
here I did that for the first three groups in your code. you can follow the same steps to do for the rest.
body{
background-color: rgb(134, 210, 221)
}
.container {
border: 1px solid red;
height: fit-content;
display: flex;
min-width: fit-content;
align-items: center;
}
.left {
display: flex;
flex-direction: row;
width: 100px;
/* height: 10px; */
border: 1px solid;
position: relative;
margin-right: 5px;
}
.right {
border: 1px solid blue;
width: 400px;
}
select {
display: flex;
}
.event{
/* display: inline;
float: left;
clear: both; */
}
.radio1{
/* display: inline;
float: left; */
}
.radio2{
/* float: left; */
}
.gender{
/* display: block;
float: left;
clear: both; */
}
.required{
color: red;
}
p{
/* clear: both; */
}
label{
/* display: block;
float: left; */
}
#date{
/* float: left; */
}
.submit{
text-align: center;
}
input{
/* display: inline-block;
margin-left: 10px;
clear: both; */
}
<form>
<div class="container">
<p class="event left"><span class="required">*</span>Select Event:</p>
<div class="radio1 right">
<p><input type="radio" id="stock">Stock</p>
<p><input type="radio" id="modified">Modified</p>
</div>
</div>
<div class="container">
<p class="left">
<span class="required">*</span>
Last Name:
</p>
<input class="right" type="text" name="lastname" id="lastname"/>
</div>
<div class="container">
<p class="left">
<span class="required">*</span>
First Name:
</p>
<input class="right" type="text" name="firstname" id="firstname">
</div>
<p class="left">
<span class="required">*</span>
Address:
<input class="right" type="text" name="address" id="address"></p>
<p class="left">
<span class="required">*</span>
City:
<input class="right" type="text" name="city" id="city"></p>
<p class="left"><span class="required">*</span>
Province:
<select class="right" name="selectprovince" id="selectprovince">Select Province
<option value="provinces">...</option>
<option value="provinces">AB</option>
<option value="provinces">BC</option>
<option value="provinces">MB</option>
<option value="provinces">NB</option>
<option value="provinces">NL</option>
<option value="provinces">NT</option>
<option value="provinces">NS</option>
<option value="provinces">NU</option>
<option value="provinces">ON</option>
<option value="provinces">PE</option>
<option value="provinces">QC</option>
<option value="provinces">SK</option>
<option value="provinces">YT</option>
</select>
</p>
<select>
<p><span class="required">*</span>Postal/Zip Code: <input type="text" name="postal" id="postal"></p>
<p><span class="required">*</span>Country: <input type="text" name="country" id="country"></p>
<p><span class="required">*</span>Email: <input type="text" name="country" id="country"></p>
<label for="date"><span class="required">*</span>Date of Birth</label>
<input type="date" name="date" id="date">
<p class="gender"><span class="required">*</span>Gender: </p>
<div class="radio2">
<p><input type="radio">Male</p>
<p><input type="radio">Female</p>
<p><input type="radio">Other</p>
</div>
<div class="bottom">
<p><span class="required">*</span>Boat Name: <input type="text" name="boat" id="boat"></p>
<p class="comments">Comments <textarea name="comments" form="form" id="comments" rows="7" cols="20"></textarea></p>
</div>
<p><span class="required">*</span>I agree to the waiver <input type="checkbox"> Yes </p>
<div class="submit">
<input type="submit" id="submit">
</div>
</form>
Related
I have 2 questions really. How can I align my radio buttons and checkboxes to the left of my already centered form-group in css.They are currently all center, but I want the checkboxes and radio buttons to be aligned to the left, but still in center. Also how can I make my form take up the whole page with a scroll bar like the example I will provide. everything current just sits at the top of page. Please let me know of any questions, really am stuck here and just need a little nudge. Thanks.
Example: https://survey-form.freecodecamp.rocks/
.text-center {
text-align: center;
margin: auto;
}
.form-group {
text-align: center;
margin: auto;
}
.clue {
text-align: center;
}
.input-checkboxes {
text-align: center;
}
* {
box-sizing: border-box;
box-sizing: inherit;
margin: 0;
padding: 0;
font-family: lato, arial;
}
body {
background: url(images/tech2.webp);
background-size: 100%;
height: 100%;
}
.container {
grid-column: 5 / 9;
max-width: 600px;
margin: 20px auto 20px;
padding: 30px 30px 30px 30px;
border: 1px solid black;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.763);
}
header {
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
h1 {
margin-bottom: 5px;
}
.checkbox,
.radio-button {
display: block;
}
.form-grou>.inline {
margin-right: 6px;
text-align: left;
}
#submit {
font-size: 16px;
display: block;
margin: 0 auto;
background: #2f80ed;
color: white;
border: none;
border-radius: 6px;
padding: 10px 24px;
}
#media only screen and (max-width: 1000px) {
.container {
grid-column: 1 / 12;
}
}
<header class="header">
<h1 id="title" class="text-center">Survey Form</h1>
<p id="description" class="description text-center">Thank you for taking the time to help me improve my skills as a developer</p>
</header>
<div class="container">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name:
<input
required
id="name"
for="name"
type="text"
placeholder="Name"></label><br/>
</div>
<div class="form-group">
<label id="email-label" for="email">Email:
<input
required
id="email"
type="email"
placeholder="E-mail"></label><br/>
</div>
<div class="form-group">
<label id="number-label" for="numebr">Age:
<input
required
id="number"
min="13"
max="120" type="number"
placeholder="Age"></label><br/>
</div>
<div class="form-group">
<p>Which option best describes your current role?</p>
<select for="dropdown" id="dropdown" name="role" class="form-control" required>
<option disabled selected>Seelct current role</option>
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="job">Full time job coding</option>
<option value="preferNo">Prefer not to say</option>
<option value="other">Other</option>
</select><br/>
</div>
<div class="form-group">
<label> Based on my portfolio/resume, would you say that I am job ready?<br/>
<input
type="radio"
name="referal"
class="inline"
value="definitely" /> Definitely</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="maybe" /> Maybe</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="definitelyNot"/> Definitely not
</label><br/>
</div>
<div class="form-group">
<label>In your opinion, what would you say is my strongest skill?<br/>
<select id="improved" name="improved" class="form-control" required>
<option disabled selected>Seelct an option</option>
<option value="html/css">HTML/CSS</option>
<option value="javascript">Javascript</option>
<option value="ui/ux">UI/UX Design</option>
<option value="response">Responsiveness/Functionability</option>
<option>Project Ideas</option>
</select><br/>
</label>
</div>
<div class="form-group">
<p>What would you like to see improved? <span class="clue">(Check all that apply)</span></p>
<label>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="frontend"/> Front-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="backend" /> Back-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="ui/ux"/> UI/UX Design<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response"/> Responsiveness/Functionality<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response" /> Project Ideas<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="number"/> Number of Projects<br/>
</label>
</div>
<div class="form-group">
<p>Any other comments or suggestions?</p>
<textarea name="comments" id="comments" rows="3" cols="30" class="input-textarea" placeholder="Enter your comments here..."></textarea>
</div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">Submit
</button>
</div>
</div>
</form>
</div>
You gave the div with the radio buttons the class .form-group. This class has a property align-center if you remove that from the div the buttons will align to the left.
If you give the .text-center to the <p> the tekst will align center
.text-center{
text-align: center;
margin: auto;
}
.form-group{
text-align: center;
margin: auto;
}
.clue{
text-align: center;
}
.input-checkboxes{
text-align: center;
}
* {
box-sizing: border-box;
box-sizing: inherit;
margin: 0;
padding: 0;
font-family: lato, arial;}
body{
background: url(images/tech2.webp);
background-size: 100%;
height: 100%;
}
.container{
grid-column: 5 / 9;
max-width: 600px;
margin: 20px auto 20px;
padding: 30px 30px 30px 30px;
border: 1px solid black;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.763);
}
header{
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
h1{
margin-bottom: 5px;
}
.checkbox, .radio-button {
display: block;
}
.form-grou > .inline {
margin-right: 6px;
text-align: left;
}
#submit {
font-size: 16px;
display: block;
margin: 0 auto;
background: #2f80ed;
color: white;
border: none;
border-radius: 6px;
padding: 10px 24px;
}
#media only screen and (max-width: 1000px) {
.container {
grid-column: 1 / 12;
}
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Survey</title>
</head>
<header class="header">
<h1 id="title" class="text-center">Survey Form</h1>
<p id="description" class="description text-center">Thank you for taking the time to help me improve my skills as a developer</p>
</header>
<div class="container">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name:
<input
required
id="name"
for="name"
type="text"
placeholder="Name"></label><br/>
</div>
<div class="form-group">
<label id="email-label" for="email">Email:
<input
required
id="email"
type="email"
placeholder="E-mail"></label><br/>
</div>
<div class="form-group">
<label id="number-label" for="numebr">Age:
<input
required
id="number"
min="13"
max="120" type="number"
placeholder="Age"></label><br/>
</div>
<div class="form-group">
<p>Which option best describes your current role?</p>
<select for="dropdown" id="dropdown" name="role" class="form-control" required>
<option disabled selected>Seelct current role</option>
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="job">Full time job coding</option>
<option value="preferNo">Prefer not to say</option>
<option value="other">Other</option>
</select><br/>
</div>
<div>
<label> <p class="text-center">Based on my portfolio/resume, would you say that I am job ready?<br/> </p>
<input
type="radio"
name="referal"
class="inline"
value="definitely" /> Definitely</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="maybe" /> Maybe</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="definitelyNot"/> Definitely not
</label><br/>
</div>
<div class="form-group">
<label>In your opinion, what would you say is my strongest skill?<br/>
<select id="improved" name="improved" class="form-control" required>
<option disabled selected>Seelct an option</option>
<option value="html/css">HTML/CSS</option>
<option value="javascript">Javascript</option>
<option value="ui/ux">UI/UX Design</option>
<option value="response">Responsiveness/Functionability</option>
<option>Project Ideas</option>
</select><br/>
</label>
</div>
<div>
<p class="text-center" >What would you like to see improved? <span class="clue">(Check all that apply)</span></p>
<label>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="frontend"/> Front-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="backend" /> Back-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="ui/ux"/> UI/UX Design<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response"/> Responsiveness/Functionality<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response" /> Project Ideas<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="number"/> Number of Projects<br/>
</label>
</div>
<div class="form-group">
<p>Any other comments or suggestions?</p>
<textarea
name="comments"
id="comments"
rows="3"
cols="30"
class="input-textarea"
placeholder="Enter your comments here..."></textarea>
</div>
<div class="form-group">
<button
type="submit"
id="submit"
class="submit-button">Submit
</button>
</div>
</div>
</form>
</div>
Remove the css of .text-center and .form-group
I am trying to center my form to the middle of the page. Currently, I am using a div and placing the form inside it. The div got centered but not the form inside the div. Here is the portion of my HTML and CSS.
form {
margin: auto;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname" />
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com" />
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com" />
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
add text-align: center; to the form tag
form {
margin: auto;
text-align: center;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname">
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com">
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com">
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes">Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
<form> is taking width and height of parent div, so as div got centered, the <form> inside it also got centered. Now the challenge comes in to center the content inside the <form>. For it check my solution.
HTML
<div class="wrapper">
<form id="form1">
<fieldset>
<legend>Your contact details</legend>
<div class="form-center">
<p class="formtext">Name <em>(required)</em></p>
<input type="text" id="name" required placeholder="Forname & Surname" />
<p class="formtext">Email Address <em>(required)</em></p>
<input type="text" id="email" required placeholder="example#example.com" />
<p class="formtext">Website Address</p>
<input type="text" id="url" placeholder="https:www.example.com" />
<p class="formtext">Message</p>
<textarea id="message" required></textarea>
<p class="formtext">Would you like to recieve regular email updates?</p>
<select name="cars">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Would you like more information?</legend>
<div class="form-center">
<label class="button" for="information-yes">
<input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
<label class="button" for="information-no">
<input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
</div>
</fieldset>
<input type="submit" value="Click to send" />
</form>
</div>
CSS
form {
margin:auto;
}
div.form-center {
width: 60%;
margin-left: auto;
margin-right: auto;
}
.wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}
fieldset {
margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
form {
/*margin: auto; Not required as long as you didn't specify the width of the form*/
text-align: center;
}
fieldset {
/*centering the fieldset horizontally*/
margin: 1em auto;
...
}
You may want to use Flexbox.
On the fieldset selector add the following 3 lines of code:
display: flex;
flex-direction: column;
align-items: center;
Also, on the fieldset selector, instead margin: 1em, use margin: 1em auto. This will make the margin 1em on top and bottom of the fieldset element, but will position the element centrally inside its <form> parent.
Your example would then remain the same, only for the fieldset selector you have the following css properties:
fieldset {
display: flex;
flex-direction: column;
align-items: center;
margin: 1em auto;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}
EDIT: Flexbox on <fieldset> element is supported only on Firefox 64+, not yet supported on Chrome. I found this after posting and testing to see if it works in Chrome as I tested it only on Firefox before posting. More information about flexbox and <fieldset> elements can be found in this thread.
My "Reason for Contacting" and "Comment" boxes seem to be flipped and on different lines.
label {
float: left;
text-align: right;
width: 10em;
padding-right: 1em;
}
input,
textarea {
display: block;
margin-bottom: 2em;
}
input[type="submit"] {
margin-left: 6em;
}
form {
color: red;
}
<main>
<h2>Contact Us</h2>
<p>Required fields are marked with an asterisk *</p>
<form>
<label for="myName">*Name:</label>
<input type="text" id="myName" name="myName" required="required">
<label for="myEmail">*E-mail: </label>
<input type="email" id="myEmail" name="myEmail" required="required">
<label for="myPhone">Phone: </label>
<input type="tel" id="myPhone" name="myPhone">
<label for="reason">*Reason For Contacting:</label>
<select class="reason">
<option value="join">Interest in Joining</option>
<option value="sponsor">Sponsorship</option>
<option value="other">Other</option>
</select>
<label for="myComments">Comments:</label>
<textarea id="myComments" name="myComments" rows="2" cols="30"></textarea>
<input type="submit" value="Submit">
</form>
</main>
From your css I can see that you have given float: left to the label. So, the label floats left, leaving space on the right for the next element. But, the input is given display: block, which occupies the whole remaining place to right.
But the select element is display: inline by default. Hence, they seem to be mixed up. Just add display: block to select too.
label {
float: left;
text-align: right;
width: 10em;
padding-right: 1em;
}
select,/* add this */
input,
textarea {
display: block;
margin-bottom: 2em;
}
input[type="submit"] {
margin-left: 6em;
}
form {
color: red;
}
<main>
<h2>Contact Us</h2>
<p>Required fields are marked with an asterisk *</p>
<form>
<label for="myName">*Name:</label>
<input type="text" id="myName" name="myName" required="required">
<label for="myEmail">*E-mail: </label>
<input type="email" id="myEmail" name="myEmail" required="required">
<label for="myPhone">Phone: </label>
<input type="tel" id="myPhone" name="myPhone">
<label for="reason">*Reason For Contacting:</label>
<select name="reason" class="reason">
<option value="join">Interest in Joining</option>
<option value="sponsor">Sponsorship</option>
<option value="other">Other</option>
</select>
<label for="myComments">Comments:</label>
<textarea id="myComments" name="myComments" rows="2" cols="30"></textarea>
<input type="submit" value="Submit">
</form>
</main>
The issue here is because you have labels set to float: left; and elements that have no floats set at all so it's disrupting the flow.
Easiest way to fix this is to break elements up into fieldsets.
fieldset {
border: none;
width: 100%;
padding: 0;
float: left;
display: block;
}
label {
float: left;
text-align: right;
width: 10em;
padding-right: 1em;
}
input,
textarea {
display: block;
margin-bottom: 2em;
}
input[type="submit"] {
margin-left: 6em;
}
form {
color: red;
}
<main>
<h2>Contact Us</h2>
<p>Required fields are marked with an asterisk *</p>
<form>
<fieldset>
<label for="myName">*Name:</label>
<input type="text" id="myName" name="myName" required="required">
</fieldset>
<fieldset>
<label for="myEmail">*E-mail: </label>
<input type="email" id="myEmail" name="myEmail" required="required">
</fieldset>
<fieldset>
<label for="myPhone">Phone: </label>
<input type="tel" id="myPhone" name="myPhone">
</fieldset>
<fieldset>
<label for="reason">*Reason For Contacting:</label>
<select class="reason">
<option value="join">Interest in Joining</option>
<option value="sponsor">Sponsorship</option>
<option value="other">Other</option>
</select>
</fieldset>
<fieldset>
<label for="myComments">Comments:</label>
<textarea id="myComments" name="myComments" rows="2" cols="30"></textarea>
</fieldset>
<fieldset>
<input type="submit" value="Submit">
</fieldset>
</form>
</main>
I have a simple login/signup page that im making. Both the login and signup parts of the site have issues in that the text mentioning what to write in the textboxes are not aligned with one another. I have tried to change the margins back and forth and no matter how I change it I still have the same problem.
As you can see the Password in the login parn and the City and Email part dont stick to the left as it should. Is there any good way of solving this issue? And also is there any "clean" way of pairing the text with the textbox so that they always align? Below you will find the code I use for this part of the site.
/* -------------------------------- The body and div placement ------------------------------ */
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 120px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
input {
float: right;
margin: 3px 0 0 0;
}
select {
float: right;
margin: 3px 0 0 0;
}
label {
float: left;
margin: 5px 0 0 0;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<label>First name</label> <input type="text" name="fname"><br>
<label>Family name</label> <input type="text" name="lname"><br>
<label>Gender</label> <select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<label>City</label> <input type="text" name="city"><br>
<label>Country</label> <input type="text" name="country"><br>
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<label>Repeat PSW</label> <input type="password" name="passwordrepeat"><br>
<br><br><br><input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
As usual, what is a pain to do with classic CSS (float, clear etc) is a breeze with Flexbox :
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: #7fffd4;
padding: 5px;
}
#Sign_Up {
text-align: center;
background-color: #a52a2a;
margin-top: 10px;
padding: 5px;
}
form div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
border: #00f dashed 1px;
margin-bottom: 2px;
}
form div input {
width: 120px;
}
form div select {
width: 124px;
}
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div><label>First name</label> <input type="text" name="fname"></div>
<div><label>Family name</label> <input type="text" name="lname"></div>
<div><label>Gender</label>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select></div>
<div><label>City</label> <input type="text" name="city"></div>
<div><label>Country</label> <input type="text" name="country"></div>
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<div><label>Repeat PSW</label> <input type="password" name="passwordrepeat"></div>
<br><input type="submit" value="Submit">
</form>
</div>
</div>
You can us tabular forms, they are easy to manage.
form{
background-color:red
}
H1{
text-align:center
}
<!DOCTYPE html>
<html>
<body>
<H1>Hello</H1>
<form>
<table style="width:100%">
<tr>
<td>Email</td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" name="firstname"></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</body>
</html>
Add clear: left; to label, this will prevent one label moving right of another one (as its the case with "Gender" and "City")
/* -------------------------------- The body and div placement ------------------------------ */
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 120px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
input {
float: right;
margin: 3px 0 0 0;
}
select {
float: right;
margin: 3px 0 0 0;
}
label {
float: left;
margin: 5px 0 0 0;
clear: left;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<br><input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<label>First name</label> <input type="text" name="fname"><br>
<label>Family name</label> <input type="text" name="lname"><br>
<label>Gender</label> <select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<label>City</label> <input type="text" name="city"><br>
<label>Country</label> <input type="text" name="country"><br>
<label>Email</label> <input type="text" name="email"><br>
<label>Password</label> <input type="password" name="password"><br>
<label>Repeat PSW</label> <input type="password" name="passwordrepeat"><br>
<br><br><br><input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</body>
</html>
Addition: I made the form containers 20px wider and therefore the left container 20px narrower to avoid the problem described for Chrome in the comments.
Let's do some cleanup and simplification here.
First off we'll get rid of all those <br> tags. Don't need 'em.
Next we're going to stop with the floats. Float is great for what it's intended for, which is letting text wrap around a floated element. Float is not so great for what it's often used for, which is as a bad replacement for inline-block -- bad because you have to set explicit heights, worry about clears, etc.
#Login_and_Sign_Up {
width: 250px;
margin-left: 10px;
}
#Login {
background-color: aquamarine;
}
#Sign_Up {
background-color: brown;
margin-top: 10px;
}
label {
width: 80px; /* adjust to taste */
display:inline-block
}
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="#">
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<input type="submit" value="Submit">
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div><label>First name</label> <input type="text" name="fname"></div>
<div><label>Family name</label> <input type="text" name="lname"></div>
<div><label>Gender</label>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div><label>City</label> <input type="text" name="city"></div>
<div><label>Country</label> <input type="text" name="country"></div>
<div><label>Email</label> <input type="text" name="email"></div>
<div><label>Password</label> <input type="password" name="password"></div>
<div><label>Repeat PSW</label> <input type="password" name="passwordrepeat"></div>
<input type="submit" value="Submit">
</form>
</div>
</div>
Further improvements that could be made:
For accessibility you should be associating your <label>s with their form elements. Do this either by using the for attribute on the label, or by nesting the form fields inside the label.
Using the label as the wrapper would have the additional advantage of allowing you to omit the wrapper <div>s, by setting label to display:block.
Use CSS Flexbox
I have done it for the login form, you can repeat the same for sign-up as well.
Please wrap your 'label and input select in <p> tags. This will help you eliminate <br/> tags.
#Body {
text-align: center;
}
#Window_Container {
width: 600px;
height: 400px;
margin: 100 auto;
}
#Logo_and_Slogan {
background-image: url("wimage.png");
height: inherit;
width: 340px;
float: left;
}
#Login_and_Sign_Up {
height: inherit;
width: 250px;
margin-left: 10px;
float: right;
}
#Login {
text-align: center;
background-color: aquamarine;
height: 170px;
}
#Sign_Up {
text-align: center;
background-color: brown;
height: 270px;
margin-top: 10px;
}
/* -------------------------------- Modification of the form part ------------------------------ */
.flex-form p{
display:flex;
}
input {
flex: 1;
margin: 3px 0 0 0;
float:right;
}
select {
flex: 1;
margin: 3px 0 0 0;
float:right;
}
label {
flex: 1;
margin: 5px 0 0 0;
float:left;
text-align:left;
}
h2 {
margin: 0 0 2px 0;
padding: 3px;
font-size: 20px;
}
<html>
<head>
<link href="welcome.css" type="text/css" rel="stylesheet">
<script src="client.js" type="text/javascript"></script>
<script src="serverstub.js" type="text/javascript"></script>
</head>
<body>
<div id="Window_Container">
<div id="Logo_and_Slogan"></div>
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php" class="flex-form">
<p>
<label>Email</label>
<input type="text" name="email">
</p>
<p>
<label>Password</label>
<input type="password" name="password">
</p>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
My example looks at utilizing bootstrap .form-group and adding a min-width to the label. Though in hindsight, after reading the flexbox answer - that one is probably easiest for you. I've spent a little time working on this answer so I'll post it anyway.
I also stipped out a lot of unnecessary tags and assigned labels to their elements. There was a lot of br and div which didn't need to be there using this method.
#Login_and_Sign_Up {
height: inherit;
margin-left: 10px;
/* float: right; */
}
#Login {
background-color: aquamarine;
overflow: hidden;
width: 300px;
}
#Sign_Up {
background-color: brown;
margin-top: 10px;
width: 300px;
overflow: hidden;
}
label {
min-width: 90px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="Login_and_Sign_Up">
<div id="Login">
<h2>Login</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form-group">
<input type="submit" value="Submit">
</div>
</form>
</div>
<div id="Sign_Up">
<h2>Signup</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="firstname">First name</label>
<input type="text" name="fname" id="firstname">
</div>
<div class="form-group">
<label for="familyname">Family name</label>
<input type="text" name="lname" id="familyname">
</div>
<div class="form-group">
<label for="gender">Gender</label>
<select name="gender" id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" name="city" id="city">
</div>
<div class="form-group">
<label for="country">Country</label>
<input type="text" name="country" id="country">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form-group">
<label for="repeat">Repeat PSW</label>
<input type="password" name="passwordrepeat" id="repeat">
</div>
<div class="form-group">
<input type="submit" value="Submit">
</div>
</form>
</div>
</div>
So i want my sign up and back button (both are input type: submit) to be at the center. The problem is it's not working even if i used margin: auto. Please take note I already set width for this input.
enter image description here
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
background-image: url("StockSnap_FS24L3X9BH.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.container {
width: 50%;
margin: 10px auto;
display: block;
}
.row {
width: 80%;
margin: 10px auto;
padding: 20px;
}
input:not([type=submit]):not([name=age]) {
width: 50%;
clear: left;
}
label {
display: inline-block;
width: 150px;
float: left;
text-align: left;
}
input[type=submit] {
width: 100px;
margin: 0 auto;
}
input[name=age] {
width: 60px;
}
#gender {
width: 100px;
}
<?php
include_once("code2_registration.php");
?>
<div class="container">
<h1 style="text-align: center"> Membership Forum </h1>
<div class="row">
<form action="register.php" method="POST">
<p> Please fill the following form to complete the registration. </p> <br/>
<label>Username:</label> <input type="text" name="username" /> <br/><br/>
<label>Password:</label> <input type="password" name="password" /> <br/><br/>
<label>First Name:</label> <input type="text" name="firstName" /> <br/><br/>
<label>Last Name:</label> <input type="text" name="lastName"> <br/><br/>
<label>Email Address:</label> <input type="text" name="email"> <br/><br/>
<label>Sex: </label><select name="gender" id="gender">
<option value="male"> Male </option>
<option value="female"> Female </option>
<option value="others"> Others </option>
<option value="others"> Prefer not to say </option>
</select> <br/><br/>
<label>Age:</label> <input type="number" name="age"> <br/><br/>
<input type="submit" name="submit" value="Sign Up" id="submit">
<input type="submit" name="back" value="Back" id="back">
</form>
</div>
</div>
Use this
<div class="container">
<h1 style="text-align: center"> Membership Forum </h1>
<div class="row">
<form action="register.php" method="POST">
<p> Please fill the following form to complete the registration. </p> <br/>
<label>Username:</label> <input type="text" name="username" /> <br/><br/>
<label>Password:</label> <input type="password" name="password" /> <br/><br/>
<label>First Name:</label> <input type="text" name="firstName" /> <br/><br/>
<label>Last Name:</label> <input type="text" name="lastName"> <br/><br/>
<label>Email Address:</label> <input type="text" name="email"> <br/><br/>
<label>Sex: </label><select name="gender" id="gender">
<option value="male"> Male </option>
<option value="female"> Female </option>
<option value="others"> Others </option>
<option value="others"> Prefer not to say </option>
</select> <br/><br/>
<label>Age:</label> <input type="number" name="age"> <br/><br/>
<div class="center">
<input type="submit" name="submit" value="Sign Up" id="submit">
<input type="submit" name="back" value="Back" id="back">
</div>
</form>
</div>
</div>
.center {
text-align: center;
}
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
background-image: url("StockSnap_FS24L3X9BH.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.container {
width:50%;
margin: 10px auto;
display: block;
}
.row {
width:80%;
margin: 10px auto;
padding: 20px;
}
input:not([type=submit]):not([name=age])
{
width: 50%;
clear:left;
}
label {
display: inline-block;
width: 150px;
float: left;
text-align: left;
}
input[type=submit] {
width: 100px;
margin: 0 auto;
}
input[name=age] {
width:60px;
}
#gender {
width:100px;
}
live demo - https://jsfiddle.net/grinmax_/o5rfc8b5/
can't you simple wrap those inputs with a <div> and style it with text-align: center?
<div class="centered-div">
<input type="submit" name="submit" value="Sign Up" id="submit">
<input type="submit" name="back" value="Back" id="back">
</div
.centered-div {
text-align: center;
}
here is the Fiddle with this code https://fiddle.jshell.net/n3mtsrhj/1/
Try wrapping your input buttons in a div like this:
<div class="submit_block">
<input name="submit" value="Sign Up" id="submit" type="submit">
<input id="back" name="back" value="Back" type="submit">
</div>
and then apply css:
.submit_block {
text-align: center;
}