2 column HTML form with label left aligned and submit button centered
Question
I am trying to make a simple two columns html form, with input fields side by side, center aligned, but with labels left aligned on top of the input fields.
I would also like some top padding on the labels to give them some breathing room. I would also like the submit button center aligned which I have managed to do, but struggling with the rest. I have been tweaking my HTML for hours to no avail.. any help is appreciated just to get the structure correct. please see my HTML and CSS code below, and also the images provided for my desired output
PS I understand bootstrap would probably be the best way to approach this but I would like to able to achieve the desired results in plain HTML and CSS if possible.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
}
.left {
width: 50%;
display: block;
}
.right {
width: 50%;
display: block;
}
.sign-in-button {
margin-top: 25px;
width: 200px;
height: 50px;
}
label {
margin-top: 15px;
}
</style>
</head>
<body>
<form action="georgeWelcomePage.php" method="post">
<div class="row" align="center">
<div class="column left">
<label for="name">Name</label><br>
<input type="text" name="name">
</div>
<div class="column right">
<label for="company">Company</label><br>
<input type="text" name="company">
</div>
<div class="column left">
<label for="visiting">Visiting<br>
<input type="text" name="visiting">
</div>
<div class="column right">
<label for="badge">Badge</label><br>
<input type="text" name="badge">
</div>
</div>
<div align="center">
<input class="sign-in-button" type="submit" value="Sign In">
</div>
</form>
</body>
</html>
3 answers
solution1
1 2018-08-30 15:15:51
You can achieve this by using flex.
Example code:
.row { display: flex; flex-direction: row; justify-content:space-around; padding-top: 10px; } .btn { padding: 10px; }
<form action="georgeWelcomePage.php" method="post"> <div id="main"> <div class="row"> <div> <label for="name">Name</label><br> <input type="text" name="name"> </div> <div> <label for="company">Company</label><br> <input type="text" name="company"> </div> </div> <div class="row"> <div> <label for="visiting">Visiting</label><br> <input type="text" name="visiting"> </div> <div> <label for="badge">Badge</label><br> <input type="text" name="badge"> </div> </div> <div class="row"> <input type="submit" value="Sign In" class="btn"> </div> </form>
Hope this helps !
solution2
1 2018-08-30 16:10:14
This is how I would do it using flex.
* { box-sizing: border-box; } .form{ padding:.5rem; } .form__group{ padding:1rem; } .form__controls{ margin-top:.5rem; } .form__input{ width:100%; } .form__submit{ margin-top: .5rem; width: 10rem; height: 3rem; } .grid{ display: flex; flex-wrap: wrap; justify-content: center; } .grid__col{ flex-basis: 50%; }
<form class="form" action="georgeWelcomePage.php" method="post"> <div class="grid"> <div class="form__group grid__col"> <label class="form__group-title" for="name">Name</label> <div class="form__controls"> <input id="name" class="form__input" type="text" name="name"> </div> </div> <div class="form__group grid__col"> <label class="form__group-title" for="company">Company</label> <div class="form__controls"> <input id="company" class="form__input" type="text" name="company"> </div> </div> <div class="form__group grid__col"> <label class="form__group-title" for="visiting">Visiting</label> <div class="form__controls"> <input id="visiting" class="form__input" type="text" name="visiting"> </div> </div> <div class="form__group grid__col"> <label class="form__group-title" for="badge">Badge</label> <div class="form__controls"> <input id="badge" class="form__input" type="text" name="badge"> </div> </div> <div class="form__group"> <input class="form__submit" type="submit" value="Sign In"> </div> </div> </form>
solution3
0 ACCPTED 2018-08-30 16:10:02
I have reformatted your html but see if this works:
* {
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 10px;
text-align: left;
}
.btn {
padding: 10px;
}
.column{
padding: 1em;
}
</style>
</head>
<body>
<form action="georgeWelcomePage.php" method="post">
<div class="row" align="center">
<div class="column left">
<label for="name">Name</label><br>
<input type="text" name="name"><br>
<label for="visiting">Visiting<br>
<input type="text" name="visiting"><br>
</div>
<div class="column right">
<label for="company">Company</label><br>
<input type="text" name="company"><br>
<label for="badge">Badge</label><br>
<input type="text" name="badge"><br>
</div>
</div>
<div align="center">
<input class="sign-in-button" type="submit" value="Sign In">
</div>
</form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.