Microsoft Word - 02_html

Kurs WIT

Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

Paweł Zawadzki (p.zawadzki@wit.edu.pl)

<form>

<input...>
<input...>
<input...>
<input...>
<textarea…>
<select…>
....

</form>

Struktura formularza:

Formularze w HTML

imię

nazwisko

miejscowość

kod

ulica

prześlij

Dzięki formularzom możliwe jest pobieranie danych, a nie tylko ich wyświetlanie.

Umieszczenie znacznika

<form>

w dokumencie html:

- na stronie możemy zawrzeć kilka formularzy

- niedopuszczalne jest zagnieżdżanie jednego formularza w innym formularzu

- wewnątrz formularza mogą znaleźć się inne obiekty takie jak tabele, rysunki itp.

Kurs WIT

Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

Paweł Zawadzki (p.zawadzki@wit.edu.pl)

Atrybuty formularza

Nazwa formularza

<form

name="nazwa_formularza"

dowolna nazwa, unikalna w obrębie strony

<form

name="ankieta"

<form

name="formularz"

Miejsce wysyłania danych

<form

action="adres_miejsca"

adres na który zostaną wysłane dane z formularza

najczęściej skrypt (plik) przetwarzający, rzadziej adres e-mail

<form

action="ankieta_zp.asp"

<form

action="skrypty/ankieta_zp.asp"

<form

action="http://www.ankieta.pl/ankieta_zp.asp"

<form

action="mailto:stanio@wit.edu.pl"

Metoda wysyłania danych

<form

method="get/post"

get:

o  dane dołączane do adresu podanego w action
o  tylko dane tekstowe
o  ograniczenie długości

post:

o dane przesyłane w odrębnym strumieniu
o także dane binarne

<form

method="post"

<form

method="get"

Kurs WIT

Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

Paweł Zawadzki (p.zawadzki@wit.edu.pl)

Pole tekstowe

Proste pole tekstowe

<input

type="text"

jedno z pól najczęściej spotykanych w formularzach

stosujemy je gdy oczekujemy krótkich danych tekstowych

<input type="text"

name="nazwa_pola"

nazwa unikalna w obrębie formularza

obowiązkowa dla każdego elementu

<input

type="text"

name="marka"

<input

type="text"

name="rok_produkcji"

<input type="text"

size="liczba_znaków"

wielkość pola wyrażona w znakach

<input type="text"

size="5"

<input type="text"

maxlength="liczba_znaków"

maksymalna liczba znaków, jaka może zostać wpisana w pole

wartość niezależna od size

<input type="text"

maxlength="10"

<input type="text"

value="wartość_domyślna_pola"

wartość domyślna dla pola (widoczna w momencie wyświetlenia pola)

użytkownik może ją modyfikować

<input type="text"

value="Jan Kowalski"

<input type="text"

value="Warszawa"

<input type="text"

disabled="disabled"

pole tylko do odczytu

dodatkowo wyłączone

<input type="text"

disabled="disabled"

Kurs WIT

Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

Paweł Zawadzki (p.zawadzki@wit.edu.pl)

Pole hasła

<input

type="password"

pole funkcjonuje podobnie jak pole tekstowe

modyfikacja polega na tym, iż dane w momencie ich wprowadznia
zamieniane są na znak typu "*"

<input

type="password"

name="nazwa_pola" size="…" maxlenght="…" />

<input

type="password"

name="haslo" size="5" maxlenght="10"/>

Przyciski radiowe

<input

type="radio"

przyciski zwykle umieszczamy jako grupę (przynajmniej dwa elementy)

pola stosujemy wówczas, gdy oczekujemy od użytkownika wyboru
jednej z wielu opcji

<input type="radio"

name="nazwa_pola"

<input type="radio"

name="nazwa_pola"

grupę tworzą pola o dokładnie tej samej nazwie

<input type="radio"

name="plec"

<input type="radio"

name="plec"

<input type="radio" name="nazwa"

value="wartosc_1"

<input type="radio" name="nazwa"

value="wartosc_2"

elementy w obrębie grupy powinny mieć różne wartości

wartość całej grupy to wartość zaznaczonego elementu

<input type="radio" name="plec"

value="kobieta"

<input type="radio" name="plec"

value="mezczyzna"

<input type="radio" name="nazwa"

value="1"

checked="checked"

<input type="radio" name="nazwa"

value="2" />

pierwszy element na liście będzie oznaczony domyślnie

<input type="radio" name="plec"

value="kobieta"

checked="checked"

<input type="radio" name="plec"

value="mezczyzna"

Kurs WIT

Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

Paweł Zawadzki (p.zawadzki@wit.edu.pl)

Przyciski typu checkbox

<input

type="checkbox"

przyciski możemy umieścić jako grupę, możemy także wykorzystać
pojedynczy element

pola stosujemy wówczas, gdy oczekujemy od użytkownika wyboru
jednej z wielu opcji lub wybory typu "tak/nie"

<input type="checkbox"

name="nazwa_pola"

<input type="checkbox"

name="nazwa_pola"

grupę tworzą pola o dokładnie tej samej nazwie

