Contacte
Acasă › ›

Elemente de formular HTML - listă derulantă (select, opțiune, etichete optgroup), câmp de text (textarea), precum și utilizarea etichetei, setului de câmpuri și a legendei. Selectarea dintr-o listă derulantă în HTML Cum se selectează o pagină în HTML

O casetă combinată, numită și meniu derulant, este unul dintre elementele de formular flexibile și convenabile. În funcție de setări, puteți selecta una sau mai multe valori din listă. Avantajul unei liste este compactitatea și versatilitatea acesteia, lista poate ocupa una sau mai multe linii și puteți selecta una sau mai multe valori din ea. Caseta combinată este creată după cum urmează.

Etichetă , care stabilește înălțimea listei, lățimea listei este determinată automat în funcție de lungimea textului din interior

Atributele etichetei , cu care puteți modifica prezentarea listei.

multiplu

Prezența multiplelor spune browserului să afișeze conținutul elementului



Nume

Definește un nume unic de element este adăugat atributul multiplu, apoi puteți selecta mai mult de un articol.

valoare

Definește valoarea elementului din listă care va fi trimisă serverului. O pereche „nume/valoare” este trimisă la server, unde numele este specificat de atributul nume al etichetei



Gruparea articolelor din listă

Dacă lista este destul de extinsă, este logic să grupați elementele sale în blocuri pentru a vă asigura că lista este vizuală și ușor de lucrat. Eticheta este folosită în acest scop . Este un container în interiorul căruia sunt amplasate etichetele este că nu este evidențiat ca un element obișnuit de listă, este subliniat folosind stilul aldine, iar toate elementele incluse în acest container sunt deplasate la dreapta poziției lor inițiale. Pentru a adăuga un titlu de grup, utilizați atributul etichetă, așa cum se arată în Exemplul 3.

Exemplul 3: Gruparea articolelor din listă

HTML5 IE Cr Op Sa Fx

Listă



Rezultatul exemplului este prezentat în Fig. 1.

Orez. 1. Lista grupată

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

Astăzi vom vedea 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 are scopul de a introduce orice informație de la utilizator și de a o trimite 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ă folosind HTML creăm doar aspectul formularului, iar datele necesare sunt trimise pentru prelucrare. În acest scop, pe serverul web este creat în mod intenționat un fișier special, scris într-una dintre limbile serverului (cel mai adesea, PHP). Să presupunem că, pentru feedback, puteți crea un fișier mail.php, care va fi handler.

Când utilizați în practică informațiile obținute în această publicație, nu uitați cum ar trebui să arate, unde codurile tuturor elementelor vizibile ale paginii, inclusiv formularele, sunt întotdeauna situate în eticheta body.

Aceste informații sunt extrem de necesare, deoarece, chiar dacă utilizați toate instrumentele moderne de dezvoltare integrate în ele (să vă reamintesc, primul semn în implementarea acestei funcționalități a fost), trebuie să înțelegeți clar mecanismul de utilizare a etichetelor principale, atunci editarea codului HTML, a cărui nevoie apare din când în când, se va transforma într-o activitate 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ă 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 folosind Shift, urmând una după alta):

3. mărimea— setează înălțimea listei derulante, adică numărul de linii afișate. Dacă atributul multiplu este prezent și valoarea mărimii 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) - definește că trebuie făcută o selecție î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ă încărcarea paginii. În plus, dacă utilizatorul este obișnuit să efectueze majoritatea acțiunilor folosind taste, atunci o astfel de focalizare pre-configurată va ajuta la efectuarea selecțiilor 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 scripturi în cazurile în care trebuie să activați o listă derulantă numai atunci când sunt îndeplinite anumite condiții:

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

. În acest caz, parametrul este scris ca valoare a atributului formular ID de atribut global 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ă a formularului. În exemplul de mai sus, atributul id="data" a fost adăugat la eticheta de formular, iar form="data" a fost adăugat la eticheta select, ceea ce a făcut posibilă asocierea listei derulante cu un anumit formular.

Atribute etichete de opțiune

1. Valoare— definește valoarea din lista derulantă care va fi trimisă către server (procesor de formulare). De fapt, handlerului i se trimite un nume, care este specificat de atributul name 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ă selecția unui element din lista derulantă.

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 unui anumit element de listă. Dacă eticheta este prezentă, atunci o linie identică cu valoarea acestui atribut este tipărită și conținutul textului din interiorul etichetei opțiunii este ignorat. Același lucru se întâmplă dacă conținutul dintre total absent.

Tag Textarea Tag Label Tag Fieldset Legenda etichetei

