Live
x
<html> <head> <title>Formularze</title> <style> /* Wyświetl pola "klikalne" inaczej niż tekstowe. <label> lepiej umieścić obok checkboxa niż nad nim. */ input:not([class="box"]) { display: block; margin-bottom: 20px; } /* <input> który posiada błędne dane będzie posiadał czerwone obramowanie. */ input:invalid { border: 2px solid red; } </style> </head> <body> <h1>Pola formularza</h1> <form> <!-- Domyślne pole tekstowe. --> <label for="name">Imię (tekst):</label> <input id="name" name="name" type="text" /> <!-- Pole tekstowe z placeholderem. --> <label for="surname">Nazwisko (tekst):</label> <input id="surname" name="surname" type="text" placeholder="Podaj nazwisko..." /> <!-- Email - podstawowa walidacja robiona przez przeglądarkę. --> <label for="email">Email:</label> <input id="email" name="email" type="email" /> <!-- Password - ukryte znaki --> <label for="password">Hasło:</label> <input id="password" name="password" type="password" /> <!-- Number - tylko liczby. Możliwa inkrementacja o dowoloną wartość, domyślnie 1 --> <label for="number">Wiek (zmiana wartości o 1):</label> <input id="number" name="number" type="number" /> <!-- Naciśnięcie strzałek zmieni wartość o 100. --> <label for="number_2">Rok (zmiana wartości o 100):</label> <input id="number_2" name="number_2" type="number" step="100" /> <!-- Mamy również możlwiość ustawić min i max wartość a także wartość domyślną. --> <label for="number_3">Data urodzenia (min/max):</label> <input id="number_3" name="number_3" type="number" min="1900" max="2021" value="2010" /> <!-- File - upload pliku. --> <label for="file">Plik</label> <input id="file" name="file" type="file" /> <!-- Możemy pozwolić na upload wielu plików. --> <label for="file_2">Kilka plików</label> <input id="file_2" name="file_2" type="file" multiple /> <!-- Możemy ograniczyć upload tylko do wybranych formatów plików. --> <label for="file_3">Tylko pliki pdf i png</label> <input id="file_3" name="file_3" type="file" accept=".pdf, .png" /> <!-- Radio - wybór jednokrotny. --> <h3>Ulubiony kolor (radio):</h3> <!-- Każdy <input> musi mieć tan sam atrybut "name". Dzięki temu wiemy, że są to możliwe odpowiedzi na to samo pytanie. Każy <input> musi posiadać atrybut "value" - to ta wartość zostanie wysłana jako odpowiedź. --> <input class="box" id="red" name="color" type="radio" value="red" /> <label for="red">Czerwony</label><br /> <!-- Znacznik <input> może wystąpić przed <label>. Ważne, aby atrybut "for" wskazywał właściwy <input> --> <input class="box" id="blue" name="color" type="radio" value="blue" /> <label for="blue">Niebieski</label><br /> <input class="box" id="black" name="color" type="radio" value="black" /> <label for="black">Czarny</label> <!-- Checkbox - wybór wielokrotny. --> <h3>Ulubiony kolor (checkbox):</h3> <!-- Każdy <input> musi mieć tan sam atrybut "name". Dzięki temu wiemy, że są to możliwe odpowiedzi na to samo pytanie. Każy <input> musi posiadać atrybut "value" - wszystkie zaznaczone pola zostaną wysłane jako odpowiedź. --> <input class="box" id="red2" name="color2" type="checkbox" value="red" /> <label for="red2">Czerwony</label><br /> <!-- Za pomocą atrybutu "checked" możemy domyślnie zaznaczyć dowolne pole. Tak samo działa to w przypadku przycisków "radio". --> <input class="box" id="blue2" name="color2" type="checkbox" value="blue" checked /> <label for="blue2">Niebieski (zaznaczony domyślnie)</label><br /> <input class="box" id="black2" name="color2" type="checkbox" value="black" /> <label for="black2">Czarny</label> <!-- Date - wybór daty. --> <h3>Data i czas</h3> <label for="date">Data</label> <input id="date" name="date" type="date" /> <label for="date">Czas</label> <input id="time" name="time" type="time" /> <label for="dateTime">Data + czas</label> <input id="dateTime" name="dateTime" type="datetime-local" /> <!-- Color - wybór koloru. --> <h3>Kolor</h3> <label for="color">Wybierz kolor</label> <input id="color" name="color" type="color" /> <!-- Range - wybór zakresu, czyli dwóch wartości - początkowej i końcowej. --> <h3>Zakres</h3> <label for="range">Wybierz zakres (np. ceny)</label> <!-- Opcjonalnie możemy podać wartość min, max oraz domyślną (tutaj = 200)--> <input id="range" name="range" type="range" min=10 max=1000 value="200" /> <!-- Poniższy fragment umożliwia wyświetlenie wartości suwaka (trochę JavaScript umieszczonego na tagu HTML) --> <input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value"> <output>24</output> <!-- Nr telefonu - na urządzeniach mobilnych wyświetli nam się klawiatura numeryczna. --> <h3>Telefon</h3> <label for="tel">Podaj nr telefonu:</label> <input id="tel" name="tel" type="tel" /> <!-- Pełny adres URL. --> <h3>Adres URL</h3> <label for="url">Podaj adres URL:</label> <input id="url" name="url" type="url" /> </form> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.