Cum se configurează smartphone-uri și PC-uri. Portal informativ
  • Acasă
  • Windows 8
  • Despre forme și elementele lor. Formularele web și elementele lor: tipuri și scop

Despre forme și elementele lor. Formularele web și elementele lor: tipuri și scop

12.04.2019 Windows 8

O opțiune de procesare a formularului ar putea fi trimiterea datelor prin e-mail:

action="mailto:[email protected]"

Folosind atributul method, puteți seta protocolul pentru trimiterea datelor către server. protocol GET este folosit implicit, dar în cele mai multe cazuri nu satisface dezvoltatorii, așa că protocolul POST este folosit mai des.

Atributul enctype vă permite să specificați modul în care este codificat conținutul formularului.

Formularul este completat utilizatori diferiți, deci există un atribut pentru acesta care vă permite să definiți o listă de codificări valide:

accept-charset="lista de set de caractere"

De asemenea, puteți defini o listă de tipuri de date valide:

accept="lista de tipuri de date"

Majoritatea formularelor au butoane care vă permit să ștergeți formularul sau să îl trimiteți și să trimiteți datele. Pentru a defini programe de script care ar trebui să fie executate după acțiunile utilizatorului specificate, există două atribute de eveniment la trimitere și la resetare.

Atribute standard: id, clasă, limba, stil, dir, titlu, țintă, atribute eveniment

Acest element vă permite să creați diferite părți ale formularului, cum ar fi casete de selectare, butoane radio, câmpuri de introducere. Elementul nu are o etichetă de final, deoarece toți parametrii sunt specificați folosind atribute.

Tipul elementului este determinat de atributul type:

Type="text" - crearea unui câmp de introducere în care puteți plasa automat text arbitrar folosind atributul value;

Type="parola" - crearea unui câmp pentru introducerea unei parole, iar informațiile introduse sunt afișate ca asteriscuri;

Type="checkbox" - crearea unei casete de selectare;

Type="radio" - definiția unui buton radio. Pentru a crea un grup de butoane radio, trebuie să utilizați mai multe elemente INPUT. Iată un exemplu de grup de trei butoane radio:

Comutatoare

Atributul verificat specifică prin ce buton radio trebuie selectat

Mod implicit. În fig. Figura 4.4 prezintă aspectul acestui grup de comutatoare.

Fig.4.4. Schimbați grupul

Type="button" - crearea unui buton personalizat;

Type="submit" - crearea unui buton, făcând clic pe care confirmă introducerea informațiilor în formular. Atributul value este folosit pentru a defini eticheta de pe buton;



Type="reset" - tot un buton, dar pentru a anula introducerea datelor în formular;

Type="image" - crearea unui buton cu o imagine. A indica fisier grafic este folosit atributul src. atributul de aliniere Conceput pentru poziționarea unui buton cu un model. Valorile atributelor au fost deja menționate de mai multe ori:

jos, stânga, mijloc, dreapta, sus. Utilizați acest atribut în în acest caz, Nu-l recomand pentru că nu toate browserele îl acceptă;

Type="fi ile" - un mijloc de a selecta un fișier de atașat la formular. Utilizatorului i se solicită să scrie numele fișierului în câmpul de introducere. În plus, browserul creează automat un buton Browse lângă câmpul de introducere, care vă permite să lansați un standard (pentru sistem de operare) dialog selecție fișier;

Type="hidden" - element ascuns utilizatorului. Astfel de elemente sunt folosite pentru a include unele informații fixe în setul de date al unui formular. În esență, aceasta este definirea unui nume de variabilă și a valorii acesteia.

Atributele rămase sunt necesare pentru a defini proprietățile elementului. Multe dintre ele sunt necesare deoarece asigură procesarea pe server a datelor din formular.

Atributul nume trebuie să fie prezent în toate elementele INPUT, cu excepția butoanelor de confirmare și resetare. Valoarea acestui atribut specifică numele câmpului formular, adică blocul de date introdus în acel câmp. Programul server poate selecta datele necesare folosind acest nume.

Știm deja domeniul de aplicare al atributului value. Valoarea atributului specifică valoarea implicită pentru un câmp de intrare sau determină eticheta unui buton.

Mai sus am arătat cum să creați un grup de butoane radio folosind atributul bifat. Acest atribut poate fi folosit pentru casetele de selectare exact în același mod. Prezența acestuia indică faptul că caseta de selectare trebuie bifată în mod implicit. Spre deosebire de butoanele radio, orice număr de casete de selectare pot fi selectate în același timp.

Atributul dimensiune vă permite să setați lungimea câmpului de introducere. Lungimea este exprimată în caractere, dar această valoare poate fi dată doar aproximativ. Pentru a plasa un anumit număr de caractere în câmpul de introducere, va trebui să selectați valoarea atributului. În același timp, nimeni nu poate garanta că toate browserele vor furniza lungimea de linie necesară și nu mai puțin. Astfel, lungimea câmpului de intrare trebuie aleasă cu rezervă.

