formularze w html5

Atrybuty formularza:

  • accept-charset – określa system kodowania znaków wprowadzanych do formularza, różne kodowania znaków oddzielamy spacją (nie przecinkiem czy średnikiem) – np. accept-charset=utf-8
  • action – rodzaj akcji uruchamiany po wciśnięciu 'Send’, np. przypisany adres url, skrypt lub adres email
  • autocomplete – zapisanie używanych słów w pamięci przeglądarki i ponowne ich wyświetlenie w podpowiedziach podczas uzupełniania pól, stany:
    • on (default)
    • off
  • enctype – sposób kodowania danych – przeważnie korzysta ze stanu domyślnego i pozostaje pusty, jego słowa kluczowe/stany:
    • application/x-www-form-urlencoded (default)
    • multipart/form-data – dla przesyłanych plików
    • text/plain – akceptuje zwykły tekst
  • method –
    • POST – gdy dane są pobierane i wysyłane, zgłaszanie długich żądań do serwera
    • GET – gdy dane są tylko pobierane<, zgłaszanie krótkich żądań do serwera/li>
  • name
  • novalidate – typ logiczny, nie weryfikuje wysyłanych elementów, np. <form novalidate>
  • target – kontekst wyszukiwania formularza w trakcie wysyłania, wartości:
    • _self (default)
    • _blank – przydatny gdy informacja ze skryptu po stronie serwera zastępuje zawartość na wzywającej stronie swoją zawartością. Użytkownik widzi wzywaną stronę i informację ze strony wzywającej
    • _parent
    • _top

elementy wejścia i jego atrybuty

Element będący dzieckiem formularza może znajdować się poza formularzem poprzez połączenie go z ID formularza:

<input type="text" form="formid" name="name">


<form id="formid">
</form>

Formularze w html5 – wartości dla elementów danych wejściowych:

  • button – przycisk akcji
  • checkbox – wybór opcji
  • color – wybór koloru
  • date – wybór daty
  • datatime – wybór daty/ czasu
  • datatime-local – wybór daty/ czasu lokalnego
  • email – adres e-mail
  • file – załadowanie pliku
  • hidden – ukryty
  • image – współrzedne obrazka
  • month – wybór daty
  • number – wartość numeryczna
  • password – wprowadzanie zakrytego hasła
  • radio – pola wyboru
  • range – zakres liczb
  • reset – czyszczenie wprowadzonych danych
  • search – szukanie słowa
  • submit – wysłanie formularza
  • tel – numer telefonu
  • text – pole tekstowe
  • time – wybór godziny
  • url – adres strony
  • week – wybór daty

 

Formularze w html5 – atrybuty elementu danych wyjściowych:

  • accept – akceptacja rodzaju pliku
  • alt – podpowiedź podczas ładowania pliku
  • autocomplete – dokańcza wpisaną zawartość
  • autofocus – uaktywnia pole
  • checked – stan wybranej opcji
  • disabled – nie aktywne pole
  • form – id formularza
  • formaction – nadpisanie formularza
  • formenctype – nadpisanie formularza
  • formmethod – nadpisanie formularza
  • formnovalidate – nadpisanie formularza
  • formtarget – nadpisanie formularza
  • height – wysokość [px]
  • list – lista danych z podpowiedzią
  • max – wartość maksymalna
  • maxlenght – długość maksymalna
  • min – wartość minimalna
  • multiple – wielowartościowość
  • name – nazwa DOM
  • pattern – wyrażenie regularne
  • placeholder – podpowiedz pola znikająca podczas wpisywania wartości
  • readonly – tylko do odczytu
  • required – wymagane wypełnienie
  • size – widoczny znak cyfry
  • src – źródło
  • step – liczba kroków
  • type – rodzaj danych
  • value – wartość
  • width – szerokość [px]

type=”number” – kontrolki spinner do zwiększania/zmniejszania wartości wpisanej w pole

 

np.:


<input type="checkbox" name="news" checked/>

