HTML5, element wejściowy – część 2

Już w pierwszej części tego samouczka zdefiniowaliśmy atrybuty, z którymi możemy pracować, zobaczyliśmy, że mamy kilka nowych dla HTML5 i inne, które nie są, jednak jeśli chodzi o budowanie solidnych pól, które pomagają nam w istotnych procesach witryny, to połączenie tych i właściwe wykorzystanie każdego z nich pomoże nam zebrać dane w najlepszy możliwy sposób.
Ustawianie rozmiaru pola
Jak widzieliśmy, mamy dwa atrybuty, które bezpośrednio wpływają na rozmiar pola, są to rozmiar Tak maksymalna długość, jeden reguluje wizualną amplitudę pola, a drugi ilość tekstu, jaką pole może faktycznie odebrać.
Zobaczmy przykład wykorzystujący oba atrybuty:

 Przykład
Mniam:

Miasto:
Owoc:
Prześlij głos 

W tym przykładzie widzimy, jak określone jest pierwsze pole a maksymalna długośćDopiero tym mówimy przeglądarce, że może przyjąć tylko 10 znaków, jednak może przypisać domyślną szerokość, w drugim polu określamy rozmiar Z tym, co mówimy mu, jak szeroki powinien być, jednak nie ograniczamy wprowadzania tekstu i w trzecim stosujemy oba warunki, zobaczmy, jak to działa w przeglądarce.

Wykorzystanie wartości i symbolu zastępczego
Widząc różnicę między tymi dwoma polami, w tym przykładzie skutecznie zademonstrujemy, jak zastosować je do formularza, zobaczmy, jak ich użyć w poniższym kodzie.

 Przykład
Mniam:
Miasto:
Owoc:
Prześlij głos 

Jak widać w pierwszych dwóch polach, symbol zastępczy wskazuje pomoc dotyczącą tego, co użytkownik musi wprowadzić, ta wartość, którą zawiera symbol zastępczy, nie jest wartością pola wejściowego, więc jeśli prześlemy te pola, pojawią się puste, zamiast trzecie pole Ma już coś umieszczonego w atrybucie wartości, to jeśli zostanie przekazane podczas przesyłania do tego formularza.
Zobaczmy, jak przeglądarka pokaże nam to

Utwórz pola tylko do odczytu
Czasami musimy pracować z polami tylko do odczytu, ponieważ wartość nie powinna być modyfikowana przez użytkownika lub ma jedynie charakter informacyjny. Może być też tak, że jest to wynik wcześniejszego filtrowania przez użytkownika i tylko ta wartość jest widoczna, do tego mamy dwie opcje, które choć wydają się takie same, to zupełnie się różnią.
Widzieliśmy już atrybut tylko czytać a wiemy, że jest tak, że pole nie może być modyfikowane, mamy też atrybut niepełnosprawny, pełni tę samą funkcję, co tylko czytać, jednak robiąc Zatwierdź wszystkie pola niepełnosprawny nie są składane, więc to tak, jakby nie było ich w formularzu.
Zobaczmy powyższe wyjaśnione na praktycznym przykładzie.

 Przykład
Mniam:
Miasto:
Owoc:
Prześlij głos 

Widzimy, że pierwsze pole jest wyłączone, a drugie tylko do odczytu, gdy wyłączone jest wyświetlane w przeglądarce pojawia się w szarym kolorze, zwykle związanym z niewłączeniem, podczas gdy tylko do odczytu jest widziane jako normalne pole, chociaż jeśli spróbujemy pisać do kogokolwiek, nikt nie pozwoli nam wpisać tekstu.
Zobaczmy, jak wygląda przykład:

Na tym kończymy tę drugą część samouczka, jesteśmy teraz w stanie ulepszyć nasze formularze za pomocą podstawowych walidacji rozmiaru i ilości tekstu, a także kontrolując, co użytkownik może modyfikować, a czego nie, oprócz możliwości wyświetlania pomocy w polach aby miał pomysł, że powinieneś lub nie powinieneś wejść.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt