Aligning label with input type text - html

Question

Good day all. I am currently doing a form in html and css. I tried researching on the internet but somehow the code there is would either cause my textbox to lose its design and look plain or it would be very ugly.
I am trying to align the textbox with the labels so that it would look neat.
I also want to make the submit and reset button align in the center next to each other.
And the radio buttons to make them in a straight line instead of being seperated on 2 lines.
When I removed the code for the class .firstform select, type, I lose my design properties for the textboxes but the buttons managed to be align.
body {
background: url(ewp.jpg);
background-size: cover;
}
.firstform {
order-radius: 5px;
background: green;
padding: 20px;
width: 550px;
margin: auto;
color: #fff;
font-size: 16px;
font-family: verdana;
margin-top: 100px;
opacity: 0.8;
}
.firstform h1 {
text-align: center;
margin: 0;
padding: 0;
}
.firstform input,
select {
width: 50%;
padding: 12px 20px;
margin-left: 16em;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
background: black;
color: white;
opacity: 0.9;
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
margin-left: 24em;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide browser default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 15px;
width: 15px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196f3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 6px;
left: 6px;
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
}
.buttonHolder {
display: block;
margin: 0 auto;
}
.firstform input[type="submit"]:hover {
background: #45a049;
transparent: 0.6s;
}
.firstform input[type="reset"]:hover {
background: #45a059;
transparent: 0.6s;
}
<div class="firstform">
<h1>Student Registration Form</h1>
<form action="Form1.php" method="post">
<p><label>First Name: <input type="text" name ="fname" placeholder="First Name" maxlength="25"></label></p>
<p><label>Last Name: <input type="text" name="lname" placeholder="Last Name" maxlength="25"></label></p>
<p><label>Age: <input type="number" name= "age" min="0" max="150"></label></p>
<p><label> Date of Birth:<input type="date" name="date"></label></p>
<p>Gender:
<label class="container">
<input type="radio" name="gender" value="Male">Male
<span class="checkmark"></span>
</label>
<label class="container">
<input type="radio" name="gender" value="Female">Female
<span class="checkmark"></span>
</label>
</p>
<p> Nationality:
<label>
<select name="nationality">
<option selected>Malaysia</option>
<option>Bangladesh</option>
<option>India</option>
<option>African Nations</option>
<option>South East Asia nations</option>
<option>others</option>
</select>
</label>
</p>
<p><label>Address:<input type="text" name="address" size="30" /></label></p>
<p><label>Postcode: <input type="number" name="postcode" min="0" maxlength="5" oninput="this.value=this.value.slice(0,this.maxLength)"></label></p>
<p><label>State:
<input name="state" list="state">
<datalist id="state">
<option value="Selangor">
<option value="Kuala Lumpur">
<option value="Kelantan">
<option value="Johor">
<option value="Malacca">
<option value="Perak">
<option value="Pahang">
<option value="Negeri Sembilan">
<option value="Sabah">
<option value="Sarawak">
<option value="Perlis">
<option value="Kedah">
<option value="Terengganu">
<option value="Penang">
</datalist>
</label></p>
<p>
<label>Email:
<input type="email" name="email">
</label>
</p>
<p>
<label> Tel:
<input type="tel" name="tel" placeholder="(###) ###-####" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="10">
</label>
</p>
<div class="buttonHolder">
<input type="submit" name="Insert">
<input type="reset" name="Clear">
</div>
</form>
</div>

Answer 1