Pola Formularza:

  • input, type=
    • text– pole tekstowe
    • search – pole tekstowe do wpisania słów szukanych, po wprowadzeniu treści pojawia się ikona x do usunięcia wpisanej treści
    • tel – numer telefonu
    • url – adres strony
    • email – adres email
    • datetime – pole do wprowadzenia liczby daty i czasu dla strefy UTC w formacie rrrr-mm-ddThh:mmZ
    • date – liczba daty w formacie: rrrr-mm-dd
    • mounth – liczba daty w formacie rrrr-mm
    • week – liczba daty w formacie rrrr-numer tygodnia
    • time – liczba czasu w formacie ff:mm:ss
    • datetime-local – liczba daty w formacie rrrr-mm-ddThh:mm
    • number – liczba, pole z opcjami + / – do łatwiejszej nawigacji
    • range – zakres, suwak wartości liczbowej, atrybuty:
      • min
      • max
      • step
    • color – format koloru sRGB, paleta kolorów
    • image – przycisk graficzny z własnym elementem graficznym, atrybuty:
      • alt – tekst alternatywny
      • src – źródło obrazka
    • checkbox – opcje zaznaczenia, możliwość zaznaczenia wielu opcji
    • radio – opcje zaznaczenia, tylko jedna możliwość do wyboru, wszystkie opcje muszą mieć ten sam atrybut name
    • password – wprowadzenie hasła, tekst zamieniany na gwiazdki
    • file – załączenie pliku do formularza, atrybut:
      • multiple – zamieszczenie więcej niż jednego pliku
    • hidden – niewidoczne pole tekstowe
    • submit – wysłanie formularza, wykonanie action
    • reset – usunięcie zawartości pól formularza
    • button – przycisk

 

Atrybutu pól:

  • name
  • value
  • size –  widoczna ilość znaków
  • maxlenght – maksymalna ilość znaków do wprowadzenia w pole
  • list dla pola tekstowego z zawartą pod nim listą

<form>
 <input type="text" name="summit" list="summits">
 <datalist id="sumits">
<option value="Everest">Everest</option>
<option value="Kilimanjaro">Kilimanjaro</option>
<option value="Denali">Denali</option>
 </datalist>
</form>

 

  • select – lista wyboru, atrybuty:
    • multiple – pozwala na wybranie kilku opcji
    • size – ilość pozycji listy widocznych na ekranie

podział na kategorie dzięki znacznikowi <optgroup> z atrybutem label wyświetlającym w liście opis grupy.

 

  • textarea – wprowadzanie większej ilości treści
<textarea name="description" rows="10" cols="50">Write something to me</textarea>

 

atrybuty pola textarea:

  • rows – wielkość pola
  • cols – wielkość pola
  • autofocus – oznaczenie pola w chwili wczytania strony przez przeglądarkę
  • disabled – pole z wyłączoną edycja treści
  • required – pole wymagane
  • maxlenght – ograniczenie liczby znaków
  • placeholder – domyślny tekst
  • readonly – pole tylko do odczytu
  • wrap – określenie podziału treści wpisanej w pole, wartości:
    • hard – wymusza dodanie podziału wiersza
    • soft – tekst bez zmian

 

Znaczniki grupujące pola formularza:

  • fieldset
  • legend – etykieta pola fieldset
  • label – oznaczenie tekstu będącego opisem pola formularza, zamykając w nim znacznik <input /> lub zamieszczając go nad nim z atrybutem for
<label for="mountain">Mountain:</label>
<input type="text" id="mountain" />

 

  • meter – graficzny wskaźnik

<fieldset>

<legend>Elevation of Mountains</legend>



Mount Everest <meter min="6000" max="10000" value="8848"></meter>



Mount Everest <meter min="0%" max="100%" value="88%"></meter>

</fieldset>
  • progress – graficzna reprezentacja funkcji JavaScript odpowiedzialnej m.in. za upływ czasu


Progress: <progress id="progress" max="100">0%</progress>
  • output – zwraca wynik obliczeń

<form onsubmit="return flase">
 <input name="a" type="number" step="any"> + 
 <input name="b" type="number" step="any"> =
 <output onforminput="value a.valueAsNumber + b.valueAsNumber"></output>
</form>

 

CSS:

input[type=”radio”] {

}
input[type=”text”].focus, input[type=”text”]:focus {

}

 


<form enctype="multipart/form-data" action="kontakt.php" method="post" id="searchForm" >
<p>
<input type="text" name="login" size="25" maxlength="25" class="wpis-search" value="wpisz szukaną frazę"/>
<input type="submit" name="search" value="" class="wyslij-search"/>
</p>
</form>
<input type="text" name="lokalizacja" value="gmina" class="pole-1 required"
onfocus="if (this.value=='gmina') { this.value=''; }"
onblur="if (this.value=='') { this.value='gmina'; }" />

–

#form#html5