Udostępnij za pośrednictwem

  • Artykuł

          

Encyklopedia: Jak dodać pola w formularzu - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Jakub Mytko

Opublikowano: 2011-10-06

Formularz HTML ułatwia kontakt pomiędzy użytkownikiem a właścicielem strony. Umożliwia nie tylko napisanie wiadomości lub zadanie pytania, ale również pobranie określonych danych, dotyczących użytkownika, na przykład danych personalnych i zainteresowań.

Każde pole w formularzu służy do przekazania określonego typu danych. Znacznik input, za pomocą którego dodaje się niektóre pola, przyjmuje następujące wartości atrybutu type:

  • text – pole, umożliwiające wpisanie jednej linijki tekstu, najczęściej stosowane jest przy podawaniu prostych danych, np. imienia lub nazwiska. (Rys. 1.)

Rys. 1. Wygląd pola input type=text.

  • radio – pole, umożliwiające wybranie jednej z kilku możliwości, stosowane jest np. w celu określenia przez użytkownika swojej płci. (Rys. 2.)

Rys. 2. Wygląd pól input type=radio.

  • checkbox – pole, umożliwiające wybranie kilku, wszystkich bądź żadnej opcji z podanych możliwości, stosowane jest np. w celu określenia przez użytkownika zainteresowań. (Rys. 3.)

Rys. 3. Wygląd pól input type=checkbox.

  • password – pole, które maskuje wpisany tekst za pomocą gwiazdek lub kropek, stosowane jest np. w celu określenia hasła, pole to nie szyfruje wpisanych danych, a jedynie uniemożliwia jego podglądnięcie innym osobom podczas wpisywania. (Rys. 4.)

Rys. 4. Wygląd pola input type=password.

  • file – pole, umożliwiające dodanie pliku, znajdującego się na dysku użytkownika, w tym przypadku konieczna jest dodatkowa obsługa tej czynności, np. w ASP.NET. (Rys. 5.)

Rys. 5. Wygląd pola input type=file.

Istnieje również pole, umożliwiające wpisanie dłuższego tekstu (Rys. 6.). W tym celu należy umieścić znaczniki <textarea> i </textarea>. Aby określić szerokość pola w postaci liczby znaków, dodaje się atrybut cols, natomiast, aby określić wysokość w postaci liczby wierszy – atrybut rows.

Rys. 6. Wygląd pola tekstowego.

Listę rozwijalną (Rys. 7.) dodaje się za pomocą użycia znacznika select, wewnątrz którego dodaje się kolejno opcje za pomocą znacznika option. Możliwe jest również nadanie opcjom kategorii. Służy do tego znacznik optgroup, wewnątrz którego umieszcza się atrybut label, jego wartość stanowi nazwę kategorii.

<select name="lista" size="1">
<optgroup label="Kategoria 1">
<option>Opcja 1</option>
</optgroup>
…
</select>

Atrybut size określa liczbę opcji, które mają być jednocześnie widoczne w polu listy (domyślnie ustawiona jest wartość 1).

Rys. 7. Wygląd rozwiniętej listy z kategorią opcji.

Innym rodzajem pól są przyciski, w tym m.in. przycisk umożliwiający wysłanie danych z formularza. Więcej o przyciskach można przeczytać w części encyklopedii Jak umieścić przyciski w formularzu.

Przykład

Przykład umieszczenia pól opisanych w formularzu:

<html>
    <head>
    <title>Pola w formularzu HTML</title>
    </head>
    <body>
        <form action="mailto:adres@email.pl" method="post">
        <input type="text" name="imie" value="Podaj imię"/><br />
        Płeć: 
            <input type="radio" name="kobieta" /> K
            <input type="radio" name="mezczyzna" /> M <br />
        Zainteresowania:<br />
            <input type="checkbox" value="sport" name="zai" />sport<br />
            <input type="checkbox" value="kino" name="zai" />kino<br />
            <input type="checkbox" value="kino" name="zai" />literatura<br />
        <input type="password" name="haslo" value="password" /><br />
        <input type="file" name="plik" /><br />
        Wykształcenie: 
        <select>
            <option value="podstawowe">podstawowe</option>
            <option value="średnie">średnie</option>
            <option value="wyższe">wyższe</option>
        </select><br />
        <textarea name="opinia" cols="25" rows="3">Wpisz Twoją opinię</textarea>
        </form>
    </body>
</html>

Efekt działania przykładowego kodu przedstawiony został na Rys. 1.

Rys. 8. Różne pola formularza.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać formularze w samouczku: