Crearea unui formular în HTML. Cum se face o listă derulantă în html? Crearea de grupuri de elemente derulante ale listelor de formulare

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

Astăzi vom învăța cum să creăm liste derulante (derulante)., inclusiv cu 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 destinat introducerii oricărei informații de la utilizator și trimiterii acesteia către server (exemplu -).

Din păcate, instrumentele limbajului de marcare hipertext nu ne permit să procesăm direct aceste informații, așa că cu HTML creăm doar aspectul formularului, iar datele necesare sunt trimise pentru procesare. În acest scop, un fișier special scris într-una dintre limbile serverului (cel mai adesea PHP) este creat în mod intenționat pe serverul web. Să spunem, pentru feedback, puteți crea un fișier mail.php, care va fi handler.

În utilizarea practică a informațiilor primite în această publicație, nu uitați cum ar trebui să arate, unde codurile pentru toate elementele vizibile ale paginii, inclusiv formularele, sunt întotdeauna în eticheta body.

Această informație este esențială, deoarece chiar dacă utilizați toate instrumentele moderne de dezvoltator încorporate (vă reamintesc că primul semn în implementarea acestei funcționalități a fost), trebuie să înțelegeți clar mecanismul de utilizare a etichetelor principale, apoi editarea HTML-ului codul, a cărui nevoie apare din când în când, se transformă într-o activitate distractivă.

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ă selectați mai multe linii din această listă cu mouse-ul deodată (una câte una în orice loc, ținând apăsată tasta Ctrl sau prin intermediul Shift care urmează rând pe rând):

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

Opțiune Textarea Label Fieldset Legend

4. Necesar(nu are parametri) - specifică că trebuie făcută o alegere înainte de a trimite date către handler. Dacă nu este selectat un element din listă, atunci datele formularului nu vor fi trimise:

Opțiune Textarea Label Fieldset Legend

5. focalizare automată(nu contează) se concentrează pe listă imediat după ce pagina este încărcată. În plus, dacă utilizatorul este obișnuit să facă majoritatea 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ă activați o listă derulantă numai dacă sunt îndeplinite anumite condiții:

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

. În același timp, parametrul este scris în rolul valorii atributului form atribut global id, care este adăugat la eticheta de formular:

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

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

atributele etichetei opțiunii

1. valoare- determină valoarea din lista derulantă care va fi trimisă către server (manager de formulare). De fapt, numele este trimis managerului, care este stabilit de atributul nume al etichetei select și valoare(pentru acest exemplu - 1, 2, 3, 4, 5), corespunzător liniei selectate din lista derulantă:

Opțiune Textarea Label Fieldset Legend

2. Dezactivat— blochează elementul 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 unuia sau altuia dintre elementele listei. Dacă eticheta este prezentă, atunci șirul care este 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.

Etichetă Textarea Etichetă Etichetă Fieldset Etichetă Legendă

Vedea. În exemplul oferit mai sus, prima linie pentru opțiunea din cod este goală (în partea stângă a tabelului), dar este specificat parametrul label="Option tag", ca urmare, acest text a apărut î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 arată cuvântul „Textarea”, care se potrivește cu valoarea label="Textarea".

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

Opțiune Textarea Label Fieldset Legend

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

Opțiune Textarea Label Fieldset Legend

atributele etichetei optgroup

Dacă lista derulantă trebuie sortată cumva, de exemplu, împărțită în grupuri, atunci pentru fiecare dintre aceste grupuri se folosește un container, constând din etichetele optgroup de deschidere și de închidere, care conține o parte din elementele listei derulante. Cu toate acestea, există două atribute pentru personalizarea unei astfel de liste derulante.

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

Opțiune Textarea Label Fieldset Legend

La fel, dar cu multiple și size="7" ale 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 gri:

Opțiune Textarea Label Fieldset Legend

Un scurt videoclip ar fi de mare ajutor aici:

Câmp text în formă prin zona 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 linii în el. Poate fi creat folosind eticheta textarea. Fără atribute implicite, aplicarea acestei etichete va produce următorul rezultat:

Introdu text:

Introdu text:

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

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

1. Nume- Specifică numele zonei de text ca valoare pentru a o identifica după ce datele din formular sunt trimise atunci când sunt procesate pe server.

2. col- lățimea câmpului, care ca parametru este stabilit de numărul de caractere identice care stau unul lângă altul, așezate orizontal. Valoarea implicită este 20.

3. Rânduri- inaltimea campului de text, determinata de numarul de linii. Dacă numărul de rânduri de text introdus de utilizator este mai mare decât valoarea specificată de acest atribut, în dreapta va apărea o bară de defilare verticală.

4. Lungime maxima- Specifică numărul maxim de caractere care pot fi plasate în câmpul de text. Dacă limita este depășită, nu va fi posibilă introducerea suplimentară.