Atributul maxlenght poate fi folosit în două moduri. În primul rând, definește lungime maximașir care poate fi scris în câmpul de intrare. În al doilea rând, poate fi folosit pentru a limita dimensiunea fișierului atașat formularului.

Atributul numai citire vă permite să creați un element care nu este editabil.

Atributul usemap (consultați secțiunea „Desene și hărți” de mai sus) poate fi utilizat dacă se creează o hartă pe formular.

La fel ca în FORMĂ, în element INPUT puteți specifica atributul accept.

Atribute generale valide: accesskey, tabindex, readonly, disabled.

Atribute standard: id, class, lang, title, dir, stil, atribute eveniment.

Folosind elementele FORM și INPUT, puteți crea un obiect care va înlocui un obiect similar creat din elementul ISINDEX. Următorul cod îndeplinește aceleași funcții ca și codul pentru elementul ISINDEX (vezi Figura 4.3):

<Р>Linie pentru introducerea criteriilor de căutare

Acest element este un container pentru alte elemente de formular. De exemplu, puteți combina o casetă de text și un câmp de introducere:

Dacă elementul LABEL și un alt element sunt separate, se folosește atributul for, a cărui valoare trebuie să se potrivească cu valoarea atributului id al elementului corespunzător:

Este creat un element de formular pentru fiecare element LABEL. Uneori este convenabil să distribuiți elementele în celulele tabelului, asigurând astfel alinierea datelor din formular.

Atribute standard: cheie de acces, id, clasă, limba, dir, titlu, stil, atribute eveniment.

Un formular este un element de pagină care permite utilizatorului să trimită date către server. Un exemplu de formular HTML este un formular de autorizare pe un site web. Utilizatorul introduce un nume de utilizator și o parolă, apasă un buton, iar aceste date sunt trimise la server și procesate acolo. Formularul nu participă în niciun fel la prelucrarea datelor; aceasta se realizează printr-un program situat pe server, iar formularul îi trimite doar date.

Deoarece formularele sunt legate de funcționarea serverului, unele lucruri pot să nu fie încă clare atunci când studiați acest subiect. Dar mai trebuie să studiezi formele. La început, deoarece elementele individuale de formular pot exista fără a fi trimise la server. Iar datele din ele pot fi folosite atunci când rulează diferite scripturi. În al doilea rând, dacă vă dezvoltați în continuare în domeniul creării de site-uri web, atunci va trebui să cunoașteți cel puțin un limbaj pe partea serverului, de exemplu PHP. Și când îl înveți, va trebui să cunoști HTML pentru a nu fi distras de el.

Crearea unui formular

Formularul HTML este creat folosind o etichetă . Această etichetă în sine nu afișează niciun câmp de introducere, butoane sau nimic în pagină. Există și alte etichete pentru asta. O etichetă le combină într-un singur formular și trimite date de la ele către server.

Să ne uităm la câteva atribute importante ale etichetei . Puteți da un nume formularului. Acest lucru se face folosind atributul name. Numele formularului trebuie să fie unic. Este folosit pentru a găsi formularul atunci când rulează scripturi.

Atributul de acțiune specifică un fișier care rulează pe server și primește date din formular. Valoarea atributului este calea către fișier.

Atributul method setează metoda de solicitare. Poate lua valori:

method="get"

method="post"

Exemplu de formular HTML:

În interiorul unei etichete

sunt plasate elemente de formular. Elementele de formular sunt diferitele câmpuri de introducere, butoane și alte moduri prin care utilizatorul introduce informații. Pentru a crea elemente de formular sunt folosite diverse etichete. Să le privim în detaliu.

Etichetă

Etichetă poate apărea diferit pe pagină în funcție de tip. De asemenea, poate crea diferite câmpuri de intrare. Tipuri de etichete destul de multe, așa că se discută într-un subiect separat. Deocamdată, îl vom crea pe pagină ca exemplu. Să-l adăugăm în interiorul etichetei .

Atributul numelui este foarte important. Numele elementului de formular este trimis la server împreună cu valoarea. Datele sunt trimise către server în următoarea formă:

nume = valoare

Dacă în exemplul dat utilizatorul introduce Andrey în câmpul de introducere, atunci datele vor fi trimise către server sub forma:

Dacă unui element de formular nu i se dă un nume, atunci datele din acest element nu vor fi trimise la server.

Etichetă folosit în loc de element atunci când trebuie să creați câmpuri de text mari. Textul afișat ca valoare originală este plasat în interiorul etichetei. Dimensiunile câmpului sunt stabilite folosind atributele cols - dimensiuni orizontale, rânduri - dimensiuni verticale. Înălțimea câmpului poate fi setată folosind proprietatea înălțime. Toate dimensiunile sunt calculate pe baza mărimii unui caracter dintr-un font monospațiu.

Tabelul 4. Atributele etichetei

7. Butoane

Element creează butoane pe care se poate face clic. Spre deosebire de butoanele create ( , , , ), în interiorul elementului .

Butoanele permit utilizatorilor să trimită date într-un formular, să șterge conținutul formularului sau să întreprindă alte acțiuni. Puteți crea chenare, puteți schimba fundalul și puteți alinia textul pe un buton.

Tabelul 9. Atributele etichetei
Atribut Sens/Descriere
autofocus Setează focalizarea pe buton atunci când pagina se încarcă.
dezactivat Dezactivează butonul, făcându-l de neclimat.
formă Indică una sau mai multe forme cărora le aparține acest buton. Valoarea atributului este identificatorul formularului corespunzător.
formare Valoarea atributului conține adresa URL a handler-ului de date din formular trimis atunci când se face clic pe butonul. Numai pentru tipul butonului = "submit" . Supliniază valoarea atributului de acțiune specificat pentru element
.
formenctype Setează tipul de codificare al datelor din formular înainte de a le trimite la server când se face clic pe butoane precum tip="trimitere". Supliniază valoarea atributului enctype specificat pentru element . Valori posibile:
application/x-www-form-urlencoded este valoarea implicită. Toate caracterele vor fi codificate înainte de trimitere.
multipart/form-data - caracterele nu sunt codificate. Folosit atunci când fișierele sunt încărcate folosind un formular.
text/plain - caracterele nu sunt codificate, iar spațiile sunt înlocuite cu simbolul +.
formmetod Atributul specifică metoda pe care browserul o va folosi pentru a trimite formularul. Supliniază valoarea atributului metodei specificat pentru element . Specificat numai pentru butoanele de tipul tip="submit". Valori posibile:
get - datele din formular (perechea nume/valoare) sunt adăugate la url și trimise la server. Aceasta metoda are restricții privind dimensiunea datelor trimise și nu este potrivit pentru trimiterea de parole și informații confidențiale.
post - datele din formular sunt adăugate ca cerere http. Metoda este mai fiabilă și mai sigură decât get și nu are restricții de dimensiune.
formnovalidate Atributul specifică faptul că datele formularului nu trebuie validate la trimitere. Specificat numai pentru butoanele de tipul tip="submit".
formtarget Atributul specifică în ce fereastră se va afișa rezultatul după trimiterea formularului. Specificat numai pentru butoanele de tipul tip="submit". Supliniază valoarea atributului țintă specificat pentru element .
_blank - încarcă răspunsul într-o fereastră/filă nouă
_self - încarcă răspunsul în aceeași fereastră (implicit)
_parent - încarcă răspunsul în cadrul părinte
_top - încarcă răspunsul pe ecran complet
framename - încarcă răspunsul într-un cadru cu numele specificat.
Nume Setează numele butonului, valoarea atributului este text. Folosit pentru a conecta la datele din formular după ce formularul a fost trimis sau pentru a conecta la un buton(e) dat(e) în JavaScript.
tip Definește tipul de buton. Valori posibile:
buton - buton pe care se poate face clic
resetare — butonul de resetare, returnează valoarea inițială
trimite - buton pentru trimiterea datelor formularului.
valoare Setează valoarea implicită trimisă atunci când se face clic pe butonul.

8. Casete de selectare și butoane radio în formulare

Casetele de selectare din formulare sunt setate folosind constructul , iar comutatorul - folosind .

Casetele de selectare, spre deosebire de butoanele radio, pot fi setate la mai multe într-un singur formular. Dacă atributul bifat este specificat pentru casetele de selectare, atunci când pagina se încarcă, casetele de selectare din câmpurile de formular corespunzătoare vor fi deja selectate.

Element

Este un câmp text cu o linie (Fig. 1), dimensiune fizică care poate fi setat folosind atributul SIZE și secvența de caractere introdusă inițial în ea folosind atributul VALUE.

Orez. 1. Element de formular TEXT

Un exemplu de utilizare a acestui element în codul HTML este rândul următor:

TYPE="PAROLA"

Un tip complet similar cu cel precedent, cu excepția faptului că informațiile introduse de utilizator în câmpul de text vor fi afișate pe ecran cu simboluri „*” pentru a ascunde textul de un vizualizator din exterior.

Un element care este o formă simplă de alegere, luând una dintre cele două stări stabile: „verificat” - „neverificat” (Fig. 2).

Orez. 2. Element de formular CHECKBOX

