Ćwiczenie 4 xhtml
Transkrypt
Ćwiczenie 4 xhtml
XHTML – formularze Ćw.1 – Przykład formularza w xhtml a) Przeanalizować poniŜszy plik z kodem przykładowego formularza. W formularzu wykorzystano moŜliwość grupowania elementów (znaczniki fieldset i legend), opis etykiet dla pół tekstowych (label for) oraz listę rozwijaną (select) z opcjami głównymi i podpocjami (optgroup label). Widok formularza bez css przedstawia rysunek poniŜej). <form action="..." method="get"> <fieldset> <!--Pierwsza grupa pól formularza --> <legend>Pola tekstowe</legend> <!-- Opis pierwszej grupy pól--> <label for="imie">Imie: </label> <!--Etykieta pola tekstowego--> <input type="text" id="imie"/><br/> <label for="nazwisko">Nazwisko: </label> <input type="text" id="nazwisko"/><br/> Pole bez label: <input type="text"/><br/> </fieldset> <!-- koniec 1 grupy pól--> <p></p> <fieldset> <!--Druga grupa pól formularza --> <legend>Pola wyboru</legend> <!-- Opis drugiej grupy pól--> <select> <optgroup label="Systemy operacyjne"> <!--Opcja 1 --> <!--Podopcje dla opcji 1:--> <option label="windows" value="w">System Windows</option> <option label="unix" value="u">System Unix</option> </optgroup> <!-- Koniec opcji 1 --> <optgroup label="Procesor"> <!--Opcja 2 --> <!--Podopcje dla opcji 2:--> <option label="intel" value="i">Procesor Intel</option> <option label="amd" value="a">Procesor Amd</option> </optgroup> <!--Koniec opcji 2 --> </select> </fieldset><!-- koniec 2 grupy pól--> <p> <input type="submit" value=" wyślij dane "/> </p> </form> b) Dla formularza zastosować poniŜsze reguły css (idok z css na rysunku obok): body { font-size:small } * html body { font-size:x-small; /* dla IE5/Win */ f\ont-size:small: /*dla pozostałych IE*/ } fieldset { background:lightgreen; text-align:center; border-style:double; border-color:darkgreen } legend { font-weight:bold; } label{ font-size:120% } select { background-color:lightyellow } p{ text-align:center; } Ćw.2. a) Na podstawie ćwiczenia 1 i materiałów wykładowych wygenerować formularz form.xhtml (bez css) przedstawiony na rysunku (str.2) b) Opracować odpowiedni arkusz css XHTML – formularze c) Rozbudować ofertę sklepu o MAKARONY, które naleŜy umieścić jako dodatkowy wybór na liście select (uwaga – przy rozszerzeniu .html – nie działa prawidłowo – nie widać opcji grupujących):