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" />
Related
I'd like to add label on my website using Thymeleaf fields, too.
I wrote the following code:
<form id="newFoo" action="#" th:action="#{'/save'}" th:object="${foo}"
method="post" autocomplete="off">
<table>
<tr>
<td> <label for="name" form="newFoo">Name</label></td>
<td>
<input id="name" type="text" th:field="*{name}" required="required">
</td>
</tr>
<tr>
<td> <label for="gender" form="newFoo">Gender</label> </td>
<td>
<select id="gender" th:field="*{gender}" required="required">
<option th:each="g : ${genders}"
th:value="${g.id}" th:text="${g.name}" ></option>
</select>
</td>
</tr>
<tr>
<td> <label for="birthday" form="newFoo">Birthday</label></td>
<td>
<input id="birthday" type="date" th:field="*{birthday}" min="1900-01-01" max="2100-01-01" required="required">
</td>
</tr>
<tr>
<td><label for="height" form="newFoo">Height</label></td>
<td> <input id="height" type="number" th:field="*{height}" required="required"> </td>
</tr>
<tr>
<td colspan="2">
<button type="submit">Submit</button>
</td>
</tr>
</table>
</form>
When I tried to navigate through my form by NVDA, only the labels of texts and select were shown and said. Numbers and date were not shown. I tried it on Google Chrome and on Firefox.
Trying w3school, number worked, too.
How can I solve it?
HI i want to validate an input type=email field with a submit button.
I have two form element in the page. And i am opening a div(divForgotPassword) as a modal.
But the required attribute is not working inside the modal .
Below is my my code
<form id="form1" runat="server">
//some elements
<form id="form2" action="javascript:RetrievePassword();">
<div id="divForgotPassword" style="display:none" title="Forgot password">
<table>
<tr>
<td>
<asp:Label ID="lblForgotPassword" runat="server" Text="Email"></asp:Label>:
</td>
<td>
<input type="email" required="required" id="txtForgotEmail" />
</td>
</tr>
<tr>
<td>
<input type="submit" style="background-image:url('Images/buttons/btn_send.png')" id="btnSend" />
</td>
</tr>
</table>
</div>
</form>
<form id="form2" action="javascript:RetrievePassword();">
<div id="divForgotPassword" title="Forgot password">
<table>
<tr>
<td>
<label for="txtForgotEmail">
EMAIL : </label>
<td>
<input type="email" required="required" id="txtForgotEmail" />
</td>
</tr>
<tr>
<td>
<input type="submit" style="background-image:url('Images/buttons/btn_send.png')" id="btnSend" />
</td>
</tr>
</table>
</div>
please find this demo DEMO
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.
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.
This form code is working in Mozilla and Chrome, but in Internet Explorer it is not working.
<form method="post" action="logincheck.php" >
<span class="meta">
<table>
</span>
<tr>
<td>
<span class="meta">
<label >Username </label>
</span>
<label>
</td>
<td> <input name="username" type="text" />
</label>
</form>
</td>
</tr>
<tr>
<td> <label ><span class="meta">Password</td>
<td>
<input name="password" type="password" />
</span>
</label>
</td>
</tr>
<tr>
<td>
<span class="meta">
</span>
<label>
<input type="submit" name="Submit" value="Submit" class="submit"/>
</label>
</td>
</tr>
</table>
</form>
You have a number of HTML errors, most important being an extra </form> tag shortly after the first <input>. That means the second input and the submit button are outside the form, so it won't work. Firefox and Chrome are being a bit more forgiving here it seems.
Fix your HTML and the form should work fine.
You have errors that automated QA tools can detect
<form method="post" action="logincheck.php">
<label for="username">Username</label>
<input name="username" type="text" />
<label for="password">Password</label>
<input name="password" type="password" />
<input type="submit" name="Submit" value="Submit" class="submit" />
</form>
The correct code for this form must look like this.
You do not need the table, you can style the form with easily with CSS over selecting the label & input fields
<span class="meta">
<table>
</span>
The nesting is wrong. In fact, there's a lot more wrong. Try googling what <label> does exactly, and what <span> does and when you want to use it. You probably want something like this:
<form method="post" action="logincheck.php" >
<table>
<tr>
<td><label class="meta">Username </label></td>
<td><input name="username" type="text" /></td>
</tr>
<tr>
<td><label class="meta">Password</td>
<td><input name="password" type="password" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="Submit" value="Submit" class="submit"></td>
</tr>
</table>
</form>
Here is a version without span tags, label and extra </form> in the middle of the table before submit button.
I guess, you added those by hands in plain text editors.
<form method="post" action="logincheck.php">
<table>
<tr>
<td>
Username
</td>
<td>
<input name="username" type="text" />
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input name="password" type="password" />
</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Submit" class="submit" />
</td>
</tr>
</table>
</form>
One first error is:
<span class="meta">
<table>
</span>
But you have many errors.
Open and close tags as you will do with parenthesis. No horse riding. HTML and now XHTML need you to be a little bit more conscientious.
usefull tool:
http://giminik.developpez.com/xhtml/
http://validator.w3.org/