This question already has answers here:
Justify elements with fix space (variable width)
(2 answers)
Closed 6 years ago.
I have designed the following HTML form :
div{
display: inline-block;
}
fieldset{
display: inline-block;
}
<body>
<form action="index.html" method="post">
<h1><center>FCNB Loan Request</center></h1>
<center>
<fieldset>
<div>
<label for="name">Branch Name and Code:</label>
<input type="text" id="name" name="user_name">
<label for="pfnumber">PF Number:</label>
<input type="text" id="name" name="pfnumber">
<label for="cpname">Contact Person Name:</label>
<input type="text" id="name" name="cpname">
<label for="cnumber">Contact Number:</label>
<input type="text" id="name" name="cnumber">
</div>
<hr> </hr>
<!-- Input Fields -->
<div>
<label for="customer">Customer:</label>
<input type="text" id="name" name="customer">
<label for="cif">CIF Number:</label>
<input type="text" id="name" name="cif">
<label for="dfgt">If exporter, mention DGFT No. : </label>
<input type="text" id="name" name="dfgt">
<label for="activity">Activity:</label>
<input type="text" id="name" name="activity">
</div>
<hr />
</fieldset>
</center>
</form>
</body>
The form elements are aligned in a centered manner without covering the width of the screen. I would like the form elements to be aligned in a "justified" manner, ie, to cover the width of the screen. How can this be done?
I have added the following snippet to the style:
form label, form input {
display: block;
margin-bottom: 10px;
}
This will make your label and input tag take the full width of browser and also add some margin bottom to it.
div{
display: inline-block;
}
fieldset{
display: inline-block;
}
form label, form input {
display: block;
margin-bottom: 10px;
}
<body>
<form action="index.html" method="post">
<h1><center>FCNB Loan Request</center></h1>
<center>
<fieldset>
<div>
<label for="name">Branch Name and Code:</label>
<input type="text" id="name" name="user_name">
<label for="pfnumber">PF Number:</label>
<input type="text" id="name" name="pfnumber">
<label for="cpname">Contact Person Name:</label>
<input type="text" id="name" name="cpname">
<label for="cnumber">Contact Number:</label>
<input type="text" id="name" name="cnumber">
</div>
<hr> </hr>
<!-- Input Fields -->
<div>
<label for="customer">Customer:</label>
<input type="text" id="name" name="customer">
<label for="cif">CIF Number:</label>
<input type="text" id="name" name="cif">
<label for="dfgt">If exporter, mention DGFT No. : </label>
<input type="text" id="name" name="dfgt">
<label for="activity">Activity:</label>
<input type="text" id="name" name="activity">
</div>
<hr />
</fieldset>
</center>
</form>
</body>
Hi change width:100% with form elements,
form label, form input {
width:100%;
}
div{
display: inline-block;
}
fieldset{
display: inline-block;
}
form label, form input {
width:100%;
}
<body>
<form action="index.html" method="post">
<h1><center>FCNB Loan Request</center></h1>
<center>
<fieldset>
<div>
<label for="name">Branch Name and Code:</label>
<input type="text" id="name" name="user_name">
<label for="pfnumber">PF Number:</label>
<input type="text" id="name" name="pfnumber">
<label for="cpname">Contact Person Name:</label>
<input type="text" id="name" name="cpname">
<label for="cnumber">Contact Number:</label>
<input type="text" id="name" name="cnumber">
</div>
<hr> </hr>
<!-- Input Fields -->
<div>
<label for="customer">Customer:</label>
<input type="text" id="name" name="customer">
<label for="cif">CIF Number:</label>
<input type="text" id="name" name="cif">
<label for="dfgt">If exporter, mention DGFT No. : </label>
<input type="text" id="name" name="dfgt">
<label for="activity">Activity:</label>
<input type="text" id="name" name="activity">
</div>
<hr />
</fieldset>
</center>
</form>
</body>
Related
we have built a form using fieldset and due to large number of fields, we are using css 'overflow: auto'.
When an user clicks Mouse middle button on any field, the page crashes.
but if I replace fieldset with div tag, it works without an issue.
Can anyone help me fix this issue using fieldset?
code can be found here - https://jsfiddle.net/3r28eo0p/2/
.overflowTest {
background: #4CAF50;
color: white;
padding: 15px;
width: 50%;
height: 100px;
overflow: scroll;
border: 1px solid #ccc;
}
<form action="/action_page.php">
<fieldset class="overflowTest">
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<form action="/action_page.php">
<div class="overflowTest">
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</div>
</form>
I have this form:
I want the last name input to be on the same line as the first name. I used float-left for both of them but it doesn't work.
.first-name {
float: left;
margin-right: 20px;
}
.last-name {
float: left;
}
input,
label {
display: block;
}
<form action="" method="POST">
<section>
<div class="first-name">
<label for="first-name">First name</label>
<input type="text" id="first-name" required> </div>
<div class="last-name">
<label for="last-name">Last name </label>
<input type="text" id="last-name" required></div>
<br style="clear:both;" />
</section>
<section>
<label for="company">Company </label>
<input type="text" id="company" required>
<label for="email">E-mail</label>
<input type="email" id="email" required>
</section>
<input class="submit" type="submit" value="REGISTER">
</form>
Use flexbox to solve this.
section.justify-content-btw {
display: flex;
justify-content: space-between;
}
input,
label {
display: block;
}
<form action="" method="POST">
<section class="justify-content-btw">
<div class="first-name">
<label for="first-name">First name</label>
<input type="text" id="first-name" required> </div>
<div class="last-name">
<label for="last-name">Last name </label>
<input type="text" id="last-name" required></div>
<br style="clear:both;" />
</section>
<section>
<label for="company">Company </label>
<input type="text" id="company" required>
<label for="email">E-mail</label>
<input type="email" id="email" required>
</section>
<input class="submit" type="submit" value="REGISTER">
</form>
I want to create a registration form with the following order on each line:
label input label input
label input label input
I wrote some code and managed to get the order right
The problem is that the labels and therefore the text inside them are not aligned between the different lines and the same goes for the inputs.
<div class="container" align="center">
<div align="center">
<h1> New patient </h1>
</div>
<br>
<br>
<form action="/action_page.php">
<div class="input-group">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
<div class="input-group">
<label class="label">Gender</label>
<label class="radio-container m-r-45">Maschio
<input type="radio" checked="checked" name="gender" required
value="M">
<span class="checkmark"></span>
</label>
<label class="radio-container">Femmina
<input type="radio" name="gender" required value="F">
<span class="checkmark"></span>
</label>
<label class="label">Birthday</label>
<input class="input--style-4 js-datepicker" type="text" name="birthday" required>
</div>
<div class="input-group">
<label for="cf">Fiscal Code</label>
<input type="text" id="cf" name="cf" placeholder="Fiscal Code..">
<input type="button" value="Calculate">
</div>
<div class="input-group">
<label for="fname">Via</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
<label for="lname">Civico</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
<div class="input-group">
<label for="fname">Citta</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
<label for="lname">CAP</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
<div class="input-group">
<label for="fname">Father's name</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
<input type="submit" value="Add">
</form>
</div>
.left-align-field{
display: inline-block;
float: left;
clear: left;
width: 300px;
text-align: left;
padding: 5px;
}
.right-align-field{
display: inline-block;
float: left;
padding: 5px;
}
<div class="container" align="center">
<div align="center">
<h1> New patient </h1>
</div>
<br>
<br>
<form action="/action_page.php">
<div class="input-group">
<div class="left-align-field">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
</div>
<div class="right-align-field">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
</div>
<div class="input-group">
<div class="left-align-field">
<label class="label">Gender</label>
<label class="radio-container m-r-45">Maschio
<input type="radio" checked="checked" name="gender" required
value="M">
<span class="checkmark"></span>
</label>
<label class="radio-container">Femmina
<input type="radio" name="gender" required value="F">
<span class="checkmark"></span>
</label>
</div>
<div class="right-align-field">
<label class="label">Birthday</label>
<input class="input--style-4 js-datepicker" type="text" name="birthday" required>
</div>
</div>
<div class="input-group">
<div class="left-align-field">
<label for="cf">Fiscal Code</label>
<input type="text" id="cf" name="cf" placeholder="Fiscal Code..">
<input type="button" value="Calculate">
</div>
</div>
<div class="input-group">
<div class="left-align-field">
<label for="fname">Via</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
</div>
<div class="right-align-field">
<label for="lname">Civico</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
</div>
<div class="input-group">
<div class="left-align-field">
<label for="fname">Citta</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
</div>
<div class="right-align-field">
<label for="lname">CAP</label>
<input type="text" id="lname" name="lastname" placeholder="Your last
name..">
</div>
<div>
<div class="input-group">
<div class="left-align-field">
<label for="fname">Father's name</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">
</div>
<div class="right-align-field">
<input type="submit" value="Add">
</div>
</form>
</div>
I am trying to create a form for people to contact me but can't get it to look nice. I can't get the forms to align vertically and I also can't get the Message label to display on the top left side of the textarea instead of the bottom left.
<form id="contact" name="contact" method="post">
<label for="name"><br>
Name:</label>
<input type="text" name="name" id="name">
<label for="email"><br>
Email:</label>
<input type="email" name="email" id="email">
<label for="subject"><br>
Subject:</label>
<input type="text" name="subject" id="subject">
<label for="message"><br>
Message:</label>
<textarea name="message" id="message"></textarea>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
I wouldn't use <br> but if you want to, move it outside of the label and before the input.
Alternatively, set your labels to be displayed as block level items:
label {display: block}
Example: http://jsbin.com/ixurUMU/1/
The reason it's not working how you want it to is that labels aren't block-level elements. They are inline. Meaning they will not in any way trigger a 'line break' by default.
HTML
<form id="contact" name="contact" method="post">
<label for="name">
Name:</label>
<input class="textbox" type="text" name="name" id="name">
<label for="email">
Email:</label>
<input class="textbox" type="email" name="email" id="email">
<label for="subject">
Subject:</label>
<input class="textbox" type="text" name="subject" id="subject">
<label for="message">
Message:</label>
<textarea class="textbox" name="message" id="message"></textarea>
<input type="submit" name="submit" id="submit" value="Submit">
CSS
.textbox {display: block}
Working fiddle
You can also use this
HTML
<form id="contact" name="contact" method="post">
<label class="label" for="name">
Name:</label>
<input class="textbox" type="text" name="name" id="name"><br>
<label class="label" for="email">
Email:</label>
<input class="textbox" type="email" name="email" id="email"><br>
<label class="label" for="subject">
Subject:</label>
<input class="textbox" type="text" name="subject" id="subject"><br>
<label class="label" for="message">
Message:</label>
<textarea class="textbox" name="message" id="message"></textarea><br>
<label class="label" for="message">
</label>
<input type="submit" name="submit" id="submit" value="Submit">
CSS
.textbox {display: inline-block;}
.label
{
display: inline-block;
width: 60px;
}
Fiddle Demo
I have an HTML form element:
<form action="doit" id="doit" method="post">
Name <br/>
<input id="name" name="name" type="text" /> <br/>
Phone number <br/>
<input id="phone" name="phone" type="text" /> <br/>
Year <br/>
<input id="year" name="year" type="text" /> <br/>
</form>
I would like there to be a little more space between the fields, for example, between the lines
<input id="name" name="name" type="text" /> <br/> and
Phone number <br/>,
and also between
<input id="phone" name="phone" type="text" /> <br/> and Year <br/>.
How can I do it?
I would wrap your rows in labels
<form action="doit" id="doit" method="post">
<label>
Name
<input id="name" name="name" type="text" />
</label>
<label>
Phone number
<input id="phone" name="phone" type="text" />
</label>
<label>
Year
<input id="year" name="year" type="text" />
</label>
</form>
And use
label, input {
display: block;
}
label {
margin-bottom: 20px;
}
Don't use brs for spacing!
Demo: http://jsfiddle.net/D8W2Q/
In your CSS file:
input { margin-bottom: 10px; }
A simple between input fields would do the job easily...
<form>
<div class="form-group">
<label for="nameLabel">Name</label>
<input id="name" name="name" class="form-control" type="text" />
</div>
<div class="form-group">
<label for="PhoneLabel">Phone</label>
<input id="phone" name="phone" class="form-control" type="text" />
</div>
<div class="form-group">
<label for="yearLabel">Year</label>
<input id="year" name="year" class="form-control" type="text" />
</div>
</form>