I am using (successfully) the header of my HTML tables as a form. This form is used to filter the table rows below and works great. Here is an example :
<table class="tableMedium">
<tr>
<form name="fiterRoles" action="<c:url value="/roles/filteredList" />" method="POST">
<th>Name<br/>
<input type="text" id="nameFilter" name="nameFilter" value="${nameFilter}" placeholder="Search" onchange="this.form.submit()" style="width: 100%;"/>
</th>
<th>Description<br/>
<input type="text" name="descriptionFilter" value="${descriptionFilter}" placeholder="Search" onchange="this.form.submit()" style="width: 100%;"/>
</th>
<th width="${hasEditRights eq true ? '22%' : '6%'}">Controls<br/>
<a class="buttonLink" href="<c:url value='/roles/list' />" title="Reset Filters">
<img src="${cp}/resources/images/resetFilters.png" height="20" width="20"/>
</a>
<c:choose>
<c:when test="${hasEditRights eq true}">
<a class="buttonLink" href="<c:url value='/roles/newRole' />" title="Add Role">
<img src="${cp}/resources/images/addIcon.png" height="20" width="20"/>
</a>
</c:when>
</c:choose>
</th>
</form>
</tr>
</table>
The only issue is that Eclipse keeps telling me this is an invalid location for a form. The page works perfectly but it seems HTML5 does not allow this. I noticed as I copy-pasted the example that this table has no <thead> tag but others using the same style of header-form have it and Eclipse is still not happy. I have tried moving the <form> tags outside of said <thead> tag with no success.
Short of disabling the warning in Eclipse, is there something I can do for this code to become valid?
Place the entire table inside the form tag. The complaint is that the form tag appears in the middle of the table rendering elements, and though it may output correctly, the placement is technically out of order.
A table can be inside a form element:
<form>
<table>
<tr><td></td></tr>
<!-- other table related elements -->
</table>
</form>
...or the form can be inside a table cell:
<table>
<tr>
<td>
<form>
<!-- form content -->
</form>
</td>
</tr>
<!-- other table related elements -->
</table>
Keep in mind though, that it would be better to avoid tables as "layout aids", as previously mentioned.
Related
I've written probably a dozen forms for this project but for some reason this ONE is not working. I can't discern any difference between it and any of my other forms.
By not working, I mean the page does not redirect when the submit button is clicked.
Also, the default value I try to put in the 'patient' field isn't appearing but that's not important.
It's probably something really silly like an unbalanced tag or something but I just cannot find it. Can a pair of fresh eyes help me out?
<form id='addBill' method='POST' action="/add_to_bill.php">
<table class='t' style='width:100%'>
<tr>
<td class='tt'><p>Patient ID</p></td>
<td class='tt'><input disabled class='t' type="numeric" name="patient" value=<?php getP('id') ?>></td>
<td class='tt'><p>Visit ID</p></td>
<td class='tt'><input class='t' type="numeric" name="visit"></td>
</tr>
<tr>
<td class='tt'><p>Invoice Number</p></td>
<td class='tt'><input class='t' type="numeric" name="invoice"></td>
<td class='tt'><p class='t'>Due Date: (format: e.g. <?php echo "'".date('Y-m-d')."'"; ?>)</p></td>
<td class='tt'><input class='t' type="text" name="date" value=<?php echo "'".date('Y-m-d')."'"?>></td>
</tr>
<tr>
<td class='tt'><input class='t' type="submit" value="Go"></td>
</tr>
</table>
</form>
based on the image of the code i noticed there is a form tag without the closed form tag. there are two form tag in it, one without closed form tag which is at most top of the code and another one is at bottom
I am playing with the Spring validating form input example - java spring mvc with Thymeleaf views. I have been able to pass messages into the view without issue. These display where the example wants them to...
e.g.
<td th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</td>
I am trying to find a way to put them into the html input validation attributes though so I have tried the following (full page below)
<td><input type="text" th:field="*{age}" **required="required" data-errormessage-value-missing="${#fields.errors('age')}" data-errormessage="${#fields.errors('age')}"**/></td>
This has done no good though and the validation message displayed is ${#fields.errors('age')} ! Is there a way to push the binding errors into the attribute or am I misunderstanding the way it works ?
Thanks for any help in advance.
Page html
<html>
<body>
<form action="#" th:action="#{/}" th:object="${personForm}" method="post">
<table>
<tr>
<td>Name:</td>
<td><input type="text" th:field="*{name}" required="required" data-errormessage-value-missing="Custom Message" /></td>
<td th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" th:field="*{age}" required="required" data-errormessage-value-missing="${#fields.errors('age')}" data-errormessage="${#fields.errors('age')}"/></td>
<td th:if="${#fields.hasErrors('age')}" th:errors="*{age}">Age Error</td>
</tr>
<tr>
<td><button type="submit">Submit</button></td>
</tr>
</table>
</form>
</body>
</html>
Thymeleaf only evaluates attributes that start with th:, so in order to do this, you have to use th:attr. You're tag should look like:
<input type="text" th:field="*{age}" required="required" th:attr="data-errormessage-value-missing=${#fields.errors('age')}, data-errormessage=${#fields.errors('age')}" />
You could also use this plugin to evaluate data tags, but I've haven't used it before so I can't comment on how well it works: https://github.com/mxab/thymeleaf-extras-data-attribute
When i run the following code below it works in dreamweaver but when i go to view it in a web broswer nothin shows.
The code is
<table cellpadding="5" cellspacing="1">
<tr>
<td align="center">
<form action="search.php" method="get">
<table><tr><td>
<input type="text" name="query" id="query" size="40" value="<? print quote_replace($query);?>" action="include/js_suggest/suggest.php" columns="2" autocomplete="off" delay="1500">
</div>
<td>
<input type="submit" value="Search!">
</td></tr></table>
When i go to view the source code in chrome it only loads
<table cellpadding="5" cellspacing="1">
<tr>
<td align="center">
<form action="search.php" method="get">
<table><tr><td>
Check with your host to see if they've enabled the <? tag. It's not turned on by default. If it's not, it's probably causing Chrome a lot of grief.
Check out your syntax. What you've pasted isn't valid. It looks like your'e closing your form twice, or you have an extra set of quotes in the "get" area.
On a side note, I suggest removing display related HTML attributes in favor of CSS. It will help keep a clear distinction between function and look.
I read several articles, but couldn't really get things working. Here's what I'm talking about. The Html of a webpage:
<form id="LOGINFORM" name="LOGINFORM" style="margin:0px; padding:0px;" action="login.php" method="post">
<table cellspacing="2" cellpadding="0" border="0" width="100%">
<tr>
<td width="100" align="center" valign="bottom">
Username:
</td>
<td width="100" align="center" valign="bottom">
Pass:
</td>
<td valign="top" align="right">
</td>
</tr>
<tr>
<td align="center">
<input class="inputbox" style="text-align:center; width:90px;" maxlength="12" name="loginname" type="text" size="12">
</td>
<td align="center">
<input class="inputbox" style="text-align:center; width:90px;" maxlength="12" name="password" type="password" size="12">
</td>
<td align="left">
<input
class="button_ok"
name="btnSubmit"
id="btnSubmit"
type="submit"
value="Вход"
onclick=""
>
</td>
</tr>
</table>
</form>
say the webpage is helloworld.com, account is foo, pass is bar.
What I browse: helloworld.com/login.php?loginname=foo&password=bar
But server returns that username/password is wrong, but they aren't. What do I do wrong?
The logic in login.php says that loginname=foo&password=bar is wrong. That is where you need to look to find out why it doesn't work.
As for what is wrong with the HTML.
You are using a table for layout
You aren't using <label> elements to label your inputs
You having given a form a name, these days an id is all that is required (and then only if you need to reference it with JS or CSS)
You are using a style attribute instead of a seperate stylesheet, and quite a few obsolete presentational attributes (such as align, width and cellspacing)
that form secifies that the data is passed via POSt, and not GET as you are trying to pass it. If a form wants data back specifically as POST data, that page will ignore GET data. see this tutorial
Your HTML says method="post", so I guess the server will only accept those values by the POST method. When you browse that URL, you are sending them using the GET method.
You are confusing GET and POST in PHP:
$_GET['loginname'] will retrieve a query string variable.
$_POST['loginname'] will retrieve the value of the input named "loginname". (This is what you need.)
helloworld.com/login.php?loginname=foo&password=bar uses GET
Is it valid to have a form tag inside a table tag? Some documentation links would be appreciated.
<form> is valid inside a <td> element. You can check this sort of thing at http://validator.w3.org. Choose "Validate by direct input", then paste the following HTML:
<table>
<tbody>
<tr>
<td><form action="test"><div><input type="text"></div></form></td>
</tr>
</tbody>
</table>
Under "More options", select "Validate document fragment". This allows you to check a HTML snippet without writing an entire page for it. I use it for checking HTML fragments all the time.
References:
The TD element
The FORM element
Putting a form tag inside a table (but outside the rows) was sometimes used to keep the margins of the form to interfere with the layout. It kind of works, but it's invalid code according to the HTML standard.
Use CSS to remove the margin from the form tag instead. Example:
<form ... style="margin:0">
Or preferrably put it in your style sheet.
You can nest a form within a td, its usually fine for most purposes though to wrap a form around a table
<form action="#">
<table>
<thead>
<tr>
<th>list</th>
<th>button</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" required="required"></td>
<td><button type="submit" id="saveRow">Save me</button></td>
</tr>
</tbody>
</table>
</form>
It is valid to put a <form> tag inside a <table> tag.
<table>
<tr>
<td>
<form name="sample" action="test.php">
<div>
<input type="submit" value="submit" >
</div>
</form>
</td>
</tr>
</table>
Editing note: tags wrapped as code so that the content reads as intended, but the answer should specify that while the form is inside the table, it cannot be a direct descendant: it must be a child of a cell.