I'm writing a web application for iPad.
I know it's possible to change the type of keyboard displayed when an html input field is selected using:
Text: <input type="text" />
Telephone: <input type="tel" />
URL: <input type="url" />
Email: <input type="email" />
Zip Code: <input type="text" pattern="[0-9]*" />
the problem is that I have to use textarea instead of input. Is it possible to obtain the same result?
If not : is there any way to change the keyboard label for the ENTER key. At the moment the default label is "Return" and I would like to have "Send" (since it's a chat app).
thanks a lot!
If it is plain html/css/javascript. This is not possible
if you use <input title="Search"> the "enter" key is replaced by a "search" button, I haven't been able to find a listing of all the different combinations, but I'm sure there is one to you liking.
Note: The input must be inside a form element for this to work.
Related
Iam a newbie to frontend. can anyone help me out on how to restrict the input field to take limited character while copy/pasting? I tried doing this way, it works when you type, but breaks when you copy/paste?
<input type="text" disabled="{{isDisabled}}" placeholder="Search" maxlength="50" [(ngModel)]="searchText" (keyup)="updateTable()" />
I have multiple buttons submitting a form. I check to see which button was clicked by the input value that gets passed into my controller.
public async Task<ActionResult> MyAction(MyModel model, string command)
The html below works. In my controller command equals myValue
<input type="submit" name="command" value="myValue" />
The html below doesn't work. In my controller command is null
<input type="image" name="command" src="..." value="myValue"/>
W3C says the type 'image' is a submit button
So why are these two input elements behaving differently?
An image submit button indeed behaves differently, by definition, both according to the expired working draft linked to in the question and the current HTML5 CR draft and the HTML 4.01 recommendation. According to HTML5 CR, construction of the form data set does not add a name=value pair for an image submit button but name.x=... and name.y=... with the coordinates of the clicked location as values. This corresponds to old definitions and browser practice, except that Chrome additionally adds a name=value pair.
Thus, in your case, the form data will contain the fields command.x and command.y, with values that you are probably not interested in. This is what you need to take as starting point when coding the form handler. This means that if you need to recognize which of several image buttons was used, you need to give them different name attributes.
You can have one hidden field and set the command name in that hidden field which ever button is click and get the name of the button that submited the form on server side.
Javascript
$(".submit").click(function(){
var commandName = $(this).attr("val");
$("input[type=hidden]").val(commandName);
});
HTML
<form>
<input type="hidden" name="command">
<input type="submit" value="submitbtn" class="submit" />
<input type="image" src="..." value="imagebtn" class="submit"/>
</form>
The simplest (and maybe not safe) way to accomplish this task is with inline JQuery, here's how :
VIEW :
<input type="image" src="..." onclick="$('#hidImgValue').val('Image1');" />
<input type="hidden" id="hidImgValue" name="command" value="none" />
CONTROLLER :
public async Task<ActionResult> MyAction(MyModel model, string command)
Command var will have "Image1" as value.
I need to show green radio buttons as checked based on model value. HTML has two input elements of type radio:
<input name="color" type="radio" id="red" value="red"></label>
<input name="color" type="radio" id="green" value="green" checked>
Dart code has a variable colorValue='green'. How can the checked attribute of input element be set based on dart variable? Can this be done in HTML or this must be done in dart code?
<input ... checked?="{{colorValue=='green'}}">
I am trying to use voice over in my web page.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
First name: <input type="text" name="fname" tabindex="1"><br>
Second name: <input type="text" name="sname" tabindex="2"><br>
Third name: <input type="text" name="tname" tabindex="3"><br>
Last name: <input type="text" name="lhan" tabindex="4"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
If I open this page in a Iphone, First it reads " First name ".
I just clicked on "fname" textbox to enter any text then press the "Done" button of keypad.
Keypad disappears and then it automatically focus the "Third Name" textbox and read the text.
This behavior is not consistent.
Is it expected behavior?
How can I give order to the voice control ? (tabindex)
Thank you so much.
Not sure why you're using tabindex attribute? Most of the time, they're unnecessary - especially strictly positive values that will mess with natural tab order when browsers are in fact already doing fine with normal HTML code with links and form elements.
My advice: remove any tabindex attribute from your code, except for very special cases like a comment form in a forum where you want to type text into a textarea, then 1 or 2 tab, Enter and you're submitting your message regardless of buttons for inserting bbCode that could be placed between the textarea and the submit button.
At the slightest change in HTML code of your templates, the presence of tabindex will be forgotten, they won't be updated and it will break the tab order.
Relevant WCAG 2.0 Techniques:
F44: Failure (...) due to using tabindex to create a tab order that does not preserve meaning and operability
H4: Creating a logical tab order through links, form controls, and objects
other Techniques are linked from the ones above
Now about the rest of the code: labels of a form elements should be tagged with... label elements. Associating each label element to its respective form element (any input type - except submit, image and button one - and also any select and textarea) is done via identical values of for and id attributes:
<label for="blah">My label</label><textarea id="blah"></textarea>
JSFiddle of your code corrected
each form element and label is in its own paragraph element
label is added (around each form element so message of error or hint on the right of form element or below it can still be in the label
unique id added to each form element (I took the same value as name but whatever is a valid id is OK)
for attribute added to label with identical value as each id above
HTML code
<form action="demo_form.asp">
<p>
<label for="fname">First name: <input type="text" name="fname" id="fname"></label>
</p>
<p>
<label for="sname">Second name: <input type="text" name="sname" id="sname"></label>
</p>
<p>
<label for="tname">Third name: <input type="text" name="tname" id="tname"></label>
</p>
<p>
<label for="lhan">Last name: <input type="text" name="lhan" id="lhan"></label>
</p>
<p class="w300p txtright">
<input type="submit" value="Submit">
</p>
</form>
Relevant WCAG 2.0 Techniques:
H44: Using label elements to associate text labels with form controls
G131: Providing descriptive labels
F17: Failure (...) due to insufficient information in DOM to determine one-to-one relationships (e.g., between labels with same id) in HTML
F86: Failure (...) due to not providing names for each part of a multi-part form field, such as a US telephone number
The 5 seconds test to determine if label elements and for / id pairs are coded with accessibility in mind or not:
take a mouse
click on each text that should be a label right before or after a form element. Cursor/caret/focus must go into the form element next to it
This is a 10 second test on tablets and smartphones because tap is a bit slower ^^
I have a simple form:
<form method="post" action="contact.php">
<input type="text" name="name" id="nameid" value="">
<input type="submit" value="Submit">
</form>
Whenever I enter a character into the input field on my Ipod Touch/Ipad or whenever text is in the field and the field obtains focus, the device reloads the page. Hence I cannot enter more than one character. I can also place text in the field with javascript but whenever that field obtains focus, the page is reloaded. I've tried all relevant input field attributes from here
that I have found in "developer.apple.com" archives to no avail. What am I missing?
I found the problem. I had an on resize event that was getting fired on text entry. I took that out of my javacript and all is well.