Mai jos este un exemplu cu toate atributele de mai sus, efectul fiecăruia dintre ele îl 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:

Introdu text:

5. minlength- Specifică 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 vor menționa necesitatea completării conținutului formularului și câte caractere au fost deja introduse.

7. Numai citire(fără parametri) - dacă acest atribut este atașat zonei 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ă- indică dacă browserul ar trebui să ofere indicii atunci când utilizatorul completează formularul pe baza datelor introduse anterior și face posibilă inserarea automată a textului corespunzător.

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

Introdu text:

Acest atribut, setat la „pornit”, funcționează numai atunci când browserul web al utilizatorului are activate câmpuri de completare automată.

9. Înfășurați- setează regulile de împachetare a liniilor browserului în zona de text 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 același timp, procesorul textul va fi trimis pe o singură linie. În cazul în care utilizatorul împachetează textul în orice loc dorit folosind tasta „Enter”, atunci o astfel de înfășurare este salvată la trimiterea formularului web.

Introdu text:

Introdu text:

Greu- separarea în silabe se efectuează automat dacă textul nu se încadrează în câmpul în lățime, iar, atunci când este trimis către handler, locurile unei astfel de silabe vor fi salvate. Această setare este utilizată numai în în legătură cu atributul cols:

Introdu text:

Introdu text:

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

Introdu text:

Introdu text:

10. focalizare automată(fără 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 de obicei este vopsită în gri:

Salutări tuturor cititorilor blogului meu. Astăzi vă voi spune cum să faceți o listă derulantă în html, ce etichete și atribute trebuie să utilizați și, de asemenea, în ce scopuri ați putea avea nevoie de ea.

Selectați eticheta și crearea unei liste derulante

Deci, o listă derulantă în html este creată folosind o etichetă de selectare împerecheată, în care sunt plasate etichete de opțiuni asociate. În ele sunt înregistrate toate opțiunile care vor fi oferite atunci când dați clic pe listă. Exemplu:

Alege un animal

În acest caz, ceea ce este afișat între partea de deschidere și de închidere a opțiunii, veți vedea pe ecran, iar valoarea conținută în atributul value va fi trimisă la server sau procesată folosind un script.

Lista în html poate fi normală și cu opțiuni multiple. Pentru a face posibilă selectarea mai multor elemente, trebuie să adăugați un atribut multiplu gol la select . Pentru a selecta mai multe valori, țineți apăsat ctrlși apăsați butonul stâng al mouse-ului.

Un alt atribut util este dimensiunea. Vă permite să alegeți câte rânduri să afișați în lista verticală.

Un alt atribut este dezactivat. Face lista inaccesibilă pentru clic și vizualizare articole, dar în același timp este vizibilă pe pagină.

Este necesar un atribut html5. Dacă este setat, formularul nu va fi trimis decât dacă o valoare este selectată din lista verticală. În general, devine o alegere obligatorie. În timp ce atributul nu funcționează în toate browserele.

atributele etichetei opțiunii

De fapt, select servește doar ca un container pentru articolele din listă, ele însele sunt setate folosind eticheta opțiune. Are un parametru de valoare, așa cum am aflat deja, dar mai sunt și alții în afară de acesta. De exemplu:
Dezactivat - face ca elementul din listă să nu fie disponibil pentru selecție. Va fi afișat, dar nu puteți da clic pe el.

Selectat - Elementul va fi selectat implicit. Într-o listă obișnuită, acest atribut fără valoare poate fi setat la un singur articol, într-o listă multiplă, la mai multe.

Clarificare importantă pentru funcționarea corectă

Dacă rezultatul selecției va trebui trimis la server sau procesat prin scripturi, atunci puneți selecția în formular, astfel încât să nu apară erori. Faptul este că lista derulantă a fost creată inițial exact ca unul dintre elementele formularului.

Pentru ce este selectat?

De obicei, vă poate fi util dacă vă înregistrați pe site-ul dvs. sau doriți să efectuați un sondaj. Elementul are un dezavantaj - nu schimba foarte bine aspectul prin css.

În mod implicit, când dați clic pe listă, apare un cadru albastru, elementele din listă peste care trece cursorul sunt evidențiate în aceeași culoare. Pentru ca atunci când faceți clic pe cadrul să nu apară sau să fie evidențiat într-o culoare diferită, puteți scrie următorul selector:

select:focus(
contur: 1px portocaliu solid;
}

Rama va fi acum portocalie.

Opțiunea poate fi, de asemenea, stilată, dar când treceți cu mouse-ul peste un articol, fundalul acestuia devine albastru și, din anumite motive, acest lucru nu se schimbă prin stiluri.

Opțiune(
culoarea maro
fundal: aqua;
}

Apropo, poate unul dintre voi știe cum să schimbe culoarea de fundal atunci când trece cu mouse-ul peste un articol folosind css?

Asta, de fapt, este totul despre eticheta select și aplicația acesteia. Nu sunt furnizate funcții suplimentare în HTML. Toate celelalte operațiuni cu acesta se pot face folosind javascript și php. De exemplu, dacă trebuie să creați o listă pentru alegerea unui an de naștere și pot exista 80-100 de opțiuni diferite, le-ați scrie manual?

Doar pentru asta, trebuie să folosiți programarea, și anume bucla. Ei bine, acesta este un subiect pentru o altă conversație, dar pentru astăzi acestea sunt toate informațiile pe care am vrut să vă spun. Vă puteți familiariza cu alte etichete de bază în html.

Eticheta de opțiune HTML este utilizată pentru a crea o listă derulantă care permite utilizatorului să selecteze o opțiune dintr-un set predefinit de valori.

Textul vizibil pentru utilizator poate diferi de textul specificat în atributul value. Iată cum puteți crea o listă derulantă:

  • Lista drop-down este creată folosind eticheta definiți opțiunile de selectat folosind o etichetă
  • În etichetă

De asemenea, puteți seta o clasă CSS în loc să utilizați un ID pentru a stila meniul drop-down.

În secțiunea următoare, voi arăta exemple de utilizare a listei derulante HTML în JavaScript/JQuery. Exemplele vor arăta, de asemenea, cum să stilați

Folosind atributul value

După cum am menționat mai devreme, valoarea atributului valoare poate fi diferită de textul afișat pe pagină. De exemplu, puteți afișa numele țărilor sau culorile pentru utilizatori și puteți utiliza coduri scurte în atributul value.

În următorul exemplu, vom crea o listă derulantă cu un atribut de valoare:

Vezi demonstrația și codul online

Pentru Tag

Un exemplu de accesare a opțiunii selectate în JavaScript

Acum să creăm un exemplu de accesare a valorii opțiunii selectate și efectuarea unor acțiuni. Aceeași listă ca în exemplul de mai sus, o creăm cu opțiuni de culoare. Odată selectat, faceți clic pe butonul pentru a aplica acea culoare documentului:

Vezi demonstrația și codul online

Valoarea opțiunii HTML folosește următorul cod:

Următoarea linie de cod este utilizată în JavaScript pentru a accesa valoarea atributului de valoare al opțiunii valoarea este diferită de text. După ce alegeți o culoare, jQuery afișează textul vizibil în alertă. Codul etichetei

Iată cum este accesată această valoare HTML selectați opțiunea JavaScript selectată:

var selectedcolor = $("#jqueryselect option:selected").text();

De asemenea, puteți accesa valoarea folosind metoda jQuery $.val():

var selectcolor = $("#jqueryselect").val();

Înlocuiți această linie în exemplul de mai sus și codul va afișa valoarea shortcode/color în atributul value în loc de textul vizibil.

Un exemplu de obținere a unei valori într-un script PHP

În acest exemplu de obținere a valorii opțiunii selectate din lista derulantă, formularul este creat folosind eticheta

Și iată cum este folosit scriptul PHP pentru a obține valoarea opțiunii de selectare HTML:

".$_POST["selphp"].""; } ?>

Dacă formularul are o metodă GET, atunci utilizați matrice PHP $_GET[“”].

Definirea stilurilor drop-down cu CSS

Acum să vedem cum să stilăm lista drop-down.

În acest exemplu, etichetăm

În browser arată așa:

Gruparea elementelor de meniu

Să luăm în considerare următoarea etichetă A care este utilizat pentru a grupa datele conexe într-o listă derulantă nume="alb-negru"> label="lista albă">

În acest exemplu, am selectat 2 grupuri cu eticheta . Atributul etichetă al elementului specifică numele grupului selectat cu caractere aldine:

În exemplul următor, folosind atributul boolean dezactivat, vom dezactiva un grup (" Grupa B"):

</span> Un exemplu de utilizare a atributului dezactivat al unei etichete HTML <optgroup><span>

Rezultatul exemplului nostru:

Dezactivarea listei și a selecției multiple

</span> Atributele dezactivate și multiple ale etichetei <select><span>

În acest exemplu, am creat două liste derulante. Pentru prima listă, am folosit atributul disabled, care împiedică interacțiunea cu lista (o dezactivează).

Pentru a doua listă, am folosit atributul multiplu, care indică faptul că este permisă selectarea mai multor opțiuni din listă simultan (prin ctrl pe Windows și prin comanda pe Mac).

În browser arată așa:

Zona de text

Rezultatul exemplului nostru:

Dezactivarea zonei de text

Prin analogie cu elementele considerate anterior, eticheta


tip = "submit" name = "submitInfo" value = "(!LANG:submit" > !}

În acest exemplu, am creat două zone de text (element