Na stronie   W katalogu
     
Rozumiem I Akceptuje (X)
Ta strona używa plików cookies aby lepiej spełnić Państwa oczekiwania. Jednocześnie informuje, że można zablokować zapisywanie cookies, zmieniając ustawienia przeglądarki.


    Dodaj strone do katalogu     Dodaj reklame     Pobierz program     Dodaj do ulubionych     Kontakt   


Formularze w html5


Formularze w html5 zmieniły się dość znacznie. Dotychczas na każdej stronie w której były formularze, były także jakieś dążenia do jego weryfikacji, usprawnienia, ułatwienia dla wypełniających. Twórcy html5 zauważyli, że cześć usprawnień formularzy dokonywanych przez twórców stron są na każdej niemalże stronie identyczne bądź prawie identyczne. Dlatego aby ułatwić pracę nad formularzami uwzględniono to tworząc html5. Projektując formularz trzeba mieć na uwadze, że nie wszystko i niejednakowo działa jeszcze w przeglądarkach.

Nowe usprawnienia formularzy

placeholder - sugerowany tekst


Może być stosowany ze wszystkimi kontrolkami w które można wpisać tekst.

Oto przykład zastosowania. Uwaga jeśli twoja przeglądarkach nie obsługuje tego to nie zobaczysz efektu.


W tej kontrolce powinien pojawić się napis podaj imię.

A tak wygląda kod


<form action="#" method="post">
<input type="text" name="" value="" placeholder="Podaj imię" />
</form>

autofocus - fokus dla elementu


Może być stosowany ze wszystkimi kontrolkami w które można wpisać tekst lub dokonać wyboru.

Oto przykład zastosowania. Uwaga jeśli twoja przeglądarkach nie obsługuje tego to nie zobaczysz efektu.




Tu powinien pojawić się kursor

A tak wygląda kod


<form action="#" method="post">
<input type="text" name="" value="" /><br /><br />
<input type="text" name="" value="" autofocus />
</form>

autocomplete - wł/wył Podpowiedź zapisanych danych do input


Może być stosowany ze wszystkimi kontrolkami input. Gdy jest włączony (domyślnie) zapamiętuje ostatnio wpisane słowa i przy ponownym wpisywaniu tych słów podpowiada. Gdy natomiast jest wyłączony nie podpowiada.

Oto przykład zastosowania. Uwaga jeśli twoja przeglądarkach nie obsługuje tego to nie zobaczysz efektu.


Tu zapamiętuje

Tu nie zapamiętuje


A tak wygląda kod


<form action="#" method="post">
<!-- Tu zapamiętuje -->
<input type="text" name="" value="" autocomplete="on" required /><br /><br />
<!-- Tu nie zapamiętuje -->
<input type="text" name="" value="" autocomplete="of" required /><br /><br />
<input type="submit" name="" value="Wyślij" />
</form>

required - wymagane pole


Może być stosowany ze wszystkimi kontrolkami w które można wpisać tekst lub dokonać wyboru.

Oto przykład zastosowania. Uwaga jeśli twoja przeglądarkach nie obsługuje tego to nie zobaczysz efektu.


To pole jest wymagane spróbuj wysłać bez wypełnienia.




A tak wygląda kod


<form action="#" method="post">
<p>To pole jest wymagane spróbuj wysłać bez wypełnienia.</p>
<input type="text" name="" value="" required /><br /><br />
<input type="submit" name="" value="Wyślij" />
</form>