Crearea de grupuri de elemente derulante ale listelor de formulare. Crearea unui formular în HTML. Exemplu de meniu derulant

Adesea, pe site-urile Web puteți găsi pagini cu HTML - formulare găzduite pe ele. Formulare web - mod convenabil primirea de 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 dedicat elementelor de bază ale creării formularelor HTML, procesării acestora și metodelor de transfer de date din formularele de ecran în scripturile PHP.

1) Crearea unui formular simplu

Etichete:

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

contine doua atribute: acțiuneși metodă... Atributul de acțiune conține url scriptul care urmează să fie 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ă doriți 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 un script PHP 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.

Acest formular html conține un element 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ă cum să creați un director și să copiați un 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 reveni gol:

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

Salutare dragi cititori ai site-ului blogului. Ca parte a studiului complexităților, ca sarcină următoare, vom continua să analizăm detaliile creării formularelor pe site folosind cele adecvate.

Astăzi vom analiza cum să creăm liste derulante (derulante)., inclusiv alegere multiplă, folosind select și opțiune, cum să construiți câmp de text prin textarea și, de asemenea, vorbim despre posibilitatea extinderii funcționalității formularelor prin utilizarea etichetelor set de câmpuri, etichetă și legendă.

Permiteți-mi să vă reamintesc că orice formular prezent pe pagină este creat folosind și este conceput pentru a introduce orice informație de la utilizator și a le trimite la server (exemplu -).

Din păcate, facilitățile limbajului de marcare hipertext nu permit prelucrarea directă a acestor informații, așadar cu folosind HTML noi doar creăm aspect formulare, iar datele necesare sunt trimise pentru prelucrare. În acest scop, serverul web creează în mod intenționat dosar special scris într-una dintre limbile server-side (cel mai adesea PHP). De exemplu, pentru feedback, puteți crea un fișier mail.php, care va fi handler.

În utilizarea practică a informațiilor obținute în această publicație, nu uitați de cum ar trebui să arate, unde codurile tuturor elementelor vizibile ale paginii, inclusiv formularele, sunt întotdeauna în eticheta body.

Aceste informații sunt extrem de necesare, deoarece chiar și în cazul utilizării tuturor instrumentelor moderne de dezvoltare încorporate (rețineți, primul semn în implementarea acestei funcționalități a fost), trebuie să înțelegeți clar mecanismul de utilizare a etichetelor principale, apoi de editare. codul HTML, a cărui nevoie apare din când în când, se va transforma într-o experiență plăcută.

2. Multiplu- acest atribut, care nu are parametri, permite selecția multiplă, spre deosebire de exemplul de mai sus, unde puteți selecta un singur element (linie). Încercați să evidențiați în această listă cu mouse-ul mai multe linii deodată (una câte una în orice loc, ținând apăsată tasta Ctrl, sau prin intermediul Shift urmând rând pe rând):

3. mărimea- setează înălțimea listei derulante, adică numărul de linii afișate. Dacă atributul multiplu este prezent și dimensiunea nu este specificată (ca în exemplul de mai sus), atunci patru linii sunt afișate implicitși, de exemplu, cu dimensiunea = „5”, cinci vor fi deja vizibile:

Opțiune Textarea Label Fieldset Legend

4. Necesar(nu are parametri) - definește că este necesar să se facă o alegere înainte de a trimite date către handler. Dacă nu este selectat un articol din listă, atunci datele formularului nu vor fi trimise:

Opțiune Textarea Label Fieldset Legend

5. Focalizare automată(nu are valoare) - setează focusul pe listă imediat după ce pagina este încărcată. În plus, dacă utilizatorul este obișnuit să efectueze partea principală a acțiunilor cu tastele, atunci o astfel de focalizare pre-configurată va ajuta să alegeți din listă folosind săgețile de pe tastatură fără a utiliza mouse-ul:

6. Dezactivat(fără parametri) - blochează accesul la listă (o dezactivează). În practică, este de obicei folosit împreună cu scripturile în cazurile în care trebuie să includeți o listă derulantă numai atunci când sunt îndeplinite anumite condiții:

7. Formă- conectează lista cu una sau mai multe forme cărora le aparține, dar se află în afara containerului

... În acest caz, parametrul este scris în rolul valorii atributului form atribut global id care se adaugă la eticheta formularului:

Selectați Opțiune Textarea Label Fieldset Legend din listă

Nu confundați atributul select tag cu eticheta principală pentru crearea unui formular. În exemplul de mai sus, atributul id = „data” a fost adăugat etichetei formular, iar atributul form = „data” a fost adăugat la select, ceea ce a făcut posibilă asocierea listei derulante cu un anumit formular.

Atributele etichetei opțiunii

1. Valoare- definește valoarea din lista derulantă care va fi trimisă către server (managerul de formulare). De fapt, numele este trimis către handler, care este specificat de atributul nume al etichetei select și valoarea valorii(pentru acest exemplu- 1, 2, 3, 4, 5) corespunzător liniei selectate din lista derulantă:

Opțiune Textarea Label Fieldset Legend

2. Dezactivat- blochează un element din lista derulantă pentru selecție.

Opțiune Textarea Label Fieldset Legend

După cum puteți vedea din exemplu, linia „Opțiune” este inactivă și nu poate fi selectată.

3. Eticheta- afișează conținutul textului (care este valoarea acestuia) al acestui sau aceluia articol din listă. Dacă eticheta este prezentă, atunci linia identică cu valoarea acestui atribut este afișată și conținutul textului din interiorul etichetei opțiunii este ignorat. Același lucru se întâmplă dacă conținutul dintre este complet absent.

Textarea Tag Label Tag Fieldset Tag Legend Tag

Uite. În exemplul oferit mai sus, prima linie pentru opțiune din cod este goală (în partea stângă a tabelului), dar este specificat parametrul label = „Etichetă opțiune”, ca urmare, acest text apare în listă (pe partea dreapta). A doua linie de cod conține textul „Textarea Tag” ca conținut al etichetei opțiunii, dar lista derulantă din dreapta afișează cuvântul „Textarea”, care se potrivește cu valoarea etichetei = „Textarea”.

4. Selectat- evidențiază elementul curent din lista derulantă:

Opțiune Textarea Label Fieldset Legend

Dacă atributul multiplu este prezent, atunci este posibil să selectați mai mult de un element:

Opțiune Textarea Label Fieldset Legend

Atributele etichetei Optgroup

Dacă lista derulantă trebuie să fie într-un fel ordonată, de exemplu, împărțită în grupuri, atunci pentru fiecare dintre aceste grupuri se folosește un container, constând în deschiderea și închiderea etichetelor optgroup, care conține o parte din elementele listei drop-down. Cu toate acestea, există două atribute pentru configurarea unei astfel de liste derulante.

1. Eticheta- setează numele fiecărui grup ca parametru:

Opțiune Textarea Label Fieldset Legend

Același, dar cu multiplu și dimensiune = „7” a etichetei select:

Opțiune Textarea Label Fieldset Legend

2. Dezactivat(fără valori) - blochează selecția elementelor grupului în raport cu care este setat, în plus, elementele inactive sunt de obicei evidențiate cu gri:

Opțiune Textarea Label Fieldset Legend

Un scurt videoclip vă va fi util aici:

Câmp de text în formular prin zona de text

Un alt element de formular pentru site pe care îl vom lua în considerare este un câmp cu posibilitatea de a introduce text cu mai multe rânduri în el. Poate fi creat folosind eticheta textarea. Fără atribute implicite, aplicarea acestei etichete va da următorul rezultat:

Introdu text:

În câmp, puteți efectua rupturi de rând, în timp ce textul va fi transmis handler-ului de pe server, ținând cont de rupturile de rând efectuate. Câmpul poate fi întins în lățime și lungime prin apucarea colțului din dreapta jos cu mouse-ul, care este marcat cu două dungi diagonale.

Acum să încercăm să adăugăm mai multe atribute cu parametri la codul original:

1. Nume- definește numele zonei de text ca valoare pentru a o identifica după trimiterea datelor formularului la procesarea acesteia pe server.

2. col- lățimea câmpului, care în rol de parametru este stabilită de numărul de simboluri identice adiacente plasate orizontal. Valoarea implicită este 20.

3. Rânduri- înălțimea casetei de text, determinată de numărul de linii. Dacă numărul de linii de text introduse de utilizator este mai mare decât valoarea specificată de acest atribut, atunci în dreapta apare o bară de defilare verticală.

4. Lungime maxima- indică numărul maxim de caractere care pot fi plasate în caseta de text. Dacă limita este depășită, intrarea ulterioară va fi imposibilă.

Mai jos este un exemplu cu toate atributele de mai sus, acțiunea fiecăruia dintre ele o puteți verifica prin simpla plasare a numărului necesar de litere și linii în zona de text (puteți introduce pur și simplu același caracter de mai multe ori):

Introdu text:

5. Minlength- indică numărul minim de caractere care trebuie introduse în zona de text. Dacă utilizatorul încearcă să trimită text cu mai puține caractere, browserul va afișa un mesaj scurt cu informații, care va conține o mențiune despre necesitatea suplimentării conținutului formularului și câte caractere au fost deja introduse.

7. Numai citire(fără parametri) - dacă atașați acest atribut la zona de text, atunci câmpul de text va fi inaccesibil pentru modificarea utilizatorilor și va fi doar pentru citire. Dar vă puteți concentra asupra acestuia (mutați cursorul în câmp și faceți clic stânga), precum și selectați și copiați (parțial sau complet) textul:

Încă câteva atribute care implementează funcționalități suplimentare la completarea câmpurilor:

8. Completare automată- specifică dacă browserul trebuie să ofere indicii atunci când utilizatorul completează formularul pe baza datelor introduse anterior și face posibilă inserarea automată a textului corespunzător.

Are totul doi parametri: pe(inclus) și oprit(inchis). Iată un exemplu de cod:

Acest atribut cu valoarea „pornit” funcționează numai atunci când câmpurile de completare automată a formularului este activată în browserul web al utilizatorului.

9. Înfășurați- setează regulile pentru împachetarea liniilor în zona de text pentru browser folosind trei valori:

Moale- un set de caractere care nu se încadrează în câmp în lățime este înfășurat automat la o nouă linie. În acest caz, manipulatorul textul va fi transferat ca o singură linie... În cazul în care utilizatorul efectuează transferul de text în orice locul potrivit folosind tasta „Enter”, acest transfer este salvat la trimiterea formularului web.

Introdu text:

Greu- se fac automat silabe in cazul in care textul nu se incadreaza in camp in latime, mai mult, la trimiterea catre procesor se vor salva locurile unor astfel de silabe. Acest parametru este utilizat numai în în legătură cu atributul cols:

Introdu text:

Off- dezactivați întreruperile de linie. Dacă imprimați un fragment de text fără transfer mecanic folosind tasta „Enter”, atunci tot textul va fi plasat pe o singură linie și, în plus, va apărea dungă orizontală defilare:

Introdu text:

10. Focalizare automată(nu are parametri) - inițiază focalizarea pe câmpul de text atunci când pagina cu formularul este încărcată.

11. Dezactivat- spre deosebire de atributul readonly (care interzice și editarea conținutului câmpului, dar face posibilă concentrarea asupra acestuia), blochează complet accesul la zona de text, care este de obicei vopsită în gri:

Descriere

Etichetă care stabilește înălțimea listei. Lățimea listei este determinată de cel mai larg text specificat în etichetă

Sintaxă

Atribute

Vă permite să navigați la listă folosind o comandă rapidă de la tastatură. Setează lista să primească focalizare după ce pagina s-a încărcat. Blochează accesul și modificarea unui articol. Asociază o listă cu un formular. Vă permite să selectați simultan mai multe elemente din listă simultan. Numele elementului care urmează să fie trimis către server sau adresat prin scripturi. Lista este necesară pentru selecție înainte de a trimite formularul. Numărul de linii de listă de afișat. Determină secvența de tranziție între elemente atunci când apăsați tasta Tab

Etichetă de final

Necesar.

HTML5 IE Cr Op Sa Fx

SELECT eticheta

Chiar în interiorul elementului de formular ar trebui să fie amplasate controale, dintre care pot fi câte doriți.

Atributele formularului:

Atributul action specifică fișierul server cu scriptul responsabil pentru prelucrarea principală a datelor trimise din formular. De obicei, codul acestui fișier este scris într-un limbaj de programare pe partea de server, de exemplu, în limbajul respectiv php sau perl.
Atributul enctype indică tipul de informații transmise serverului, dacă este vorba doar de date text - text / simplu, dacă fișierele sunt trimise cu formularul, atunci ar trebui să specificați multipart / form-data.
Atributul metodei specifică și definește forma de transmitere a datelor. Nu ne vom opri asupra acestui lucru în detaliu, dar trebuie spus că pentru un transfer mai fiabil ar trebui specificată metoda postului.

Elemente de formular HTML

<tip de intrare = „text” nume = „autentificare” dimensiune = „20” valoare = „(! LANG: Autentificare" maxlength = "25" > !}

Rezultat:

Valoarea atributului tip - text - indică faptul că acesta este un câmp text
dimensiune - dimensiunea câmpului de text în caractere
maxlength - numărul maxim de caractere care se potrivesc în câmp
valoare - textul original din caseta de text
nume - numele elementului, necesar procesării datelor din fișierul handler

Rezultat:

În loc de text, în câmp este afișată o mască - asteriscuri sau cercuri

Rezultat:

Butonul de trimitere colectează toate datele introduse de utilizator din formular și le trimite la adresa specificată în atributul de acțiune al formularului.

<tip de intrare = „resetare” valoare = „(! LANG: Ștergeți formularul" > !}

Rezultat:

Butonul readuce starea tuturor controalelor la starea lor inițială (șterge formularul)

<tip de intrare = „checkbox” nume = „asp” valoare = „(! LANG: da" > !} ASP <tip de intrare = „checkbox” name = „js” value = „(! LANG: da" checked = "checked" > !} javascript <tip de intrare = „căsuță de selectare” nume = „php” valoare = „(! LANG: da" > !} PHP <tip de intrare = „checkbox” nume = „html” valoare = „(! LANG: da" checked = "checked" > !} HTML

ASP
javascript
PHP
HTML

Rezultat:

ASP
javascript
PHP
HTML

În html, caseta de selectare este folosită pentru a organiza selecția multiplă, de exemplu. când este necesar și posibil să alegeți mai multe variante de răspuns

<tip de intrare = „radio” nume = „carte” valoare = „(! LANG: asp" > !} ASP <tip de intrare = „radio” nume = „carte” valoare = „(! LANG: js" > !} Javascript <tip de intrare = „radio” nume = „carte” valoare = „(! LANG: php" > !} PHP <tip de intrare = „radio” nume = „carte” valoare = „(! LANG: html" checked = "checked" > !} HTML

ASP
Javascript
PHP
HTML

Rezultat:

ASP
Javascript
PHP
HTML

butonul radio html servește pentru o singură selecție din mai multe opțiuni

Atributul verificat setează elementul verificat imediat

Important: Pentru articole radio este necesar ca valoarea atributului Nume toate elementele din grup au avut aceleași: în acest caz, elementele vor funcționa interconectate, când un element este pornit, celelalte vor fi oprite

Meniu derulant HTML

Să ne uităm la un exemplu de adăugare a unei liste derulante:

1 2 3 4 5 6

<selectați numele = "carte" dimensiune = "1"> <valoarea opțiunii = "(! LANG: asp" > !} ASP</ opțiune> <valoarea opțiunii = "(! LANG: js" > !} JavaScript</ opțiune> <valoarea opțiunii = "(! LANG: php" > !} PHP</ opțiune> <valoarea opțiunii = "(! LANG: html" selected = "selected" > !} HTML</ opțiune> </ selectați>

