I tried putting float: right for textboxes (input text) and it aligned the boxes properly but I texts gets misaligned and the add book button as well. How can i fix it? Thanks.
<div id="add_div">
<form method="POST" action="add.php">
<!--start of form -->
<label>Enter Author Name</label>
<input type="text" name="author">
<br />
<label>Enter Book Title</label>
<input type="text" name="title">
<br />
<label>Enter Year Levels</label>
<input type="text" name="yrLevel">
<br />
<label>Enter ISBN</label>
<input type="text" name="isbn">
<br />
<label></label>
<input type="submit" name="add" value="Add Book">
<br />
</form>
<!-- end of form -->
</div>
My CSS below
#add_div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input {
display:inline-block;
margin: 1px;
}
A simple solution would be to change the display to inline-block instead of floating:
label, input {
display:inline-block;
width:150px;
}
<div id="add_div">
<form method="POST" action="add.php">
<!--start of form -->
<label>Enter Author Name</label>
<input type="text" name="author">
<br />
<label>Enter Book Title</label>
<input type="text" name="title">
<br />
<label>Enter Year Levels</label>
<input type="text" name="yrLevel">
<br />
<label>Enter ISBN</label>
<input type="text" name="isbn">
<br />
<label></label>
<input type="submit" name="add" value="Add Book">
<br />
</form>
<!-- end of form -->
</div>
You can add everything to a table and set border="0" so you can't see it. This will keep everything together since all of the content belongs to the table element.
See Fiddle here: https://jsfiddle.net/2Lzo9vfc/100/
label, input {
display:inline-block;
width:150px;
}
<div id="add_div">
<form method="POST" action="add.php"> <!--start of form -->
<table padding="1" border="0">
<tr>
<td>
<label> Enter Author Name</label>
</td>
<td>
<input type="text" name="author">
</td>
</tr>
<tr>
<td>
<label> Enter Book Title </label>
</td>
<td>
<input type="text" name="title">
</td>
</tr>
<tr>
<td>
<label> Enter Year Levels </label>
</td>
<td>
<input type="text" name="yrLevel">
</td>
</tr>
<tr>
<td>
<label> Enter ISBN </label>
</td>
<td>
<input type="text" name="isbn">
</td>
</tr>
<tr>
<td>
 
