I have a screen that I want to align the textbox so they are all on the same position. Below is the screenshot where it's not aligned:
My code:
<label>File Name: </label>
<input type="text" size="30" name="Filename" value="<%=files%>" readonly>
<br><br>
<label>URL Link: </label>
<input type="text" size="100" name="URL Link" value="<%=url%>" readonly>
<br><br>
<label>Start Date: </label>
<input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly>
<br><br>
<label>End Date: </label>
<input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" readonly required />
<br><br>
<label>Enable: </label>
<input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked />On
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" /> Off
Note: label is not being used at the moment.
I am using &emsp and obviously can't get them to align together. Been trying to fix this for an hour. Is there any way to achieve what I want?
CSS Grid is the simplest way to go for forms.
A form is a two dimensional array and grid was design for just this purpose.
Tabular data without the need for tables.
Here is a simple example:
.grid {
display: grid;
grid-template-columns: 100px 400px;
grid-gap: 10px;
}
<div class="grid">
<label>File Name:</label>
<input type="text" size="30" name="Filename" value="<%=files%>" readonly>
<label>URL Link:</label>
<input type="url" size="100" name="URL Link" value="<%=url%>" readonly>
<label>Start Date:</label>
<input class="txtStartDate" type="date" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly>
<label>End Date:</label>
<input class="txtEndDate" type="date" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" readonly required/>
<label>Enable:</label>
<div>
<input id="on" class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>
<label for="on">On</label>
<input id="off" class="mandatory" type="radio" name="radioEnableStatus" value="0" />
<label for="off">Off</label>
</div>
</div>
Method 1: Set width to <label>
label {
display: inline-block;
width: 100px;
}
<label>File Name:</label><input type="text" size="30" name="Filename" value="<%=files%>" readonly><br><br>
<label>URL Link:</label><input type="text" size="100" name="URL Link" value="<%=url%>" readonly><br><br>
<label>Start Date:</label><input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly><br><br>
<label>End Date:</label><input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" readonly required/><br><br>
<label>Enable:</label>
<input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>On
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off
Method 2: Use <table>
<table>
<tr>
<td>
<label style="display:inline-block;width:120px;">File Name:</label>
</td>
<td>
<input type="text" size="30" name="Filename" value="<%=files%>" readonly>
</td>
</tr>
<tr>
<td>
<label style="display:inline-block;width:120px;">URL Link:</label>
</td>
<td>
<input type="text" size="100" name="URL Link" value="<%=url%>" readonly>
</td>
</tr>
<tr>
<td>
<label style="display:inline-block;width:120px;">Start Date:</label>
</td>
<td>
<input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly>
</td>
</tr>
<tr>
<td>
<label style="display:inline-block;width:120px;">End Date:</label>
</td>
<td>
<input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" readonly required/>
</td>
</tr>
<tr>
<td>
<label style="display:inline-block;width:120px;">Enable:</label>
</td>
<td>
<input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>On
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off
</td>
</tr>
</table>
<br><br>
This can be done by solely using HTML or also by including some CSS Styling Elements. The only HTML method can be executed by using the HTML tables and putting your data in different rows, which will automatically align your textboxes. I am uploading the sample code for the first two fields. You can use similar implementation for the rest.
<table>
<tr>
<th><label>File Name</label></th>
<td><input type="text" size="30" name="Filename" value="<%=files%>" readonly> </td>
</tr>
<tr>
<th> URL Link </th>
<td> <input type="text" size="100" name="URL Link" value="<%=url%>" readonly></td>
</tr>
</table>
You can use fieldset
label{
display:inline-block;
width:200px;
margin-right:30px;
text-align:right;
}
fieldset{
border:none;
width:500px;
margin:0px auto;
}
<fieldset>
<label>File Name:</label><input type="text" name="Filename" value="<%=files%>" size="20" readonly>
<label>URL Link:</label><input type="text" name="URL Link" value="<%=url%>" size="20" readonly>
<label>Start Date:</label><input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" size="20" readonly>
<label>End Date:</label><input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" size="20" readonly>
<label>Enable:</label> <input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>On
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off
</fieldset>
And with divs
form {min-width:30em}
.labels {float:left; line-height:1.7em; padding-right:.3em}
.inputs {line-height:1.7em}
fieldset{border:none;}
<form method="post" action="#">
<fieldset>
<div class="labels">
File Name:<br>
URL Link::<br>
Start Date:<br>
Start Date:<br>
Enable:<br>
</div>
<div class="inputs">
<input type="text" name="Filename" value="<%=files%>" size="20" readonly><br>
<input type="text" name="URL Link" value="<%=url%>" size="20" readonly><br>
<input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" size="20" readonly><br>
<input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" size="20" readonly><br>
<input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>On
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off
</div>
</fieldset>
</form>
You can try with a float property
<div style="width:100%">
<div style="width:100%">
<label style="width:30%">File Name: </label>
<input type="text" size="30" name="Filename" value="<%=files%>" readonly style="float:right;height:100%;width:70%">
</div>
<br/>
<div style="width:100%">
<label style="width:30%">URL Link: </label>
<input type="text" size="100" name="URL Link" value="<%=url%>" readonly style="float:right;height:100%;width:70%">
</div>
<br/>
<div style="width:100%">
<label style="width:30%">Start Date:</label>
<input class="txtStartDate" type="text" id="txtStartDate" name="Start Date" value="<%=currentDate%>" readonly style="float:right;width:70%">
</div>
<br/>
<div style="width:100%">
<label style="width:30%">End Date:</label>
<input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="<%=defaultDate%>" readonly required style="float:right;width:70%"/>
</div>
<br/>
<div style="width:100%">
<label style="width:30%">Enable:</label>
<div style="float :right;width:70%">
<input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked/>On
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off
</div>
</div>
</div>
.box{
display:flex;
align-items:center;
width:100%
}
input[type=text]{
width:350px
}
<div class="box">
<label>File Name: </label>
<input type="text" size="30" name="Filename" value="<%=files%>" readonly>
</div>
<br><br>
<div class="box">
<label>URL Link: </label>
<input type="text" size="100" name="URL Link" value="<%=url%>" readonly>
</div>
<br><br>
<div class="box">
<label>Start Date: </label>
<input class="txtStartDate" type="text" id="txtStartDate" name="Start Date"
value="<%=currentDate%>" readonly>
</div>
<br><br>
<div class="box">
<label>End Date: </label>
<input class="txtEndDate" type="text" id="txtEndDate" name="txtEndDate" value="
<%=defaultDate%>" readonly required />
</div>
<br><br>
<div class="box">
<label>Enable: </label>
<input class="mandatory" type="radio" name="radioEnableStatus" value="1" checked
/>On
<input class="mandatory" type="radio" name="radioEnableStatus" value="0" />Off
</div>
Related
The form should not be able to submit the form unless it is filled out. And an error message should pop up.
My problem is that I can't find out how to do this with HTML, because I am not allowed to use JavaScript in this task.
My code:
<form action="https://folk.ntnu.no/anderobs/webtek/receive_form.php" method="post">
<label for="name">Real Name: </label>
<input type="text" id="name" name="name" value=""> <br>
<label for="gender">Your gender: </label>
<input type="radio" id="gender" name="gender" value="Male">
<label for="gender">Male</label>
<input type="radio" id="gender" name="gender" value="Female">
<label for="gender">Female</label> <br>
<label for="email">E-Mail: </label>
<input type="email" id="email" name="email" value=""> <br>
<label for="birthdate">Birthdate: </label>
<input type="date" id="birthdate" name="birthdate" value=""> <br>
<label for="hero">Hero name: </label>
<input type="text" id="hero" name="hero" value=""> <br>
<label for="spandex">Do you wear spandex? </label>
<input type="radio" id="spandex" name="spandex" value="">
<label for="spandex">True</label>
<input type="radio" id="spandex" name="spandex" value="">
<label for="spandex">False</label> <br>
<label for="strengt">Strengt (between 1 and 10): </label>
<input type="number" id="strengt" name="strengt" min="1" max="10"> <br>
<label for="speed">Speed (between 1 and 10): </label>
<input type="number" id="speed" name="speed" min="1" max="10"> <br>
<label for="intelligence">Intelligence (between 1 and 10): </label>
<input type="number" id="intelligence" name="intelligence" min="1" max="10"> <br>
<label for="income">Income: </label>
<input type="number" id="income" name="income" min="0"> <br>
<label for="wealth">Wealth: </label>
<input type="number" id="wealth" name="wealth" min="0"> <br>
<br>
<input type="submit" value="Submit tax form">
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 have a simple example of an html table yet it will not display correctly and I do not understand why.
code for the table:
<div class="container">
<form id="testform" data-parsley-validate>
<div class="row">
<input class="form-control typeahead" name="customerSearch" type="text"
placeholder="Customer Search:" autofocus="on"
autocomplete="off" spellcheck="off" data-open="open" data-close="close"
data-select="select" data-autocomplete="autocomplete"
data-source="customersTypeAhead"/>
<button type="button" class="btn btn-warning">Clear</button>
<button type="button" class="btn btn-success">Create</button>
</div>
<div class="row">
<div class="col-md-4 smPadding">
<br>
<!-- Customr Contact info and factoring company info -->
<input class="form-control box-size" type="text" name="customerName" placeholder="Customer:"
data-parsley-trigger="change" minlength="6" required />
<input class="form-control box-size" type="text" name="customerAddress" placeholder="Address:"
data-parsley-trigger="change" minlength="6" required />
<table>
<tr>
<td>
<input class="form-control box-size" type="text" name="customerSuite" placeholder="Suite:" />
</td>
<td>
<input class="form-control box-size" type="text" name="customerCity" placeholder="City:"
data-parsley-trigger="change" minlength="3" required />
</td>
</tr>
<tr>
<td>
<input class="form-control box-size" type="text" name="customerState" placeholder="State/Prov:"
data-parsley-trigger="change" minlength="2" maxlength="2" required />
</td>
<td>
<input class="form-control box-size" type="text" name="customerZip" placeholder="Zip/Postal:"
data-parsley-trigger="change" minlength="5" required />
</td>
</tr>
</table>
<input class="form-control box-size" type="text" name="customerPhone1" placeholder="Phone 1:"
data-parsley-trigger="change" minlength="10" required />
<input class="form-control box-size" type="text" name="customerPhone2" placeholder="Phone 2:"
data-parsley-trigger="change" minlength="10"/>
<input class="form-control box-size" type="text" name="customerFax" placeholder="Fax:"
data-parsley-trigger="change" minlength="10"/>
<input type="checkbox" name="customerFactorInvoices" {{isFactoredCheckAnswer}}> Does Company Use Invoice Factoring?<br>
{{#if isFactoredCheck}}
<input class="form-control box-size" type="text" name="factoringName" placeholder="Customer:"
data-parsley-trigger="change" minlength="6" {{factorRequired}}/>
<input class="form-control box-size" type="text" name="factoringAddress" placeholder="Address:"
data-parsley-trigger="change" minlength="6" {{factorRequired}}/>
<table>
<tr>
<td>
<input class="form-control box-size" type="text" name="factoringSuite" placeholder="Suite:"
data-parsley-trigger="change" />
</td>
<td>
<input class="form-control box-size" type="text" name="factoringCity" placeholder="City:"
data-parsley-trigger="change" minlength="3" {{factorRequired}} />
</td>
</tr>
<tr>
<td>
<input class="form-control box-size" type="text" name="factoringState" placeholder="State/Prov:"
data-parsley-trigger="change" minlength="2" maxlength="2" {{factorRequired}} />
</td>
<td>
<input class="form-control box-size" type="text" name="factoringZip" placeholder="Zip/Postal:"
data-parsley-trigger="change" minlength="5" {{factorRequired}} />
</td>
</tr>
</table>
<input class="form-control box-size" type="text" name="factoringPhone1" placeholder="Phone 1:"
data-parsley-trigger="change" minlength="10" />
<input class="form-control box-size" type="text" name="factoringPhone2" placeholder="Phone 2:"
data-parsley-trigger="change" minlength="10"/>
<input class="form-control box-size" type="text" name="factoringFax" placeholder="Fax:"
data-parsley-trigger="change" minlength="10"/>
<input class="form-control box-size" type="text" name="factoringEmail" placeholder="Email:"
data-parsley-trigger="change" />
{{/if}}
</div>
<div class="col-md-4 smPadding">
<br>
<input class="form-control box-size" type="text" name="customerEmail1" placeholder="Email 1:"
data-parsley-trigger="change" required />
<table>
<tr>
<td>
<input type="checkbox" name="emailRoles1" value="onOrderCreate">On Order Create
</td>
<td>
<input type="checkbox" name="emailRoles1" value="onPuDel" > On Pick/Del
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="emailRoles1" value="invoicing"> Invoicing
</td>
<td>
<input type="checkbox" name="emailRoles1" value="accountsPayable" > Accounts Payable
</td>
</tr>
</table>
<br>
<input class="form-control box-size" type="text" name="customerEmail2" placeholder="Email 2:"
data-parsley-trigger="change" required />
<table>
<tr>
<td>
<input type="checkbox" name="emailRoles2" value="onOrderCreate">On Order Create
</td>
<td>
<input type="checkbox" name="emailRoles2" value="onPuDel" > On Pick/Del
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="emailRoles2" value="invoicing"> Invoicing
</td>
<td>
<input type="checkbox" name="emailRoles2" value="accountsPayable" > Accounts Payable
</td>
</tr>
</table>
<br>
<input class="form-control box-size" type="text" name="customerEmail3" placeholder="Email: 3"
data-parsley-trigger="change" required />
<table>
<tr>
<td>
<input type="checkbox" name="emailRoles3" value="onOrderCreate">On Order Create
</td>
<td>
<input type="checkbox" name="emailRoles3" value="onPuDel" > On Pick/Del
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="emailRoles3" value="invoicing"> Invoicing
</td>
<td>
<input type="checkbox" name="emailRoles3" value="accountsPayable" > Accounts Payable
</td>
</tr>
</table>
<br>
<input class="form-control box-size" type="text" name="customerEmail4" placeholder="Email 4:"
data-parsley-trigger="change" required />
<table>
<tr>
<td>
<input type="checkbox" name="emailRoles4" value="onOrderCreate">On Order Create
</td>
<td>
<input type="checkbox" name="emailRoles4" value="onPuDel" > On Pick/Del
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="emailRoles4" value="invoicing"> Invoicing
</td>
<td>
<input type="checkbox" name="emailRoles4" value="accountsPayable" > Accounts Payable
</td>
</tr>
</table>
</div>
<div class="col-md-4 smPadding">
<br>
<input type="checkbox" name="customerOriginalInvoices" value="true" > Customer Require Original Invoices<br>
<input type="checkbox" name="customerAccountHold" value="true" > Account on Hold<br>
</div>
</div>
</form>
</div>
The css that I was asked to place in
th, td {
width: 50%;
text-align: left;
}
picture of the problem.
Picutre of the full form showing that the textboxes line up proper with the table code.
Picture after applying the above css. Seems to make it worse.
So if you can tell me what I am doing wrong here it would be greatly appreciated.
This is the proper way after some research on div layouts.
<div class="row">
<div class="col-md-6">
<input type="checkbox" name="emailRoles3" value="onOrderCreate">On Order Create<br>
<input type="checkbox" name="emailRoles3" value="onPuDel" > On Pick/Del
</div>
<div class="col-md-6">
<input type="checkbox" name="emailRoles3" value="invoicing"> Invoicing<br>
<input type="checkbox" name="emailRoles3" value="accountsPayable" > Accounts Payable
</div>
</div>
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..." />
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>