Uite. În exemplul de mai sus, prima linie pentru opțiune din cod este goală (în partea stângă a tabelului), dar parametrul label="Option Tag" este scris, ca urmare, acest text special apare în listă (pe partea dreapta). A doua linie de cod conține textul „Textarea Tag” ca conținut al etichetei opțiunii, dar meniul drop-down din dreapta arată cuvântul „Textarea” pentru a se potrivi cu valoarea label="Textarea".

4. Selectat— selectează elementul curent din lista verticală:

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 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 configurarea unei astfel de liste derulante.

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

Opțiune Textarea Label Fieldset Legend

Același lucru, 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 instalat, iar 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 text într-un formular folosind textarea

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

Introdu text:

Introdu text:

Puteți efectua rupturi de rând în câmp, iar textul va fi transferat procesorului de pe server, ținând cont de modificările efectuate. Câmpul poate fi întins în lățime și lungime făcând clic pe colțul din dreapta jos, care este marcat cu două dungi diagonale.

Să încercăm acum 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 din formular atunci când este procesată pe server.

2. cols— lățimea câmpului, care este specificată ca parametru prin numărul de caractere identice adiacente plasate orizontal. Valoarea implicită este 20.

3. Rânduri— înălțimea câmpului 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, î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ă un text cu mai puține caractere, browserul va afișa un mesaj scurt cu informații care vor conține mențiunea necesității de a completa conținutul formularului și câte caractere au fost deja introduse.

7. Numai citire(fără parametri) - dacă atașați acest atribut textarea, câmpul text nu va fi editabil de către utilizatori ș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 ar trebui să ofere indicii atunci când utilizatorul completează un formular bazat pe datele introduse anterior și oferă posibilitatea de a insera automat textul corespunzător.

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

Introdu text:

Acest atribut cu valoarea „pornit” funcționează numai atunci când completarea automată a câmpurilor de formular este activată în browserul web al unui anumit utilizator.

9. Înfășurați- setează regulile browserului pentru întreruperile de rând în zona de text folosind trei valori:

Moale— un set de caractere care nu se încadrează în câmp în lățime este transferat automat pe o nouă linie. În acest caz, procesorul textul va fi trimis pe o singură linie. Dacă utilizatorul transferă text în orice loc dorit folosind tasta „Enter”, atunci un astfel de transfer este salvat la trimiterea formularului web.

Introdu text:

Introdu text:

Greu— cratimele se fac automat dacă textul nu se încadrează în câmpul în lățime, iar atunci când sunt trimise la procesor, locurile acestor cratime vor fi salvate. Această opțiune este utilizată numai în în legătură cu atributul cols:

Introdu text:

Introdu text:

Oprit— dezactivați întreruperile de linie. Dacă imprimaț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ă(nu are parametri) - inițiază focalizarea pe câmpul de text la încărcarea paginii cu formularul.

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 colorată în gri:

Descriere

Etichetă care stabilește înălțimea listei.

în interiorul formei. Acest lucru este necesar și atunci când datele din listă sunt accesate prin scripturi.

Sintaxă

Vă permite să săriți la o 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 element.

HTML5 IE Cr Op Sa Fx

Asociază o listă cu un formular.



Numele elementului care urmează să fie trimis la server sau accesat prin scripturi.

).

Lista trebuie selectată înainte de a trimite formularul.

Numărul de linii de listă de afișat.

Definește secvența de tranziție între elemente la apăsarea tastei Tab

</span> Etichetă de închidere <select><span>

Exemplu de utilizare a unui element

) este posibilă dezactivarea unui anumit element de meniu (parametru). Atributul poate fi folosit împreună cu scripturi, de exemplu, până când este îndeplinită o anumită condiție, parametrul este inactiv.

în lista derulantă

A Opțiunea A Opțiunea C care este folosit pentru a grupa datele conexe într-o listă derulantă

Exemplu de utilizare a etichetei HTML . Atributul etichetă al elementului specifică numele grupului selectat, scris 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:

Dezactivați lista și selectarea multiplă

</span> Atributele etichetelor dezactivate și multiple <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 posibil să selectați mai multe opțiuni în listă simultan (prin Ctrl pe Windows și prin Comanda pe Mac).

) este posibilă dezactivarea unui anumit element de meniu (parametru). Atributul poate fi folosit împreună cu scripturi, de exemplu, până când este îndeplinită o anumită condiție, parametrul este inactiv.

Zona de text

Rezultatul exemplului nostru:

Dezactivarea zonei de text

Prin analogie cu elementele de etichetă discutate anterior




tip = "submit" name = "submitInfo" value = "submit" > !}

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