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>
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>
I am creating a form for a website, but right now it's only allowing me to tab through from phone down. I cannot tab from first name to last name to phone. how do I change it to allow me to tab through the whole thing?
<form data-customer-information-form="true" autocomplete="off" method="POST" action="addticket/submit" name="ticketForm" id="ticketform" accept-charset="UTF-8">
<p>
<label for="customerFirstName">First Name:</label></br>
<input type="text" name="customerFirstName" id="customerFirstName" placeholder="first name" pattern="[A-Za-z]+" required>
</p>
<p>
<label for="customerLastName">Last Name:</label></br>
<input type="text" name="customerLastName" id="customerLastName" placeholder="last name" required>
</p>
<p>
<label for="phoneNumber">Phone: used for contact</label></br>
<input type="tel" id="phone" maxlength="12" name="phoneNumber" placeholder="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
</p>
<p>
<label for="email">Email:</label></br>
<input type="email" name="email" id="email" placeholder="email">
</p>
<p>
<label for="service">Computer/Service Name:</label></br>
<input type="text" name="service" placeholder="computer model or service" required>
</p>
<p>
<label for="description">Anything else we need to know:</label></br>
<textarea type="text" maxlength="200" name="description" id="description" placeholder="What's gone wrong?"></textarea>
</p>
<input type="submit" name="submit" value="Submit" id="submit">
</form>
When I copied the HTML into an HTML viewer it works fine. But in the rest of the page it stops working.
Not sure why it's not letting you tab as is, but you could try setting the tabindex property:
<form data-customer-information-form="true" autocomplete="off" method="POST" action="addticket/submit" name="ticketForm" id="ticketform" accept-charset="UTF-8">
<p>
<label for="customerFirstName">First Name:</label></br>
<input tabindex="0" type="text" name="customerFirstName" id="customerFirstName" placeholder="first name" pattern="[A-Za-z]+" required>
</p>
<p>
<label for="customerLastName">Last Name:</label></br>
<input tabindex="0" type="text" name="customerLastName" id="customerLastName" placeholder="last name" required>
</p>
<p>
<label for="phoneNumber">Phone: used for contact</label></br>
<input tabindex="0" type="tel" id="phone" maxlength="12" name="phoneNumber" placeholder="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
</p>
<p>
<label for="email">Email:</label></br>
<input tabindex="0" type="email" name="email" id="email" placeholder="email">
</p>
<p>
<label for="service">Computer/Service Name:</label></br>
<input tabindex="0" type="text" name="service" placeholder="computer model or service" required>
</p>
<p>
<label for="description">Anything else we need to know:</label></br>
<textarea tabindex="0" type="text" maxlength="200" name="description" id="description" placeholder="What's gone wrong?"></textarea>
</p>
<input tabindex="0" type="submit" name="submit" value="Submit" id="submit">
</form>
Make sure your javascript isn't preventing certain keys.
document.getElementById("customerFirstName").onkeydown = function(e){
if(!(e.keyCode === 8 || e.keyCode ===46 || keypress.keyCode === 9)){
if(!(/[A-Za-z]/i.test(String.fromCharCode(e.keyCode)))) {
e.preventDefault();
return false;
}
}
}
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 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>