I want to apply some css styling on my labels for my web page but have no idea how to make it work. At first, I thought I could type
label{text-align: center} but it's not giving my any styling at all. What should I type to style my labels? This is my code:
<label for="fname"><b>First Name</b></label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" required>
Thanks in advance everyone!
Ok, text-align:center didn't work because basically the label elements are inline
inline elements are elements who their display is set to inline , explicitly or by default
these elements won't accept any width or height and only get ENOUGH width and height for their content
they even don't accept vertical margins...
so your label here is as small as it's content and there is no room to change your text's alignment...
you can change it's display to make it's text centered
Here You can see what I said, I've added another label and changed it's display and colored the labels so you can see diffrence
<style>
label{
background: khaki;
}
.lname{
display:block;
text-align:center;
}
.test{
display: block;
}
</style>
<label class="fname" for="fname">First Name</label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" >
<label class="lname" for="lname">Last Name</label>
<input type="text" placeholder="Enter Last Name" name="lname" id="lname" required>
<label class="test" for="test">Test</label>
<input type="text" placeholder="Enter Test" name="test" id="test" required>
I think what you want is the middle one
========%%%%=======%%%%=========
Ok Based On Your comment and image
it's not label who you want to center, it's your input
<style>
input{
display:block;
text-align:center;
width: 100%;
}
input::placeholder{
text-align: center;
}
</style>
<label class="fname" for="fname">First Name</label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" >
input {
width: 100%;
text-align: center;
}
Related
This question already has answers here:
Align labels in form next to input
(8 answers)
Closed 11 months ago.
I've just started to delve into forms. To my understanding so far is that everything that is inside the form tags align horizontally by default, which rises the question:
How do i make my form inputs/items align vertically?
This is the code a simple example:
<form action="contact.html" method="GET">
<div>
<label for="fname">Firstname</label>
<input type="text" id="fname" name="firstname" placeholder="Write your name..">
</div>
<div>
<label for="lname">Lastname</label>
<input type="text" id="lname" name="lastname" placeholder="Write your lastname..">
</div>
</form>
By making divs the labels and input started to be on top of eachother instead of next to eachother, which is exactly what i want. But obviously it looks very sloppy with the textareas. They are like glued together, and doesn't match perfectly at all in position.
Any ideas how i can fix this in CSS?
Best regards!
UPDATE
Clarification: You see how the input areas are completely off. I want those to be EXACTLY perfectly even and matched, so it doesn't look as scuffed as it does currently.
UPDATE 2: Fix
I figured it out. Now it's all even and vertical (Though im not saying this is best or the perfect solution, but it solved my current beginner issue/question).
CSS:
form {
width: 10%;
}
UPDATE 3
Proper solution in the answer feed by Nick Vu. Thread closed.
You can apply a display: flex; to the form element.
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: left;
}
input {
display: inline-block;
float: left;
}
<form action="contact.html" method="GET">
<div>
<label for="fname">Firstname</label>
<input type="text" id="fname" name="firstname" placeholder="Write your name..">
</div>
<div>
<label for="lname">Lastname</label>
<input type="text" id="lname" name="lastname" placeholder="Write your lastname..">
</div>
</form>
I think you're looking for a table display that is row-aligned and column-aligned with content
form {
display: table;
}
div {
display: table-row;
}
label {
display: table-cell;
}
input {
display: table-cell;
}
<form action="contact.html" method="GET">
<div class="flexbox">
<label for="fname">Firstname</label>
<input type="text" id="fname" name="firstname" placeholder="Write your name..">
</div>
<div class="flexbox">
<label for="lname">Lastname Testing</label>
<input type="text" id="lname" name="lastname" placeholder="Write your lastname..">
</div>
</form>
https://codepen.io/anon/pen/jgWdMW
I'm trying to align the inputfields so that they start all at the same point, I've tried multiple things since yesterday, positioning is harder than I thought..
A Survey Form
<p id="description"> Let us know how we can improve FFC</p>
<div class="labels">
<div>
<label for="name">* Name: </label>
<input type="text" id="name" placeholder="Enter your name" required>
</div>
<div class="one">
<label for="email">* Email: </label>
<input type="text" id="email" placeholder="enter your mail">
</div>
<div>
<label for="age">* Age: </label>
<input type="number" id="email" placeholder="Enter your Age">
</div>
<div>
<label for="Number">* Number: </label>
<input type="text" id="Number" placeholder="Enter your Number">
</div>
</div>´
One option is to define a width for your labels, this means they all take up the same amount of space next to the input boxes. For this you need the following css:
label {
display: inline-block;
width: 100px;
}
There's also a slight issue with the "Age" box being slighly larger than the others due to the number input and padding (for me on firefox at least). You could set a width on the input boxes to fix this e.g.
input {
padding: 8px;
margin: 12px;
width: 200px;
}
Codepen
I am trying to get a better handle on CSS positioning by using only basic positioning properties. The goal is to get an HTML5 input and it's associated label to line up horizontally, one pair on each row, with the label on the left and input on the right. Essentially there will appear to be two columns, one for labels and the other for inputs.
I also want each column to be left-justified, which is where I'm currently stuck.
Using the CSS below I can get the two-column look I want, however none of the input elements are justified correctly.
If I set the position of the input elements to absolut, however (the thinking that adjusting the left property will align each element the same pixel length from the left containing edge), each element justifies properly, however all on the same row.
Any hints as to how to accomplish the two-column/left-justified layout w/o using tables or grid-column?
Fiddle: http://jsfiddle.net/fjwy3Lov/
CSS
/*Styles for basic form label and input elements*/
.basicForm{
margin: 10px 0 10px 10px;
}
.basicForm label{
float:left;
clear:left;
margin:inherit;
}
.basicForm input{
position:relative;
left:100px;
float:left;
margin: inherit;
}
HTML
<!DOCTYPE html>
<head>
<title>Form Validation Demo</title>
<link href="form.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>HTML 5 Input Types and Form Validation</h1>
<form class="basicForm">
<label for="UserName">User Name:</label>
<input type="text" id="UserName" required="required">
<label for="Password">Password:</label>
<input type="password" id="Password" required="required" />
<label for="UserEmail">Email:</label>
<input type="email" id="UserEmail">
<label for="PhoneNumber">Phone Number:</label>
<input type="tel" id="PhoneNumber">
<label for="Website">Homepage:</label>
<input type="url" id="Website">
<label for="Quantity">Quantity:</label>
<input type="number" id="Quantity" min="1" max="10" step="1" pattern="/\d/">
<label for="StartDate">Start Date:</label>
<input type="date" id="StartDate" min="2000-01-02" max="2016-01-01">
<label for="FavColor">Favorite Color:</label>
<input type="color" id="FavColor">
<label for="CurrentMonth">Current Month:</label>
<input type="month" id="CurrentMonth">
<label for="CurrentWeek">Current Week:</label>
<input type="week" id="CurrentWeek">
<label for="CurrentTime">Current Time:</label>
<input type="time" id="CurrentTime">
<input type="button" id="submit" value="submit">
</form>
</body>
</html>
This happens because as per your CSS all input elements are 150px to the left of the corresponding label but those are not the same width, so your inputs are not aligned.
You need to make all labels the same width:
.basicForm label{
float:left;
clear:left;
min-width:150px;
}
.basicForm input{
float:left;
}
Instead of min-width you could also use width, whichever you prefer.
If you insist on using absolute positioning, you could wrap each label/input pair in a div so you don't need to position each element individually, check this example:
.input-group {
position: relative;
height:2em;
}
.input-group label {
position: absolute;
top: 0;
left: 0;
}
.input-group input {
position: absolute;
top: 0;
left: 100px;
}
<div class="input-group">
<label>Label 1</label>
<input type="text">
</div>
<div class="input-group">
<label>longer Label</label>
<input type="text">
</div>
<div class="input-group">
<label>short</label>
<input type="text">
</div>
I am trying to render a html form like this: http://i.imgur.com/V53sv8F.jpg
The problem I am facing are:
I am not able to make the fields go in next line after the label
I haven't been able to get the firld length of first and last combined to be as long as that of the email (or password)
Any help is much appreciated.
HTML Code:
<form>
<label for="Name"><strong> Your Name:</strong></label>
<input type="text" id="Name_First" name="Name_First" required>
<input type="text" id="Name_Last" name="Name_Last" required>
<label for="Email">Email Address:<input type="email" id="Email" name="Email" vrequired></label>
<label for="RegPassword">Password:<input type="password" id="RegPasswordRegPassword" name="RegPassword" required></label>
<form>
JS Fiddle link: http://jsfiddle.net/d6a4h9o8/
For starters, your HTML is wrong, so no solution will work if you don't fix it first. So let's start with that:
<form>
<div class="row">
<label for="Name"><strong> Your Name:</strong></label>
<input type="text" id="Name_First" name="Name_First" />
<input type="text" id="Name_Last" name="Name_Last" />
</div>
<div class="row">
<label for="Email">Email Address:</label><input type="email" id="Email" name="Email" />
</div>
<div class="row">
<label for="RegPassword">Password:</label><input type="password" id="RegPasswordRegPassword" name="RegPassword" />
</div>
<form>
Now that we have proper markup and have added some divs to aid with styling (pay attention to those class="row" divs) we can apply CSS this way:
form {
background:#ccc;
padding:30px;
margin:0 auto;
width:50%
}
form label {
display: block;
}
input {
width:300px;
}
.row {
width:300px;
clear:both;
display:block;
position:relative;
margin:5px auto
}
.row:first-child input {
width:142px;
}
.row:first-child input:last-child {
position:absolute;
right:-5px;
width:144px
}
See fiddle to see the result
Now, there are MANY ways to do it, this is just one, but the most important part is to have your markup fixed, then styling it is really easy.
Here is working example similar to the picture.
HTML
<form>
<label for="Name"><strong> Your Name:</strong></label>
<input type="text" id="Name_First" name="Name_First" required>
<input type="text" id="Name_Last" name="Name_Last" required>
<label for="Email">Email Address:</label>
<input type="email" id="Email" name="Email" vrequired>
<label for="RegPassword">Password:</label><input type="password" id="RegPassword" name="RegPassword" required>
<form>
CSS.
form{
max-width: 500px;
background: #d4d4d4;
padding: 20px;
}
form label {display: block;}
input{padding: 7px 0;font-size: 25px;}
input[type="text"]{width:48.2%;}
input[type="email"],input[type="password"]{width: 98%;}
}
Try this:
label {
display: block;
clear: both;
}
You'll still have to do additional styling, of course.
use
#Name_First {
...
}
to target specific element with your css styles.
and try read through http://www.htmldog.com/guides/css/beginner/applyingcss/
what you want to focus on should be "display" and "width"
The following code should allow me to have the label and input field sitting one next to each other.
Any idea what the problem is?
.form{
width:500px;
float:left;
padding:20px 50px;
background-color:orange;
}
label.form{
float:left;
clear:left;
margin-bottom:8px;
}
input.input{
width:400px;
padding:5px 20px;
margin-bottom:8px;
background:#F7F7F7;
border-width:1px;
border-style:solid;
border-color:#333333;
}
<div class="form">
<form action="process.php" method="post">
<label class="form">Name</label><input type="text" name="name" class="input" />
<label class="form">Position</label><input type="text" name="position" class="input" />
<label class="form">Company</label><input type="text" name="company" class="input" />
<label class="form">Address</label><input type="text" name="address1" class="input" />
<label class="form">Town/ City</label><input type="text" name="town" class="input" />
<label class="form">Postcode</label><input type="text" name="postcode" class="input" />
<label class="form">Contact No.</label><input type="text" name="phone" class="input" />
<input type="submit" name ="getcatalogue" class="button" value="Request Catalogue"/>
</form>
</div>
For some reason, the label is sitting above each field?
Any help would be massively appreciated!
Thanks
It’s because the label elements, being in class form, have 50px padding on left and right, making the total width so large that the input element does not fit on its right size, within the width of 500px set for the form.
It’s easy to get confused if you use the same class name for essentially different elements, as here (form and label). The label elements hardly need a class, since they can be referred to using suitable contextual selectors, using their ancestor’s class.
A much better design would use a table with labels in one column, input fields in the other, first without any width settings, then perhaps tuned if needed.