21. Formularze - input, textarea

Wcześniej powiedzieliśmy sobie do czego służą formularze w HTML. Teraz zajmiemy się kontrolkami, czyli różnymi rodzajami pól w formularzu.

Kontrolka input: jest to kontrolka, która ma wiele wyglądów i sposobów działania. Wszystko opiera się na jej typie. My będziemy się zajmować na tej lekcji typem text i password. O innych typach powiemy sobie na późniejszych lekcjach.

Input o typie text pozwala nam na wpisanie znaków w pole. Pole to jest jednolinijkowe.

Kod który pokaże nam to pole wygląda następująco:

<input type="text" >

Nie trzeba zamykać znacznika.

Drugim typem który pozwala nam na wpisanie tekstu jest typ password. Wykorzystuje się ten tym wszędzie tam, gdzie trzeba pobrać najczęściej hasło od użytkownika, a nie chcemy, aby ktoś postronny podejrzał to hasło.

Wywołanie pola password:

<input type="password" >

Atrybuty znacznika input

atrybut

wartości

opis

type

text | radio | checkbox | password | hidden | submit | reset | button | image | file

Typ pola

type

color | date | datetime-local |email | month | number | range |search | tel | time | url | week

 

Dodatkowe typy, które są nowe w HTML5. Typy te nie są wspierane w starszych przeglądarkach – będzie się wyświetlać tekst.

name

<input type="tekst" name="imie" >

Określa nazwę pola. Wykorzystuje się ten atrybut do określenia w skrypcie obrabiającym dane co dane pole zawiera

readonly

<input type="tekst" name="imie" readonly>

Określa czy pole jest tylko do odczytu

disabled

<input type="tekst" name="imie" disabled>

Określa pole wyłączone

size

<input type="tekst" name="imie" size="40">

Określa ile znaków będzie widocznych w kontrolce

maxlength

<input type="tekst" name="imie" maxlength="40">

Określa ile znaków może użytkownik wpisać.

value

<input type="tekst" name="imie" value="Janek">

Określa startową wartość pola

 

Nowe atrybuty w HTML 5

autocomplete ( on | off )

<input type="tekst" name="imie" autocomplete="on">

Określa czy przeglądarka może uzupełnić formularz danymi, które użytkownik wpisał wcześniej. Działa z kontrolkami: text, search, url, tel, email, password, datepickers, range i color oraz form

novalidate

<form action="/action_page.php" novalidate>

</form>

Określa czy przeglądarka może sprawdzić dane wpisane przez użytkownika przed wysłaniem formularza

autofocus

<input type="tekst" name="imie" autofocus>

Określa, w którym polu będzie pierwsze aktywne (będzie się znajdował kursor) po załadowaniu strony

form

<form action="/action_page.php" id="form1">

</form>

<input type="tekst" name="imie" form="form1">

 

Określa, że dane pole poza formularzem jest częścią tego formularza

formaction

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Submit as admin">
</form>

 

Atrybut nadpisuje atrybut action znacznika form. Czasem jest potrzeba aby dwa różne guziki wysyłania formularza, wysyłały formularz w do dwóch różnych skryptów.

Używany tylko z type=”submit” i type=”image”

formenctype

<form action="/action_page_binary.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

 

Atrybut nadpisuje atrybut enctype znacznika form.

Używany tylko z type=”submit” i type=”image”

formmethod

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

 

Atrybut nadpisuje atrybut method znacznika form.

Używany tylko z type=”submit” i type=”image”

formnovalidate

<form action="/action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate
value="Submit without validation">
</form>

Atrybut nadpisuje atrybut novalidate znacznika form.

Używany tylko z type=”submit”.

formtarget

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"  value="Submit to a new window">
</form>

 

Atrybut nadpisuje atrybut target znacznika form.

Używany tylko z type=”submit” i type=”image”.

height oraz width

<input type="image" src="/img_submit.gif" alt="Submit" width="48" height="48">

 

Określa wysokość i szerokość grafiki. Należy zawsze określić wielkość grafiki. W innym przypadku strona będzie nam skakać, pływać.

min oraz max

 Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Określa minimalną i maksymalną wartość jaką może przyjąć wartość w input.

Działa z number, range, date, datetime-local, month, time oraz week.

multiple

 Select images: <input type="file" name="img" multiple>

Określa czy użytkownik może podać więcej niż jedną wartość. Działa z email oraz file.

pattern

 Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">

Określa w jaki sposób sprawdzić czy dane, króre wpisał użytkownik są prawidłowe. Używa się do tego wyrażeń regularnych.

Działa z text, search, url, tel, email oraz password

placeholder

 <input type="text" name="fname" placeholder="First name">

Określa tekst, który będzie się wyświetlał przed tym co użytkownik wpisze. Działa z text, search, url, tel, email oraz password.

required

 Username: <input type="text" name="usrname" required>

Określa czy dane pole musi być wypełnione przed wysłaniem formularza. Działa z text, search, url, tel, email, password, date pickers, number, checkbox, radio oraz file.

step

 <input type="number" name="points" step="3">

Określa skok o jaki należy zwiększyć zmienną w kontrolce

Wiele nowości wprowadzonych w HTML5 nie jest jeszcze w pełni obsługiwana przez przeglądarki, więc czasem zamiast określonej kontrolki otrzymamy pole do wpisania tekstu.

Drugą omawianą kontrolką jest textarea. Różni się od kontrolki <input type="text"> <input type="password"> tym, że tutaj dostajemy dużo większe pole do wpisywania tekstu.

Atrybuty textarea.

Attribute

Value

Description

autofocus

autofocus

Określa czy kontrolka ma być aktywna po wczytaniu strony

cols

number

Określa ilość kolumn znaków

dirname

textareaname.dir

Określa kierunek tekstu podczas wysyłania formularza

disabled

disabled

Określa czy pole jest wyłączone

form

form_id

Określa do jakiego formularza należy to pole

maxlength

number

Określa ile znaków może wpisać użytkownik w pole

name

text

Określa nazwę pola

placeholder

text

Określa podpowiedź na temat tego pola

readonly

readonly

Określa czy pole jest tylko do odczytu

required

required

Określa czy pole musi być wypełnione

rows

number

Określa widoczną liczbę wierszy

wrap

hard
soft

Określa czy automatycznie powstające znaki przejścia do nowej linii będą automatycznie dołączane do wysyłanego formularza.

Atrybuty zaznaczone na zielono wprowadza HTML5.

21. Formularze - input, textarea (przykłady)