• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

typy input'ów HTML 5 czy coś wnoszą nowego?

VPS Starter Arubacloud
0 głosów
283 wizyt
pytanie zadane 3 lipca 2018 w HTML i CSS przez profsor500 Użytkownik (610 p.)

Cześć wszystkim!
Wraz z wejściem do użytku powszechnego HTML 5 dostaliśmy między innymi do dyspozycji kilkanaście nowych input'ów. Chcę utworzyć jakiś fajny formularz na stronę WWW i w tym celu przejrzałem je na w3school.
I tu moje pytanie, czy jest jakaś różnica między typ=tel ,  type=email a type=text? Osobiście nie zauważyłem różnicy, a skoro to zostało dodane, to zostało dodane nie bez powodu, więc znacie jakieś różnice? Bo za bardzo nie wiem, jak wykorzystać te nowości.

2 odpowiedzi

+4 głosów
odpowiedź 3 lipca 2018 przez Comandeer Guru (599,730 p.)

Jest różnica. HTML5 dodaje tzw. Constraint Validation API, które dla każdego z tego pól stosuje inne zasady walidacji. I tak w polu [type=email] trzeba podać poprawny e-mail a w polu [type=url] – URL.

Niemniej to raptem połowa zmian. Jeszcze ważniejszą zmianą, z punktu widzenia użytkowników, jest fakt, że te pola dostosowują swoje UI do wpisywanych danych. I tak np. na telefonie pole typu [type=number] pokazuje jedynie klawiaturę numeryczną, a na komputerze ma dodatkowy przycisk (tzw. spinbutton), którym można zmieniać jego wartość. Z kolei [type=email] pokazuje na telefonach klawiaturę z dodatkowym przyciskiem @. W przeglądarkach, które implementują [type=date], pola te są wyposażone w kalendarz do wyboru daty itp. itd.

Więc tak, te pola zmieniają naprawdę dużo.

PS nie używaj W3Schools.

komentarz 3 lipca 2018 przez profsor500 Użytkownik (610 p.)
Dzięki za dość obszerne wyjaśnienie, widzę, że jest to skierowne głównie w smartfonową rewolujcę ostatnich lat, bo osobiście na pc różnicy nie widziałem :/
Co do w3s, to nie wiem, dlaczego nie.. chociaż przeważnie szukam tam odpowiedzi na pytanie, 'co to robi?' a poza tym, czasami trafiam na potrzebne mi działające skrypty.. a jeżeli nie są na czasie, to poznaje chociaż nowe mechaniki
komentarz 3 lipca 2018 przez Comandeer Guru (599,730 p.)

widzę, że jest to skierowne głównie w smartfonową rewolujcę ostatnich lat, bo osobiście na pc różnicy nie widziałem

Pojawia się choćby walidacja czy kalendarz do wyboru daty.

 Co do w3s, to nie wiem, dlaczego nie..

Zostały podane 3 linki, w których są zawarte liczne brednie i głupoty, jakie na W3S są. Nie wiem po co to czytać skoro na MDN też są działające przykłady. 

+3 głosów
odpowiedź 3 lipca 2018 przez shotokan Nałogowiec (39,660 p.)
w3school omijaj dużym łukiem,
jest różnica, wpisz sobie w pole np. tel  przykładowy adres emailowy lub zwykły tekst i spróbuj zatwierdzić formularz...
ogólnie te pola mają wbudowaną w siebie walidację konkretnego przypadku, czyli, np. pole email werufikuje czy wpisałeś poprawnie adres email
najlepiej to przetestuj sobie na komputerze po kolei każde pole
i na koniec to już nie są aż takie nowości :)
komentarz 3 lipca 2018 przez hoktaur Pasjonat (22,250 p.)
ogólnie można stosować tą walidację jako wstępna ta finalna i tak powinna odbywać się po stronie serwera bo tą można w łatwy sposób nadpisać/zmienić - dla mnie to tą walidację można sobie wsadzić głęboko..... bo walidować tu walidować tam a później spróbuje coś poprawić/zmienić to po dłuższym używaniu idzie się nieźle ... zdenerwować - no ale jest to niech będzie :)

Podobne pytania

0 głosów
1 odpowiedź 193 wizyt
pytanie zadane 14 listopada 2017 w PHP przez Zbigniew Andrysiak Bywalec (2,470 p.)
0 głosów
1 odpowiedź 429 wizyt
pytanie zadane 12 grudnia 2016 w JavaScript przez niezalogowany
0 głosów
1 odpowiedź 134 wizyt
pytanie zadane 16 marca 2016 w PHP przez Filip31411 Dyskutant (8,820 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...