Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Align Labels Next to Inputs?
When designing web forms, aligning labels next to input fields can significantly improve readability and usability. This alignment enhances the form's visual structure, making it easier for users to fill out information. In this article, we'll cover CSS techniques for aligning labels both to the right and left of their respective input fields.
Aligning Labels with CSS Properties
By using CSS properties like text-align, display, and margin, we can control the position and alignment of labels relative to input fields. In the examples below, we'll show how to right-align and left-align elements next to input fields within a form.
- Right-Aligning Labels with CSS
- Left-Aligning Labels by Default
- Left-Aligning Labels with Styling Enhancements
Right-Aligning Labels with CSS
To right-align labels, we can use the following approach. The key here is to set the <label> element to display as inline-block and specify a fixed width. Then, by setting the text-align property to the right, the label text will align on the right side, close to the input field.
Example Code
<!DOCTYPE html>
<html>
<head>
<title>Form with Right-Aligned Labels</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</label>
<input type="text" />
</div>
<div>
<label>Medium Label</label>
<input type="text" />
</div>
<div>
<label>Longer Label with More Text</label>
<input type="text" />
</div>
</form>
</body>
</html>
Output
Left-Aligning Labels by Default
By removing the text-align: right; property, labels will be left-aligned by default. This approach can be useful when working with simple forms or when right-alignment isn't essential. Additionally, we can add attributes on <label> elements and corresponding id attributes on <input> elements to create a clickable label-input pair, enhancing accessibility.
Example Code
<!DOCTYPE html>
<html>
<head>
<title>Form with Left-Aligned Labels</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>
Output
Left-Aligning Labels with Styling Enhancements
To further improve the visual appearance, we can customize the label color and add padding to the input fields. In this example, we style the <label> elements with a light gray color, and we add padding to <input> elements for a more balanced look.
Example Code
<!DOCTYPE html>
<html>
<head>
<title>Styled Left-Aligned Labels</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>
Output
3K+ Views
