Przykładowe formularze - część 1 - pola input

Definicja formularza

<form action="" method=""> 
    <!--treść formularza -->
</form>
<!-- action="adres" - gdzie wysyłamy formularz -->
<!-- method="post" - jaką metodą wysyłamy formularz post lub get -->

Formularz wysyłany na maila

atrybut action ustawiamy na: action="mailto:sample@gmail.com"

Otwiera domyślny program pocztowy w systemie

<form action="mailto:sample@gmail.com" method="post">
    <input type="text" name="imie" id="imie" value="Tomek">
    <input type="submit" value="Prześlij maila">
</form>

Pole INPUT

Najczęście używane pole formularza w zależności od atrybutu type="" może być wyświetlane w różny sposób.

Najbardziej ogólnym typem pola input jest type="text"

<form action="skrypt.php" method="post">
    <label for="imie1">Podaj imię: </label>
    <!-- Etykieta pola - opis powiązany z polem formularza -->
    <input type="text" name="imie1" id="imie1" value="Tomek" size="30" maxlength="20">
    <!--
        Atrybuty pola input
        type - typ pola
        name - nazwa pola, powinna być unikalna w danym formularzu, bardzo ważna dla skryptów przetwarzających formularz np. w PHP
        value - domyślna wartość pola, którą użytkownik może zmienić
        size - liczna znaków mieszczących się w widocznej części pola
        maxlength - maksymalna liczba znaków, które można wpisać do pola
    -->
    <input type="submit" value="Prześlij">
    <!--  type="submit" - tworzy przycisk wysyłający formularz -->
    <input type="reset" value="Prześlij">
    <!--  type="reset" - tworzy przycisk czyszczący dane z formularza (do wartości domyślnych)-->
</form>

Pole INPUT - type="submit" i type="reset"

Pole typu type="submit" tworzy przycisk służący do wysyłania formularza.

Pole typu type="reset" tworzy przycisk resetowania formularza do wartości domyślnych.

<form action="skrypt.php" method="post">
    <p>
        <label for="imie1">Podaj imię: </label>
        <input type="text" name="imie1" id="imie1" value="Tytus">
        <!-- ustawiona jest wartość domyślna value="Tytus" -->
    </p>
    <p>
        <label for="nazw1">Podaj nazwisko: </label>
        <input type="text" name="nazw1" id="nazw1">
        <!-- brak atrybutu value, więc wartość domyślna jest pusta -->
    </p>

    <input type="submit" value="Prześlij">
    <input type="reset" value="Wyczyść dane">
</form>

Pole INPUT - type="checkbox"

Pole typu type="checkbox" służy do zaznaczenia opcji, można go zaznaczyć lub odznaczyć. Jeśli pole nie jest zaznaczone, to nie jest wysyłane wraz z formularzem. Domyślna wartość pola zaznaczonego to value="on", można ustawić swoją własną wartość np value="tak".

<form action="skrypt.php" method="post">
    <p>
        <label for="imie2">Podaj imię: </label>
        <input type="text" name="imie2" id="imie2" value="Tomek">
    </p>

    <p>
        <label for="rodo">
            <input type="checkbox" name="rodo" id="rodo">Wyrażam zgodę na przetwarzanie moich danych osobowych
        </label>
        <!-- Zwróć na inne zastosowanie etykiety <label></label> jako elementu okalającego input -->
    </p>
    <input type="submit" value="Prześlij">
</form>

Pole INPUT - type="radio"

Pole typu type="radio" jest polem wyboru (jednokrotnego) z grupy opcji. Kliknicie danej wartości powoduje jej zaznaczenie i jednoczesne odznaczenie opcji wcześniej zaznaczonej.

Zwróć uwagę, że wszystkie opcje mają ten sam atrybut name="wykszt"

<form action="skrypt.php" method="post">
    <p>Wykształcenie:</p>

    <input type="radio" id="wykszt1" name="wykszt" value="podstawowe">
    <label for="wykszt1">Podstawowe</label><br>

    <input type="radio" id="wykszt2" name="wykszt" value="srednie">
    <label for="wykszt2">Średnie</label><br>

    <input type="radio" id="wykszt3" name="wykszt" value="wyzsze">
    <label for="wykszt3">Wyższe</label><br><br>

    <input type="submit" value="Prześlij">
</form>

Pole INPUT - type="password" i type="email" oraz required

Pole typu type="password" służy do wprowadzania hasła. Wpisywane litery są zastępowane kropkami.

Pole typu type="email" służy do wprowadzania adresu email, jeżeli jest nie puste to wymusza prowadzenie tekstu zgodnego z formatem adresu email.

Atrubut required dodany do pola formularza wymusza jego wypełnienie, jeżeli pole nie będzie wypełnione to formularz nie zostanie przesłany.

<form action="skrypt.php" method="post">
    <p>
        <label for="email">Podaj email: </label>
        <input type="text" name="email" id="email" value="tomek1234@gmail.com" required>
    </p>

    <p>
        <label for="haslo">Podaj hasło: </label>
        <input type="password" name="haslo" id="haslo" value="" required>   
    </p>
    <input type="submit" value="Prześlij">
</form>

Pole INPUT - type="hidden"

Pole typu type="hidden" jest ukryte - nie widoczne w formularzu, ale jego wartość jest przesyłana wraz z formularzem.

<form action="skrypt.php" method="post">
    <p>
        <label for="imie4">Podaj imię: </label>
        <input type="text" name="imie4" id="imie4" value="Tomek">
    </p>
    <input type="hidden" name="urodziny" value="2019-01-23">

    <input type="submit" value="Prześlij">
</form>

Pole INPUT - type="color"

Pole typu type="color" generuje tzw. color picker, wybranie koloru wstawia do pola wartość hex koloru np. #112233.

<form action="skrypt.php" method="post">
    <p>
        <label for="color">Wybierz kolor: </label>
        <input type="color" name="color" id="color" value="#112233">
    </p>

    <input type="submit" value="Prześlij">
</form>

Pole INPUT - type="number"

Pole typu type="number" służy do wprowadzania liczb całkowitych. Za pomocą dodatkowych atrybutów (min, max, step) można określić wartość minimalną, maksymalną i krok dla tego pola.

<form action="skrypt.php" method="post">
<p>
    <label for="liczba">Podaj liczbę z przedziału od 10 do 100 podzielną przez 5: </label>
    <input type="number" name="liczba" id="liczba" min="10" max="100" step="5" value="10">
</p>


<input type="submit" value="Prześlij">
</form>

Pole INPUT - type="date", type="time"

Pole typu type="date" służy do wpisywania daty.

Pole typu type="time" służy do wpisywania czasu (godziny, minuty).

<form action="skrypt.php" method="post">
    <p>
        <label for="data_urodzenia">Podaj datę urodzenia: </label>
        <input type="date" name="data_urodzenia" id="data_urodzenia">
    </p>
    <p>
        <label for="godzina_urodzenia">Podaj godzinę urodzenia: </label>
        <input type="time" name="godzina_urodzenia" id="godzina_urodzenia">
    </p>

    <input type="submit" value="Prześlij">
</form>

Pole INPUT - type="file"

Pole typu type="file" służy do przesyłania plików.

Żeby przesyłanie plików było możliwe konieczne jest dodanie enctype="multipart/form-data" do znacznika form

<form enctype="multipart/form-data" action="skrypt.php" method="post">
    <p>
        <label for="plik">Prześlij plik tekstowy: </label>
        <input type="file" name="plik" id="plik">
    </p>

    <input type="submit" value="Prześlij">
</form>