How to Align Labels Next to Inputs
When you create a web form, you’ll probably need to know how to align labels with inputs. Here, we’ll show how it’s possible to create right-aligned and left-aligned <label> elements next to inputs.
Solutions with CSS properties
In our example below, we use three <div> elements and place <label> and <input> elements within each of them. Note that we use a type attribute for each <input>. We specify the margin-bottom of our <div> element. Then, we set the display of the <label> element to "inline-block" and give a fixed width. After that, set the text-align property to "right", and the labels will be aligned with the inputs on the right side.
Example of right aligning labels next to inputs with the text-align property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 150px;
text-align: right;
}
</style>
</head>
<body>
<form action="/form/submit" method="post">
<div>
<label>Short</label>
<input type="text" />
</div>
<div>
<label>Simple label</label>
<input type="text" />
</div>
<div>
<label>Label having more text</label>
<input type="text" />
</div>
</form>
</body>
</html>Result
We can remove the text-align property, and the labels will be left-aligned by default. Let’s see an example, where we also add placeholder, id and name attributes on inputs and for attribute on labels. As a result, the input will be activated when a label is clicked.
Example of left aligning labels next to inputs:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 150px;
}
</style>
</head>
<body>
<form action="/form/submit" method="post">
<div>
<label for="name">Name</label>
<input type="text" id="name" placeholder="Enter your name" />
</div>
<div>
<label for="age">Your Age</label>
<input type="text" id="age" name="age" placeholder="Enter your age" />
</div>
<div>
<label for="country">Enter Your Country</label>
<input type="text" id="country" name="country" placeholder="Country" />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>In our next example too, we’ll left-align the labels. Here, we also make the <label> inline-block and give a fixed width. For the <input> element, we add padding.
Example of left aligning labels next to inputs:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 110px;
color: #777777;
}
input {
padding: 5px 10px;
}
</style>
</head>
<body>
<form action="/form/submit" method="post">
<div>
<label for="name">Your name:</label>
<input id="name" name="username" type="text" autofocus />
</div>
<div>
<label for="lastname">Your Last name:</label>
<input id="lastname" name="lastname" type="text" />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>