Im Vorgriff auf HTML 5 unterstützen viele mobile Browser bereits die neuen Input Types für Formular-Elemente, z.B. type="email".
Solange man nur für Desktop-Browser Websites erstellt, spielt das bislang keine Rolle.Interessant wird es für alle Szenarien, in denen keine physische Tastatur zur Verfügung steht - also z.B. für die Nutzer des iPad oder von Smartphones. Der Grund: je nach angegebenem Input Type wechselt das Tastaturlayout der Bildschirmtastatur.
Beispiel: hier sind die 3 verschiedene Felder eines Formulars aufgezeigt. Das erste ist ein Standard-Textfeld, das zweite erwartet eine E-Mail-Adresse und das dritte eine Telefonnummer, entsprechend sind auch die Input Types gesetzt (text, email, number).
Eine wirkliche Erleichterung für den Nutzer, da das Umschalten zwischen den einzelnen Ebenen der Tastatur nerven kann und es umso praktischer ist, wenn man die sowieso benötigten Zeichen, wie eben das @-Zeichen für E-Mail-Adressen oder Zahlen für Telefonnummern standardmäßig eingeblendet hat.
Die dargestellte Website läuft (noch) mit ASP.NET MVC 1.0, weshalb ich hierfür eine entsprechende Erweiterung geschrieben habe, die Textboxen mit beliebigen Input Types (als String) verarbeiten kann.
Code:
1: public static string MobileTextBox(this HtmlHelper html, string name, string inputType,
2: object value, object htmlAttributes)
3: {
4:
5: if (html.ViewData.ModelState.ContainsKey(name))
6: value = html.ViewData.ModelState.Single(s => s.Key == name).Value.Value.AttemptedValue;
7:
8: TagBuilder tagBuilder = new TagBuilder("input");
9: tagBuilder.MergeAttribute("name", name);
10: tagBuilder.MergeAttribute("type", inputType);
11: tagBuilder.MergeAttribute("value", (string)value);
12: tagBuilder.MergeAttributes(new RouteValueDictionary(htmlAttributes));
13: return tagBuilder.ToString(TagRenderMode.SelfClosing);
14: }
Anwendung:
1: <%= Html.MobileTextBox("email", "email", null, new { @class = "CssTextInput" })%>
2: <%= Html.MobileTextBox("telephone", "number", null, new { @class = "CssTextInput" })%>
