Formularze

Zadanie 1. #

Utwórz plik o nazwie wyslij_komentarz.html i umieść w nim formularz w elemencie fieldset. Formatowanie tekstu dla całego dokumentu: czcionka Calibri o wielkości 16px. Pola formularza powinny mieć utworzone odpowiadające im etykiety tekstowe. Formatowanie poszczególnych elementów formularza:

• Kontener fieldset: szerokość 300px, margines wewnętrzny 20px. Dodatkowo element ten ma być wyśrodkowany w poziomie.
• Pole textarea: kolor tła aliceblue, obramowanie 1px w kolorze czerwonym, czcionka Courier New, wysokość 50px, szerokość 100%.
• Pole tekstowe: kolor tła aliceblue, obramowanie 1px w kolorze steelblue, czcionka Courier New, szerokość 100%.
• Przycisk wysyłania formularza: kolor tła lightblue, obramowanie 2px w kolorze steelblue, margines wewnętrzny 5px. Dodatkowo po najechaniu kursorem na przycisk wysyłania, ma on zmieniać tło na kolor aliceblue.

Zadanie 2. #

Utwórz plik wymogi_dla_hasel.html i ustaw w nim czcionkę Lucida Console oraz lewy margines o szerokości 50 pikseli. W dokumencie umieść nagłówek drugiego stopnia z tekstem Wymagania dotyczące złożoności hasła. Poniżej wstaw formularz zawierający listę nieuporządkowaną oraz przycisk wysyłania formularza. Lista ma składać się z trzech elementów, punktorem listy jest dowolny obrazek o wymiarach około 45x45 pikseli. Zawartość elementów listy:

• Pierwszy element: opis i siedem elementów radio z etykietami, etykiety powiązane z radio
• Drugi element: opis i trzy elementu checkbox z etykietami, etykiety powiązane z checkbox
• Trzeci element: opis i dwadzieścia sześć elementów checkbox z etykietami, etykiety powiązane z checkbox

Wewnątrz formularza, ale pod listą umieść przycisk wysyłający formularz. Przycisk bez obramowania, jako tło ustaw obrazek używany w liście, z tym, że obrazek ma być tylko jeden (bez powielania). Na przycisku ma być tekst OK. Przykładowy wygląd formularza:

Zadanie 3. #

Przygotuj plik rejestracja_dziecka.html z formularzem. Formularz powinien znajdować się w tabeli rozsuniętej na całą szerokość strony, składającej się z trzech wierszy i sześciu kolumn. Kolumny powinny być równej szerokości, wszystkie komórki z obramowaniem 1px w kolorze jasnoszarym, margines wewnętrzny 15px. W nieparzystych kolumnach tekst musi być wyrównany do prawej strony.

Formularz powinien umożliwiać wprowadzenie i wysłanie następujących informacji:

• Imię (pole tekstowe, obowiązkowe)
• Drugie imię (pole tekstowe)
• Nazwisko (pole tekstowe, obowiązkowe)
• Data urodzenia (pole z datą, obowiązkowe)
• Miejscowość urodzenia (pole tekstowe, obowiązkowe)
• Województwo urodzenia (rozwijana lista jednego wyboru z szesnastoma nazwami województw, pierwsza opcja pusta, pole obowiązkowe)

Każde pole, które jest obowiązkowe powinno mieć czerwoną gwiazdkę przy etykiecie. Każde pole formularza powinno mieć powiązaną z nim etykietę tekstową. Ostatni wiersz tabeli powinien mieć scalone komórki i na środku ma się znajdować przycisk wysyłania formularza.

Zadanie 4. #

Przygotuj plik szukanie_samochodu.html z ładnym formularzem. Formularz powinien znajdować się w tabeli składającej się z dwóch wierszy i pięciu kolumn. Tabela powinna być rozszerzona na 100% szerokości strony, obramowania scalone. W drugiej i piątej kolumnie scalone wiersze. W komórkach tabeli ma być tylko ramka lewa o szerokości 3px, w kolorze blueviolet. Margines wewnętrzny w komórkach tabeli g/d: 10px, p/l: 20px. Przed każdym polem formularza znajduje się element <label> powiązany z danym polem. Szczegóły pól formularza:

• Marka – pole tekstowe, obowiązkowe
• Model – pole tekstowe
• Typ nadwozia – lista wielokrotnego wyboru z pięcioma wartościami (patrz obrazek), obowiązkowa
• Miesiąc i rok produkcji
• Rodzaj paliwa – rozwijana lista jednego wyboru z pięcioma wartościami (patrz obrazek)
• Przebieg – suwak z wartościami od 25 000 do 250 000 i krokiem co 25 000, obok element <output> wyświetlający aktualną wartość z suwaka
• Cena do – suwak z wartościami od 2 000 do 500 000 i krokiem co 1 000, obok element <output> z informacją jaka wartość została wybrana

Zadanie 5. #

Utwórz plik kolorowy_formularz.html i ustaw w nim kolor tła papayawhip, czcionkę Arial oraz rozmiar czcionki 1rem. W pliku umieść tabelę o szerokości 400px. W komórkach tabeli ustaw obramowanie o szerokości 1 piksel, linią ciągłą w kolorze goldenrod, margines wewnętrzny 10px i tekst wyśrodkowany. Obramowanie w tabeli ma być scalone. Zawartość tabeli:

• w pierwszym wierszu: dwa pola tekstowe z atrybutem placeholder
• w drugim wierszu: element typu range z wartością początkową –10, końcową 0 i krokiem 0,1. W komórce obok ma być wyświetlana wartość z suwaka
• w trzecim wierszu: wielowierszowe pole do wprowadzania tekstu z liczbą kolumn ustawioną na 48, a wierszy na 5. Dodatkowo kolor tła ustaw jako sandybrown, kolor obramowania jako saddlebrown i promień obramowania na 2 piksele.
• w czwartym wierszu: pole typu search oraz pole tekstowe z elementem <datalist> i z trzema podpowiedziami: Jack, Wendy, Danny. Oba pola powinny mieć atrybut placeholder[li] [li]w piątym wierszu: dwa przyciski. Pierwszy wyświetlający okno alert z dowolnym tekstem. Drugi to przycisk typu reset.
• w szóstym wierszu: dowplny obrazek będący jednocześnie przyciskiem, o wymiarach 350x200 pikseli