Jaki jest prawidłowy kod HTML do tworzenia pola tekstowego?

Prawidłowym kodem HTML do tworzenia pola tekstowego jest użycie elementu <input> z atrybutem type="text". Pole tekstowe tego rodzaju umożliwia użytkownikowi wpisanie jednego wiersza tekstu (np. imienia, nazwiska, tytułu).

Podstawowa składnia pola tekstowego

<input type="text"> 

To najprostsza forma. Bez dodatkowych atrybutów tworzy jednoliniowe pole tekstowe o domyślnej szerokości.

Najważniejsze atrybuty pola tekstowego

Atrybuty umożliwiają kontrolowanie zachowania i wyglądu pola tekstowego:

• name – identyfikator kluczowy podczas wysyłania formularza;
• value – domyślna wartość, która pojawi się po załadowaniu strony;
• placeholder – podpowiedź, która wyświetla się w pustym polu, wskazując co należy wpisać;
• maxlength – maksymalna liczba znaków możliwych do wpisania;
• required – pole obowiązkowe (formularz nie zostanie wysłany, dopóki nie zostanie wypełnione);
• readonly – pole tylko do odczytu (nie można go edytować);
• disabled – pole jest wyłączone i nie bierze udziału w wysyłaniu danych;
• size – ustawia widoczną szerokość pola (w znakach).

Przykłady praktycznych zastosowań

Prosty formularz z polem na imię

<form> <label for="fname">Imię:</label> <input type="text" id="fname" name="fname"> </form> 

Ten kod tworzy pole opisane etykietą – dobra praktyka pod względem dostępności.

Pole tekstowe z podpowiedzią i ograniczeniem długości

<label for="firstName">Imię:</label> <input type="text" id="firstName" name="firstName" placeholder="Wpisz swoje imię" maxlength="20" > 

Tutaj użytkownik zobaczy delikatną podpowiedź, a dłuższy tekst zostanie automatycznie odrzucony po 20. znaku.

Pole wymagane, z minimalną i maksymalną długością tekstu

<label for="userName">Nazwa użytkownika (4–12 znaków):</label> <input type="text" id="userName" name="userName" required minlength="4" maxlength="12" > 

Dodanie atrybutu required sprawia, że nie można pominąć tego pola. Dodatkowo użytkownik musi wpisać tekst o długości od 4 do 12 znaków.

Pole tylko do odczytu z domyślną wartością

<label for="staticData">Kod klienta:</label> <input type="text" id="staticData" name="staticData" value="123XYZ" readonly > 

Takie pole można kopiować, ale nie modyfikować – dobre np. do prezentowania numerów referencyjnych.

Pole wyłączone

<label for="disabledField">To pole jest nieaktywne:</label> <input type="text" id="disabledField" name="disabledField" disabled > 

Pole wyłączone (disabled) jest wyszarzone i nie da się w nie wpisać żadnych danych.

Rozszerzenia – walidacja i stylowanie

• Pola tekstowe można walidować zarówno po stronie klienta (HTML5: required, maxlength, pattern), jak i po stronie serwera,
• stylowanie pól możliwe jest przez CSS, np. zmiana szerokości, kolorów, efektów na focus itp.,
• JavaScript pozwala dynamicznie odczytywać wartości pól.

const tekst = document.getElementById('fname').value;

Dobre praktyki

• Stosuj etykiety (<label>) dla ułatwienia nawigacji użytkownikom korzystającym z czytników ekranu;
• Używaj atrybutu placeholder jako podpowiedzi, nie zastępując nim etykiet;
• Dbaj o spójność nazewnictwa atrybutów name i id w celu łatwiejszego przetwarzania danych;
• Ogranicz dopuszczalną liczbę znaków, by zapobiegać nieprawidłom w danych wejściowych.

Podsumowanie

Pole tekstowe w HTML to element <input type="text">, który za pomocą różnych atrybutów można dopasować do różnych potrzeb formularzy internetowych. Dobierając atrybuty i odpowiednio organizując kod, zapewnisz wysoką użyteczność i poprawne działanie stron internetowych.