Ć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):