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>
Related
I am trying to place the form label on the top-left side, but it does not work. I used Bootrstrap for designing and then I tried to change the CSS code by using ID. It doesn't help. Any advice?
Thank you in advance
#labels {
text-align: left;
}
<form class="" action="index.html" method="post">
<label id="labels" for="">Name</label><br>
<input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" type="text" name="" value="" placeholder="Enter Name"> <br>
<label id="labels" for="">Email Address</label><br>
<input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" type="email" name="" value="" placeholder="Enter Email"> <br>
<label id="labels" for="">Enter Phone</label> <br>
<input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" type="number" name="" value="" placeholder="Enter Phone Number">
</form>
#labels {
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<form method="post" action="">
Name: <input type="text" name="name" value="">
<br><br>
E-mail: <input type="text" name="email" value="">
<br><br>
Website: <input type="text" name="website" value="">
<br><br>
Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
You might like this code.
You just have to remove <br> which means break. It gives you a line space.
So, you have to remove it.
Edited :
#labels {
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>
<form class="" action="index.html" method="post">
<label id="labels" for="">Name</label>
<input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" type="text" name="" value="" placeholder="Enter Name"> <br>
<label id="labels" for="">Email Address</label>
<input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" type="email" name="" value="" placeholder="Enter Email"> <br>
<label id="labels" for="">Enter Phone</label>
<input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" type="number" name="" value="" placeholder="Enter Phone Number">
</form>
</body>
</html>
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>
I'm trying to make a website form look like this where the
right side of text fields are aligned
When I change the size of the screen, the text fields are no longer in alignment. How can I keep them aligned regardless of screen size?
Here is my code:
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<title>Coat Request Form</title>
</head>
<body>
<form target="_top" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<p>
<input type=hidden name="oid" value="00Di0000000gO95">
<input type=hidden name="retURL" value="http://www.empowermentplan.org/#!thank-you/jiwpq">
<span style="display:inline-block" margin-right="30px">
<label class="required" for="first_name" style="display:block">First Name</label>
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" required /><br>
</span>
<span style="display:inline-block">
<label class="required" for="last_name" style="display:block">Last Name</label>
<input id="last_name" maxlength="80" name="last_name" size="20" type="text" required /><br>
</span>
<br>
<span style="display:inline-block">
<label class="required" for="email" style="display:block" >Email</label>
<input id="email" maxlength="80" name="email" size="20" type="text" required/><br>
</span>
<span style="display:inline-block">
<label for="phone" style="display:block" >Phone</label>
<input id="phone" maxlength="40" name="phone" size="20" type="text" /><br>
</span>
<br>
<span style="display:inline-block">
<label for="company" style="display:block">Company (optional)</label>
<input id="company" maxlength="40" name="company" size="20" type="text" /><br>
</span>
<span style="display:inline-block">
<label style="display:block">How many coats?</label>
<input id="00Ni000000H0CxE" name="00Ni000000H0CxE" size="20" type="text" /><br>
</span>
<label style="display:block">Who are the coats for?</label>
<textarea id="00Ni000000H0Cy2" name="00Ni000000H0Cy2" rows="3" type="text" wrap="soft"></textarea><br>
<input type="submit" name="submit" class="btn">
<select style="visibility:hidden" id="00Ni000000H0Cxx" name="00Ni000000H0Cxx" title="Topic">
<option type="hidden" value="Coats">Coats</option> </select><br>
</p>
</form>
</body>
You can use bootstrap for this purpose. Use the bootstrap style-sheet. As bootstrap provides responsive web design so your design will be aligned automatically based on the screen size. Enclose the fields in row. Then make two columns by adding the class "col-md-6", the problem will be solved. For more detail about how to use the bootstrap visit this link.
Using simple CSS you can align all the fields.
See the following jsfiddle: https://jsfiddle.net/h5w2LLjd/
CSS:
.right {
float: right;
}
.left {
float: left;
}
.full {
width: 100%;
}
.clear {
clear: both;
}
textarea {
box-sizing: border-box;
width: 100%;
}
Check this
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<title>Coat Request Form</title>
</head>
<body>
<form target="_top" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<p>
<input type=hidden name="oid" value="00Di0000000gO95">
<input type=hidden name="retURL" value="http://www.empowermentplan.org/#!thank-you/jiwpq">
<span style="display:inline-block" margin-right="30px">
<label class="required" for="first_name" style="display:block">First Name</label>
<input id="first_name" maxlength="40" name="first_name" size="20" type="text" required /><br>
</span>
<span style="display:inline-block;position:absolute;width: 50%;right: 10px;">
<label class="required" for="last_name" style="display:block">Last Name</label>
<input id="last_name" maxlength="80" name="last_name" size="20" type="text" required /><br>
</span>
<br>
<span style="display:inline-block">
<label class="required" for="email" style="display:block" >Email</label>
<input id="email" maxlength="80" name="email" size="20" type="text" required/><br>
</span>
<span style="display:inline-block;position:absolute;width: 50%;right: 10px;">
<label for="phone" style="display:block" >Phone</label>
<input id="phone" maxlength="40" name="phone" size="20" type="text" /><br>
</span>
<br>
<span style="display:inline-block">
<label for="company" style="display:block">Company (optional)</label>
<input id="company" maxlength="40" name="company" size="20" type="text" /><br>
</span>
<span style="display:inline-block;position:absolute;width: 50%;right: 10px;">
<label style="display:block">How many coats?</label>
<input id="00Ni000000H0CxE" name="00Ni000000H0CxE" size="20" type="text" /><br>
</span>
<label style="display:block">Who are the coats for?</label>
<textarea id="00Ni000000H0Cy2" name="00Ni000000H0Cy2" rows="3" type="text" style:"position: absolute;
width: 98%;" wrap="soft"></textarea><br>
<input type="submit" name="submit" class="btn">
<select style="visibility:hidden" id="00Ni000000H0Cxx" name="00Ni000000H0Cxx" title="Topic">
<option type="hidden" value="Coats">Coats</option> </select><br>
</p>
</form>
</body>
I'm sharing this one because it's so obvious when you know it, but makes you bang your head when not!
Submitting the following form, I wasn't getting any of my fields:
<form action="form.php" method="post">
<label for="firstName">First name: </label>
<input type="text" id="firstName" />
<label for="lastName">Last name: </label>
<input type="text" id="lastName" />
<label for="address">Address: </label>
<input type="text" id="address" />
<label for="age">Age: </label>
<input type="text" id="age" />
<button type="submit">Submit!</button>
</form>
Well the answer was quite straightforward: I didn't specify a name attribute for my input fields.
Without the name attribute, it's impossible for the browser to send anything. So here's my working form:
<form action="form.php" method="post">
<label for="firstName">First name: </label>
<input type="text" id="firstName" name="firstName" />
<label for="lastName">Last name: </label>
<input type="text" id="lastName" name="lastName" />
<label for="address">Address: </label>
<input type="text" id="address" name="address" />
<label for="age">Age: </label>
<input type="text" id="age" name="age" />
<button type="submit">Submit!</button>
</form>
I have a simple HTML5 form. but when I do a code validator (http://validator.w3.org/check) I get multiple errors
The for attribute of the label element must refer to a form control. What does this error mean? It is pointing to this line
<label id="name0" for="Name" style="width: 180px;">Name</label>
This is my current form
<div id="contact-add" title="Add New Contact" style="display: none;">
<div id="response-add"></div>
<form method="post" id="add-form">
<div class="label-input">
<label id="name0" for="Name" style="width: 180px;">Name</label>
<input type="text" id="fullname0" value="" name="name" placeholder="Enter full name..." />
<input type="hidden" name="add_account_id" id="add_account_id" value="<?php echo $add_account_id; ?>" />
</div>
<div class="label-input">
<label id="title0" for="title" style="width: 180px;">Title (Optional)</label>
<input type="text" value="" name="title" placeholder="Enter title here..." />
</div>
<div class="label-input">
<label id="email0" for="email" style="width: 180px;">Email (Optional)</label>
<input type="text" value="" id="email" name="email" placeholder="Enter email address..." />
</div>
<div class="label-input">
<label id="phone0" for="phone" style="width: 180px;">Direct Number (Optional)</label>
<input type="text" value="" id="phone_number" name="phone_number" placeholder="Enter direct number..." />
</div>
<div class="label-input">
<label id="extention0" for="extention" style="width: 180px;">Extention (Optional)</label>
<input type="text" value="" id="phone_ext" name="phone_ext" placeholder="Enter extention number..." />
</div>
<div class="label-input">
<label id="shift0" for="shift" style="width: 180px;">Work Shift</label>
<?php echo generateWorkShiftMenu($db, 'work_shift', 'Day'); ?>
</div>
</form>
</div>
The for attribute of a label must be the id of a form control. i.e.
<label id="name0" for="fullname0" style="width: 180px;">Name</label>
<input type="text" id="fullname0" value="" name="name" placeholder="Enter full name..." />