Trochę notatek z wprowadzenia do HTML5 oraz na temat formularzy, kontrolek do wprowadzania danych i walidacji.
Nowe tagi w HTML5:
- article - główna zawartość strony
- aside - treść związana z artykułem lub stroną
- audio - współpracuje z source
- canvas
- command - w podobnym znaczeniu jak w XAML
- detalist
- details
- embed
- figcaption
- figure
- footer
- header
- hgroup
- keygen - zarządzanie danymi kryptograficznymi
- mark - podobnie jak <run> w XAML
- meter - pokazywanie zakresu wartości
- nav - jawne określenie nawigacji poza stronę
- output - efekt wykonania programowej operacji np. w JS
- progress - kontrolka wizualizująca postęp
- rp
- rt
- ruby
- section - podobnie jak div, ale ma znaczenie semantyczne
- source - wskazuje źródło (współpracuje z audio i video)
- summary
- time - wyświetlenie daty i czasu
- video - współpracuje z source
- wbr - word break (jak strona ma dzielić długie słowo)
Nowe API w Java Script:
- Kontakty
- Selection - DOM
- Aplikacje offline
- Indexed Database
- Web Workers
- Web Storage
- Web Sockets
- Web SQL DB
- Zdarzenia serwera
- XMLHttpRequest Level 2
- Geolokalizacja
- Canvas 2D
- HTML Microdata
- Media Capture
- Messaging
- Forms
- File API html
www.modernizr.com – biblioteka dla HTML5 i CSS3 (pozwala też sprawdzać wsparcie dla elementów dla danej przeglądarki)
2022 - data “ukończenia” HTML5 (wszystkie przeglądarki będą implementować wszystkie funkcjonalności)
<!doctype html>
<html lang=”en”>
<head>
</head>
<body>
<div>
<header>
<a href>
<hgroup>
<h1></h1>
</hgroup>
</a>
<nav>
<ul>
<li><a href/></li>
</ul>
</nav>
</header>
<article>
<h1></h1>
<div>
<audio>
<source/>
<object/>
</audio>
</div>
<figure>
<pre></pre>
<figcaption></figcaption>
</figure>
</figure>
</article>
<aside>
<h1></h1>
<p></p>
</aside>
<footer>
<nav>
</nav>
</footer>
<details>
<summary/>
<time pubdate></time>
</details>
</div>
</body>
</html>
HTML5 Forms
Nowe typy input (implementacje – np. Opera)
- color
- datalist
- date
- datetime
- datetime-local
- email (pole tekstowe z walidacją)
- month
- number
- range
- search (implementacja Chrome)
- tel (pole tekstowe z walidacją)
- time
- url (pole tekstowe z walidacją)
- week
HTML5 określa tylko, co kontrolki powinny robić. Ich wygląd i zachowanie zależy od producenta przeglądarki. Input typu search dla Chrome przypomina mi pole tekstowe w Windows 8 (chodzi mi o krzyżyk).
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name” placeholder=”First and last” required/>
<form novalidated> - wyłączenie walidacji
Atrybuty input
- placeholder - na polach tekstowych watermarki
- autofocus - automatyczne ustawienie focusa
- min, max - minimalna i maksymalna wartość dla pól numerycznych, range, daty
- step - wartość inkrementacji/dekrementacji w polach numerycznych i range
- list - wskazanie na datalist dla danego pola
<input type=”text” list=”colors”/>
<datalist id=”colors”>
<option value=””/>
</datalist>
- ppp
Aktualizowanie pola tekstowego w zależności od położenia suwaka:
range.onchange = function() {
rangeValue.innerText = this.Value;
}
rangeValue.innerText = range.Value;
Walidacja
<input …>
<div class=”invalid”/>
Atrybuty input:
- pattern - wyrażenie regularne dla pola tekstowego
- maxlength - maksymalna długość napisu
- required
Style dla pola input w stanie poprawnym i niepoprawnym:
input:valid {
border: 2px solid #ccc;
}
input:valid +.invalid {
visibility: hidden;
}
input:invalid +.invalid {
visibility: visible;
}
input.required {
border: 2px solid #900;
}
Sposób HTML na imitowanie – jak dla mnie – kilku wybranych stanów wizualnych elementów input związanych z walidacją.
Wbudowane reguły walidacyjne
- valueMissing
- typeMismatch
- patternMismatch
- tooLong
- rangeUnderflow
- rangeOverflow
- stepMismatch
- valid
Poniżej “przepis” na bardziej zaawansowaną obsługę walidacji, jaki znalazłem:
<input id=”username” name=”username” …>
<div id=”usernameRules” class=”rules”>
<span class=”valueMissing vmsg none”>Nazwa użytkownika jest wymagana</span>
<span class=”patternMismatch vmsg none”>Znaki specjalne nie są dopuszczalne</span>
</div>
W porównaniu do Silverlight jest to jednak znacznie prymitywniejsze, choć kontrolka też ma jakieś property związane z walidacją –:) W Silverlight w szablonie kontrolki jest binding do pierwszego błędu z kolekcji zawartej w attached property.
Tworzenie własnych reguł walidacyjnych
Poniżej przykład jaki znalazłem.
Cóż, na razie w porównaniu do wielu możliwości definiowania własnej walidacji, w tym asynchronicznej w Silverlight, nie wydaje się to szczególnie lepsze, ale jest to standard i będzie się wykonywało pod każdą przeglądarką wspierającą walidację z HTML5.
Posty
Brak komentarzy:
Prześlij komentarz