How do I align my text boxes in html? I have tried everything. The age box should start at the same location as Name and Email and it should be the same size as those two boxes. Please help if you can. I made the width of each input text box the same to ensure its the same size and tried to have the text boxes start at the same location. Thanks!
#Title{
text-align: center;
}
#description{
text-align: center;
}
body{
background-color: #7FFFD4;
}
#Survey-form{
background-color: f0f0f0;
text-align: center;
}
.nameageemail
{
clear: both;
margin: right;
margin:0px auto;
}
#Name{
text-align: left;
width: 200;
height: 25;
display:inline-block;
margin-right:30px;
}
#Email{
text-align: left;
width: 200;
height: 25;
display:inline-block;
margin-right:30px;
}
#Age{
text-align: left;
width: 200;
height: 25;
display:inline-block;
margin-right:30px;
}
<html>
<head>
<title>Survey Form </title>
<!-- Survey Form. -->
<link href="SurveyForm.css" rel=stylesheet>
</head>
<body>
<h1 id="Title"> Survey Form </h1>
<form id="Survey-form">
<p id="description">Let us know how we can improve freeCodeCamp </p>
<div class="nameageemail">
<p> <label>Name:</label>
<input type="text" name="Name" id="Name" placeholder="Enter your name"> </p>
<label>Email:</label>
<input type="email" name="Email" id="Email" placeholder="Enter your email"><br>
<p><label> Age:</label>
<input type="number" min = "18" max="110" name="Age" id="Age" placeholder="Age"></p>
</div>
</form>
</body>
</html>
You can use a table-based display values to layout your form.
Also, some values were missing units and a color was missing the #.
body > * {
text-align: center;
}
body {
background-color: #7FFFD4;
}
.survey-form {
display: block;
}
.survey-form > div {
display: inline-block;
background-color: #f0f0f0;
text-align: initial;
padding: 8px;
}
.survey-form > div > p {
display: table-row;
}
.survey-form > div > p > * {
display: table-cell;
margin: 8px;
}
.survey-form input {
text-align: left;
width: 200px !important;
height: 25px;
display: inline-block;
margin-right: 30px;
padding: 1px 8px;
}
.instructions {
display: initial !important;
}
<html>
<head>
<title>Survey Form </title>
<!-- Survey Form. -->
<!-- REMOVED FOR SNIPPET
<link href="SurveyForm.css" rel=stylesheet>
-->
</head>
<body>
<h1> Survey Form </h1>
<form class="survey-form" action="">
<div>
<p class="instructions">
Let us know how we can improve freeCodeCamp
</p>
<p>
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" placeholder="Enter your name">
</p>
<p>
<label for="Email">Email:</label>
<input type="email" name="Email" id="Email" placeholder="Enter your email">
</p>
<p>
<label for="Name">Age:</label>
<input type="number" min="18" max="110" name="Age" id="Age" placeholder="Age">
</p>
</div>
</form>
</body>
</html>
Related
I'm trying to make the text input fields take at least 90% of the form div (the blue area) and remain the position centered.
The form div is a grid within its parent grid, the main container. It is in the CSS for the form's div that I set its contents to be centered, however the input fields shrink as a result.
Can anyone suggest any solutions?
I thought of getting rid of any properties for centering the content and just increasing the width of the input fields to 100%, while increasing the padding of the form div.
But I'm really stubborn to keep the width of the input lower than 100%.
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: auto;
background: silver;
padding: 20px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"header"
"content"
"footer";
justify-items: center;
}
#header {
text-align: center;
grid-area: header;
}
#survey-form {
width: 70%;
background: blue;
padding: 30px;
grid-area: content;
display: grid;
}
.form-group {
justify-self: center;
}
.form-group label{
display: block;
}
.form-group input[type="text"] {
width: 90%;
height: 30px;
border-radius: 10px;
}
<!DOCTYPE html>
<htmL>
<head>
<title>Survey Page</title>
<link rel="stylesheet" type="text/css" href="surveystyle.css">
</head>
<body>
<div id="container">
<header id="header">
<h1 id="title">Take this survey</h1>
<p id="description">Seriously just take it now while I think about the caption.</p>
</header>
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your name">
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Enter your email">
</div>
<div class="form-group">
<label id="number-label" for="number">Age</label>
<input type="text" name="age" id="number" class="form-control" placeholder="Enter your age">
</div>
<footer>
</footer>
</form>
</div>
</body>
</htmL>
Hopefully this is what your looking for.
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: auto;
background: silver;
padding: 20px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"header"
"content"
"footer";
justify-items: center;
}
#header {
text-align: center;
grid-area: header;
}
#survey-form {
width: 70%;
background: blue;
padding: 30px;
grid-area: content;
display: grid;
}
.form-group {
margin:auto;
width:90%;
}
.form-group label{
display: block;
color:white;
}
.form-group input[type="text"],.form-group input[type="email"] {
width: 100%;
height: 30px;
margin:auto;
border-radius: 10px;
}
<!DOCTYPE html>
<htmL>
<head>
<title>Survey Page</title>
<link rel="stylesheet" type="text/css" href="surveystyle.css">
</head>
<body>
<div id="container">
<header id="header">
<h1 id="title">Take this survey</h1>
<p id="description">Seriously just take it now while I think about the caption.</p>
</header>
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your name">
</div>
<div class="form-group">
<label id="email-label" for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Enter your email">
</div>
<div class="form-group">
<label id="number-label" for="number">Age</label>
<input type="text" name="age" id="number" class="form-control" placeholder="Enter your age">
</div>
<footer>
</footer>
</form>
</div>
Have some difficulties in placing a form in a box. It does not turn out well. i am curious if anyone has a suggestion. This is a form that is going to be placed at the side of the a dynamic text. I am also curious how to move the box text one step to the right since the text is one letter longer than the one above. Nothing fancy but the alignment and form box is crucial. Illustration
A picture of the form i want :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="action_page.html">
<form>
<h1>Text<h1></br></br>
Name: <input type="text" name="Name" placeholder="Name hier.."></br>
Epost: <input type="text" name="Epost" placeholder="Epost hier.."></br>
<input type="submit" value="Senden">
</form>
</body>
</html>
Try using it and see if it helps:-
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">Name:</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="Name" placeholder="Name hier..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="fname">Epost:</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="epost" placeholder="Epost hier..">
</div>
</div>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
I Have added CSS also u can see the respective element and add to you code to get the desired effect.Please upvote if it helps.
Please try something like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<h1>Text</h1>
<div class="input-wrapper">
<label for="name">Name</label>
<input type="text" name="Name" placeholder="Name" id="name">
</div>
<div class="input-wrapper">
<label for="email">Email</label>
<input type="text" name="Epost" placeholder="Email" id="email">
</div>
<button type="submit">Send</button>
</form>
</body>
</html>
After adding some CSS for styling, this can be the result:
https://codepen.io/anon/pen/QobvQL?editors=1100
Problem is that the footer's text is left aligned on this page but not on any others using identical code. I went step by step commenting out each section and it is the map img that is causing this issue. I can solve this by setting the footer to clear right but that seems to completely mess up the height of the footer. I have included a couple of screen prints to help demonstrate what I mean.
#container {
background-image: url(..//Images/backgroundPic.jpg);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
width: 1000px;
border-style: ridge;
border-width: 5px;
}
h1,
h2 {
text-decoration: underline;
}
p {
font-weight: bold;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
background-color: #F1EBEB;
}
/* Header */
#top {
padding: 0px;
margin: 0px;
background-color: white;
background-image: url(../images/tutorteam.png);
height: 50px;
width: 1000px;
font-size: 1em;
}
#top img {
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-right: 5px;
}
#details {
display: table;
padding: 10px;
}
#details p {
display: table-cell;
vertical-align: top;
padding: 3px;
}
div.tablerow {
display: table-row
}
div.tablerow p:first-child {
text-align: right;
}
#logo {
float: right;
margin-left: 4px;
margin-top: 2px;
}
#back {
float: left;
margin-left: 40px;
margin-top: 2px;
}
#main {
padding: 10px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
background-color: white;
}
#tableContainer {
display: table;
margin-left: auto;
margin-right: auto;
border-spacing: 10px;
font-size: 0.25em;
}
#footer {
display: table-row;
}
#tableCell {
display: table-cell;
vertical-align: top;
}
#dubaiMap {
float: right;
position: relative;
right: 20px;
top: -200px;
}
#signUp {
margin-left: 110px;
margin-bottom: 100px;
border: 0px;
padding: 0px;
height: 90px;
}
#submit {
float: right;
position: relative;
bottom: 60px;
left: 420px;
margin-left: 20px;
background-color: #4CAF50;
/* Green */
border: 2px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
textarea {
float: right;
position: relative;
bottom: 250px;
right: 175px;
border: 3px solid #4CAF50;
font-size: 14px
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sign Up</title>
<link type="text/css" rel="stylesheet" href="login.css">
</head>
<body>
<div id="container">
<section id="top">
<a href="../index.html">
<img id="back" src="../images/back.png" height="40px">
</a>
<img id="logo" src="../images/tutorTeamLogo.png" height="40px">
</section>
<section id="main">
<p>Are you a tutor or customer? please select the relevant option.</p>
<form>
<select name="user">
<option value="Customer">Customer</option>
<option value="Tutor">Tutor</option>
</select>
</form>
<form action="tutorSignUp.php" method="POST">
<p>Please complete to sign up.</p>
<section id="details">
<div class="tablerow">
<p>First name:</p>
<p>
<input type="text" name="firstName" value="">
</p>
</div>
<div class="tablerow">
<p>Last name:</p>
<p>
<input type="text" name="lastName" value="">
</p>
</div>
<div class="tablerow">
<p>Address:</p>
<p>
<input type="text" name="address" value="">
</p>
</div>
<div class="tablerow">
<p>city:</p>
<p>
<input type="text" name="city" value="">
</p>
</div>
<div class="tablerow">
<p>Zip:</p>
<p>
<input type="text" name="zip" value="">
</p>
</div>
<div class="tablerow">
<p>Telephone:</p>
<p>
<input type="tel" name="telephone" value="">
</p>
</div>
</section>
<img src="../Images/dubaiZones.png" id="dubaiMap">
<p>Tutoring level</p>
<select name="level">
<option value="Pre School">Pre School</option>
<option value="Primary School">Primary</option>
<option value="GCSE">GCSE</option>
<option value="A level">A Level</option>
<option value="Undergraduate">Undergraduate</option>
<option value="Post Graduate">Post Graduate</option>
</select>
<p>Subject specialism(s)</p>
<input type="checkbox" name="subject" value="English">English
<br>
<input type="checkbox" name="subject" value="Maths">Maths
<br>
<input type="checkbox" name="subject" value="Physics">Physics
<br>
<input type="checkbox" name="subject" value="Chemistry">Chemistry
<br>
<input type="checkbox" name="subject" value="Biology">Biology
<br>
<input type="checkbox" name="subject" value="History">History
<br>
<input type="checkbox" name="subject" value="Geography">Geography
<br>
<input type="checkbox" name="subject" value="Religious Studies">R.E.
<br>
<input type="checkbox" name="subject" value="French">French
<br>
<input type="checkbox" name="subject" value="German">German
<br>
<input type="checkbox" name="subject" value="Spanish">Spanish
<br>
<input type="checkbox" name="subject" value="Computing">Computing
<br>
<input type="checkbox" name="subject" value="Business">Business
<br>
<input type="checkbox" name="subject" value="Economics">Economics
<br>
<input type="checkbox" name="subject" value="Classics">Classics
<br>
<br>
<textarea id="textArea" name="comments" rows="10" cols="48">Additional Information...</textarea>
<input type="submit" value="Sign Up" id="submit">
</form>
</section>
<footer>
<table id="tableContainer">
<tr id="footer">
<td id="tableCell">Website design and coding provided by Technology in Learning 2016 Copyright Technology in Learning
<img id="til" src="../Images/company.png" height="12" width="12">
</td>
</tr>
</table>
</footer>
</div>
</body>
</html>
I don't undestand the need of using a table to display a single line of text.
You juste need to use a paragraph with text-align: center;
.text-center {
text-align: center;
}
<footer id="footer">
<p class="text-center">Website design and coding provided by Technology in Learning 2016 Copyright Technology in Learning
<img id="til" src="../Images/company.png" height="12" width="12">
</p>
</footer>
Plus I think your issue is du to the use of the table. I believe by default table cell align text on the left, and I didn't see any CSS rule to change that in your code.
I created a form and I want the content of the form to all be left-aligned. The inputs and paragraphs in the form end up on top of each other when I use float: left; so I am trying to figure out how to properly implement this so they are all neatly stacked on top of one another.
The header is in a perfect position as is. I only want the form to be left aligned.
* {
box-sizing: border-box;
}
body {
background-color: black;
margin-left: 20%;
margin-right: 20%;
margin-top: 3%;
}
button {
background-color: white;
border: none;
color: black;
float: left;
font-family: Gilroy-Bold;
font-size: 57px;
height: 110px;
margin-bottom: 40px;
margin-top: 40px;
width: 300px;
}
button:hover {
background-color: lightgray;
}
form {
float: left;
}
textarea {
float: left;
font-family: Gilroy;
font-size: 25px;
height: 400px;
padding-left: 10px;
padding-top: 5px;
width: 600px;
}
#font-face {
font-family: Gilroy;
color: white;
src: typefaces/gilroy-bold.ttf (gilroy-bold.ttf);
}
form {
font-family: Gilroy;
padding-top: 20px;
padding-bottom: 40px;
}
h1 {
color: white;
font-family: Gilroy-Bold;
font-size: 95px;
margin-bottom: 0px;
margin-top: 0px;
text-align: center;
}
hr {
border: 0;
border-bottom: 1px solid white;
border-top: 12px solid white;
width: 760px;
}
input {
float: left;
font-family: Gilroy;
font-size: 25px;
padding-left: 5px;
height: 50px;
width: 500px;
}
p{
color: white;
float: left;
font-family: Gilroy-Bold;
font-size: 30px;
}
<DOCTYPE! html>
<html>
<head>
<title>1520 Sedgwick Avenue - Sign The Petition</title>
<link href="css/form.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="petition.js"></script>
</head>
<body>
<header>
<hr>
<h1>SIGN THE PETITION</h1>
<hr>
</header>
<div class="col-sm-6 col-sm-offset-3">
<form action="petition.php" method="POST">
<p>FIRST NAME</p>
<div id="first-name-group" class="form-group">
<label for="first-name">First Name</label>
<input type="text" class="form-control" name="first-name" placeholder="John">
</div>
<p>LAST NAME</p>
<div id="last-name-group" class="form-group">
<label for="last-name">Last Name</label>
<input type="text" class="form-control" name="last-name" placeholder="Smith">
</div>
<p>EMAIL</p>
<div id="email-group" class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" name="email" placeholder="jsmith#gmail.com">
</div>
<p>COUNTRY</p>
<div id="country-group" class="form-group">
<label for="country">Country</label>
<input type="text" class="form-control" name="country" placeholder="United States">
</div>
<p>STREET ADDRESS</p>
<div id="street-address-group" class="form-group">
<label for="street-address">Street Address</label>
<input type="text" class="form-control" name="street-address" placeholder="123 Brick Lane">
</div>
<p>ZIP CODE</p>
<div id="zip-code-group" class="form-group">
<label for="zip-code">Zip Code</label>
<input type="text" class="form-control" name="zip-code" placeholder="12345">
</div>
<p>COMMENT (OPTIONAL)</p>
<div id="comment-group" class="form-group">
<label for="comment">Comment</label>
<textarea rows "4" cols = "50" type="text" class="form-control" name="comment" placeholder="I'm signing because..."></textarea>
</div>
<button type="submit" class="btn btn-success">SUBMIT</button>
</form>
</div>
</body>
</html>
Cleared form-group class. Because you are floating the inputs to left. The wrapper of it which is form-group must clear itself so that the next div can come after it.
I also made paragraph tag to take 100% width.
Also note that for refers to the name attribute in the <input> tag in your code. It should refer to the id attribute. [ Mentioned by - Roy_Dorsthorst]
* {
box-sizing: border-box;
}
body {
background-color: black;
margin-left: 20%;
margin-right: 20%;
margin-top: 3%;
}
button {
background-color: white;
border: none;
color: black;
float: left;
font-family: Gilroy-Bold;
font-size: 57px;
height: 110px;
margin-bottom: 40px;
margin-top: 40px;
width: 300px;
}
.form-group:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
button:hover {
background-color: lightgray;
}
form {
float: left;
}
textarea {
float: left;
font-family: Gilroy;
font-size: 25px;
height: 400px;
padding-left: 10px;
padding-top: 5px;
width: 600px;
}
#font-face {
font-family: Gilroy;
color: white;
src: typefaces/gilroy-bold.ttf (gilroy-bold.ttf);
}
form {
font-family: Gilroy;
padding-top: 20px;
padding-bottom: 40px;
}
h1 {
color: white;
font-family: Gilroy-Bold;
font-size: 95px;
margin-bottom: 0px;
margin-top: 0px;
text-align: center;
}
hr {
border: 0;
border-bottom: 1px solid white;
border-top: 12px solid white;
width: 760px;
}
input {
float: left;
font-family: Gilroy;
font-size: 25px;
padding-left: 5px;
height: 50px;
width: 500px;
}
p{
color: white;
float: left;
font-family: Gilroy-Bold;
font-size: 30px;
width: 100%;
}
<DOCTYPE! html>
<html>
<head>
<title>1520 Sedgwick Avenue - Sign The Petition</title>
<link href="css/form.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="petition.js"></script>
</head>
<body>
<header>
<hr>
<h1>SIGN THE PETITION</h1>
<hr>
</header>
<div class="col-sm-6 col-sm-offset-3">
<form action="petition.php" method="POST">
<p>FIRST NAME</p>
<div id="first-name-group" class="form-group">
<label for="first-name">First Name</label>
<input type="text" class="form-control" id="first-name" name="first-name" placeholder="John">
</div>
<p>LAST NAME</p>
<div id="last-name-group" class="form-group">
<label for="last-name">Last Name</label>
<input type="text" class="form-control" id="last-name" name="last-name" placeholder="Smith">
</div>
<p>EMAIL</p>
<div id="email-group" class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="jsmith#gmail.com">
</div>
<p>COUNTRY</p>
<div id="country-group" class="form-group">
<label for="country">Country</label>
<input type="text" class="form-control" id="country" name="country" placeholder="United States">
</div>
<p>STREET ADDRESS</p>
<div id="street-address-group" class="form-group">
<label for="street-address">Street Address</label>
<input type="text" class="form-control" id="street-address" name="street-address" placeholder="123 Brick Lane">
</div>
<p>ZIP CODE</p>
<div id="zip-code-group" class="form-group">
<label for="zip-code">Zip Code</label>
<input type="text" class="form-control" id="zip-code" name="zip-code" placeholder="12345">
</div>
<p>COMMENT (OPTIONAL)</p>
<div id="comment-group" class="form-group">
<label for="comment">Comment</label>
<textarea rows "4" cols = "50" type="text" class="form-control" id="comment" name="comment" placeholder="I'm signing because..."></textarea>
</div>
<button type="submit" class="btn btn-success">SUBMIT</button>
</form>
</div>
</body>
</html>
I am having an issue where I am using text-align on my container to center all of the content within it, but would like to align my <span> elements to the left within that centered container. I have tried isolating the span elements in my css and using text-align: left; but have not had any success. I feel like it is a simple fix that is slipping my mind at the moment, but hope that it can be easily resolved.
HTML:
<div class="grid">
<div class="col-1-1" id="bar-registration-container">
<h1>Register</h1>
<div id="form-fields">
<form>
<label class="form-label" id="email">
<span>Email</span>
<br />
<input id="email" type="email" name="email" />
</label>
<br />
<label class="form-label" id="password">
<span>Password</span>
<br />
<input id="password" type="password" name="password" />
</label>
<br />
<label>
<input class="form-label" id="submit" type="submit" value="Register" />
</label>
</form>
</div>
</div>
</div>
CSS:
#bar-registration-container h1{
text-align: center;
}
#form-fields {
text-align: center;
background-color: #fff;
margin: 0 auto;
padding: 20px;
}
#form-fields input[type=email] {
font-size: 27px;
margin-bottom: 20px;
}
#form-fields input[type=password] {
font-size: 27px;
margin-bottom: 10px;
}
.form-label span {
color: #000;
margin-right: 10px;
}
#submit {
margin-top: 20px;
width: 300px;
height: 30px;
background-color: #000;
color: #fff;
font-size: 15px;
border: none;
}
I believe this snippet accomplishes what you want. I just gave the form-fields div a set width, and added a few styles to those span elements to get them to stretch the full width of that div, but be left-aligned.
#bar-registration-container h1{
text-align: center;
}
#form-fields {
width: 340px;
text-align: center;
background-color: #fff;
margin: 0 auto;
padding: 20px;
}
#form-fields input[type=email] {
font-size: 27px;
margin-bottom: 20px;
}
#form-fields input[type=password] {
font-size: 27px;
margin-bottom: 10px;
}
.form-label span {
display: inline-block;
text-align: left;
color: #000;
width: 100%;
margin-left: 5px;
}
#submit {
margin-top: 20px;
width: 300px;
height: 30px;
background-color: #000;
color: #fff;
font-size: 15px;
border: none;
}
<div class="grid">
<div class="col-1-1" id="bar-registration-container">
<h1>Register</h1>
<div id="form-fields">
<form>
<label class="form-label" id="email">
<span>Email</span>
<br />
<input id="email" type="email" name="email" />
</label>
<br />
<label class="form-label" id="password">
<span>Password</span>
<br />
<input id="password" type="password" name="password" />
</label>
<br />
<label>
<input class="form-label" id="submit" type="submit" value="Register" />
</label>
</form>
</div>
</div>
</div>
In order to left align your <span> you need to left align them and in edition to that you will have to use display:block. You actually were on right track you just missed display:block. Using display:block will make your <span> to act as a block element like <div> or <p> and then it will respect alignment properties better.
span{
text-align:left;
display:block;
margin-left:50px;// adjust yourself. Was just playing around with it.
}