<input type="checkbox"

name="hobby"

<input type="checkbox"

name="hobby"

<input type="checkbox" name="nazwa"

value="wartosc_1"

<input type="checkbox" name="nazwa"

value="wartosc_2"

elementy w obrębie grupy powinny mieć różne wartości

wartość zaznaczonych elementów są przekazywane osobno

<input type=" checkbox " name="hobby"

value="sport"

<input type=" checkbox " name="hobby"

value="muzyka"

<input type=" checkbox " name="hobby"

value="tv"

<input type=" checkbox " name="nazwa"

value="1"

checked="checked"

<input type=" checkbox " name="nazwa"

value="2" />

<input type=" checkbox " name="nazwa"

value="3"

checked="checked"

pierwszy i trzeci element na liście będą oznaczone domyślnie

<input type="checkbox" name="hobby"

value="…"

checked="checked"

<input type="checkbox" name="hobby"

value="…"

<input type="checkbox" name="hobby"

value="…"

checked="checked"

Pole typu memo

<textarea>

…</textarea>

pole służy do wprowadzania dłuższych fragmentów tekstu

<textarea

name="nazwa_pola"

>…</textarea>

jak każde pole formularza także to musi posiadać nazwę

<textarea

name="opis_samochodu"

>…</textarea>

Kurs WIT

Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

Paweł Zawadzki (p.zawadzki@wit.edu.pl)

<textarea name="nazwa_pola">

wartość domyślna

</textarea>

wartość domyślna wprowadzana jest wprost jako wartość dla znacznika

<textarea

name="opis_samochodu"

>serwisowany, idealny</textarea>

<textarea name="nazwa_pola"

cols="liczba" rows="liczba"

>…</textarea>

cols: liczba kolumn

rows: liczba wierszy

<textarea name="opis_samochodu"

cols="25" rows="5"

>…</textarea>

Lista opcji (lista rozwijalna)

<select>

<option>

pozycja 1</option>

<option>pozycja 2</option>

<option>pozycja 3</option>

</select>

lista opcji to kombinacja znaczników:

o <select> - znacznik listy
o <option> - znacznik opcji

każdy z nich posiada odrębne atrybuty

<select

name="nazwa_listy"

lista w formularzu musi być nazwana

<select

name="wojewodztwo"

<select name="nazwa_listy"

size="liczba"

size to liczba opcji jaka będzie prezentowana na liście

typowa "lista rozwijalna" to wartość size="1"

<select name="wojewodztwo"

size="3"

<select name="nazwa_listy"

multiple="multiple"

ustawienie wartości multiple="multiple" pozwala na włączenie
możliwości wyboru więcej niż jednej pozycji na liście (+ ctrl, shift)

<select name="wojewodztwo"

multiple="multiple"

Kurs WIT

Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

Paweł Zawadzki (p.zawadzki@wit.edu.pl)

<option>

wartość opcji

</option>

wartość opcji może zostać ustawiona wprost jako wartość znacznika

<option>

mazowieckie

</option>

<option

value="wartosc_opcji"

wartość wyświetlana

</option>

dla opcji można ustawić także inną wartość niż wyświetlana na liście

<option

value="1"

mazowieckie

</option>

<option value="1">wartość 1</option>
<option value="2"

selected="selected"

>wartość 2</option>

<option value="3">wartość 3</option>

opcja druga będzie wybrana domyślnie

<option value="1">mazowieckie</option>
<option value="2"

selected="selected"

>świętokrzyskie</option>

<option value="3">podlaskie</option>

Przycisk typu submit

<input type=

"submit"

przycisk "submit" inicjuje wysyłanie danych z formularza

dane wysyłane są w miejsce zdefiniowane w action

w formularzu przycisków tego typu może być kilka

<input type="submit"

name="nazwa_przycisku"

nazwa przycisku nie jest wyświetlana

<input type="submit"

name="przesylka"

<input type="submit" name="nazwa"

value="wartosc_przycisku"

wartość przycisku jest wyświetlana jako jego etykieta

<input type="submit" name="przesylka"

value="Wyślij"

Kurs WIT

Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

Paweł Zawadzki (p.zawadzki@wit.edu.pl)

Przycisk typu reset

<input type=

"reset"

przycisk "reset" przywraca wartości domyślne dla pól formularza

w przypadku braku wartości domyślnej, pola są "czyszczone"

<input type="reset"

name="nazwa_przycisku"

nazwa przycisku nie jest wyświetlana

<input type="submit"

name="restart"

<input type="reset" name="nazwa"

value="wartosc_przycisku"

wartość przycisku jest wyświetlana jako jego etykieta

<input type="reset" name="przesylka"

value="Wyczyść "

Każdy z elementów formularza możemy uczynić niedostępnym dla użytkownika,

wstawiając do poszczególnych znaczników wprowadzających dane pole, parametr

disabled="disabled". Elementy takie zostaną dodatkowo oznaczone.

Należy też pamiętać o elementach typu "hidden", które mogą służyć do

przechowywania wartości (np. w przypadku konieczności zastosowania wielu

następujących po sobie formularzy).