Ultimele tutoriale de dezvoltare web

HTML Tipuri de intrări

❮ Anterior Urmatorul capitol ❯

Tipuri de intrare

Acest capitol descrie tipurile de intrare ale <input> element.

Tip intrare: Text

<input type="text"> definește un câmp de intrare o singură linie pentru introducerea textului:

Exemplu

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
Încearcă - l singur »

Acesta este modul în care codul HTML de mai sus va fi afișat într-un browser:

Nume:

Numele de familie:

Tip intrare: parola

<input type="password"> definește un câmp parolă:

Exemplu

<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>
Încearcă - l singur »

Acesta este modul în care codul HTML de mai sus va fi afișat într-un browser:

Nume de utilizator:

Parolă de utilizator:

Caracterele dintr - un câmp pentru parolă sunt mascate (shown as asterisks or circles) .

Tip intrare: submit

<input type="submit"> definește un buton pentru trimiterea formularului de intrare la o formă handler.

Formularul-handler este de obicei o pagină de server cu un script pentru procesarea datelor de intrare.

Forma-handler este specificat în atributul action al formularului:

Exemplu

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
Încearcă - l singur »

Acesta este modul în care codul HTML de mai sus va fi afișat într-un browser:

Nume:

Numele de familie:



Dacă omiteți atributul valoare butonul de trimitere, a butonului va primi un text prestabilit:

Exemplu

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit">
</form>
Încearcă - l singur »

Tip intrare: radio ,

<input type="radio"> definește un radio de buton.

Radio Butoanele lasa un utilizator selecta numai unul dintr - un număr limitat de opțiuni:

Exemplu

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>
Încearcă - l singur »

Acesta este modul în care codul HTML de mai sus va fi afișat într-un browser:

Masculin
Femeie
Alte

Tip intrare: checkbox de checkbox

<input type="checkbox"> definește o checkbox de checkbox .

Checkboxes de Checkboxes permite unui utilizator selectați ZERO sau mai multe opțiuni ale unui număr limitat de opțiuni.

Exemplu

<form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
Încearcă - l singur »

Acesta este modul în care codul HTML de mai sus va fi afișat într-un browser:

am o bicicleta
eu am o mașină

Tip intrare: button

<input type="button"> definește un button :

Exemplu

<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Încearcă - l singur »

Acesta este modul în care codul HTML de mai sus va fi afișat într-un browser:


HTML5 Input Tipuri

HTML5 adăugat mai multe de input tipuri:

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

Input tipuri, care nu sunt acceptate de browsere web vechi, se va comporta ca input de tip text.

Input Tip: number

<input type="number"> este folosit pentru câmpurile de intrare , care ar trebui să conțină o valoare numerică.

Puteți seta restricții privind numerele.

În funcție de sprijin browser-ul, restricțiile se pot aplica la câmpul de introducere.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>
Încearcă - l singur »

Input Restricții

Aici este o listă a unor comune de input restricții (some are new in HTML5) :

Atribut Descriere
disabled Specifică faptul că un câmp de intrare ar trebui să fie dezactivat
max Specifică valoarea maximă pentru un câmp de intrare
>maxlength Specifică numărul maxim de caractere pentru un câmp de intrare
min Specifică valoarea minimă pentru un câmp de intrare
pattern Specifică o expresie regulată pentru a verifica valoarea de intrare împotriva
readonly Specifică faptul că un câmp de intrare este doar pentru citire (cannot be changed)
required Specifică faptul că este necesar un câmp de intrare (must be filled out)
size Specifică lățimea (in characters) a unui câmp de intrare
step Specifică intervalele numerice legale pentru un câmp de intrare
value Specifică valoarea implicită pentru un câmp de intrare

Vei afla mai multe despre input restricții în capitolul următor.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
Încearcă - l singur »

Input Tip: date

<input type="date"> este utilizată pentru câmpurile de intrare , care ar trebui să conțină o dată.

În funcție de sprijin browser-ul, o dată selector poate apărea în câmpul de introducere.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<form>
  Birthday:
  <input type="date" name="bday">
</form>
Încearcă - l singur »

Puteți adăuga restricții la input :

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>
Încearcă - l singur »

Input Tip: Culoare

<input type="color"> este utilizată pentru câmpurile de intrare , care ar trebui să conțină o culoare.

În funcție de suport browser-ul, un selector de culoare poate apărea în câmpul de introducere.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>
Încearcă - l singur »

Input Tip: Gama

<input type="range"> este utilizată pentru câmpurile de intrare , care ar trebui să conțină o valoare într - un interval.

În funcție de sprijin browser-ul, câmpul de introducere poate fi afișată ca un control al cursorului.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<form>
  <input type="range" name="points" min="0" max="10">
</form>
Încearcă - l singur »

Puteți utiliza following atribute pentru a specifica restricții: min, max, pas, valoarea.

Input Tip: month

<input type="month"> permite utilizatorului să selecteze o lună și an.

În funcție de sprijin browser-ul, o dată selector poate apărea în câmpul de introducere.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>
Încearcă - l singur »

Input Tip: week

<input type="week"> permite utilizatorului să selecteze o săptămână și an.

În funcție de sprijin browser-ul, o dată selector poate apărea în câmpul de introducere.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<form>
  Select a week:
  <input type="week" name="week_year">
</form>
Încearcă - l singur »

Input Tip: time

<input type="time"> permite utilizatorului să selecteze un timp (no time zone) .

În funcție de sprijin browser-ul, un selector de timp poate apărea în câmpul de introducere.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>
Încearcă - l singur »

Input Tip: datetime

<input type="datetime"> permite utilizatorului să selecteze o dată și oră (with time zone) .

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>
Încearcă - l singur »
Notă Tipul de intrare este eliminat din ora si data standardul HTML. Utilizați-datetime locale în loc.

Tip intrare:-datetime locale

<input type="datetime-local"> permite utilizatorului să selecteze o dată și o oră (no time zone) .

În funcție de sprijin browser-ul, o dată selector poate apărea în câmpul de introducere.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>
Încearcă - l singur »

Tip intrare: e-mail

<input type="email"> este folosit pentru câmpurile de intrare , care ar trebui să conțină o adresă de e - mail.

În funcție de sprijin browser-ul, adresa de e-mail poate fi validat în mod automat atunci când este supusă.

Unele smartphone - uri recunosc tipul de e - mail, și adaugă ".com" la tastatură pentru a se potrivi de intrare de e - mail.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<form>
  E-mail:
  <input type="email" name="email">
</form>
Încearcă - l singur »

Tip de intrare: căutare

<input type="search"> este folosit pentru câmpurile de căutare (a search field behaves like a regular text field) de (a search field behaves like a regular text field) de (a search field behaves like a regular text field) .

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>
Încearcă - l singur »

Tip intrare: tel

<input type="tel"> este folosit pentru câmpurile de intrare , care ar trebui să conțină un număr de telefon.

Tipul tel este acceptată în prezent doar în Safari 8.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>
Încearcă - l singur »

Tip intrare: url

<input type="url"> este folosit pentru câmpurile de intrare , care ar trebui să conțină o adresă URL.

În funcție de sprijin browser-ul, câmpul URL-ul poate fi validat în mod automat atunci când este supusă.

Unele smartphone - uri recunosc tipul de URL - ul, și adaugă ".com" la tastatură pentru a se potrivi de intrare URL.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>
Încearcă - l singur »

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »


❮ Anterior Urmatorul capitol ❯