Could I ask how I could place these input boxes and the Sumbit button on the same line please?
<td id="header-right">
<table>
<tr>
<td class = "Login-Bar"><div style = "width: 200px;">
<form action = "Login.php" method = "post">
Username: <input type = "text" name "Username" size = "10">
Password: <input type = "text" name "Password" size = "10">
<input type = "Submit">
</form></div>
</td>
</tr>
</table>
</td>
Thats the source code I have... It shows above my NavBar to the left, however I expected this to show on that same line, but it never it placed it as all under each other.
Thanks.
Don't use tables for layout
use label tag
Assign style float: left to both: labels and input fields. Then add clear below them (if you have any issues with elements overlapping each other).
Alternative would be to assign display: inline to the input fields.
You can apply this style to the form:
form {
display: inline-block;
width: 400px; /* or whatever width makes it work for you */
}
Try this for your css.
input {
float: left;
}
If you want to add some spacing. You can do something like this
input {
float: left;
margin-right: 5px;
}
Change the inner table definition to something like:
<form action="Login.php" method="post">
<table>
<tr>
<td class="Login-Bar">
Username:
<input type="text" name "Username" size="10" /></td>
<td class="Login-Bar">Password:
<input type="text" name "Password" size="10" /></td>
<td>
<input type="Submit" />
</td>
</tr>
</table>
</form>
Fiddle link.
Related
I've been trying to make a basic form inside a table to keep all the input fields intact but I want to have some gap between the columns and that's why I tried inserting colspan but it's not working at all, When I try to do the same with the label it works but for some reason not with input field. Can anyone please help me with this?
<form>
<table>
<tr>
<td>
<label for = "first">First Name</label>
</td>
<td colspan="4">
<input type = "text" id = "first">
</td>
<td>
<label for = "last">Last Name</label>
</td>
<td>
<input type = "text" id = "last">
</td>
<td>
<button type="submit">Submit!</button>
</td>
</tr>
</table>
</form>
Try adding a margin to your input field with this in your css:
input { margin-right: 10px; }
I am new to the site.
I have an issue in CSS and HTML to alight the text boxes in the same row. Meaning that currently, they are not aligned. Could you please help and explain?
<!DOCTYPE html>
<html>
<style>
.input1:focus {
background-color: yellow;
}
.input1:hover {
background-color: cyan;
}
</style>
<body>
<form>
First name: <input class="input1" type="text" name="firstname"><br>
Last name: <input class="input1" type="text" name="lastname"><br>
E-mail Address: <input class="input1" name = "email" placeholder = "name#domain.com">
<p>
<input type = "submit" value = "Submit Form">
<input type = "reset" value = "Reset button">
</p>
</form>
</body>
</html>
The textboxes are not aligned because you have text before each one. I would suggest using a table, and then use CSS to make sure there's no row/column outline
<form>
<table>
<tr><td>First name:</td> <td><input class="input1" type="text" name="firstname"></td></tr>
<tr><td>Last name:</td> <td><input class="input1" type="text" name="lastname"></td></tr>
<tr><td>E-mail Address:</td> <td><input class="input1" name = "email" placeholder = "name#domain.com"></td></tr>
<tr>
<td><input type = "submit" value = "Submit Form"></td>
<td><input type = "reset" value = "Reset button"></td>
</tr>
</table>
</form>
Refer to https://www.w3schools.com/html/html_tables.asp for more help!
You can use float: left; and float: right;. Here is a good resource https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_old.
HTML
<form>
<table><tr>
<td>First name:</td> <td><input class="input1" type="text" name="firstname"></td>
<td>Last name:</td> <td><input class="input1" type="text" name="lastname"></td>
<td>E-mail Address:</td> <td><input class="input1" name = "email" placeholder = "name#domain.com"></td></tr>
</table>
<div class="makeCenter">
<input type = "submit" value = "Submit Form">
<input type = "reset" value = "Reset button">
</form>
CSS
.makeCenter{
text-align:center;
width:100%;
padding:20px 0 0 0;
}
input[type=submit]{
margin-right:20px;
}
According to my guess, you must be expecting this!
Wrap your labels in divs. Add a class attribute to each div with the same classname, add the following style to that class:
display: inline-block; (this displays the labels on the same line as the input elements)
add width whatever you want it to be. In my example I made it 120px
.input1:focus {
background-color: yellow;
}
.input1:hover {
background-color: cyan;
}
.label {
display: inline-block;
width: 120px;
}
<form>
<div class="label">First name:</div> <input class="input1" type="text" name="firstname"><br>
<div class="label">Last name:</div> <input class="input1" type="text" name="lastname"><br>
<div class="label">E-mail Address:</div> <input class="input1" name = "email" placeholder = "name#domain.com">
<p>
<input type = "submit" value = "Submit Form">
<input type = "reset" value = "Reset button">
</p>
</form>
I have a problem with aligning my labels and input fields in a form. Time and again I end up with something like this:
Which is produced with HTML like so:
...
<ul>
<li>
<label for="STREET">Street</label>
<input data-val="true" data-val-required="The Street field is required." id="STREET" name="STREET" type="text" value="P.O. Box 1053" />
</li>
<li>
<label for="SUITE">Suite</label>
<input id="SUITE" name="SUITE" type="text" value="" />
</li>
<li>
<label for="city">City</label>
<input data-val="true" data-val-required="The City field is required." id="city" name="city" type="text" value="Dalton" />
</li>
...
Naturally my issue is that the labels and the inputs don't line up, so the display is all jaggy, etc. I can personally think of many ways around this, using a table, setting a bunch of divs, and picking widths, etc. so that everything lines up properly.
It's not that these approaches don't work, but they don't seem to be more of a hack than a real solution, and then I end up having to manipulate the label widths if the label text / font changes, etc.
Is there an easier way to solve this type of problem, while preserving simple HTML / CSS or should I stick with the classic approach of hard coding widths, divs, using tables, etc ?
Here's an option
ul {
display: table;
}
li {
display: table-row;
}
label, input {
display: table-cell;
}
Of course you should adapt the css to your specific form, but this gives you table layout without sacrificing the markup. Here's a fiddle
it should be enough to set a width to the labels that is larger than the largest label-text
example css
label {
display:inline-block;
width:350px;
}
so all inputs would line up after 350px, is that your desired effect ?
http://jsfiddle.net/dKjpk/5/
Here is an option using floating inside the label if it's possible to give ul a fixed / relative width:
ul{
width:500px; // or 100%;
}
li{
width:100%;
display:block;
}
li{
list-style:none;
clear:both;
}
li label{
float:left;
}
li input{
float:right;
}
here's a fiddle
Arguably you could justify using a table here, since semantically you can consider that form to be tabular data.
Otherwise you need to either float the input elements right within their container so they are all flush, set a fixed width on the label elements, or use some kind of fluid grid to handle this (I usually use Foundation so I would use columns for this, with both label and input elements set to width: 100% within their fluid containers).
try it like this
by creating a table your things are in the same area beneath each other
<html>
<head>
<style>
label{
font-weight:bold;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td><label for="street">Street</label></td>
<td><input type="text" name="street"></td>
</tr>
<tr>
<td><label for="suite">Suite</label></td>
<td><input type="text" name="suite"></td>
</tr>
<tr>
<td><label for="city">City</label></td>
<td><input type="text" name="city"></td>
</tr>
<tr>
<td><label for="state_region">State or Region</label></td>
<td><select><option>Arizona</option></select></td>
</tr>
<tr>
<td><label for="pc">Postal Code</label></td>
<td><input type="text" name="pc"></td>
</tr>
<tr>
<td><label for="country">Country</label></td>
<td><select><option>USA</option></select></td>
</tr>
<tr>
<td><label for="phone">Phone</label></td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td><label for="fax">Fax</label></td>
<td><input type="text" name="fax"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" name="email"></td>
</tr>
</table>
</form>
</body>
I have this form:
<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
<table>
<tr><td class=Forms>ICAO: <input type="text" value="" name="ICAO" /><br/><br/></td</tr>
<tr><td class=Forms>Name: <input type="text" value="Airbus A320" name="nombre" /><br/><br/></td></tr>
<tr><td class=Forms>Price: <input maxlength="9" value="1000000" type="text" name="precio" /> €<br/><br/></td></tr>
<tr><td class=Forms>Number Classes: <select name="numberclasses" id="numberclasses" onchange="callAjax()">
<option>Select Number of Classes</option>
<?php
echo'<option value="1">One</option>';
echo'<option value="2">Two</option>';
echo'<option value="3">Three</option>';
?>
</select><br/><br/></td></tr>
<tr><td class=Forms>First Class: <input disabled="disabled" type="text" name="classes1" /><br/><br/></td></tr>
<tr><td class=Forms>Bussines Class: <input disabled="disabled" type="text" name="classes2" /><br/><br/></td></tr>
<tr><td class=Forms>Economy Class: <input disabled="disabled" type="text" name="classses" /><br/><br/></td></tr>
<tr><td class=Forms>Capacidad: <input maxlength="3" value="150" type="text" name="pax" /> pasajeros<br/><br/></td></tr>
</table><br />
<input type="submit" name="enviar" value="Insertar"/>
</form>
And the CSS class Forms is:
td.Forms {
text-align: left;
text-indent: 10px;
font-family: Century Gothic;
font-weight: normal;
font-size: 15px;
white-space: nowrap;
}
The boxes start when the title finish and I want the boxes start all in the same part. I think the idea is see the titles in one colum and the boxes in other, like this http://i48.tinypic.com/2nbd2m8.png, but I have this http://i49.tinypic.com/1exb80.png
You need to add extra cells (<td>) for your input fields so that they all start on the same position. Additionally you may want to define a width to ensure that you have enough space between one cell and another on a row. I defined it to all <td>'s by adding width: 200px; to your td.Forms. Lastly to give spacing between rows I added:
td {
padding: 10px 0;
}
Which adds 10px padding to the top and bottom of every cell.
Checkout this fiddle to see the code in action.
Below is the correct html markup (assuming you're going to use table layout for this). Here is a demo.
<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
<table>
<tr>
<td class=Forms>ICAO:</td>
<td><input type="text" value="" name="ICAO" /></td>
</tr>
<tr>
<td class=Forms>Name:</td>
<td><input type="text" value="Airbus A320" name="nombre" /></td>
</tr>
<tr>
<td class=Forms>Price:</td>
<td><input maxlength="9" value="1000000" type="text" name="precio" /> €</td>
</tr>
<tr>
<td class=Forms>Number Classes:</td>
<td>
<select name="numberclasses" id="numberclasses" onchange="callAjax()">
<option>Select Number of Classes</option>
<?php
echo'<option value="1">One</option>';
echo'<option value="2">Two</option>';
echo'<option value="3">Three</option>';
?>
</select>
</td>
</tr>
<tr>
<td class=Forms>First Class:</td>
<td><input disabled="disabled" type="text" name="classes1" /></td>
</tr>
<tr>
<td class=Forms>Bussines Class:</td>
<td><input disabled="disabled" type="text" name="classes2" /></td>
</tr>
<tr>
<td class=Forms>Economy Class:</td>
<td><input disabled="disabled" type="text" name="classses" /></td>
</tr>
<tr>
<td class=Forms>Capacidad:</td>
<td><input maxlength="3" value="150" type="text" name="pax" /> pasajeros</td>
</tr>
</table>
<input type="submit" name="enviar" value="Insertar"/>
</form>
I am going to give you the answer - but first I want to explain some semantics and how one can properly code a form WITHOUT using tables.
Html form have been around since the inception of html. You will be amazed how many html form elements ARE NOT utilized when they simply exist to help you code properly semantic html. Proper semantic html means:
1) Your code is accessible to text viewers such as Google search engine and browsers used by blind people
2) Fulfills federal law (US laws require school/government websites to be accessible)
3) Will make it easier for you to code the backend (php) in the long run.
A form at its barebones should include:
<form>
<fieldset>
<div>
<label for="first-name">First Name</label>
<input type="textbox" name="first_name" id="first-name" value="" />
</div>
<div>
<label for="gender_selection">Gender</label>
<select name="gender" id="gender_selection">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</fieldset>
</form>
You must have a fieldset tag for each form tag.
label tag is used to define what the form element stands for. THIS IS WHAT tells a text viewer what each form element stands for! Sure you can do without but why when this tag was created for exactly that purpose.
The div tags will allow you to easily style errors/corrections needed.
CSS
form div {
overflow: hidden;
}
form div label {
float: left;
width: 120px;
padding: 0 20px 0 0;
}
form div input, form div select {
float: left;
width: 220px;
}
Simple css (not tested) to mimic your tabular forms with the added advantage of not using tables, being accessible, and using proper html.
Now if a user made an error with in let us say first name we simply add class .error to that div:
<div class="error">
<label for="first-name">First Name</label>
<input type="textbox" name="first_name" id="first-name" value="" />
</div>
CSS:
div.error label {
color: red;
}
div.error input {
border: red;
color: red;
}
ANSWER TO YOUR QUESTION:
Your html form "label" elements do not have a fixed width. Add a fixed width by either adding an extra <td> column or using the code I provided above.
Hopefully this post will help you for the future.
I am using this form setting for my login form :
<tr>
<td class="label"> Username:</td>
<td> <input id="id_username" type="text" name="username" maxlength="30" /></td>
</tr>
<tr>
<td class="label"> Password:</td>
<td> <input a="text" type="password" name="password" id="id_password" /></td>
</tr>
when using firefox both input boxes having the same size. However when I am on IE 9 , the password field is smaller.
What is the best way to get rid of this behavior ?
Use CSS to apply a fixed width value to the elements, for example:
.fixed-input {
width: 150px;
}
....
<input class="fixed-input" id="id_username" type="text" name="username" maxlength="30" />
i was having the same problem. i added the width style and they still looked different.
it turned out that the padding and border color were also not the same for text and password inputs and this was causing the difference.
make sure you set the following style attributes for both password and text inputs:
width: 200px;
font-family: sans-serif;
font-size: 15px;
padding: 3px;
border: 1px solid black;
The best way would be to define style for this elements and set appropriate width. It may be possible, that maxlength attribute increases size of user field.