Rezultat:

Lista derulantă constă dintr-o etichetă principală - select - care are o pereche de închidere, iar fiecare element din listă este o etichetă de opțiune, în interiorul căreia este afișat textul articolului
Atribut dimensiune cu valoare "1" indică faptul că lista restrânsă afișează un articol, restul sunt deschise făcând clic pe săgeata de meniu
Atributul selectat al articolului (opțiune) indică faptul că acest articol particular va fi vizibil inițial, iar restul elementelor sunt „restrânse”

Pentru liste mari și complexe, există o opțiune adăugați subtitluri- eticheta optgroup cu atributul label (label):

1 2 3 4 5 6 7 8 9 10 11 12

<selectați numele = "carte" dimensiune = "1"> <optgroup label = „Engleză”> <valoarea opțiunii = "(! LANG: asp" > !} ASP</ opțiune> <valoarea opțiunii = "(! LANG: js" > !} JavaScript</ opțiune> <valoarea opțiunii = "(! LANG: php" > !} PHP</ opțiune> <valoarea opțiunii = "(! LANG: html" selected = "selected" > !} HTML</ opțiune> </ optgroup> <optgroup label = „Ruși”> <valoarea opțiunii = "(! LANG: asp_rus" > !} ASP în rusă</ opțiune> <valoarea opțiunii = "(! LANG: js_rus" > !} JavaScript în rusă</ opțiune> </ optgroup> </ selectați>

Pentru a oferi o oportunitate selectați mai multe articole în același timp trebuie adăugat atributul multiplu. Dar, în acest caz, atributul dimensiune ar trebui setat la o valoare mai mare decât 1:

Text

Rezultat:

Lățimea elementului depinde de atributul cols, care indică câte caractere se potrivesc pe orizontală
Atributul rows definește numărul de rânduri dintr-un element

Alte elemente

Elemente și atribute suplimentare

Pentru controale radioși Caseta de bifat este convenabil să folosiți elemente suplimentare, care, în primul rând, fac textul ancorat la elementul radio sau caseta de selectare în sine și, în al doilea rând, adăugați o lovitură la clic:

ASP

În exemplu, o legendă (etichetă etichetă) este creată pentru elementul casetă de selectare. Legarea se realizează prin atributul id, a cărui valoare este specificată în atributul for al etichetei.

Rezultat:

Atributul dezactivat vă permite să blocați un element, făcându-l indisponibil pentru modificarea utilizatorului:

<tip de intrare = „text” nume = „autentificare” dimensiune = „20” valoare = „(! LANG: Autentificare" maxlength = "25" disabled = "disabled" >!}
<tip de intrare = „checkbox” nume = „asp” valoare = „(! LANG: da" > !} ASP <tip de intrare = „checkbox” name = „js” value = „(! LANG: da" checked = "checked" disabled = "disabled" > !} javascript

ASP
javascript

În ultimii doi ani, dezvoltarea aplicațiilor web (site-urilor) a avansat mult înainte și ceea ce am folosit pentru a crea un site mai devreme este deja depășit sau au apărut metode mai noi.

Anterior, pentru a crea un dropdown în html ( in engleza. - scapă jos), tocmai am folosit