I'd like to be able to do something like this in HTML. It isn't valid HTML, but the intent is there:
<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
<th> </th>
<th> </th>
</tr>
<tr>
<form action="/updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<td><input name="name" value="John"/></td>
<td><input name="favorite_color" value="Green"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
<tr>
<form action="/updatePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<td><input name="name" value="Sally"/></td>
<td><input name="favorite_color" value="Blue"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
</table>
Obviously, I can't do this because I must not have a form tag immediately inside of of a <tr> element. The only alternatives I can see are to use nasty javascript or to change the behavior of my program.
What might be a solution that would allow me to have a form that spans multiple columns like this?
One option is to combine the columns with colspans like this:
<table>
<tr>
<th>
Name
</th>
<th>
Favorite Color
</th>
<th>
</th>
<th>
</th>
</tr>
<tr>
<td colspan="4">
<form action="/updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input name="name" value="John"/>
<input name="favorite_color" value="Green"/>
<input type="submit" value="Edit Person"/>
</form>
<form action="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
<tr>
<td colspan="4">
<form action="/updatePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input name="name" value="Sally"/>
<input name="favorite_color" value="Blue"/>
<input type="submit" value="Edit Person"/>
</form>
<form action="deletePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
</table>
And style the form element's layout with CSS. Or you can go with a pure DIV based layout.
I'd vote for the nasty Javascript. It would allow to keep the layout as it is.
Use table-less design with Div's and CSS.
Eg.
<html>
<head>
<style type="text/css">
#wrapper
{
width: 600px;
}
#header
{
width: 600px;
height:30px;
}
#person
{
clear:both;
width:600px; }
.name
{
clear:both;
width: 200px;
float: left;
text-align: center;
}
.color
{
width: 200px;
float: left;
text-align: center;
}
.submit
{
width: 200px;
float: left;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="name">
<b>Name</b></div>
<div class="color">
<b>Favorite Color</b></div>
</div>
<div id="Person">
<form action="/updatePerson" method="post">
<div class="name">
<input name="name" value="John" /></div>
<div class="color">
<input name="favorite_color" value="Green" /></div>
<div class="submit">
<input type="submit" value="Edit Person" /></div>
</form>
</div>
</div>
</body>
</html>
Old posting I know, but for anyone else looking this up...
It seems to be that all responses to now are so determined to answer your question, that they're forgetting to consider there might be a much simpler way.
There may be that hidden behind your question, there's a reason you can't do this. But the "correct" HTML-valid way to do what you're trying to do is to place the entire table inside a single form. Why do you need one form to edit, and another to delete?
<form action="/updatePerson" method="post">
<table>
<thead>
<tr><th>Person Name</th><th>Fave Color</th><th> </th><th> </th></tr>
</thead>
<tbody>
<tr>
<td><input type="text" size="30" value="John" name="name_1"></td>
<td><input name="favorite_color_1" value="Green"/></td>
<td><input type="submit" value="Update" name="submit_update_1"></td>
<td><input type="submit" value="Delete" name="submit_delete_1"></td>
</tr><tr>
<td><input type="text" size="30" value="James" name="name_2"></td>
<td><input name="favorite_color_2" value="Orange"/></td>
<td><input type="submit" value="Update" name="submit_update_2"></td>
<td><input type="submit" value="Delete" name="submit_delete_2"></td>
</tr>
</tbody>
</table>
</form>
You need a bit of logic in your ASP/PHP/server-code to calculate which button-name was pushed, but you need that anyway using your proposed solution.
One solution would be if your multiple columns were actually created in DIVs instead of tables.
You could
a) combine entire table row in one form and handle it with one server-side script.
or
b) set form.action with javascript.
Nope, there isn't such form.
But, in many browsers, your usage is working like you expected, except for when you dynamicly creat DOM elements with such structure in FireFox.
Maybe you can throw away the <form> tag, use javascript to do the submit;
Or you can use <div> to do the table layout thing.
If you are using jQuery, you can do this:
<script type="text/javascript">
$(function() {
$('.rowForm').submit(function() {
//console.log($(':input',$(this).closest('tr')));
//Because u cant span a form across a table row, we need to take all the inputs, move it to hidden div and submit
var rowFormContent = $('.rowFormContent',$(this));
rowFormContent.html(''); //Clear out anything that may be in here
$(':input',$(this).closest('tr')).clone().appendTo(rowFormContent);
return true;
});
});
</script>
<tr>
...
<td>
<form action="/cool" method="post" class="rowForm" id="form_row_1">
<div class="rowFormContent" style="display: none;"></div>
<input type="submit" value="save">
</form>
</td>
</tr>
The side effect is you'll get an extra submit input type in your form, but it will be hidden and should not hurt anything. A subtle note here, is the use of ':input'. This is jQuery shorthand for all input types (select,textarea etc). Watch out for select vals not being copied. You'll have to do some trickery (hidden field) to submit the current selected val of a clone()d select.
I've tried numerous ways to solve the same issue; multiple forms within a single html table. FF & Chrome will automagically close if is placed before or within a or because its not semantically correct html. I appreciate based layout would solve the problem but if you 'need' to stick with the table based layout you'll need to use multiple tables and wrap the & immediately before and after the & tags. In my case I then made some small inline CSS adjustments to remove a border or two and then the table butts up against each other as if they were rows.
Example at: http://jsfiddle.net/chopstik/ve9FP/
I encountered the same issue, solved it using Javascript/jQuery.
The problem here is that form can't stretch across multiple columns in a table, however if the form has id <form id="unique_per_page"...></form> each of the stand-alone form elements like input, select or even textarea can be assigned to that form using form attribute <input type="text" name="userName" form="specific_form_id">
The jquery/javascript to assign these things will need to have a random string generator, which I grabbed from the following Stackoverflow answer
So overall the code will look like this:
$("table tr").each(function(i, el){
if(!$(el).find("form[name='updatePerson']").attr("id"))
{ //if the form does not have id attribute yet, assign a 10-character random string
var fname = (Math.random().toString(36)+'00000000000000000').slice(2, 10+2);
$(el).find("form[name='updatePerson']").attr("id",fname); //assign id to a chosen form
$(el).find("input").attr("form",fname); //assign form attribute to all inputs on this line
$(el).find("form[name='deletePerson'] > input").removeAttr("form"); //remove form attribute from inputs that are children of the other form
}
});
The HTML code you included will need to be updated with the proper name attributes for the forms
<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
<th> </th>
<th> </th>
</tr>
<tr>
<form action="/updatePerson" name="updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<td><input name="name" value="John"/></td>
<td><input name="favorite_color" value="Green"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" name="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
<tr>
<form action="/updatePerson" name="updatePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<td><input name="name" value="Sally"/></td>
<td><input name="favorite_color" value="Blue"/></td>
<td><input type="submit" value="Edit Person"/></td>
</form>
<td>
<form action="deletePerson" name="deletePerson" method="post">
<input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
</table>
The way I've always done it is:
<tr>
<td><form><input name=1></td>
<td><input name=2></td>
<td><input type=submit></form></td>
</tr>
Include the form inside the first and last td, so it's in an actual text area. It's possible that really old browsers will close the form at the /td, but none today.
With your example:
<tr>
<td>
<form action="/updatePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
</td>
<td> <input name="name" value="John"/></td>
<td> <input name="favorite_color" value="Green"/></td>
<td>
<input type="submit" value="Edit Person"/>
</form>
</td>
<td>
<form action="deletePerson" method="post">
<input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
<input type="submit" value="Delete Person"/>
</form>
</td>
</tr>
Related
I'm working on a webpage that lists several rental reservations from a database. I think I may have built myself into a corner. I originally had each row end with 3 cells, each one containing a tiny form made of 2 or 3 hidden fields and a button to "edit", "return", or "cancel" the reservation.
Those worked fine, and were all valid because each entire form was within a single cell.
Now I need to add functionality to allow selecting multiple rows, and passing them to another page. So without thinking, I added a <form> that wrapped around the whole table, added a checkbox to each row, and a submit button at the bottom of the table.
After some research, I'm pretty sure nested forms are not allowed in XHTML. But the document still somehow validates with the W3C validator. I'm using XHTML 1.0 Transitional. Maybe because its not a <form> directly within another <form>, its a <form> within a <table> within a <form>? Is that allowed?
The form works as it is (it submits a few extra fields from the top row, but I can just ignore those if I have to).
I'm just afraid to implement this because I feel like there's no way this is correct. If anyone could clarify whether or not this is valid I would really appreciate it. And if it's not, do you have any suggestions to fix it?
Thanks in advance!
<form id="form2" name="form2" method="post" action="pickup.php">
<table width="1200" border="1" align="center" cellpadding="5" cellspacing="0" style="border-collapse:collapse; border-color:#CCC;">
<tr>
<td colspan="10" bgcolor="#CCCCCC"><h2>Equipment Being Picked Up Today</h2></td>
</tr>
<tr class="highlight">
<td><input type="checkbox" name="res1" id="res1" value="2278" /></td>
<td>George Washington</td>
<td>555-333-4444</td>
<td>Lghting kit 6209</td>
<td>2/12/15</td>
<td>2/13/15</td>
<td></td>
<td align="center">
<form name="editForm" method="post" action="edit.php">
<input name="editFrom" type="hidden" value="today2.php" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input name="reservationID" type="hidden" value="2278" />
<input type="submit" name="edit" value="edit" />
</form>
</td>
<td align="center">
<form name="returnForm" method="post" action="today2.php">
<input name="reservationID" type="hidden" value="2278" />
<input name="return" type="hidden" value="yes" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input type="submit" value="return" />
</form>
</td>
<td align="center">
<form name="cancelForm" method="post" action="cancel.php">
<input name="editFrom" type="hidden" value="today2.php" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input name="reservationID" type="hidden" value="2278" />
<input type="submit" name="cancel" value="cancel" />
</form>
</td>
</tr>
<tr class="highlight">
<td><input type="checkbox" name="res2" id="res2" value="2279" /></td>
<td>Sam Adams</td>
<td>333-222-7777</td>
<td>camera kit 3456</td>
<td>2/12/15</td>
<td>2/13/15</td>
<td></td>
<td align="center">
<form name="editForm" method="post" action="edit.php">
<input name="editFrom" type="hidden" value="today2.php" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input name="reservationID" type="hidden" value="2279" />
<input type="submit" name="edit" value="edit" />
</form>
</td>
<td align="center">
<form name="returnForm" method="post" action="today2.php">
<input name="reservationID" type="hidden" value="2279" />
<input name="return" type="hidden" value="yes" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input type="submit" value="return" />
</form>
</td>
<td align="center">
<form name="cancelForm" method="post" action="cancel.php">
<input name="editFrom" type="hidden" value="today2.php" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input name="reservationID" type="hidden" value="2279" />
<input type="submit" name="cancel" value="cancel" />
</form>
</td>
</tr>
<tr class="highlight">
<td><input type="checkbox" name="res3" id="res3" value="2280" /></td>
<td>Bob Dole</td>
<td>111-222-4444</td>
<td>Other item 6789</td>
<td>2/12/15</td>
<td>2/13/15</td>
<td></td>
<td align="center">
<form name="editForm" method="post" action="edit.php">
<input name="editFrom" type="hidden" value="today2.php" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input name="reservationID" type="hidden" value="2280" />
<input type="submit" name="edit" value="edit" />
</form>
</td>
<td align="center">
<form name="returnForm" method="post" action="today2.php">
<input name="reservationID" type="hidden" value="2280" />
<input name="return" type="hidden" value="yes" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input type="submit" value="return" />
</form>
</td>
<td align="center">
<form name="cancelForm" method="post" action="cancel.php">
<input name="editFrom" type="hidden" value="today2.php" />
<input name="theDate" type="hidden" value="2015-02-12" />
<input name="reservationID" type="hidden" value="2280" />
<input type="submit" name="cancel" value="cancel" />
</form>
</td>
</tr>
<tr>
<td colspan="10">
<input type="submit" name="submit" id="submit" value="Pickup Selected Equipment" />
</td>
</tr>
</table>
</form>
It validates because the formal validation of XHTML 1.0 is based on XML rules, and XML is a strongly simplified modification of SGML, which is what HTML 4.01 is nominally based on. Consequently, some features, such as nested forms, which are prohibited in all versions of HTML are not forbidden by the formal syntax of XHTML 1.0 described in a DTD based on XML. The specification says this as follows:
SGML gives the writer of a DTD the ability to exclude specific
elements from being contained within an element. Such prohibitions
(called "exclusions") are not possible in XML.
For example, the HTML 4 Strict DTD forbids the nesting of an 'a'
element within another 'a' element to any descendant depth. It is not
possible to spell out such prohibitions in XML. Even though these
prohibitions cannot be defined in the DTD, certain elements should not
be nested. A summary of such elements and the elements that should not
be nested in them is found in the normative Element Prohibitions.
And the Element Prohibitions says that a form element must not contain another form element.
It is not safe to nest forms. There is no specification of what should happen if you do that. For example, it is not specified whether the fields on an inner form should be included when an outer form is submitted.
Thus, you should consider restructuring the page so that form nesting is avoided. If you need help with this, consider posting a new question that specifies the desired functionality and shows your best attempt at restructuring.
I've two forms in different divs. One is search form and another is login form.
Here is my problem: When I click search bar, type something and hit enter, form submits.
But when I enter my login information and press enter, nothing happens.
Here is the HTML code:
<div id="xxxx">
<form action="xxxxx.php" method="get" name="xxxxx">
<table>
<tr>
<td><input type="text" size="xxx" maxlength="xxxx" name="xxxx" id="xxxx"></td>
<td><input type="button" value="Ara"></td>
</tr>
</table>
</form>
</div>
<div id="xxxxxxx"><form name="xx" action="xxxxxx.php" method="post">
<table>
<tr>
<td>Kullanıcı Adı:</td>
<td><input type="text" name="xxxx" id="xxx" maxlength="xx" size="xx"></td>
<td>Şifre:</td>
<td><input type="password" name="xxxx" id="xxx" maxlength="xx" size="xx"></td>
<td><input type="button" name="xxxx" id="xxx" value="Oturum Aç"></td>
</tr>
</table>
</form></div>
Don't mind the xxx's
EDIT:
I'm calling a simple JS function to submit so I can't use input type submit.
Here is JS
function tik()
{
//after a few controls
document.forms["formName"].submit();
}
Of course formname changes for different forms
You have to simply change your <input type="button" ../> to <input type="submit" .../> and everything should works
I think it should work with <input type="submit"/>, initialize onsubmit attribute to call tik()
<div id="xxxx">
<form action="xxxxx.php" method="get" name="xxxxx" onsubmit="tik()">
<table>
<tr>
<td>
<input type="text" size="xxx" maxlength="xxxx" name="xxxx" id="xxxx">
</td>
<td>
<input type="submit" value="Ara">
</td>
</tr>
</table>
</form>
</div>
<div id="xxxxxxx">
<form name="xx" action="xxxxxx.php" method="post" onsubmit="tik()">
<table>
<tr>
<td>Kullanıcı Adı:</td>
<td><input type="text" name="xxxx" id="xxx" maxlength="xx" size="xx"></td>
<td>Şifre:</td>
<td><input type="password" name="xxxx" id="xxx" maxlength="xx" size="xx"></td>
<td><input type="submit" name="xxxx" id="xxx" value="Oturum Aç"></td>
</tr>
</table>
</form>
</div>
edit
Make sure to utilize <input type="submit">
Also:
Make sure the ID of your two buttons are different. Looks like in the first button you don't have an ID set.
make sure the "xxx.php" actions on the forms are not mixed up.
and lastly, make sure your form names are different (looks like they are given the amount of x's in each name value).
I am about to create a simple HTML table. I'd like some of the cells to dont change their width, not even if the available space for the table increases (eg: higher resolution).
I have created a JSF with my code. My problem is that if I move the vertical separator all the way to the left the column with the delete button starts to get wider instead of keeping its size.
Please help me out how can I do it.
Thanks!
<!DOCTYPE HTML>
<html lang="en-US">
<title>User Management</title>
<body>
<table cellspacing="0" border="1" style="width:80%;">
<tr>
<td>
<form action="/link1" method="post">
<div style="max-width:60px;display:block;">
<input type="hidden" name="id" value="1" />
<input type="button" name="Confirm" value="Delete" onclick="UserConfirm(this)" />
</div>
</form>
</td>
<form action="/link2/" method="post">
<td style="margin:10px;max-width:60px;">
<input type="text" name="id" value="1" style="display:none" />1</td>
<td style="margin:10px;">
<input type="text" name="username" value="1" style="display:none" />johnd</td>
<td style="margin:10px;">
<input type="text" name="firstname" value="John" style="width: 80px;" maxlength="10" required />
</td>
</form>
</tr>
</table>
</body>
</html>
Just assign some small width for the TD of your button like below.
<td width="10">
<form action="/link1" method="post">
<div style="max-width:60px;display:block;">
<input type="hidden" name="id" value="1" />
<input type="button" name="Confirm" value="Delete" onclick="UserConfirm(this)" />
</div>
</form>
</td>
Fiddle Demo
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 trying to recreate the login form shown on tinypic's main page.
in html, i have the 3 elemnts like this:
E-Mail:
<input type="text" name="id" maxlength="30" value="" />
Password:
<input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
i have tried putting them into separate divs,
using float:left with a unique class in css
but the code is really messy unreasonably long.
so essentially, i wanted to know if there was a simple way to achieve this layout with html and css.
thanks for the time!
This CSS should work, though I haven't tested:
input { display: inline; }
Here is my solution: ( http://jsfiddle.net/HcppN/ )
HTML:
<label>E-Mail:</label>
<input type="text" name="id" maxlength="30" value="" />
<label>Password:</label>
<input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
CSS:
input, label {
float:left;
margin:5px;
}
I also recommend you to encapsulate the labels in <label> tags. You can even use the for="inputId" attribute, so that clicking on the label brings the input into focus.
Just add display:inline to your input elements, as shown here
Though there are already accepted and up voted answers, I just want to contribute a way to make a form horizontal without any kind of CSS. Using HTML table is an effective way to make a horizontal form.
Example 1:
<table>
<tr>
<td>First Name</td>
<td><input type="text" name="fname" > </td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lname" > </td>
</tr>
</table>
</form>
Example 2:
<form method="">
<table>
<tr>
<td><input type="text" name="fname" ></td>
<td><input type="text" name="lname" ></td>
........................
</tr>
</table>
</form>
My experience says, sometimes in different cases the CSS/class may not work or sometimes they may conflict ; but using an HTML table to make an HTML form is something like forcing to be what we want to be appear. Thank you.