Pola tekstowe w HTML

Pola tekstowe w HTML to elementy formularzy, które umożliwiają użytkownikom wprowadzanie i edytowanie tekstu. Służą one do wprowadzania różnych rodzajów danych, takich jak imiona, adresy e-mail, daty, godziny, komentarze itp. W tym artykule omówimy różne rodzaje pól tekstowych, ich atrybuty i zastosowania.

Rodzaje pól tekstowych

HTML oferuje kilka typów pól tekstowych, które można wykorzystać w formularzach:

• <input type="text"> - Pole tekstowe do wprowadzania krótkiego tekstu.
• <input type="password"> - Pole tekstowe, które maskuje wprowadzane znaki (np. do wprowadzania haseł).
• <textarea> - Pole tekstowe dla dłuższych tekstów, takich jak komentarze lub opisy.
• <input type="email"> - Pole tekstowe przeznaczone do wprowadzania adresów e-mail.
• <input type="search"> - Pole tekstowe zoptymalizowane do wprowadzania zapytań wyszukiwania.
• <input type="date"> - Pole tekstowe do wprowadzania daty.
• <input type="time"> - Pole tekstowe do wprowadzania godziny.
• <input type="datetime-local"> - Pole tekstowe do wprowadzania daty i godziny razem.

<input type="text" id="imie" name="imie" placeholder="Wpisz swoje imie">
<input type="password" id="haslo" name="haslo" placeholder="Wpisz swoje hasło">
<input type="email" id="email" name="email" placeholder="Wpisz swój e-mail">
<input type="search" id="szukaj" name="szukaj" placeholder="Wpisz szukaną frazę">
<input type="date" id="szukaj" name="szukaj" placeholder="Wprowadź datę urodzenia">
<input type="time" id="godzina" name="godzina" placeholder="Wprowadź godzinę">
<input type="datetime-local" id="datetime" name="datetime" placeholder="Wprowadź datę i godzinę">
<textarea id="komentarz" name="komentarz" placeholder="Napisz komentarz"></textarea>

   See the Pen    Untitled by EE-Informatyk.pl (@eeinformatyk)   on CodePen. 
 

Atrybuty pól tekstowych

Pola tekstowe HTML mogą mieć wiele atrybutów, które umożliwiają dostosowanie ich wyglądu i zachowania, takie jak:

• value - Ustawia wartość domyślną pola tekstowego, czyli tekst, który pojawi się w polu po załadowaniu strony. Użytkownik może zmienić tę wartość, ale jeśli formularz zostanie zresetowany, wartość wróci do domyślnej.
• maxlength - Określa maksymalną liczbę znaków, które użytkownik może wprowadzić w polu tekstowym. Jest użyteczne, gdy chcesz ograniczyć ilość danych wprowadzanych przez użytkownika.
• min i max - Określa minimalną i maksymalną wartość, którą można wprowadzić. Dotyczy to głównie pól typu date, time, number, range, itp
• required - Oznacza, że pole jest wymagane. Użytkownik musi je wypełnić przed wysłaniem formularza. Jeśli pole nie zostanie wypełnione, przeglądarka wyświetli komunikat o błędzie.
• readonly - Ustawia pole tekstowe jako tylko do odczytu, co oznacza, że użytkownik nie może edytować jego zawartości. Jest przydatne, gdy chcesz pokazać użytkownikowi informacje, które nie mogą zostać zmienione.
• disabled - Wyłącza pole tekstowe, co oznacza, że nie można go używać, a jego wartość nie zostanie przesłana wraz z formularzem. Jest wyświetlane jako wyszarzone i niedostępne.
• size - Określa szerokość pola tekstowego, wyrażoną w liczbie znaków. Jest mniej precyzyjny niż CSS, ale przydatny do szybkiego ustawiania szerokości.
• placeholder - Wyświetla tekst wskazówki wewnątrz pustego pola tekstowego. Jest to użyteczne do informowania użytkownika, co powinien wpisać.
• pattern - Określa wyrażenie regularne, które wprowadzone dane muszą spełniać. Pomaga to w walidacji danych po stronie klienta.
• autocomplete - Kontroluje, czy przeglądarka powinna automatycznie uzupełniać wartości wprowadzane przez użytkownika na podstawie wcześniejszych wpisów. Możliwe wartości to on lub off.
• autofocus - Automatycznie ustawia fokus na polu tekstowym, gdy strona zostanie załadowana. Jest to przydatne, gdy chcesz, aby użytkownik od razu rozpoczął wprowadzanie danych w danym polu.
• step - Umożliwia określenie odstępu wartości dla pól liczbowych i dat. Na przykład, dla pola number, step="1" pozwala na wprowadzanie tylko pełnych liczb.
• minlength i maxlength - Ogranicza liczbę znaków, które użytkownik może wprowadzić w polu tekstowym. minlength określa minimalną liczbę znaków, a maxlength maksymalną.
• list - Pole tekstowe pozwala na wpisanie wartości lub wybranie jednej z listy.
• multiple - Użytkownik może wprowadzić wiele adresów e-mail, oddzielonych przecinkami.

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Podsumowanie

Pola tekstowe w HTML pozwalają na różne sposoby wprowadzania danych, od tekstu po daty i godziny. Dzięki szerokiej gamie typów pól oraz atrybutów można dostosować formularze do potrzeb użytkowników, a stylizacja przy pomocy CSS umożliwia nadanie im estetycznego wyglądu.