Working fiddle: https://jsfiddle.net/jennifergoncalves/nut5mzgj/10/
body {
background: url(ewp.jpg);
background-size: cover;
}
.firstform {
order-radius: 5px;
background: green;
padding: 20px;
width: 550px;
margin: auto;
color: #fff;
font-size: 16px;
font-family: verdana;
margin-top: 100px;
opacity: 0.8;
}
.firstform h1 {
text-align: center;
margin: 0;
padding: 0;
}
.firstform input,
select {
width: 50%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
background: black;
color: white;
opacity: 0.9;
/* removed margin-left */
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
margin-left: 24em;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide browser default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 15px;
width: 15px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark {
background-color: #2196f3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 6px;
left: 6px;
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
}
.buttonHolder {
display: block;
margin: 0 auto;
}
.firstform input[type="submit"]:hover {
background: #45a049;
transparent: 0.6s;
}
.firstform input[type="reset"]:hover {
background: #45a059;
transparent: 0.6s;
}
label > span, p > span {
width: 50%;
display: inline-block;
}
<div class="firstform">
<h1>Student Registration Form</h1>
<form action="Form1.php" method="post">
<p><label><span>First Name: </span><input type="text" name ="fname" placeholder="First Name" maxlength="25"></label></p>
<p><label><span>Last Name: </span><input type="text" name="lname" placeholder="Last Name" maxlength="25"></label></p>
<p><label><span>Age: </span><input type="number" name= "age" min="0" max="150"></label></p>
<p><label><span>Date of Birth:</span><input type="date" name="date"></label></p>
<p><span>Gender:</span>
<label class="container">
<input type="radio" name="gender" value="Male">Male
<span class="checkmark"></span>
</label>
<label class="container">
<input type="radio" name="gender" value="Female">Female
<span class="checkmark"></span>
</label>
</p>
<p><label><span>Nationality:</span><select name="nationality">
<option selected>Malaysia</option>
<option>Bangladesh</option>
<option>India</option>
<option>African Nations</option>
<option>South East Asia nations</option>
<option>others</option>
</select>
</label>
</p>
<p><label><span>Address:</span><input type="text" name="address" size="30" /></label></p>
<p><label><span>Postcode: </span><input type="number" name="postcode" min="0" maxlength="5" oninput="this.value=this.value.slice(0,this.maxLength)"></label></p>
<p><label><span>State:</span><input name="state" list="state">
<datalist id="state">
<option value="Selangor">
<option value="Kuala Lumpur">
<option value="Kelantan">
<option value="Johor">
<option value="Malacca">
<option value="Perak">
<option value="Pahang">
<option value="Negeri Sembilan">
<option value="Sabah">
<option value="Sarawak">
<option value="Perlis">
<option value="Kedah">
<option value="Terengganu">
<option value="Penang">
</datalist>
</label></p>
<p>
<label><span>Email:</span><input type="email" name="email">
</label>
</p>
<p>
<label><span>Tel:</span><input type="tel" name="tel" placeholder="(###) ###-####" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="10">
</label>
</p>
<div class="buttonHolder">
<input type="submit" name="Insert"><input type="reset" name="Clear">
</div>
</form>
</div>
The issues were that you had a margin to the left of the inputs. This was preventing the elements from being inline because it added to the horizontal space needed.
Secondly, your inputs are inside your labels. This is fine practice since you can avoid using for attributes for accessibility. However, you can't target just the label, so I surrounded the actual label text with a span. Now you can just target the actual label text. Setting this to 50% and having the inputs at 50% with display:inline-block on both will solve this issue.

Answer 2

I suggest looking into flexbox for these kind of issues. It gives you the ability to be completely flexible about how you align your elements. Here you can find a good explanation:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

3 issues here, to fix the problem
You have enclosed the <input> inside the <label>. Move it out, close the </label> and then start the <input>
remove the margin-left of the input
give display: inline-block; width: 50%; to the label
So your code looks like this now:
jsfiddle: https://jsfiddle.net/vg3ts1m0/3/
jsfiddle (full screen): https://jsfiddle.net/vg3ts1m0/3/show
I have edited first few items in it. It will give you an idea on how to proceed.
I hope it helps.

Answer 4

I am trying to align the textbox with the labels so that it would look neat.
// Layout will resolve 90% of vertical alignment issues.
// To unify form controls (ex. `<input>`, `<select>`, etc) apply the following
input, select, label {display: inline-block; font: inherit}
I also want to make the submit and reset button align in the center next to each other.
/*
Wrap the buttons in a block element (ex. `<fieldset>`, `<div>`, etc)
and center the block
*/
fieldset {width: fit-content; margin: 0 auto}
<fieldset><input type='reset'><input type='submit'></fieldset>
And the radio buttons to make them in a straight line instead of being seperated on 2 lines.
/*
Dimensions should be adjusted as a square (ex. width:4vw; height:4vh;)
The following styles align everything vertically. Keep the height and
line-height the same.
*/
[type=radio] {height: 5vh; line-height: 5vh; vertical-align: middle}
Intrinsic lengths (vw and vh) are used to make the whole form so that it's responsive (see demo in full page mode.
Demo
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
font: 700 5vh/1.1 Verdana;
}
body {
overflow-x: hidden;
overflow-y: scroll;
}
form {
width: 100%;
height: 100%;
padding: 0;
margin: 0 auto;
}
fieldset {
padding: 5px;
margin: 1vh auto;
border-radius: 6px;
}
.set1>legend {
margin-bottom: -7px
}
legend {
margin-top: 10px;
}
legend+hr {
width: 30vw;
}
[type=radio] {
width: 4vw;
height: 4vh;
}
input,
select,
label {
display: inline-block;
font: inherit;
margin: 2vh 0 0 0;
height: 6vh;
line-height: 6vh;
vertical-align: middle;
padding: 1px 2px;
border-radius: 4px;
}
#first,
#last {
width: 77vw;
}
#dob {
width: 33vw
}
.set2 label {
min-width: 9vw;
}
.set3 label {
min-width: 10vw;
}
#male {
margin-left: 3vw;
}
label[for=nationality] {
width: 19vw
}
#nationality {
height: 8vh;
line-height 8vh;
}
#address {
width: 71vw;
}
#state {
width: 25vw;
}
#email {
width: 75vw;
}
[type=number],
[type=tel],
[type=date] {
font-family: Consolas;
font-size: 6vh
}
[type='reset'],
[type='submit'] {
width: 15vw;
height: 8vh;
cursor: pointer;
}
[type=submit] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
margin: 0 0 0 -3px;
padding: 0 0 2px 0;
}
[type=reset] {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
margin: 0 0 0 -3px;
padding: 0 0 2px 0;
}
.set4 {
padding: 4px;
width: fit-content;
margin: 0px auto;
}
hr {
margin-top: 8px;
}
<form id='main'>
<fieldset name='set1' class='set1 set'>
<legend>Student Registration</legend>
<hr>
<fieldset name='set2' class='set2 set'>
<legend>Personal Information</legend>
<label for='first'>First: </label>
<input id='first' name='first' type='text'><br>
<label for='last'>Last: </label>
<input id='last' name='last' type='text'><br>
<label for='dob'>DOB: </label>
<input id='dob' name='dob' type='date'>
<input id='male' name='gender' type='radio' value='male'><label for='male'> Male </label>
<input id='female' name='gender' type='radio' value='female'><label for='female'> Female</label> <br>
<label for='nationality'>Nationality: </label>
<select id='nationality' name='nationality'>
<option value=''>---------------------------</option>
<optgroup label='North America'>
<option value='US'>American</option>
<option value='CA'>Canadian</option>
<option value='MX'>Mexican</option>
</optgroup>
<optgroup label='South America'>
<option value='BR'>Brazilian</option>
<option value='CR'>Costa Rican</option>
<option value='PR'>Peruvian</option>
</optgroup>
<optgroup label='Asia'>
<option value='CN'>Chinese</option>
<option value='JP'>Japanese</option>
<option value='IN'>Indian</option>
</optgroup>
<optgroup label='Europe'>
<option value='GB'>British</option>
<option value='DE'>German</option>
<option value='FI'>Finnish</option>
</optgroup>
<optgroup label='Africa'>
<option value='NG'>Nigerian</option>
<option value='EG'>Egyptian</option>
<option value='ML'>Malian</option>
</optgroup>
<option value='AU'>Australian</option>
</select>
</fieldset>
<hr>
<fieldset name='set3' class='set3 set'>
<legend>Contact Information</legend>
<label for='address'>Address: </label>
<input id='address' name='address' type='text'><br>
<label for='state'>State: </label>
<input id='state' name='state' list='states'>
<datalist id="states">
<option value="California">
<option value="Oregon">
<option value="Washington">
<option value="Nevada">
<option value="Arizona">
</datalist>
<label for='zipcode'>Zip Code: </label>
<input id='zipcode' name='zipcode' type='number' min='85000' max='98999'><br>
<label for='email'>Email: </label>
<input id='email' name='email' type='email'><br>
<label for='tel'>Telephone: </label>
<input id='tel' name='tel' type='tel'>
</fieldset>
<fieldset name='set4' class='set4 set'>
<input type='submit'>
<input type='reset'>
</fieldset>
</fieldset>
</form>