Acest element operează cu așa-numitele variabile booleene, adică cu variabile, fiecare dintre acestea putând lua valoarea „TRUE” sau „FALSE”. Fiecare element al formularului CHECKBOX creează o pereche logică de valori de forma „element_name-state” și le transmite serverului. Pentru a seta starea inițială a elementului (verificat sau nu), utilizați atributul CHECKED.

Exemplu de utilizare:

Așa-numitul buton radio (Fig. 3) este utilizat în cazul în care o variabilă logică poate lua o singură valoare din multe posibile.

Orez. 3. Element de formă RADIO

Toate elementele RADIO de aceeași formă sunt desemnate prin aceeași valoare a atributului NAME.

Utilizarea butoanelor radio necesită indicarea explicită a valorilor atributului VALOARE; unul dintre butoane trebuie să fie marcat cu atributul VERIFICAT.

Exemplu de utilizare:

<Р АLIGN="СЕМТЕR">Vă rugăm să indicați vârsta dvs

Afișează un buton obișnuit (Fig. 4), făcând clic pe care duce la o acțiune de server.

Orez. 4. Element de formular BUTTON

Folosind atributul NAME, acestui element i se atribuie un nume unic; atributul VALUE vă permite să schimbați eticheta afișată pe buton.

Exemplu de utilizare:

TYPE="TRIMITERE"

Definește un buton, la apăsare, datele din formular sunt transferate pe server.Ca și în cazul precedent, eticheta afișată pe buton este specificată de atributul VALOARE.

Exemplu de utilizare:

Creează un buton care șterge un formular text completat incorect. Parametrii și valorile acestui buton nu sunt trimise la server împreună cu alte date din formular. Exemplu de utilizare:

TYPE="FILE"

Generează un buton pe ecran, când se face clic, Windows Explorer apare pe ecran, permițându-vă să atașați orice fișier de pe computerul local al utilizatorului la datele trimise către server. Acest element este folosit în principal în formulare pentru trimiterea de mesaje de e-mail de pe un server pentru a organiza atașamente, precum și pentru încărcarea imaginilor pe server. De obicei, lângă buton este afișat un mic câmp de text, unde sunt introduse automat numele fișierului trimis și calea către acesta pe discul local.

Exemplu de utilizare:

TYPE="IMAGE"

Creează un buton de trimitere similar cu elementul TRIMITE, dar folosind o imagine creată de utilizator. Utilizat de obicei în cazurile în care un buton dreptunghiular gri standard „nu se potrivește” în designul site-ului. Adresa URL a imaginii care acționează ca buton este indicată de atributul SRC, iar elementul în sine poate conține propriile atribute similare cu cele utilizate în etichetă (vezi lecția 5), ​​inclusiv ALIGN, ALT, etc. Atributele NAME și VALUE sunt tratate în același mod ca atributele similare ale elementului SUBMIT.

Exemplu de utilizare:

Acest element este ascuns și nu este afișat pe ecranul monitorului utilizatorului.

Este folosit pentru a stoca și transmite informații despre starea curenta formulare: la apăsarea butonului SUBMIT, elementul HIDDEN va forma o pereche logică variabile de tip„name-value”, care va fi trimis către server folosind protocolul HTTP. Elementele HIDDEN servesc ca o alternativă accesibilă cookie-uri - fisiere speciale, în care sunt depozitate setări individuale utilizatorului și permițând, de exemplu, să restabilească ultima stare a formularului atunci când utilizatorul revisează pagina care conține acest formular.

Exemplu de utilizare:

Cu toate acestea, folosind eticheta Nu este posibil să transferați toate elementele de formular disponibile unui web designer. De exemplu, câmpurile de text specificate de atributele TEXT și PAROLA sunt foarte limitate în numărul de caractere care pot fi introduse în acele câmpuri. Dacă un webmaster se confruntă cu sarcina de a crea astfel câmpuri de text astfel încât utilizatorul să poată introduce un număr mare de caractere, se utilizează o etichetă independentă

Sunteți deja familiarizat cu atributul NAME, care definește numele individual al fiecărui element de formular. Atributele ROWS și COLS indică, respectiv, numărul maxim permis de linii de text introdus și de caractere pe linie. Dacă textul tastat de utilizator nu se încadrează în partea vizibilă a containerului de text, la marginile câmpului apar bare de defilare verticale și orizontale pentru a derula conținutul elementului TEXTAREA.

Exemplu de utilizare:

Pentru a crea un meniu de selecție în formular (Fig. 6), webmasterul poate folosi eticheta

OPTION VALUE="Articol N">Пункт N!}

Atributul MULTIPLE definește capacitatea utilizatorului de a marca nu unul, ci mai multe articole din lista propusă simultan. Dacă acest atribut este setat, puteți utiliza atributul SIZE, care determină numărul de poziții vizibile pe ecran în același timp.

Exemplu de utilizare:

<Р АLIGN ="CENTER">Vă rugăm să indicați orașul dvs