</td>
<td align="right">
<input type = "submit" name="add" value="Add Book">
</td>
</tr>
</table> <br/>
</form> <!-- end of form -->
</div>
This may help-
input {
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
vertical-align:middle;
}
label {
display:inline-block;
*display: inline; /* for IE7*/
zoom:1; /* for IE7*/
float: left;
text-align: left;
}
Related
I want to align the input fields shown below, with keep using <label> in a correct way.
The code is as below:
<form action="add.php" method="POST" enctype="multipart/form-data">
<label for="refNo">Field1 name (long)</label>
<input id="refNo" type="text" name="refNo" value="" /><br>
<label for="name">Field2 name</label>
<input id="name" type="text" name="name" value="" /><br>
<input type="submit" value=":: Add ::" name="addBtn" />
</form>
I am thinking to separate <label> tags in a <div> and the input fields in another and then with some floating manipulation I make the intended alignment, is this a correct way?
How about this
form > label {
min-width: 185px;
display: inline-block;
}
<form action="add.php" method="POST" enctype="multipart/form-data">
<label for="refNo">Field1 name (long)</label>
<input id="refNo" type="text" name="refNo" value="" /><br>
<label for="name">Field2 name</label>
<input id="name" type="text" name="name" value="" /><br>
<input type="submit" value=":: Add ::" name="addBtn" />
</form>
<style>
form{
width: 300px;
float: left;
}
form > label{
width: 50%;
float: left;
margin-bottom: 10px;
}
form > input{
float: right;
width: 50%;
margin-bottom: 10px;
}
</style>
<form action="add.php" method="POST" enctype="multipart/form-data">
<label for="refNo">Field1 name (long)</label>
<input id="refNo" type="text" name="refNo" value="" /><br>
<label for="name">Field2 name</label>
<input id="name" type="text" name="name" value="" /><br>
<input type="submit" value=":: Add ::" name="addBtn" />
</form>
For simple UI use this (Using Table):
<form action="add.php" method="POST" enctype="multipart/form-data">
<table>
<tr>
<td>
<label for="refNo">Field1 name (long)</label>
</td>
<td>
<input id="refNo" type="text" name="refNo" value="" />
</td>
</tr>
<tr>
<td>
<label for="name">Field2 name</label>
</td>
<td>
<input id="name" type="text" name="name" value="" /><br>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value=":: Add ::" name="addBtn" />
</td>
</tr>
</table>
</form>
For More good looking and advanced UI try using Bootstrap.
In html I have this form:
<form action="index.php" method="GET">
Name <input type="text" name="FirstName" size="10" /><br />
<br />
Surname: <input type="text" name="LastName" size="10" /><br />
<br />
</form>
It is a for with the first and last name. Is it possible to make the one box to be exactly down to the other. Because the first box is closer to name because it has less letters than the surname and respectively it takes the space?
Without using CSS simplest way to do this, is using Table of HTML.
Consider this Snippet:
<form action="index.php" method="GET">
<table>
<tr>
<td>Name </td>
<td>
<input type="text" name="FirstName" size="10" />
<br />
</td>
</tr>
<tr>
<td>Surname:</td>
<td>
<input type="text" name="LastName" size="10" />
</td>
</tr>
</table>
</form>
here's one way you could do it.
input{position:absolute;left:80px;}
<form action="index.php" method="GET">
<label>Name</label> <input type="text" name="FirstName" size="10" />
<br><br>
<label>Surname:</label> <input type="text" name="LastName" size="10" />
</form>
HTML:
<form action="index.php" method="GET">
<label>Name:</label><input type="text" name="FirstName" size="10" /><br />
<br />
<label>Surname:</label> <input type="text" name="LastName" size="10" /><br />
<br />
</form>
CSS:
label{
display: inline-block;
float: left;
clear: left;
width: 150px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
Fiddle:http://jsfiddle.net/4ncwzLpx/
First, you should improve your HTML. <br /> are ugly and you should associate the text with the inputs using labels:
<form action="index.php" method="GET">
<label>
Name: <input type="text" name="FirstName" size="10" />
</label>
<label>
Surname: <input type="text" name="LastName" size="10" />
</label>
</form>
Now, you can try displaying the form as a table:
form {
display: table;
}
label{
display: table-row;
}
form {
display: table;
}
label{
display: table-row;
}
<form action="index.php" method="GET">
<label>
Name: <input type="text" name="FirstName" size="10" />
</label>
<label>
Surname: <input type="text" name="LastName" size="10" />
</label>
</form>
And now, to align the inputs,
You can align the content to the right:
label {
text-align: right;
}
form {
display: table;
}
label{
display: table-row;
text-align: right;
}
<form action="index.php" method="GET">
<label>
Name: <input type="text" name="FirstName" size="10" />
</label>
<label>
Surname: <input type="text" name="LastName" size="10" />
</label>
</form>
Or, if you want the text aligned to the left, you can float the inputs to the right:
input {
float: right;
}
form {
display: table;
}
label{
display: table-row;
}
input {
float: right;
}
<form action="index.php" method="GET">
<label>
Name: <input type="text" name="FirstName" size="10" />
</label>
<label>
Surname: <input type="text" name="LastName" size="10" />
</label>
</form>
I was trying to make a form with a username, password and an email. But for some reason the input text or the box for email isn't aligned with the boxes for the username and the password. I was wondering if there's a way to make them all align each other.
<form>
<label for="username">Username</label>
<input type="text" id="username" name="username" maxlength="30"><br><br>
<label for="password">Password</label>
<input type="password" id="password" name="password"><br><br>
<label for="email">Email</label>
<input type="email" id="email" name="email" maxlength="30">
<br>
<input type="submit" value="Register">
</form>
It's just for the sake of making everything look nice and pretty.
Oh man... Tables?? HTML from '90s incoming!
<style>
label {
width: 80px;
display: inline-block;
}
</style>
<form>
<label for="username">Username</label>
<input type="text" id="username" name="username" maxlength="30"><br><br>
<label for="password">Password</label>
<input type="password" id="password" name="password"><br><br>
<label for="email">Email</label>
<input type="email" id="email" name="email" maxlength="30">
<br>
<input type="submit" value="Register">
</form>
I went for a different approach than a table, since if your are going to table up your form, I suggest you use a solid css framework, which is simply better.
This is the approach of CSS only A Cool Fiddle
form {
width: 80%;
margin: 0 auto;
}
label, input {
/* in order to define widths */
display: inline-block;
}
label {
width: 30%;
/* positions the label text beside the input */
text-align: right;
}
label + input {
width: 30%;
/* large margin-right to force the next element to the new-line
and margin-left to create a gutter between the label and input */
margin: 0 30% 0 4%;
}
/* only the submit button is matched by this selector,
but to be sure you could use an id or class for that button */
input + input {
float: right;
}
input[type="submit"]{
margin: 4% 40%;
}
With all that said, I also suggest you change the old way of forms being written with label values to placeholder.
for more reference Placeholders are cool!
<form>
<table>
<tr> <td> <label for="username">Username</label> </td> <td> <input type="text" id="username" name="username" maxlength="30"> </td> </tr>
<tr> <td> <label for="password">Password</label> </td> <td> <input type="password" id="password" name="password"></td> </tr>
<tr> <td> <label for="email">Email</label> </td> <td><input type="email" id="email" name="email" maxlength="30"></td> </tr>
<tr> <td></td> <td> <input type="submit" value="Register"> </td> </tr>
</table>
</form>
should work, just surroundet it with a table.
<table>
<form>
<tr>
<td> <label for="username">Username</label></td>
<td> <input type="text" id="username" name="username" maxlength="30"> </td>
</tr>
<tr>
<td><label for="password">Password</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" id="email" name="email" maxlength="30"></td>
</tr>
<tr>
<td><input type="submit" value="Register"></td>
</tr>
</form>
</table>
It is always a good practice to make any form in either a Table or in a Div.
Below is my code, first of all:
How do I get rid of the big margin to the right that occurs between the labels and the input fields? I tried setting the margin-right to -150px which made it smaller but that just seems like an idiotic solution..
How can I remove the need to write <br /> to make them hop down a line automatically? I was told never to use <br />, it also seems messy.
HTML:
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<label>In-game username:</label>
<input name="username" type="text"></input><br />
<label>Email:</label>
<input name="email" type="text"></input><br />
<label>Game:</label>
<input name="game" type="text"></input><br />
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
CSS:
label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
text-align: right;
}
You can try something like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<p>
<label>In-game username:</label>
<input name="username" type="text"></input>
</p>
<p>
<label>Email:</label>
<input name="email" type="text"></input>
</p>
<p>
<label>Game:</label>
<input name="game" type="text"></input>
</p>
<p></p>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
and then the css
p label {
display: block;
float: left;
width: 120px;
margin-right: 5px;
}
p input{
float:right;
}
p{
clear:both;
}
form{
width:20em;
}
http://jsfiddle.net/V92PT/1/
But the fields part on table
like this
<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
<form action="" method="POST">
<table><tr><td><label>In-game username:</label></td>
<td> <input name="username" type="text"></input></td ></tr>
<tr><td> <label>Email:</label></td>
<td> <input name="email" type="text"></input></td></tr>
<tr><td> <label>Game:</label></td>
<td>
<input name="game" type="text"></input>
</td></tr>
</table>
<input name="mySubmit" type="submit" value="Submit"></input>
</form>
</div>
or add another <br/> after <label>In-game username:</label>
or use <p></P> for each row
I am creating 1 of 3 nested tables within the <form> tag in my HTML document. I inserted input fields to create the text boxes to the right of the text. That all works my only problem is that the following cells: "First Name, Last Name, Address, City, State, Zip Code, and County" are not directly under one another in such a way as to keep the cells aligned and the text boxes aligned. How do I align each section? I hope I am explaining this well if not please ask for further clarification. Any help on this minor problem would be greatly appreciated.
Here's my code so far so you can see what I did:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<img src="j0182695_downsized.jpg" alt="Oatmeal Raisin cookies" style="float: left" >
</head>
<body background="back-225.gif">
<h1 style="text-align: center; color: red; font-family: Arial, Helvetica, sans-serif;">Cookies</h1>
<table width="500" border="0">
<tr>
<td align="center">About Us</td>
<td align="center">Contact Us</td>
<td align="center">Place an Order</td>
<td align="center">Sample Recipe</td>
</tr>
</table>
<form name="Web Order Form" id="Web Order Form">
<table border="0" cellpadding="2" width="65%">
<tr>
<td>Personal Information</td>
</tr>
<tr>
<td>First Name:
<input name="fname" id="fname" size="30" type="text" />
</td>
</tr>
<tr>
<td>Last Name:
<input name="lname" id="lname" size="30" type="text" />
</td>
</tr>
<tr>
<td>Address:
<input name="address" id="address" size="30" type="text" />
</td>
</tr>
<tr>
<td>City:
<input name="city" id="city" size="35" type="text" />
</td>
</tr>
<tr>
<td>State:
<input name="state" id="state" size="3" type="text" />
</td>
</tr>
<tr>
<td>Zip Code:
<input name="zip" id="zip" size="10" type="text" />
</td>
</tr>
<tr>
<td>Country:
<input name="country" id="country" size="10" type="text" />
</td>
</tr>
</table>
</form>
Just put the input boxes in another cell like this:
<tr>
<td>First Name:</td>
<td><input name="fname" id="fname" size="30" type="text" /></td>
</tr>
If you make all your rows like that, then the labels and input boxes will line up.
I posted an answer to your question over at Doctype: http://doctype.com/create-nested-table-html.
You should really look into using DIV's & CSS instead of Tables and Inline Styling for designing websites.
The following is an example of separating content from presentation. You have two main components on the page: A navigation menu (which is a list of links) and a contact form (which consists of a list of form elements). The HTML stands on its own and would display reasonably even without any styling.
First, styles are reset using Yahoo!'s reset stylesheet to ensure that the starting point is the same regardless of browser-specific defaults. Then, specific styles are applied until the resulting display reasonably matches the requirements.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link id="screen-reset" rel="stylesheet" type="text/css" media="screen"
href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">
<style type="text/css">
html { background:#eef; font-size:18px;}
body { background:#eee; margin:0 auto; width:95%;}
#main { clear:both; }
#hmenu { background:#fed; height:2em }
#hmenu li {
background:#fed;
display:block;
float:left;
padding:0 4px;
border-left:solid 4px #dcb;
}
#hmenu a {
display:block;
font-family:sans-serif;
font-size:1.5em;
font-weight:bold;
line-height:1.3333;
text-decoration:none;
}
form { padding:1em 0; }
fieldset {
background:#fff;
border:solid 1px #222;
padding:0.5em 0;
margin:0 auto;
width:90%;
}
legend {
background:#eee;
padding:0.1667em;
}
form li {
clear:both;
display:block;
padding:1em 0;
}
form li label {
display:block;
float:left;
font-family:sans-serif;
font-weight:bold;
padding:0 0.25em 0 0;
text-align:right;
width:35%;
}
form li input[type="text"] {
display:block;
float:left;
}
form input[type="submit"] {
margin:0 0 0 35%;
}
</style>
<title>Contact Form</title>
</head>
<body>
<div id="hmenu">
<ul>
<li>About Us</li>
<li>Contact Us</li>
<li>Place an Order</li>
<li>Sample Recipe</li>
</ul>
</div>
<div id="main">
<form name="web-order-form" id="web-order-form">
<fieldset>
<legend>Personal Information</legend>
<ul>
<li><label for="fname">First Name: </label>
<input name="fname" id="fname" size="30" type="text"></li>
<li><label for="lname">Last Name: </label>
<input name="lname" id="lname" size="30" type="text"></li>
<li><label for="address">Address: </label>
<input name="address" id="address" size="30"
type="text"></li>
<li><label for="city">City: </label>
<input name="city" id="city" size="35" type="text"></li>
<li><label for="state">State: </label>
<input name="state" id="state" size="3" type="text"></li>
<li><label for="zip">Zip Code: </label>
<input name="zip" id="zip" size="10" type="text"></li>
<li><label for="country">Country: </label>
<input name="country" id="country" size="10"
type="text"></li>
<li><input type="submit" name="submit-order" id="submit-order"
value="Place Order"></li>
</ul>
</fieldset>
</form>
</div>
</body>
</html>
Simply put the inputs into tds of their own:
<tr>
<td>First Name:</td>
<td><input name="fname" id="fname" size="30" type="text" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input name="lname" id="lname" size="30" type="text" /></td>
</tr>
<tr>
<td>Address:</td>
<td><input name="address" id="address" size="30" type="text" /></td>
</tr>
And so on.
One easy option might be using flex style in table cell
<td style="display:flex">
<label>Flex</label>
<input type="text">
<input type="text">
</td>
It will show all elements in one row as long as there is enough space.