Artykuł
10/11/2011

Samouczek: Znacznik input w HTML - Kurs HTML i CSS

Autor: Jakub Mytko

Opublikowano: 2011-10-10

Znacznik input w HTML wykorzystywany jest na stronach WWW w formularzach, które umożliwiają interakcję: użytkownik – twórca strony. Inaczej mówiąc, służą do pobrania danych od użytkownika i przekazania ich w miejsce wskazane w formularzu.

W naszym przykładzie wykorzystamy różne typy znacznika input w celu wykonania prostego formularza do rejestracji użytkownika na stronie oraz poznamy jego atrybuty.

Przed wykonaniem zadań powinieneś wiedzieć:

Jak wygląda szablon strony HTML.

Po wykonaniu zadań nauczysz się:

wykorzystywać różne typy znacznika input,
posługiwać się wybranymi atrybutami znacznika input.

Implementacja

Utworzymy wspólnie prosty formularz do umieszczenia na stronie, dzięki któremu będziesz mógł w łatwy sposób wpisać niezbędne dane do rejestracji. Dla uproszczenia dane zostaną przesłane na adres e-mail. Efekt końcowy został przedstawiony na Rys. 1.

Rys. 1. Efekt końcowy.

Przygotowanie strony

Przygotujemy szkielet strony internetowej. Jeśli będziesz miał problem z tym zadaniem, zobacz pierwszą część kursu Pierwsza strona internetowa.

Otwórz edytor HTML i utwórz szkielet strony wraz z ramami formularza.

<html>
    <head>
        <title>Znacznik input w HTML</title>
    </head>
    <body>
        <form action="mailto:twoj_adres_email" method="post"></form>
    </body>
</html>

W znaczniku action w miejsce twój_adres_email wpisz swój własny adres e-mail.
Zapisz plik pod nazwą index.html i otwórz w przeglądarce internetowej. Sprawdź, czy tytuł strony jest taki, jaki chcieliśmy. Jeżeli tak – możemy przejść do kolejnego kroku.

Pole typu tekstowego

Pole typu tekstowego wykorzystuje się po to, aby umożliwić wpisanie użytkownikowi ciągu znaków.

Dodaj pierwsze pola formularza – imię i nazwisko.

Wewnątrz formularza wpisz:

Imię: <br /><input type="text" name="imie" value="wpisz swoje imię" /><br />

Informacja

Atrybut name określa nazwę zmiennej, której przypisana jest wartość wpisana przez użytkownika. Atrybut value nie jest tutaj niezbędny, gdyż określa on wartość początkową pola. W przypadku pól typu button lub submit wartość atrybutu value stanowi ich etykietę.

W ten sam sposób dodaj pole, umożliwiające wpisanie nazwiska.
— Aby zachować przejrzystość formularza, nie zapomnij o znaczniku <br /> – przejście do następnej linii.
Do obydwu dodanych poprzednio znaczników dodaj atrybut size – wielkość pola mierzona jest w znakach.
— Wartość atrybutu ustaw według własnego uznania.
Zapisz plik index.html i sprawdź, czy wygląda tak, jak na Rys. 2.

Plik-html-po-dodaniu-podstawowych-pol.jpg

Rys. 2. Plik index.html po dodaniu podstawowych pól.

Odśwież plik index.html w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 3.

Rys. 3. Widok formularza z podstawowymi polami w przeglądarce.

Pole typu radio

Pole tego typu wykorzystywane jest w celu umożliwienia użytkownikowi wyboru tylko jednej z podanych opcji.

Dodaj pola, umożliwiające wybranie płci przez użytkownika.

Wpisz:

Płeć:<br />
M:<input type="radio" name="plec" value="mężczyzna" />
K:<input type="radio" name="plec" value="kobieta" /> <br />

Pole typu checkbox

Pole tego typu wykorzystywane jest w celu umożliwienia użytkownikowi wyboru jednej, kilku, wszystkich bądź żadnej z podanych opcji.

Dodaj pola, umożliwiające wpisanie zainteresowań.

Wpisz:

Zainteresowania: <br />
<input type="checkbox" name="zainteresowania" value="sport" /> Sport
<input type="checkbox" name="zainteresowania" value="literatura" /> Literatura<br />
<input type="checkbox" name="zainteresowania" value="kino" /> Kino
<input type="checkbox" name="zainteresowania" value="muzyka" /> Muzyka <br />

Informacja

Istnieje możliwość początkowego domyślnego zaznaczenia jednego z pól. W tym celu, wewnątrz znacznika input, należy dodać atrybut checked="". Dotyczy to pól typu radio oraz checkbox.
W polach typu radio lub checkbox, w obrębie jednego wyboru, wartość atrybutu name musi być taka sama.

Zapisz plik index.html i sprawdź, czy wygląda tak, jak na Rys. 2.

Rys. 2. Plik index.html po dodaniu pól typu radio i checkbox.

Odśwież plik index.html w przeglądarce i sprawdź, czy wygląda tak, jak na Rys. 3.

Rys. 3. Widok formularza po dodaniu pól typu radio i checkbox.

Pole typu password

Pole typu password umożliwia maskowanie, wprowadzanego przez użytkownika, ciągu znaków za pomocą gwiazdek. Należy pamiętać, iż nie oznacza to szyfrowania hasła, a jedynie uniemożliwienie jego podejrzenia przez osoby postronne podczas wpisywania.

Dodaj pola potrzebne do logowania – login oraz hasło.

Dodaj pole login typutext. Przed znacznikiem, zamykającym formularz, dodaj:

Login:<br /><input type="text" name="login" maxlength="10" /><br />

Dodaj pole login typu password. Po polu login dodaj:

Hasło:<br /><input type="password" name="haslo" /><br />

Pole typu submit

Pole typu submit to przycisk, po naciśnięciu którego wykonuje się akcja, zadeklarowana w znaczniku otwierającym form.

Dodaj przycisk wysyłający formularz.

Przed znacznikiem zamykającym formularz dodaj:

<input type="submit" name="submit" value="Załóż konto" />

Zapisz zmiany w pliku index.html, odśwież go w przeglądarce i porównaj efekt z Rys. 1.

Strona końcowa

Poniżej możesz zobaczyć końcowy kod strony HTML:

<html>
    <head>
        <title>Znacznik input w HTML</title>
    </head>
    <body>
        <form action="mailto:twoj_adres_email" method="post">
            Imię: <br /><input type="text" name="imie" value="wpisz swoje imię" /><br />
            Nazwisko: <br /><input type="text" name="nazwisko" value="wpisz swoje nazwisko" /><br />
            Płeć:<br />
            M:<input type="radio" name="plec" value="mężczyzna" />
            K:<input type="radio" name="plec" value="kobieta" /> <br />
            Zainteresowania: <br />
            <input type="checkbox" name="zainteresowania" value="sport" /> Sport
            <input type="checkbox" name="zainteresowania" value="literatura" /> Literatura<br />
            <input type="checkbox" name="zainteresowania" value="kino" /> Kino
            <input type="checkbox" name="zainteresowania" value="muzyka" /> Muzyka <br />
            Login:<br /><input type="text" name="login" maxlength="10" /><br />
            Hasło:<br /><input type="password" name="haslo" /><br />
            <input type="submit" name="submit" value="Załóż konto" />
        </form>
    </body>
</html>

Podsumowanie

W tym artykule nauczyliśmy się wykorzystywać różne typy znacznika input oraz poznaliśmy jego najważniejsze atrybuty. Dowiedzieliśmy się, że znacznik ten jest wykorzystywany przy budowie formularzy HTML. Poznaliśmy również, jakie typy pól są odpowiednie dla pobierania informacji określonego typu.

Istnieją jeszcze inne typy pól, takie jak np. file, które służy do załączania plików do formularza. Konieczna jest jednak dodatkowa obsługa takiej czynności. Ponadto, lista atrybutów jest dłuższa, niż zademonstrowana. Używane są one jednak rzadko, w bardziej złożonych przypadkach.

W kolejnym artykule nauczymy się więcej o polach w formularzu HTML.

Dodatkowo zobacz:

Jak zmienić wygląd input type=text