Tagi związane z formularzami

Ten artykuł wyjaśnia tagi związane z formularzami.

To wyjaśnia różne pola formularza, takie jak pola tekstowe i menu rozwijane.

YouTube Video

Tagi związane z formularzami

Tag <form>

1<form action="/submit" method="post">...</form>

• Tag <form> jest używany do zdefiniowania całego formularza.
• Atrybut action określa miejsce docelowe, a atrybut method określa metodę (GET lub POST).
• Możesz również określić atrybut target, podobny do znacznika <a>.

Tag <input> (pole wprowadzania tekstu)

1<input type="text" name="username" placeholder="Enter your username">

• <input type="text"> tworzy jednoliniowe pole do wprowadzania tekstu. Użytkownicy mogą wprowadzić dowolny tekst.

• placeholder to atrybut, który określa tekst opisowy wyświetlany, gdy pole wejściowe jest puste. Pomaga to użytkownikom łatwo zrozumieć oczekiwane dane wejściowe. Ten tekst automatycznie znika po rozpoczęciu wpisywania.

  • placeholder nadaje się do podawania informacji uzupełniających i nie nadaje się do ważnych instrukcji, takich jak wymagane dane wejściowe. W takich przypadkach należy użyć etykiety.

Tag <input> (pole wprowadzania hasła)

1<input type="password" name="password" placeholder="Type your password here">

• <input type="password"> tworzy pole do wprowadzania hasła. Wprowadzone znaki są ukryte i maskowane w celu zapewnienia bezpieczeństwa.

Tag <input> (pole wprowadzania adresu e-mail)

1<input type="email" name="email" placeholder="Enter your email">

• <input type="email"> tworzy pole do wprowadzania adresu e-mail i zawiera walidację w celu zapewnienia poprawnego formatu adresu e-mail.

Tag <input> (pole wyboru - checkbox)

1<input type="checkbox" name="subscribe"> Subscribe to newsletter

• <input type="checkbox"> tworzy pole wyboru (checkbox). Gdy dostępnych jest wiele opcji, użytkownicy mogą wybrać wiele elementów.

Tag <input> (przycisk radiowy)

1<input type="radio" name="gender" value="male"> Male<br>
2<input type="radio" name="gender" value="female"> Female

• <input type="radio"> tworzy przycisk radiowy, który pozwala użytkownikowi wybrać tylko jedną opcję z zestawu.

Tag <input> (przycisk przesyłania)

1<input type="submit" value="Submit">

• <input type="submit"> tworzy przycisk do wysyłania danych w formularzu.
• Wartość atrybutu value jest zawarta w danych formularza podczas wysyłania.

<input> tag (Przycisk resetowania)

1<input type="reset" value="Reset">

• <input type="reset"> tworzy przycisk, który resetuje wszystkie wartości w formularzu.

Tag <input> (ukryte pole)

1<input type="hidden" name="userid" value="12345">

• <input type="hidden"> tworzy ukryte pole, które nie jest wyświetlane na ekranie i służy do przesyłania danych do backendu podczas wysyłania formularza.

Tag <input> (wybór koloru)

1<input type="color" name="favcolor" value="#ff0000">

• <input type="color"> wyświetla selektor koloru i tworzy pole do wyboru koloru.

Tag <input> (pole wprowadzania daty)

1<input type="date" name="birthday">

• <input type="date"> tworzy pole wprowadzania daty, które wyświetla kalendarz do wyboru daty.

Tag <input> (pole wprowadzania godziny)

1<input type="time" name="appointment_time">

• <input type="time"> tworzy pole do wprowadzania godziny, a także wyświetla selektor czasu.

<input> tag (pole do wprowadzania plików)

1<input type="file" name="resume">

• <input type="file"> tworzy pole wprowadzania, aby użytkownicy mogli wybierać i przesyłać pliki.
• Atrybut enctype tagu form musi być ustawiony na multipart/form-data.

<input> tag (pole liczbowe)

1<input type="number" name="quantity" min="1" max="10">

• <input type="number"> tworzy pole wejściowe liczby, które pozwala ustawić wartość minimalną, maksymalną oraz krok (ilość zwiększenia/zmniejszenia).

<input> tag (pole zakresu liczb)

1<input type="range" name="volume" min="0" max="100" value="50">

• <input type="range"> tworzy pole wejściowe, w którym użytkownicy mogą wybrać wartość w określonym zakresie za pomocą suwaka.

<textarea> tag

1<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

• Znacznik <textarea> tworzy wieloliniowe pole wejściowe tekstu. Nadaje się do wprowadzania długiego tekstu lub komentarzy.

<select> tag

1<select name="animal">
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4</select>

• Znacznik <select> tworzy menu rozwijane, a opcje są definiowane za pomocą znacznika <option>. Użytkownicy mogą wybrać jeden lub wiele elementów.

1<select name="animals" multiple>
2    <option value="cat">Cat</option>
3    <option value="dog">Dog</option>
4    <option value="bird">Bird</option>
5</select>

• Aby umożliwić wielokrotny wybór, dodaj atrybut multiple. Określenie tego atrybutu powoduje wyświetlenie opcji w postaci listy.

Tag <optgroup>

 1<select name="fruits">
 2    <optgroup label="Citrus">
 3        <option value="orange">Orange</option>
 4        <option value="lemon">Lemon</option>
 5    </optgroup>
 6    <optgroup label="Berries">
 7        <option value="strawberry">Strawberry</option>
 8        <option value="blueberry">Blueberry</option>
 9    </optgroup>
10</select>

• Tag <optgroup> służy do grupowania powiązanych elementów razem. Atrybut label umożliwia ustawienie nazwy grupy, co zapewnia przejrzyste opcje dla użytkowników, nawet jeśli lista jest długa.

<label> tag

1<label for="username">Username:</label>
2<input type="text" id="username" placeholder="Enter your username">

• Znacznik <label> definiuje etykiety dla pól wejściowych, pól wyboru i przycisków radiowych, co poprawia użyteczność i dostępność.
• Na przykład kliknięcie etykiety może przenieść fokus na pole wprowadzania lub przełączać stan pola wyboru.

Tag <fieldset>

1<fieldset>
2    <legend>Personal Information</legend>
3    <label for="name">Name:</label>
4    <input type="text" id="name" placeholder="Enter your name">
5</fieldset>

• Znacznik <fieldset> grupuje powiązane elementy formularza, a znacznik <legend> zapewnia tytuł dla grupy.

<button> tag

1<button type="button">Button</button>
2<button type="submit" name="action" value="send">Submit</button>
3<button type="reset">Reset</button>

• Znacznik <button> definiuje klikalny przycisk, który wywołuje przesłanie formularza lub inne działania.

  Jeśli określono type="button", działa ono jako zwykły przycisk. Kliknięcie go nie przesyła formularza ani nie wywołuje żadnych innych domyślnych akcji. Używa się go, gdy chcesz ustawić niestandardowe akcje za pomocą JavaScript.

  Jeśli określono type="submit", działa ono jako przycisk przesyłania formularza. Po kliknięciu tego przycisku formularz, który go zawiera, zostanie przesłany.

  Jeśli określono type="reset", działa ono jako przycisk resetowania formularza. Kliknięcie go zresetuje wszystkie pola wejściowe w formularzu i przywróci je do stanu początkowego.

  Jeśli atrybut type nie zostanie określony, niektóre przeglądarki mogą traktować go jako type="submit", dlatego zaleca się jawne określenie typu, aby zapewnić zamierzone działanie.

• Znacznik <button> może zawierać inne treści HTML pomiędzy otwierającym a zamykającym znacznikiem, co umożliwia tworzenie przycisków z ikonami lub złożonym tekstem.

• W przypadku przycisku do wysyłania z użyciem tagu <input>, wartość atrybutu value jest zawarta w danych formularza, ale w przypadku tagu <button> nie jest wysyłana domyślnie.

  Określając atrybuty name i value dla tagu <button>, jego wartość może zostać przesłana jako dane formularza.

Tag <datalist>

1<input list="browsers" name="browser">
2<datalist id="browsers">
3    <option value="Chrome">
4    <option value="Firefox">
5    <option value="Safari">
6</datalist>

• Tag <datalist> dostarcza listę możliwych opcji do wyboru dla elementu <input>. Użytkownicy mogą wybrać z listy lub wprowadzić własną wartość.

Tag <output>

1<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
2    <input type="range" id="a" value="50"> +
3    <input type="range" id="b" value="50"> =
4    <output name="result" for="a b">100</output>
5</form>

• Tag <output> wyświetla wynik obliczeń lub interakcji użytkownika. Jest używany do dynamicznego wyświetlania wyników obliczeń w formularzach lub skryptach.
• Dla atrybutu for określ identyfikatory elementów formularza, które chcesz powiązać, oddzielone spacjami.

Tag <progress>

1<progress value="70" max="100">70%</progress>

• Tag <progress> pokazuje użytkownikom postęp zadania. Na przykład może wizualnie pokazywać postęp pobierania pliku lub instalacji.

Tag <meter>

1<meter value="0.6">60%</meter>

• Tag <meter> reprezentuje pomiar liczbowy w znanym zakresie. Jest używany do wyświetlania pomiarów, takich jak użycie dysku lub wskaźnik poziomu paliwa w określonym zakresie.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video