Ultimele tutoriale de dezvoltare web

HTML Input Attributes


value Atributul

value atributului specifică valoarea inițială pentru un câmp de intrare:

Exemplu

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

readonly Atributul

readonly atribut specifică faptul că câmpul de introducere este doar pentru citire (cannot be changed) :

Exemplu

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

readonly atribut nu are nevoie de o valoare. Este la fel ca și scrierea = numai citire „numai în citire“.


disabled Atributul

disabled atribut specifică faptul că câmpul de intrare este dezactivat.

Un element este dezactivat inutilizabile și ne-clickable.

Elementele cu handicap nu vor fi prezentate.

Exemplu

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

disabled atribut nu are nevoie de o valoare. Este la fel ca și scrierea cu handicap = „dezactivat“.


size Atributul

size atribut specifica dimensiunea (in characters) pentru câmpul de intrare:

Exemplu

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

maxlength Atributul

maxlength atribut specifică lungimea maximă permisă pentru câmpul de intrare:

Exemplu

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

Cu un maxlength atribut, controlul de intrare nu va accepta mai mult decât numărul permis de caractere.

Atributul nu oferă nici un feedback. Dacă doriți să alerteze utilizatorul, trebuie să scrie cod JavaScript.

Restricții de intrare nu sunt foarte simplu de manevrat. JavaScript oferă mai multe modalități de a adăuga intrare ilegală.
Pentru a restricționa în condiții de siguranță de intrare, restricțiile trebuie să fie verificate de către receptor (the server) , de asemenea.


Atribute HTML5

HTML5 adaugă following atribute pentru <input> :

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

iar following atribute pentru <form> :

  • autocomplete
  • novalidate

autocomplete Atributul

autocomplete atribut specifică dacă un câmp de formular sau de intrare trebuie să aibă autocomplete pornit sau oprit.

Atunci când autocomplete este activată, browser - ul valori complet automat , pe baza valorilor pe care utilizatorul a introdus înainte.

Tip: Este posibil să aibă autocomplete "on" pentru forma, și "off" pentru câmpurile de intrare specifice, sau invers.

autocomplete Atributul funcționează cu <form> și următoarele <input> tipuri: text, search, url, tel, email, password, datepickers, range, and color - text, search, url, tel, email, password, datepickers, range, and color - text, search, url, tel, email, password, datepickers, range, and color .

OperaSafariChromeFirefoxInternet Explorer

Exemplu

Un formular HTML cu autocomplete pe (and off for one input field) de (and off for one input field) :

<form action="action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>
Încearcă - l singur »

Sfat: În unele browsere poate fi necesar să activați autocomplete funcția pentru ca aceasta să funcționeze.


novalidate Atributul

novalidate atribut este <form> atribut.

Atunci când este prezent, novalidate specifică faptul că datele din formular nu ar trebui să fie validate în momentul depunerii.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

Indică faptul că forma nu trebuie validată pe prezinte:

<form action="action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>
Încearcă - l singur »

autofocus Atributul

autofocus atribut este un atribut boolean.

Atunci când este prezent, se specifică faptul că un <input> elementul ar trebui să se concentreze în mod automat atunci când se încarcă pagina.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

"First name" câmpul de introducere a obține automat focalizarea atunci când se încarcă pagina:

First name:<input type="text" name="fname" autofocus>
Încearcă - l singur »

form Atributul

form atribut specifică una sau mai multe forme un <input> elementul aparține.

Tip: Pentru a se referă la mai mult de o formă, utilizați o listă separată cu spațiu de form ids - form ids de form ids .

OperaSafariChromeFirefoxInternet Explorer

Exemplu

Un input field de (but still a part of the form) input field situată în afara formei HTML (but still a part of the form) :

<form action="action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">
Încearcă - l singur »

formaction Atributul

formaction atribut specifica adresa URL a unui fișier care va procesa controlul de intrare atunci când formularul este depus.

formaction atribut suprascrie action atributul <form> element.

formaction atribut este utilizat cu tipul = „submit“ și type = „imagine“.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

Un formular HTML cu două butoane să prezinte, cu acțiuni diferite:

<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="demo_admin.asp"
  value="Submit as admin">
</form>
Încearcă - l singur »

formenctype Atributul

formenctype atribut specifica modul în care trebuie să fie codificat formularul de date atunci când trimiterea la server (only for forms with method="post" ) .

formenctype atribut suprascrie enctype atributul <form> element.

formenctype atribut este utilizat cu type="submit" și type="image" .

OperaSafariChromeFirefoxInternet Explorer

Exemplu

Trimite form-data de (the first submit button) "multipart/form-data" (the second submit button) form-data care este codificată implicit (the first submit button) va (the first submit button) , și codificate ca "multipart/form-data" (the second submit button) :

<form action="demo_post_enctype.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>
Încearcă - l singur »

formmethod Atributul

formmethod atribut definește metoda HTTP pentru a trimite form-data la URL - ul de acțiune.

formmethod atribut suprascrie method atributul <form> element.

formmethod atribut poate fi utilizat cu type="submit" și type="image" .

