Cum se creează formulare html. Crearea de formulare în HTML

30.03.2019 Recenzii

Având în vedere principalul Etichete HTML nu putem să nu atingem așa ceva element important asemenea formelor. Feedback-ul este adesea necesar pe paginile web. De exemplu, completarea unui chestionar pe site, înregistrare, autorizare, comentarii etc. În toate aceste cazuri, utilizatorul completează zone speciale (câmpuri de formular) pe pagină, după care datele sunt trimise către server. Pentru a crea părere se folosesc formulare. Forma este un fragment document HTML destinat introducerii utilizatorului.

În figura este prezentat formularul de înscriere a studenților pe site-ul instituției de învățământ.

Pentru a crea formularul se folosește un container

cu atributul action, care specifica pagina de pe server care va procesa datele transmise prin formular.

Structura formei celei mai simple:

elemente de formă...

Fiecare formular are nevoie, de asemenea, de un buton de trimitere pentru a trimite date după ce formularul a fost completat.

Structura butoanelor:

Deci, pentru a înregistra aproape toate elementele de formular, se folosește eticheta cu un atribut tip. Pentru a crea un buton care va reseta toate datele din formulare, se folosește următoarea structură:

Pentru a crea casetă de text(câmp text) există textul parametrului... În acest caz, se folosesc următorii parametri: nume - nume câmp; dimensiune - pentru câmpul în simboluri; maxlength - numărul maxim posibil de caractere din câmp; valoare - informații afișate implicit în formular

Un exemplu de intrare de formular cu două câmpuri de text:

Rezultatul formularului este prezentat în figură.

În cazul în care trebuie să introduceți în caseta de text un numar mare de informații, de exemplu, un comentariu folosește forma unei zone de text, care este creată folosind eticheta cu următoarele atribute: nume - denumirea zonei; cols - numărul de coloane din zonă; rânduri - numărul de rânduri; wrap - o modalitate de a înfășura linii (on - wrap lines, off - nu înfășurați linii).Adăugați un câmp de zonă de text la codul de mai sus:Un comentariu: <textarea name="area" cols=”25” rows=”5” wrap=”on”>

Rezultatul lucrului codului cu zona de text este prezentat în figură.

Următorul element formularele sunt liste care vă permit să alegeți din setul de valori prezentat. Etichetele vă permit să creați un formular de listă

Pentru ca elementul să fie selectat la încărcarea paginii, este necesar în etichetă

O metodă similară de selecție este caseta de selectare și elementele de formular cu butonul radio. Diferența dintre aceste elemente este că caseta de selectare vă permite să faceți mai multe alegeri, iar butonul radio doar una singură.

Structura de introducere a casetei de selectare și a butonului radio:

text

Buton de radio:

text

Elementele specificate în schiță folosesc atributul bifat pentru a evidenția caseta de selectare și butonul radio în mod implicit. Un exemplu de utilizare a unei casete de selectare, a unui buton radio și a unui cod HTML este prezentat în figură.

Un alt element de formular este un buton, specificat folosind atributul type al etichetei cu valoarea butonului:

În codul specificat pentru crearea unui buton, există un parametru onclick, în care, de regulă, un cod în limbajul de programare este setat să efectueze o acțiune atunci când se face clic pe acest buton:

Comanda javascript alerted este folosită pentru a afișa un mesaj într-o fereastră specială. Rezultatul exemplului este prezentat în figură.

Pentru a insera o imagine într-un buton, utilizați codul prezentat în exemplul următor:

Când vă înregistrați și vă conectați la site-uri, este utilizat un câmp cu un test ascuns afișat ca asteriscuri. Acesta este elementul formularului de parolă:

Înregistrarea pe site este adesea împărțită în mai multe pagini și fiecare dintre acestea ulterioare ar trebui să conțină informații din cea anterioară. Pentru a ascunde informațiile transmise se folosește elementul de formular ascuns:

Elementul de formular ascuns va fi invizibil în fereastra browserului.

Formularele au un element de fișier pentru a încărca fișiere pe server. Un exemplu de cod pentru încărcarea fișierelor pe server este prezentat mai jos:

Așadar, în acest subiect, am analizat elementele de formular pentru crearea diferitelor pagini HTML, care, împreună cu handlere de script pe un computer sau server, vă permit să dezvoltați aplicații web cu drepturi depline.

Adesea, pe site-urile Web puteți găsi pagini cu formulare HTML găzduite pe ele. Formularele web sunt o modalitate convenabilă de a obține informații de la vizitatorii site-ului dvs. Un exemplu în acest sens este - care oferă feedback vizitatorilor și dezvoltatorilor site-ului. Formularele sunt, de asemenea, convenabile pentru dezvoltatorii de site-uri atunci când dezvoltă un CMS, ceea ce permite menținerea proprietății principale a site-ului - relevanța. Acest articol este despre elementele de bază Creare HTML-formulare, prelucrarea lor și metode de transfer de date de la formulare de ecran la script-uri PHP.

1) Creați un formular simplu

Etichete

setați începutul și sfârșitul formularului. Eticheta de început a formularului

contine doua atribute: acțiuneși metodă... Atributul acțiune conține adresa URL a scriptului care trebuie apelat pentru a procesa scriptul. Atribut metodă spune browserului ce fel de cerere HTTP să folosească pentru a trimite formularul; valori posibile POSTși OBȚINE.

cometariu

Principala diferență dintre metodele POST și GET este modul în care sunt transmise informațiile. În metoda GET, parametrii sunt trecuți prin bara de adrese, adică. de fapt, în antetul cererii HTTP, în timp ce în metoda POST, parametrii sunt trecuți prin corpul solicitării HTTP și nu se reflectă în niciun fel sub forma barei de adrese.

$ text = nl2br ($ _POST [„textul meu”]);
?>

Sarcină: Să presupunem că trebuie să creați o listă derulantă cu anii 2000 până în 2050.
Soluţie: Este necesar să creați un formular HTML cu un element SELECT și PHP - un script pentru procesarea formularului.

Discuţie:

Mai întâi, să creăm două fișiere: form.htmlși acțiune.php... În dosar form.html va conține un formular html cu o listă derulantă. În plus, valorile din listă pot fi specificate în două moduri:

I. Introducerea manuală a datelor:

II. Introducerea datelor printr-o buclă:

După cum puteți vedea, al doilea exemplu cu o buclă este mai compact. Cred că nu este necesar să aducem script-ul handler-ului acestui formular, deoarece este procesat la fel ca un câmp de text, i.e. valorile listei pot fi preluate din matrice superglobală $ _POST.

Descriere:

Să creăm un formular HTML pentru a trimite un fișier către server.

Formularul html dat conține elementul naviga, care deschide o casetă de dialog pentru selectarea unui fișier de încărcat pe server. Prin apăsarea butonului „Transferați fișierul”, fișierul este transmis scriptului de gestionare.

Apoi trebuie să scrieți un handler de script acțiune.php... Înainte de a scrie handler-ul, trebuie să decideți în ce director vom copia fișierul:

if (isset ($ _ FILES [„fișierul meu”))) // Dacă fișierul există
{
$ catalog = "../imagine/"; // Catalogul nostru
if (is_dir ($ catalog)) // Dacă există un astfel de director
{
$ myfile = $ _FILES ["myfile"] ["tmp_name"]; // Fișier temporar
$ myfile_name = $ _FILES [„fișierul meu”] [„nume”]; // Nume de fișier
dacă (! copie ($ fișierul meu, $ catalog)) ecou „Eroare la copierea fișierului”... $ myfile_name // Dacă nu s-a copiat fișierul
}
else mkdir (""../imagine/"); // Dacă nu există un astfel de director, atunci îl vom crea
}
?>

cometariu

Dacă aveți încredere în utilizatorii să încarce orice fișiere pe serverul dvs., trebuie să fiți extrem de atenți. Atacatorii pot injecta cod „rău” într-o imagine sau fișier și îl pot trimite la server. În astfel de cazuri, trebuie să controlați strâns descărcarea fișierelor.

Acest exemplu demonstrează crearea unui director și copierea unui fișier în acel director de pe server.

De asemenea, aș dori să demonstrez un exemplu cu elementul Caseta de bifat... Acest element este ușor diferit de alte elemente, dacă nu unul dintre elemente Caseta de bifat„A nu este selectat, atunci superglobalul este $ _POST va returna o valoare goala:

if (! gol ($ _ POST [„culoarea mea”])) echo $ _POST [„culoarea mea”]; // Dacă este selectat cel puțin 1 articol
altfel ecou „Selectați o valoare”;
?>

26.02.2016

Salutare tuturor!
Continuăm să studiem Bazele HTML... În această lecție vom analiza ce s-a întâmplatHTML formăși cum este creat.
Dacă ați observat, niciun site web de astăzi nu este complet fără formulare. Aceste formulare pot fi diferite, de exemplu, un formular de feedback, un formular pentru plasarea unei comenzi, un formular pentru înregistrare și intrare pe site, un formular pentru trimiterea de comentarii, recenzii, un formular de căutare și multe altele.

Cred că acum trebuie să arăți exemple despre cum arată Formulare HTML vizual.

○ Formular de cautare:

○ Formular de conectare la site:

○ Formular de feedback:

○ Formular pentru plasarea comenzii:

Cred că ai înțeles ideea de a crea formulare HTML. Deci, în lecția de astăzi vă voi spune, cum să creezi un simpluHTMLformăși ce etichete pot fi folosite pentru a crea diferite câmpuri de formular.

Din acest moment vă întreb atentie speciala deoarece subiectul este complex și important.

HTMLformă Este un câmp în care utilizatorul introduce anumite informații. Dar, aceste informații trebuie să fie trimise și într-un fel. Într-un fel, formularul HTML este ca o motocicletă fără benzină, totul pare să fie acolo, dar din anumite motive nu rulează. Deci, pentru ca formularul să funcționeze și să trimită informațiile introduse de utilizator, trebuie să creați un handler de formular în limbă. Dar nu vă deranjați cu manipulatorul, deoarece în acest moment urmați doar un curs pentru începători. Vom aborda subiectul manipulatorului de formulare din secțiunea PHP puțin mai târziu. Deci, ceva ce mă abate de la subiectul principal.

Învață să creezi formulare HTML

Orice formular HTML va consta dintr-o etichetă principală

... În interiorul etichetei restul elementelor de formular sunt introduse pentru a fi afișate pe pagina web.

Formularul trebuie plasat între etichete .
Pentru etichetă

este necesară o etichetă de capăt .

*atribute pentru etichetă rm >

NUME este un nume unic pentru formular. Este folosit atunci când există mai multe formulare pe un site.
ACȚIUNE - Acest atribut specifică calea către gestionarea formularului. Necesar.
METODA este metoda de trimitere.

POST - datele sunt transmise într-o formă ascunsă

GET (implicit) - datele sunt transferate către formă deschisă prin linia browserului.

Un exemplu de cum arată o etichetă cu atributele enumerate:
aici va fi diverse elemente formularele care urmează să fie afișate pe pagina web.

Elemente de formă

○ Etichetăintrare

Etichetăintrare- această parte a elementului câmp de formular este destinată introducerii de text mic, numere.
Pentru etichetă nu este nevoie de etichetă de închidere .

*atribute pentru etichetă< intrare >

nume - numele elementului

dimensiune - dimensiunea câmpului

obligatoriu - câmp obligatoriu

autofocus - la încărcarea unei pagini web, indicatorul mouse-ului va merge imediat în câmp

maxlength - acest atribut poate fi folosit pentru a specifica suma maxima introducerea caracterelor în câmp. În mod implicit, fără atributul maxlength, un număr nelimitat de caractere poate fi introdus în câmp

substituent - un indiciu pentru utilizator, care va fi afișat chiar în interiorul formularului de câmp (am folosit atributul valoare mai devreme).

tip - tipul elementului

Exemplu de umpluturi:

Tipul tipului de element

Câmp text

○ caseta text „text”.:

Rezultat:

○ Câmpul pentru parolă „parolă”:

Rezultat:

○ Câmp de e-mail:

Rezultat:

○ Buton pentru selectarea unui fișier din „fișierul” computerului:

Rezultat:

○ Câmp de telefon „tel”:

Rezultat:

○ Câmpul de căutare „căutare”:

Rezultat:

○ Câmp de selecție a culorii:

Rezultat:

○ Câmp pentru introducerea și selectarea numerelor „număr”:

min - valoare minimă

max - valoare maximă

pas - pas.

Rezultat:

○ Câmp de selecție a datei:

Rezultat:

○ Câmp pentru alegerea datei și orei locale în format (05.05.2015 00:00):

Rezultat:

○ Afișează un calendar drop-down.
Câmp pentru selectarea anului și lunii în format (iulie 2015):

Rezultat:

○ Câmp de selecție a timpului:

Rezultat:

○ Glisorul „Range”.:

Rezultat:

○ Caseta de bifat:

bifat - acest atribut specifică caseta de selectare care trebuie bifată în mod implicit
Rezultat:

○ Comutator radio "radio":

bifat - acest atribut specifică ce comutator radio trebuie activat implicit

Rezultat:

Butoane

○ Buton "buton":

valoare - eticheta de pe buton

Rezultat:

○ Buton pentru trimiterea datelor „trimite”:

valoare - eticheta de pe buton

Rezultat:

○ Buton de resetare „resetare”:

valoare - eticheta de pe buton

Rezultat:

○ Buton imagine:
Rezultat:

○ Câmpul ascuns „ascuns”

○ Selectați eticheta

EtichetăSelectați- aceasta este o parte a unui element de formular destinat introducerii unei liste derulante.
Pentru etichetă este necesară o etichetă de capăt .
Etichetă și

Nume este numele întregii liste. Setați numai pentru etichetă .

Valoare - setată pentru fiecare articol din listă pentru etichetă

dezactivat - blochează selecția unui element din lista derulantă. Setați numai pentru etichetă

Rezultat:

Curier urgent nu este urgent

Sau cam asa:

Rezultat:

Curier urgent nu este urgent

Acum vom bloca din lista „Urgent” cu atributul „dezactivat”:

Rezultat:

Curier urgent nu este urgent

○ listă derulantă după grup:

Pentru a crea o listă de grup, utilizați eticheta

Rezultat:
Opțiunea Textarea
Etichetă Fieldset Legendă

○ pentru alegeri multiple:

În etichetă
*atribute pentru etichetă< zona textului >

nume - numele câmpului

cols - lățimea câmpului

rânduri - înălțimea câmpului

substituent - un indiciu pentru utilizator care va fi afișat chiar în interiorul formularului de câmp.

Rezultat:

Sau cam asa:
Introduceți text
Rezultat:

Introduceți text

Sau cam asa:

Rezultat:

Stilul chenarului (set de câmp)

○ Etichetă Fieldset

Etichetă Fieldset- folosind această etichetă, puteți desena un cadru în jurul obiectului.
Eticheta de final este necesară.

Etichete suplimentare
Eticheta legenda - indică titlul.
Eticheta de final este necesară.

Titlu Text în cadru.

Rezultat:

Atât am vrut să vă spun despre formularele HTML. Acum să rezumăm și în practică vom încerca să creăm formă simplă folosind cunoștințele pe care le-ați învățat din acest articol.

Iată formularul meu:

Formular pentru CV-ul unui angajat al uzinei pilot a PJSC „KMZ”

Cu cine vrei să lucrezi?

Ce salariu vrei sa primesti (pe luna)?
10$ 11$

Rezultat:

Postarea anterioară
Postarea următoare

Vă salutăm, dragi cititori ai site-ului blogului. Astăzi vreau să vorbesc despre formulare HTML. Indiferent de motorul site-ului dvs. (cms), acesta va folosi cu siguranță formulare create folosind etichete Form și Input, precum și atribute și parametri Button, Checked, Value, Checkbox, Radio, Checkbox, Submit...
Ei bine, puteți adăuga și elemente la aceasta pentru a crea liste derulante și câmpuri de text - Selectare, Opțiune, Zona de text, Etichetă, Set de câmpuri, Legendă.
De ce avem nevoie și cum funcționează formularele pe site-urile web moderne
Același șir de căutare pe site () este creat folosind aceste etichete, iar apoi căutarea în proiectul dvs. va fi obligatorie. Prin urmare, înțelegerea modului în care sunt aranjate și cum funcționează nu vă va răni deloc munca de succes peste design și chiar și cu promotie personala iar promovarea nu va fi de prisos.
Deci, având în vedere rațiunea necesității studierii acestor elemente, cred că nu ar trebui să mai existe întrebări, așa că este timpul să trecem direct la studiul posibilelor lor opțiuni.
Da, vreau să vă reamintesc și că am trecut deja în revistă o mulțime de materiale pe tema limbajului de marcare hipertext, de exemplu, trei) și.
În nucleul lor, formularele constau din elemente, pentru crearea cărora, în interiorul containerului principal, din etichetele Form se introduc diverse etichete - Bifat, Valoare, Casetă de verificare, Radio, Casetă de verificare, Trimitere etc. Trebuie doar să plasăm codul acestuia. în orice loc convenabil al șablonului de site, specificând, folosind etichete și atributele acestora, cum ar trebui să arate.
Aceasta poate fi o casetă de text cu un buton de trimitere pentru interogarea pe care ați introdus-o, opțiuni cu butoane radio (unde puteți lăsa apăsat doar unul dintre butoanele furnizate), mai multe casete de text cu un buton de trimitere () și multe altele.
De exemplu, în cazul „căutării”, folosind atributul Valoare, puteți specifica ce anume va fi scris pe butonul situat în dreptul câmpului pentru introducerea unei interogări. Datele introduse în formulare trebuie prelucrate în continuare într-un fel.
De exemplu, în cazul feedback-ului, utilizatorul, după ce a completat câmpul cu numele său, își introduce E-mail-ul și textul mesajului, apoi dă clic pe butonul de trimitere, va avea dreptul să spere să trimită date. de la formular la E-mailul autorului site-ului. Dar, din păcate, nu este posibil să implementați acest lucru folosind un singur limbaj de marcare hipertext ().
În aceste scopuri, veți avea nevoie program special un handler care, după ce utilizatorul dă clic pe butonul de trimitere, va prelua toate datele din câmpurile de feedback și le va trimite proprietarului resursei prin E-mail. Care program va face acest lucru, trebuie să vă specificați folosind atributul Action.
De obicei, programul de procesare este un script scris limbaj PHP... Prin urmare, în atributul Action a etichetei Form, va trebui să înregistrați calea către fișierul acestui script, care se află pe serverul găzduirii dvs. Voi da ca exemplu un abonament la Flux RSS blogul meu prin e-mail:
"nume =" titlu ">
Cam de neînțeles, probabil, pare la început, dar cred că totul va deveni clar pe măsură ce povestea avansează.
Etichete de formular și de intrare pentru crearea de butoane, casete de selectare și butoane radio
Orice formular trebuie inclus în etichete de deschidere și de închidere Formă... Acesta este un fel de recipient pentru crearea lor. Această etichetă are un număr de atribute obligatorii și opționale:
Nume - un nume unic care trebuie specificat dacă mai multe formulare web vor fi folosite în fișierul HTML în care faceți ceva
Acțiune - un atribut obligatoriu care indică calea către script, care va primi date de la acesta pentru procesare ulterioară
Metodă - folosindu-l puteți schimba metoda de transfer a datelor din acest formular web în scriptul fișierului handler. Dacă nu o specificați, atunci se va folosi implicit metoda Get, care, de fapt, este destinată în principal variabilelor și mesajelor scurte și, în plus, transferând în mod deschis datele prin bara de adrese a browserului. Pentru a transmite datele formularului către scriptul de gestionare, este totuși mai bine să le utilizați Metoda POST concepute special pentru transmiterea de mesaje text într-un mod închis

Să luăm în considerare restul etichetelor care vă permit să creați o varietate de formulare web. Cel mai versatil este Intrare... În interiorul acestuia, trebuie prescris atributul Type, care determină care va fi exact formularul HTML creat cu această etichetă.
Următoarele elemente pot fi create utilizând Input și Type:
câmpuri de text cu o singură linie (Tip = „Text”)
câmpuri pentru introducerea unei parole (Tip = „Parolă”)
casete de selectare (Tip = „Căsuță de selectare”)
butoane radio (Tip = „Radio”)
câmpuri ascunse (Tip = „Ascuns”)
butoane obișnuite (Type = "Button")
butoane pentru trimiterea datelor către handler (Type = "Submit")
butoane pentru aducerea formularului web la starea inițială (Tip = „Resetare”)
câmpuri pentru încărcarea fișierelor pe server (Tip = „Fișier)
butoane cu o imagine (Tip = „Imagine”)

Intrarea nu are etichetă de final. Cum va arăta exact formularul web creat cu acesta depinde în întregime de parametrul specificat în atributul Type. Dacă nu este specificat Tip, atunci va fi creat implicit un câmp de text.
Exemple de formulare create pe Input cu valori diferite pentru Tip

Alte atribute ale etichetei Input și exemple de utilizare a acestora
Să vedem pentru ce sunt celelalte atribute:
Nume - dacă datele urmează să fie trimise către scriptul programului de gestionare, atunci trebuie să specificați parametrul pentru atributul Nume. Sub acest nume, datele transmise din formular vor apărea în programul de gestionare a informațiilor.
Dimensiune - este folosit pentru a seta dimensiunea câmpului formularului web creat. Valoarea este indicată în numărul de caractere care se pot încadra în acest câmp. Dacă dimensiunea nu este specificată, lățimea implicită va fi de 24 de caractere
Lungime maximă - în mod implicit, numărul de caractere care pot fi introduse în formularul Html nu este limitat, dar folosind lungimea maximă puteți seta această limitare. Nu veți putea introduce mai multe caractere decât vor fi indicate în câmp.
Valoare - folosindu-l poți seta ce anume va fi scris implicit în câmpul sau pe butonul de trimitere a datelor
Bifat este un atribut de marcaj care poate fi inserat în Intrare pentru butoanele radio (radio) sau pentru casete de selectare (caseta de selectare). În acest caz, acest buton radio sau casetă de selectare va fi activ la încărcarea unei pagini cu un formular web (vor avea deja o bifă)

Acum să trecem peste tot exemple de formular cu Input... Aspectul câmpului de text este similar cu aspectul câmpului pentru introducerea unei parole, așa că vom lua în considerare doar opțiunea de a crea un Text, de exemplu, pentru a introduce o adresă de e-mail:
Introduceți adresa dvs. de email:

(! LANG: Acum să ne uităm la crearea unui formular web cu butoane radio (Radio):
Îți place resursa KtoNanNovenkogo.ru?
Da?
Nu?
Rețineți că acest formular folosește eticheta Input de două ori - o dată pentru a crea fiecare dintre cele două butoane radio. Mai mult, fiecare dintre ele conține atributul Name cu aceeași valoare (rezultat), iar valoarea Value este diferită (DA și NU).
Aceasta înseamnă că la procesarea acestuia, dacă se selectează oricare dintre butoanele radio, va fi trimisă o variabilă, al cărei nume este scris în Nume, dar valoarea acestei variabile va depinde de ce buton radio a fost selectat.
Să luăm în considerare un exemplu de creare a unui formular web cu casete de selectare (Checkbox):
Ce motoare de site preferi?
WordPress
Joomla
SMF
Casetele de selectare diferă de butoanele radio prin capacitatea de a selecta mai multe opțiuni simultan. Nume este folosit pentru a defini în fișierul de gestionare în ce casetă de selectare se află casetele de selectare, iar Value setează valoarea care va fi trimisă handlerului (dacă Value nu este specificată, atunci textul situat lângă această casetă de selectare va fi trimis handlerului) .
Selectare, Opțiune, Zona de text, Etichetă, Set de câmpuri, Legendă - liste derulante, zone de text și alte elemente ale formularelor web
Pentru început, vreau să vă reamintesc puțin ce sunt, de fapt, formularele web și de ce sunt necesare în paginile site-ului. Ele sunt concepute în primul rând pentru a repeta elementele disponibile în orice sistem de operare într-un mod ușor de utilizat: butoane, câmpuri de introducere a textului, liste derulante, casete de selectare, butoane radio și altele asemenea.
Toți utilizatorii, fără nicio explicație suplimentară, înțeleg scopul acestor elemente, iar dacă văd butonul Html al formularului, înțeleg că trebuie să facă clic pe el.
Mai mult, toate elementele sale constitutive (cum ar fi Select, Option, Textarea, Label, Fieldset, Legend) sunt piese de prelucrat deja finisate (containere), pentru a le insera, pe care va fi suficient doar să folosești eticheta necesară cu atributele și parametrii necesari.
Browserele înșiși știu cum să afișeze un anumit element al unui formular web. Adevărat, opțiunile pentru afișarea aceluiași element al acestuia în browsere diferite pot diferi ușor unele de altele, dar, de regulă, nu este esențială.
Acea. se dovedește că formularele web în Html sunt o încercare de a transfera cheia elemente utilizate în orice sistem de operare, către paginile site-ului. Dar de ce ar putea fi necesare pe paginile site-ului?
Practic, în același scop pentru care sunt folosite elemente similare în sistemele de operare - transferul de date de la utilizator. În cazul formularelor, datele de la utilizator sunt transmise către server, unde sunt prelucrate printr-un program special (din păcate, limbajul de marcare hipertext nu permite prelucrarea datelor).
Deși, datele pot fi trimise nu numai către server, ci și, de exemplu, prin e-mail la adresa specificată în atributul Action al etichetei Form. La trimiterea datelor din Html pe E-mail, utilizatorul care completează câmpurile, după ce a apăsat butonul de trimitere a datelor, va lansa programul de mail folosit implicit pe computerul său.
În acest caz, eticheta Formular de deschidere ar trebui să arate cam așa:

Selectați și Opțiune - etichete drop-down
Toate elementele formularului web care creează câmpuri cu liste derulante sunt formate în același mod. În primul rând, containerul casetei combinate este setat folosind o etichetă Html Select de deschidere și de închidere. Și apoi în interiorul acestui container sunt create containere separate cu elementele (elementele) din această listă. Acest lucru se face folosind etichetele de deschidere și închidere Option.
Se dovedește ceva de genul:
Dar aceasta este o construcție simplificată, deoarece Select și Option au un număr de atribute care definesc proprietățile și aspectul casetei cu listă derulantă creată.
Nume - trebuie să specificați un nume unic pentru acest element de formular web creat folosind Selectare. Acest nume va fi transmis serverului în programul de gestionare a datelor ca nume pentru variabilă. Valoarea atributului Valoare (setat în Opțiune pentru fiecare articol) al elementului din lista derulantă pe care îl selectează utilizatorul va fi transmisă ca valoare a acestei variabile.
Dimensiune - folosindu-l puteți seta numărul de articole afișate. Cu alte cuvinte, cu ajutorul Dimensiunii, poți seta înălțimea listei, măsurată în numărul de linii afișate. Dacă nu specificați în mod explicit valoarea Dimensiune în eticheta Selectare, atunci valoarea implicită a înălțimii listei derulante va fi utilizată și va fi diferită în absența sau prezența atributului Multiple în Selectare:
Dacă Multiple este prezent în Select, atunci înălțimea listei derulante din formularul web va fi egală cu numărul elementelor sale în mod implicit. Acestea. vor fi afișate toate elementele din meniul derulant cu opțiuni multiple. Vezi mai jos un exemplu de plural. Dacă atributul Dimensiune din Selectare este setat la mai puțin decât numărul de articole, atunci va apărea o bară de defilare în partea dreaptă.
Dacă nu există Multiple în Selectare, atunci înălțimea listei derulante din formularul web va fi egală cu o linie în mod implicit. Acestea. doar o linie va fi vizibilă, iar restul articolelor vor fi disponibile doar când apăsați butonul liftului (din dreapta). Vezi exemplul de mai jos

Multiple - atribuirea acestui atribut în eticheta Select vă va permite să creați o listă derulantă cu posibilitatea de a selecta mai multe articole în același timp. Citiți mai multe despre acest atribut mai jos.

Formularele dropdown pot fi împărțite în două opțiuni. În prima opțiune, puteți selecta un singur element (linie) al câmpului cu o listă derulantă, în a doua opțiune, în timp ce țineți apăsat Ctrl sau Shift, puteți selecta mai multe dintre elementele disponibile în același timp.
În acest caz, în a doua opțiune, datele despre toate articolele selectate vor fi trimise către server. Lista derulantă care va fi creată este determinată de prezența sau absența atributului Multiple din eticheta Select.
Multiplu este specificat în Selectare fără un parametru, deoarece se scrie simplu Multiple si atat. Dacă este prezent, atunci va fi creat un formular web cu listă derulantă cu posibilitatea de selecție multiplă (ținând apăsat Ctrl sau Shift).
O variantă a câmpului cu o listă derulantă, în care va exista posibilă alegere multiplă, va arăta cam așa:
În dreapta este un exemplu de formular web pentru o listă derulantă cu selecție multiplă, care se bazează pe codul de mai sus. După cum puteți vedea, ținând apăsat Ctrl sau Shift, puteți selecta mai multe puncte în același timp.
Dacă nu există un atribut Multiple în eticheta Selectare, atunci poate fi selectat un singur articol din această listă derulantă (rând).
Un exemplu în care poate fi selectat un singur articol poate fi văzut aici:
Etichetă Selectați site-ul SelectED Legend
Atribute etichete de opțiune

În lista derulantă creată (folosind Selectare și Opțiune), puteți adăuga ceva precum separatori cu titlul grupurilor, care va diferi de restul elementelor de meniu în stilul fontului.
Pentru a crea un grup din elementele din lista derulantă, trebuie să le includeți în etichetele de deschidere și de închidere ale formularului Optgroup, iar în eticheta de deschidere a Optgroup, scrieți atributul Label, ca parametru al căruia veți trebuie să introduceți numele grupului dorit.
De exemplu astfel:
Selectare etichetă
Site-ul web SelectED Legend
Textarea - crearea unui câmp de text într-un formular
Mai există un element al formularelor web pe care nu l-am luat în considerare - Textarea (un câmp cu posibilitatea de a introduce text pe mai multe rânduri). Este creat folosind eticheta HTML asociată Textarea. Mai mult, în el puteți transfera text pe o nouă linie și acesta va fi transmis către server ținând cont de transferurile efectuate.
Deci, pentru a crea un câmp de text cu mai multe linii, trebuie să înregistrați Textarea de deschidere și de închidere, iar între ele puteți adăuga text care va fi vizibil când pagina cu formularul web este încărcată. Utilizatorul poate apoi șterge acest text și poate scrie pe al său.

Ce poți spune despre tine?
Următoarele atribute pot fi utilizate cu Textarea:
Nume - setați un nume pentru acest element de formular web. Acesta va fi transmis serverului programului de gestionare a datelor
Cols - îl puteți folosi pentru a seta lățimea câmpului multiliniar creat în caractere.
Rânduri - setați înălțimea câmpului multiliniar creat (în rânduri). Dacă textul introdus de utilizator are mai multe linii decât înălțimea câmpului de text cu mai multe linii, va apărea o bară de defilare în dreapta câmpului în formularul web.
Numai în citire - interzice utilizatorilor să modifice sau să adauge propriul text în acest câmp (numai în citire).
Dezactivat - utilizatorul, ca și în cazul atributului Readonly, nu va putea modifica conținutul câmpului de text din formularul web, dar își va schimba culoarea în gri, indicând că este inactiv.

Etichetă - pentru ce este această etichetă HTML din formular?
Eticheta html Label vă permite să implementați o caracteristică foarte interesantă în formulare care este disponibilă în sistemele de operare. Acolo, dacă vă amintiți, pentru a activa orice element, nu este necesar să faceți clic pe el, puteți face clic pe numele acestui element - va fi în continuare activat.
În formularele web, acest lucru nu se întâmplă în mod implicit - trebuie să faceți clic pe chiar elementul formularului Html pentru a-l activa. De exemplu, trebuie să faceți clic pe o casetă de selectare pentru a pune o bifă în ea. Făcând clic pe textul de lângă caseta de selectare nu va avea niciun efect. Incearca-l tu insuti:
Eticheta
Selectați
Selectat
După cum puteți vedea, să faceți clic pe text pentru a activa acest element este inutil - trebuie să faceți clic singur pe el. Aceasta este exact starea de fapt și are scopul de a repara eticheta Label. Vă permite să faceți clic pe textul de lângă elementul formularului web, ceea ce este, fără îndoială va îmbunătăți gradul de utilizare.
Dar cum să legați elementul HTML al formularului și al textului? Pentru a face acest lucru, adăugați un ID cu un parametru unic la atribut și înconjurați textul cu etichete Label de deschidere și de închidere. Și asta nu este tot. În eticheta de deschidere Label, trebuie să înregistrați atributul For, al cărui parametru trebuie să fie exact același cu atributul ID din eticheta HTML a elementului de formular. Se dovedește ceva de genul:

După cum puteți vedea, acum, datorită utilizării Etichetei, elementele formularului web pot fi activate nu numai făcând clic pe el, ci și făcând clic pe textul aflat lângă el.
Fieldset și Legend - ruperea formei în bucăți
Probabil ați văzut adesea că formele mari în HTML sunt împărțite în grupuri (Fieldset), care sunt înconjurate de un cadru și fiecare astfel de grup are propriul său titlu (Legendă). Acest lucru se face cu doar două etichete: Fieldset și Legend. Sunt pereche, adică trebuie să aibă o deschidere și o închidere fără greșeală.
Deci, pentru a crea un grup de părți componente, trebuie să înfășurați toate aceste părți în etichetele de deschidere și de închidere ale Fieldset-ului. Și pentru a seta un titlu (Legendă) pentru acest grup, trebuie să scrieți imediat după Fieldset de deschidere o structură din Legenda de deschidere și de închidere, între care trebuie să introduceți textul titlului grupului.
Iată un exemplu de creare de grupuri folosind Fieldset și Legend:

Multă baftă! Ne vedem curând pe paginile site-ului blogului
puteți viziona mai multe videoclipuri accesând
");">
S-ar putea să fiți interesat
Selectare, Opțiune, Zona de text, Etichetă, Set de câmpuri, Legendă - Etichete HTML ale formularului derulant și casetă de text
Liste în cod HTML - etichete UL, OL, LI și DL
MailTo - ce este și cum se creează un link în Html pentru trimiterea unui e-mail
Cum sunt setate culorile în codul Html și CSS, selecția nuanțelor RGB în tabele, Yandex și alte programe

Având în vedere etichetele HTML de bază, nu putem decât să atingem un element atât de important precum formularele. Feedback-ul este adesea necesar pe paginile web. De exemplu, completarea unui chestionar pe site, înregistrare, autorizare, comentarii etc. În toate aceste cazuri, utilizatorul completează zone speciale (câmpuri de formular) pe pagină, după care datele sunt trimise către server. Formularele sunt folosite pentru a crea feedback. Un formular este un fragment dintr-un document HTML destinat introducerii utilizatorului.
În figura este prezentat formularul de înscriere a studenților pe site-ul instituției de învățământ.
Pentru a crea formularul se folosește un container
cu atributul action, care specifica pagina de pe server care va procesa datele transmise prin formular.
Structura formei celei mai simple:

elemente de formă...
Fiecare formular are nevoie, de asemenea, de un buton de trimitere pentru a trimite date după ce formularul a fost completat.
Structura butoanelor:
Deci, pentru a înregistra aproape toate elementele de formular, se folosește eticheta cu un atribut tip. Pentru a crea un buton care va reseta toate datele din formulare, se folosește următoarea structură:
Pentru a crea un câmp text, există parametrul text. În acest caz, se folosesc următorii parametri: nume - nume câmp; dimensiune - pentru câmpul în simboluri; maxlength - numărul maxim posibil de caractere din câmp; valoare - informații afișate implicit în formular
Un exemplu de intrare de formular cu două câmpuri de text:

Introdu numele tau:

Introduceți numele dvs. de familie:

Rezultatul formularului este prezentat în figură.
Dacă trebuie introdusă o cantitate mare de informații într-un câmp de text, de exemplu, un comentariu, se folosește forma unei zone de text, care este creată folosind eticheta cu următoarele atribute: nume - denumirea zonei; cols - numărul de coloane din zonă; rânduri - numărul de rânduri; wrap - o modalitate de a înfășura linii (on - wrap lines, off - nu înfășurați linii).Adăugați un câmp de zonă de text la codul de mai sus:Un comentariu: <textarea name="area" cols=”25” rows=”5” wrap=”on”>
Rezultatul lucrului codului cu zona de text este prezentat în figură.

Următorul element al formularelor sunt listele, permițându-vă să alegeți din setul de valori prezentat. Etichetele vă permit să creați un formular de listă

Pentru ca elementul să fie selectat la încărcarea paginii, este necesar în etichetă
O metodă similară de selecție este caseta de selectare și elementele de formular cu butonul radio. Diferența dintre aceste elemente este că caseta de selectare vă permite să faceți mai multe alegeri, iar butonul radio doar una singură.
Structura de introducere a casetei de selectare și a butonului radio:
text
Buton de radio:
text
Elementele specificate în schiță folosesc atributul bifat pentru a evidenția caseta de selectare și butonul radio în mod implicit. Un exemplu de utilizare a unei casete de selectare, a unui buton radio și a unui cod HTML este prezentat în figură.
Un alt element de formular este un buton, specificat folosind atributul type al etichetei cu valoarea butonului:
În codul specificat pentru crearea unui buton, există un parametru onclick, în care, de regulă, un cod în limbajul de programare este setat să efectueze o acțiune atunci când se face clic pe acest buton:
Comanda javascript alerted este folosită pentru a afișa un mesaj într-o fereastră specială. Rezultatul exemplului este prezentat în figură.
Pentru a insera o imagine într-un buton, utilizați codul prezentat în exemplul următor:
Când vă înregistrați și vă conectați la site-uri, este utilizat un câmp cu un test ascuns afișat ca asteriscuri. Acesta este elementul formularului de parolă:
Înregistrarea pe site este adesea împărțită în mai multe pagini și fiecare dintre acestea ulterioare ar trebui să conțină informații din cea anterioară. Pentru a ascunde informațiile transmise se folosește elementul de formular ascuns:
Elementul de formular ascuns va fi invizibil în fereastra browserului.
Formularele au un element de fișier pentru a încărca fișiere pe server. Un exemplu de cod pentru încărcarea fișierelor pe server este prezentat mai jos:
Așadar, în acest subiect, am analizat elementele de formular pentru crearea diferitelor pagini HTML, care, împreună cu handlere de script pe un computer sau server, vă permit să dezvoltați aplicații web cu drepturi depline.