Ultimele tutoriale de dezvoltare web

HTML Formulare


<form> Element

formulare HTML sunt folosite pentru a colecta date introduse de utilizator.

<form> Element definește un formular HTML:

<form>
.
Formulare HTML conțin elemente de formular.

elemente de formular sunt diferite tipuri de elemente de intrare, casetele de selectare, butoane radio, butoane prezinte, și multe altele.


<input> Element

<input> element este cel mai important element din formular.

<input> Elementul are mai multe variante, în funcție de type de atribut.

Aici sunt tipurile utilizate în acest capitol:

Tip Descriere
text Definește normală de introducere a textului
radio Definește intrare buton radio (for selecting one of many choices) mai (for selecting one of many choices)
submit Definește un buton de trimitere (for submitting the form)

Vei afla mai multe despre mai multe tipuri de intrare mai târziu în acest tutorial.


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 se va arata ca într-un browser:

Nume:

Numele de familie:

Note: Forma în sine nu este vizibil. De asemenea, rețineți că lățimea implicită a unui câmp de text este de 20 de caractere.


Radio Buton de intrare

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

Radio butoane vă permit un utilizator selectați 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


Remitere Butonul

<input type="submit"> definește un buton pentru trimiterea unui formular 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 formă de action atribut:

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:



Action Atributul

action atribut definește acțiunea care urmează să fie efectuată în momentul depunerii formularului.

Comun mod de a trimite un formular pentru un server, este prin utilizarea unui buton de trimitere.

În mod normal, formularul este prezentat într-o pagină web de pe un server web.

În exemplul de mai sus, un script server-side este specificat să se ocupe de forma prezentată:

<form action="action_page.php ">

În cazul în care action atributul este omis, acțiunea este setată la pagina curentă.


Method Atributul

method atribut specifica metoda HTTP ( GET sau POST ) pentru a fi utilizate la depunerea formularelor:

<form action="action_page.php" method="get" >

sau:

<form action="action_page.php" method="post" >

Când se utilizează GET ?

Puteți folosi GET (the default method) :

În cazul în care trimiterea formularului este pasiv (like a search engine query) de (like a search engine query) de (like a search engine query) , și fără informații sensibile.

Când utilizați GET , datele din formular vor fi vizibile în adresa paginii:

action_page.php?firstname=Mickey&lastname=Mouse

GET este cea mai potrivită pentru o scurtă perioadă de date. limitări de dimensiune sunt setate în browser.


Când se utilizează POST ?

Ar trebui să utilizați POST :

În cazul în care forma este actualizarea datelor, sau include informații sensibile (password) .

POST oferă o mai bună securitate , deoarece datele prezentate nu sunt vizibile în adresa paginii.


Name atribut

Pentru a fi depuse în mod corect, fiecare câmp de intrare trebuie să aibă un name de atribut.

Acest exemplu se va depune numai "Last name" câmpul de introducere:

Exemplu

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

Gruparea Formular de date cu <fieldset>

De <fieldset> grupurile de elemente de date legate într - o formă.

<legend> elementul definește o legendă pentru <fieldset> element.

Exemplu

<form action="action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    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">
  </fieldset>
</form>
Încearcă - l singur »

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

Informatii personale: Nume:

Numele de familie:



HTML Form Atributele

Un HTML <form> Element, cu toate atributele posibile set, va arata astfel:

<form action="action_page.php" method="post" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
Testați-te cu exerciții!

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


Aici este lista cu <form> atribute:

Atribut Descriere
accept-charset Specifică setul de caractere utilizat în forma prezentată (implicit: pagina charset).
action Specifică o adresă (url) în cazul în care să prezinte formularul (implicit: pagina care prezintă cererea).
autocomplete Specifică dacă browser - ul ar trebui să completa în mod automat formularul (default: on) .
enctype Specifică codificarea datelor transmise (default: is url-encoded) ca (default: is url-encoded) .
method Specifică metoda HTTP utilizată în momentul depunerii formularului (default: GET) .
name Specifică un nume folosit pentru a identifica forma (pentru utilizare DOM: document.forms.name).
novalidate Specifică faptul că browser-ul nu ar trebui să valideze formularul.
target Specifică ținta adresei în action atributul (implicit: _self).

Vei afla mai multe despre atribute în capitolele următoare.


Mai multe exemple

Trimite e-mail de la un formular
Cum pentru a trimite e-mail de la un formular.