I am trying to display image using css. But it is not display anyway. please help me. My code is :
//styles.css
table tr td span.glyphicon-eye-open{
background: url("../images/private-eye.png") no-repeat;
}
//Register.php
<form method="post" id="form1">
<table align="center" width="45%" cellpadding="7px">
<tr>
<td><label>*</label><input type="text" name="email" placeholder=" Your Email" value="<?=$email?>"/></td>
</tr>
<tr>
<td><label>*</label> <input type="password" name="pass" id="passwordfield" placeholder=" Your Password" value="<?=$password?>"/>
<span class="glyphicon-eye-open"></span>
</td>
<tr>
<td><button type="submit" name="btn_Register">Register</button></td>
</tr>
</table>
</form>
I also has included
'link rel="stylesheet" href="../css/styles.css" type="text/css" /'
in head with tags
That is because your span has no height at all. Every span has no height until you insert some text in it or edit its height via CSS. For example, I've put some text in here, like so:
span.glyphicon-eye-open {
background: url("http://beerhold.it/320/200") no-repeat;
color: #fff;
}
//Register.php
<form method="post" id="form1">
<table align="center" width="45%" cellpadding="7px">
<tr>
<td><label>*</label><input type="text" name="email" placeholder=" Your Email" value="<?=$email?>"/></td>
</tr>
<tr>
<td><label>*</label> <input type="password" name="pass" id="passwordfield" placeholder=" Your Password" value="<?=$password?>"/>
<span class="glyphicon-eye-open">###</span>
</td>
<tr>
<td><button type="submit" name="btn_Register">Register</button></td>
</tr>
</table>
</form>
Change this line
<span class="glyphicon-eye-open"></span>
to:
<span class="glyphicon-eye-open"> </span>
DEMO
span.glyphicon-eye-open {
background: url("http://previews.123rf.com/images/arnau2098/arnau20981503/arnau2098150300166/37873708-small-squares-background-color-Stock-Photo.jpg") no-repeat;
}
//Register.php
<form method="post" id="form1">
<table align="center" width="45%" cellpadding="7px">
<tr>
<td><label>*</label><input type="text" name="email" placeholder=" Your Email" value="<?=$email?>"/></td>
</tr>
<tr>
<td><label>*</label> <input type="password" name="pass" id="passwordfield" placeholder=" Your Password" value="<?=$password?>"/>
<span class="glyphicon-eye-open"> </span>
</td>
<tr>
<td><button type="submit" name="btn_Register">Register</button></td>
</tr>
</table>
</form>
It now works fine using following css code :
table tr td span.glyphicon-eye-open{
background: url("../images/private-eye.png");
background-repeat:no-repeat;
/*width:50px;
height:50px;*/
padding-left:15px;
padding-right:15px;
padding-bottom:2px;
}
try this one
.glyphicon-eye-open{
background: url("../images/private-eye.png");
background-repeat:no-repeat;
}
Make sure your css is included
Related
I understand that this is a very basic question, but I've searched stackoverflow and I cannot find a question that helps me solve my own issue. I am trying to center align the contents (an input with type="submit") of a table cell (td element). I can center the contents in the cell, but the cell itself is not stretching the width of the table. I cannot find any css attribute that helps me to spread this td element the width of the table. How can I do this?
td {border: 1px solid black;}
th {border: 1px solid black;}
<div class="content-container">
<main id="registration">
<div class="form">
<h1>Register For an Account</h1>
<form action="#" method="post">
<table>
<tbody><tr><th><label for="id_username">Username:</label></th><td><input type="text" name="username" required="" id="id_username"></td></tr>
<tr><th><label for="id_first_name">First name:</label></th><td><input type="text" name="first_name" required="" id="id_first_name"></td></tr>
<tr><th><label for="id_last_name">Last name:</label></th><td><input type="text" name="last_name" required="" id="id_last_name"></td></tr>
<tr><th><label for="id_email">Email:</label></th><td><input type="email" name="email" required="" id="id_email"></td></tr>
<tr><th><label for="id_birthdate">Birthdate:</label></th><td><input type="text" name="birthdate" required="" id="id_birthdate"></td></tr>
<tr><th><label for="id_password">Password:</label></th><td><input type="password" name="password" required="" id="id_password"></td></tr>
<tr><th><label for="id_confirm_password">Confirm password:</label></th><td><input type="password" name="confirm_password" required="" id="id_confirm_password"></td></tr>
<tr>
<!-- This is the issue -->
<td align="center" style="border: 1px solid black; width: 100%; text-align: center; margin: auto; display: block; horizontal-align: middle;" colspan=2><input type="submit" value="Register"></td>
</tr>
</tbody></table>
</form>
</div>
</main>
</div>
Add colspan="2" also remove other style
<tr>
<!-- This is the issue -->
<td align="center" colspan="2" style="border: 1px solid black; horizontal-align: middle;" colspan=2><input type="submit" value="Register"></td>
</tr>
td {border: 1px solid black;}
th {border: 1px solid black;}
<div class="content-container">
<main id="registration">
<div class="form">
<h1>Register For an Account</h1>
<form action="#" method="post">
<table>
<tbody><tr><th><label for="id_username">Username:</label></th><td><input type="text" name="username" required="" id="id_username"></td></tr>
<tr><th><label for="id_first_name">First name:</label></th><td><input type="text" name="first_name" required="" id="id_first_name"></td></tr>
<tr><th><label for="id_last_name">Last name:</label></th><td><input type="text" name="last_name" required="" id="id_last_name"></td></tr>
<tr><th><label for="id_email">Email:</label></th><td><input type="email" name="email" required="" id="id_email"></td></tr>
<tr><th><label for="id_birthdate">Birthdate:</label></th><td><input type="text" name="birthdate" required="" id="id_birthdate"></td></tr>
<tr><th><label for="id_password">Password:</label></th><td><input type="password" name="password" required="" id="id_password"></td></tr>
<tr><th><label for="id_confirm_password">Confirm password:</label></th><td><input type="password" name="confirm_password" required="" id="id_confirm_password"></td></tr>
<tr>
<!-- This is the issue -->
<td align="center" colspan="2" style="border: 1px solid black; horizontal-align: middle;" colspan=2><input type="submit" value="Register"></td>
</tr>
</tbody></table>
</form>
</div>
</main>
</div>
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;
}
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.
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.
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>