OperaSafariChromeFirefoxInternet Explorer

Exemplu

Butonul a doua depune suprascrie metoda HTTP de forma:

<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" formaction="demo_post.asp"
  value="Submit using POST">
</form>
Încearcă - l singur »

formnovalidate Atributul

novalidate atribut este un atribut boolean.

Atunci când este prezent, se specifică faptul că <input> elementul nu ar trebui să fie validate la momentul prezentării.

formnovalidate atribut suprascrie novalidate atributul <form> element.

formnovalidate atribut poate fi utilizat cu type="submit" .

OperaSafariChromeFirefoxInternet Explorer

Exemplu

Un formular cu două butoane să prezinte (with and without validation) :

<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>
Încearcă - l singur »

formtarget Atributul

formtarget atribut specifica un nume sau un cuvânt cheie care indică în cazul în care pentru a afișa răspunsul pe care este primit după depunerea formularului.

formtarget atribut suprascrie target atributul <form> element.

formtarget atribut poate fi utilizat cu tipul = „submit“ și type = „imagine“.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

Un formular cu două butoane să prezinte, cu diferite ferestre țintă:

<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>
Încearcă - l singur »

La height și width Atribute

La height și lățime atributele specificați înălțimea și lățimea unui <input> Element.

La height și width atribute sunt utilizate numai cu <input type="image"> .

specificați întotdeauna dimensiunea imaginilor. În cazul în care browser-ul nu cunoaște dimensiunea, pagina va pâlpâi în timp ce se încarcă imaginile.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

Definiți o imagine ca butonul de trimitere, cu atribute înălțime și lățime:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
Încearcă - l singur »

list de atribute

list atribut se referă la un <datalist> element care conține opțiuni predefinite pentru <input> Element.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

Un <input> Element cu valori predefinite în <datalist> :

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
Încearcă - l singur »

De min și max Atribute

min și max atribute specifica valoarea minimă și maximă pentru <input> Element.

min și max atribute de lucru cu următoarele tipuri de intrare: number, range, date, datetime, datetime-local, month, time and week .

OperaSafariChromeFirefoxInternet Explorer

Exemplu

<Input> elemente cu min și valori 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">
Încearcă - l singur »

multiple Attribute multiple Attribute

multiple atribut este un atribut boolean.

Atunci când este prezent, se specifică faptul că utilizatorul este lăsat să intre mai mult de o valoare în <input> element.

multiple Atributul funcționează cu următoarele tipuri de intrare: email - file email , și file .

OperaSafariChromeFirefoxInternet Explorer

Exemplu

Un câmp de încărcare fișier care acceptă mai multe valori:

Select images: <input type="file" name="img" multiple>
Încearcă - l singur »

pattern Atributul

pattern atribut specifica o expresie regulată ca <input> valoarea elementului este verificat.

pattern Atributul funcționează cu următoarele tipuri de introducere: text, search, url, tel, email, and password - text, search, url, tel, email, and password - text, search, url, tel, email, and password .

Sfat: utilizați la nivel mondial titlu atribut pentru a descrie modelul pentru a ajuta utilizatorul.

Tip: Aflați mai multe despre expresiile regulate în programul nostru de instruire JavaScript.

OperaSafariChromeFirefoxInternet Explorer

Exemplu

Un câmp de intrare , care poate conține doar trei litere (no numbers or special characters) :

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

placeholder Atributul

placeholder atribut specifică un indiciu care descrie valoarea așteptată a unui câmp de intrare (a sample value or a short description of the format) .

Indiciul este afișat în câmpul de introducere înainte ca utilizatorul introduce o valoare.

placeholder atribut funcționează cu următoarele tipuri de introducere: text, search, url, tel, email, and password - text, search, url, tel, email, and password - text, search, url, tel, email, and password .

OperaSafariChromeFirefoxInternet Explorer

Exemplu

Un câmp de intrare cu un text substituent:

<input type="text" name="fname" placeholder="First name">
Încearcă - l singur »

required Atributul

required atributul este un atribut boolean.

Atunci când este prezent, se specifică faptul că un câmp de intrare trebuie să fie completate înainte de a trimite formularul.

required Atributul funcționează cu următoarele tipuri de introducere: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file - text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file - text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file de text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file .

OperaSafariChromeFirefoxInternet Explorer

Exemplu

Un câmp de intrare necesar:

Username: <input type="text" name="usrname" required>
Încearcă - l singur »

step Atributul

step atribut specifica intervalele numerice legale pentru <input> Element.

Exemplu: dacă pas = "3", numere juridice ar putea fi -3, 0, 3, 6, etc.

Tip: step atribut poate fi utilizat împreună cu max și min atributele pentru a crea o serie de valori juridice.

step atribut funcționează cu următoarele tipuri de intrare: number, range, date, datetime, datetime-local, month, time and week .

OperaSafariChromeFirefoxInternet Explorer

Exemplu

Un câmp de intrare cu intervale de timp specificate legale număr:

<input type="number" name="points" step="3">
Încearcă - l singur »

Testați-te cu exerciții!

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