my question is how would I use an HTML::Template tag inside a value of form field to change that field. For example
<table border="0" cellpadding="8" cellspacing="1">
<tr>
<td align="right">File:</td>
<td>
<input type="file" name="upload" value= style="width:400px">
</td>
</tr>
<tr>
<td align="right">File Name:</td>
<td>
<input type="text" name="filename" style="width:400px" value="" >
</td>
</tr>
<tr>
<td align="right">Title:</td>
<td>
<input type="text" name="title" style="width:400px" value="" />
</td>
</tr>
<tr>
<td align="right">Date:</td>
<td>
<input type="text" name="date" style="width:400px" value="" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" value="Cancel">
<input type="submit" name="action" value="Upload" />
</td>
</tr>
</table>
I want the value to have a <TMPL_VAR> variable in it.
You use it the same way you'd use a template variable anywhere else:
<input type="text" name="date" style="width:400px" value="<TMPL_VAR NAME=date>" />
Yeah, it's ugly and it breaks your HTML validator. Which is one of the many reasons why I like Template Toolkit better.
Related
I, getting a lot of errors in validator but I don't understand the reasons of it.
end tag for "form" omitted, but OMITTAG NO was specified
required attribute "action" not specified
<div class="serch_block">
<form method="post" action="/search">
<table>
<tr>
<td>
<input type="text" class="form_in" name="search" value="" />
</td>
<td>
<input type="image" src="/design/img/button.jpg" name="submit" style="width:20px;height:19px;" onfocus='this.value="";' value="Поиск" />
</td>
</tr>
</table>
</form>
</div>
document type does not allow element "span" here; missing one of "th", "td" start-tag
<tr>
<td width="30" valign="top" align="right" class="text2" style="padding-top:10px;padding-right: 62px;">Email:</td>
<td><input type="text" class="form_in" name="email" /></td>
<span id="error_email" style="color:#ff0000;" class="<?php if(!isset($errors['email']))echo 'invisible';?>">Name and / or E-mail / are required!</span>
</tr>
Can you help me with it?
Here is the form.
<form action="/" method="post">
<table align="center" border="0">
<tr class="boss">
<td width="30" valign="top" align="left" class="text2news">Имя:
</td>
<td>
<input type="text" class="form_in" name="name" />
<span id="error_name" style="color:#ff0000" class="invisible"></span> </td>
<!--</td> -->
</tr>
<tr>
<td width="30" valign="top" align="right" class="text2" style="padding-top:10px;padding-right: 62px;">Email:</td>
<td ><input type="text" class="form_in" name="email" /></td>
<span id="error_email" style="color:#ff0000;" class="invisible">Имя и /или E-mail/ обязательны для заполенения!</span>
</tr>
<tr class="registrationBot">
<td><input type="submit" name="subscribe" value="подписаться" /></td>
<td><input type="submit" name="unsubscribe" value="отписаться" /><input type="submit" name="cleenerror" value="закрыть" /></td>
</tr>
<tr>
<td colspan="2" style="color:#ff0000"></td>
</tr>
</table>
</form>
This seems (and should be) simple, but I have no idea why the values for my radio buttons appear empty
<!DOCTYPE html>
<html>
<body>
<form method="post" action="action_page.php">
<table>
<tr>
<th>Intermediate</th><th>Advanced</th><th>No selection</th>
</tr>
<tr>
<td colspan="3">
<label for="td1">1. Bash</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td1" id="td1" value="BashInter"/>
</td>
<td><input type="radio" name="td1" value="BashAdv"/>
</td>
<td><input type="radio" name="td1" value="" /></td>
</tr><tr>
<td colspan="3">
<label for="td1">2. C</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td2" id="td2" value="CInter"/>
</td>
<td><input type="radio" name="td2" value="CAdv"/>
</td>
<td><input type="radio" name="td2" value="" /></td>
</tr><tr>
<td colspan="3">
<label for="td1">3. C++</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td3" id="td3" value="C++Inter"/>
</td>
<td><input type="radio" name="td3" value="C++Adv"/>
</td>
<td><input type="radio" name="td3" value="" /></td>
</tr></table>
<input type="submit" value="Submit">
</form>
<p>If you click "Submit", the form-data will be sent to a page called "action_page.php".</p>
</body>
</html>
If run on W3Schools' (ugh) server, it correctly outputs the input.
e.g.
td1=BashInter&td2=CAdv&td3=
However, my server, for print_r($_POST); returns
[td1] => [td2] => [td3] =>
regardless of what is selected.
Looking at the HTTP headers confirms that nothing is being sent.
All other aspects of the form correctly send their values.
I have tried a number of variants in relation to the values, but nothing has altered the fact that no data actually appears to be sent by the radio buttons.
You didn't specified that your form must be send as a POST one, so used method is defaulted to GET.
Try with
<form action="action_page.php" method="POST">
Last radio button of every set has been kept empty and has black value.
Which means <input type="radio" name="td3" value="" /> needs to be replaced with <input type="radio" name="td3" value="Some value 3" />
So in case you are selecting last radio button from every set then obviously it wont return anything.
Apart from this there is not other problem as long as your HTML code is concerned. If you still face any problem please upload your PHP code as well.
I also suggest to give some some meaningful label to each radio.
Here is the code you may try
<!DOCTYPE html>
<html>
<body>
<form method="POST" action="action_page.php">
<table>
<tr>
<th>Intermediate</th><th>Advanced</th><th>No selection</th>
</tr>
<tr>
<td colspan="3">
<label for="td1">1. Bash</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td1" id="td1" value="BashInter"/> BashInter
</td>
<td><input type="radio" name="td1" value="BashAdv"/> BashAdv
</td>
<td><input type="radio" name="td1" value="Some value 1" /> Some value 1</td>
</tr><tr>
<td colspan="3">
<label for="td1">2. C</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td2" id="td2" value="CInter"/> CInter
</td>
<td><input type="radio" name="td2" value="CAdv"/> CAdv
</td>
<td><input type="radio" name="td2" value="Some value 2" /> Some value 2</td>
</tr><tr>
<td colspan="3">
<label for="td1">3. C++</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="td3" id="td3" value="C++Inter"/> C++Inter
</td>
<td><input type="radio" name="td3" value="C++Adv"/> C++Adv
</td>
<td><input type="radio" name="td3" value="Some value 3" /> Some value 3</td>
</tr></table>
<input type="submit" value="Submit">
</form>
<p>If you click "Submit", the form-data will be sent to a page called "action_page.php".</p>
</body>
</html>
I have attached image containing elements on my page. I want "format-123-456-7890) exactly below phone element. at present "phone ext" element is wrapped. If i increase size of "format.." element, phone ext element is getting wrapped. don't know solution. here is html code. i want Phone Ext in one line and Format element in one line (don't want to be wrapped).
<table datatable="0" role="presentation">
<caption class="hiddenContent">data table</caption>
<tr>
<td style="width: 30%;text-align: right">*First Name:</td>
<td>
<input type="text" name="elctnFirstName" id="elctnFirstName" value="" aria-required="true" maxlength="40" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">Middle Name:</td>
<td>
<input type="text" name="elctnMiddleName" id="elctnMiddleName" value="" aria-required="true" maxlength="40" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">*Last Name:</td>
<td>
<input type="text" name="elctnLastName" id="elctnLastName" value="" aria-required="true" maxlength="40" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">Email Address:</td>
<td>
<input type="text" name="emailAddress" id="emailAddress" value="" aria-required="true" maxlength="256" />
</td>
</tr>
<tr>
<td style="width: 20%;text-align: right">*Phone:</td>
<td>
<input type="text" name="elctnPhone" id="elctnPhone" value="" aria-required="true" maxlength="12" />
</td>
<td style="width: 20%;text-align: right">Phone Ext:</td>
<td>
<input type="text" name="eltcnPhoneExt" id="eltcnPhoneExt" value="" aria-required="true" maxlength="3" />
</td>
</tr>
<tr>
<td style="width: 40%;text-align: right">(Format-123-456-7890)</td>
</tr>
</table>
Here are a couple of suggestions
1) Use in Phone Ext
2) Let the table go to its natural width rather than setting the with to 40% and 20%
3) Explicity set the widths of <input>. I doubt that the extension field needs to be as long as others
4) Put a nowrap on the cell you don't want to wrap.
5) Use Bootstrap rather than tables to layout your form
Consider the following form (jsFiddle here):
<table class="table table-striped table-bordered table-condensed">
<caption><h2><em>-Express=</em> Time Entry</h2></caption>
<thead>
<tr>
<th>Date</th>
<th>Hours</th>
<th>Notes</th>
</tr>
</thead>
<tfoot class="well">
<tr>
<td colspan="4">
<input type="submit" name="Submit" value="Submit Time Entry" class="btn btn-primary">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td scope="row">
<input type="date" name="date1" id="date1" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
</td>
<td>
<input type="number" name="hours1" id="hours1" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes1" id="notes1" wrap="soft" class="span12"></textarea>
</td>
</tr>
<tr>
<td scope="row">
<input type="date" name="date2" id="date2" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
</td>
<td>
<input type="number" name="hours2" id="hours2" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes2" id="notes2" wrap="soft" class="span12"></textarea>
</td>
</tr>
<tr>
<td scope="row">
<input type="date" name="date3" id="date3" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
</td>
<td>
<input type="number" name="hours3" id="hours3" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes3" id="notes3" wrap="soft" class="span12"></textarea>
</td>
</tr>
</tbody>
</table>
You might notice that each of the input fields lack an associated label; this design relies on the table's headers to describe what should go into each input element.
Is this accessible?
What is the ideal way to label repetitive input fields without repeating the label for each row? Is this an ideal use-case for implementing aria-labelledby?
I just looked at this with my screen reading software and while it is technically accessible it is difficult to use. Specifically I tend to jump from form field to form field with hotkeys when filling out a form. With your example this does not work, I have to use navigation keys to read the table cell by cell so the corresponding column header will be read with the associated form field. While I do not have much web development experience it appears that aria-labelledby will fix your issue. If you look at the following
jsFiddle I used aria-labelledby ion the first row of fields. Any fields in the first row had meaningful names announced, in this case the header corresponding to the field. Since I did not use aria-labelledby on the other rows field labels were not automatically announced and I had to use table navigation to determine what the fields were. See jsFiddle code below.
<table class="table table-striped table-bordered table-condensed">
<caption><h2><em>-Express=</em> Time Entry</h2></caption>
<thead>
<tr>
<th><div id="dateInput">Date</div></th>
<th><div id="hoursInput">Hours</div></th>
<th><div id="notesInput">Notes</div></th>
</tr>
</thead>
<tfoot class="well">
<tr>
<td colspan="4">
<input type="submit" name="Submit" value="Submit Time Entry" class="btn btn-primary">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td scope="row">
<input type="date" aria-labelledby="dateInput" name="date1" id="date1" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
</td>
<td>
<input type="number" name="hours1" id="hours1" aria-labelledby="hoursInput" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes1" id="notes1" aria-labelledby="notesInput" wrap="soft" class="span12"></textarea>
</td>
</tr>
<tr>
<td scope="row">
<input type="date" name="date2" id="date2" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
</td>
<td>
<input type="number" name="hours2" id="hours2" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes2" id="notes2" wrap="soft" class="span12"></textarea>
</td>
</tr>
<tr>
<td scope="row">
<input type="date" name="date3" id="date3" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
</td>
<td>
<input type="number" name="hours3" id="hours3" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes3" id="notes3" wrap="soft" class="span12"></textarea>
</td>
</tr>
</tbody>
</table>
You can do what Jared said, or in this case, I would support using the title attribute on the <input>s.
<input type="date" name="date1" id="date1"
min="2014-01-02" max="2014-03-02" value="" maxlength="10"
class="span8 date" title="date worked">
ARIA markup will work, but... I find, by far, the simplest and most effective solution is the title attribute when you have repeated form elements, especially if they are created dynamically. Just as Ryan B suggests.
Sometimes simpler is actually better.
i have one form and i want send data when i have disable input.
is way for this.
my code is :
<form method="post" action="">
<table class="tbl_wheader" style="width: 200px;">
<tbody>
<tr class="even">
<td>
state
</td>
<td>
<input type="text" id="state_id" name="state_id" disabled="">
</td>
</tr>
<tr class="even">
<td>
</td>
<td>
<input type="submit" value="ok" name="addschool">
</td>
</tr>
</tbody>
thanks.
you can store your data in hidden input
<input type="text" name="state_id" disabled="disabled" value="value" />
<input type="hidden" name="state_id" value="same value" />
or you can use readonly attribute
<input type="text" name="state_id" readonly value="value" />