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: |
Î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: |
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:
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: |
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: |
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: |
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
- În interiorul etichetei
- Î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
Exemplu de creare a unei simple liste derulante
Acest exemplu de opțiune de selectare HTML este folosit pentru a crea o listă derulantă cu trei opțiuni din care să alegeți:
În exemplul de mai sus, următorul marcaj este utilizat pentru a crea lista drop-down:
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
var seltheme = document.getElementById(“selcolor”).value;
Când se face clic pe butonul, este apelată o funcție JS care atribuie unei variabile valoarea selectată în lista derulantă. Această valoare este folosită pentru a aplica culoare documentului curent.
Accesarea textului vizibil în jQuery
De data aceasta, voi folosi JQuery pentru a accesa valoarea opțiunii selectate: atât text, cât și value . În această demonstrație, voi accesa textul vizibil într-o etichetă de opțiune în HTML:
Vezi demonstrația și codul online
În codul pentru fiecare opțiune din etichetă
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
Vezi demonstrația și codul online
Metoda formularului folosită în exemplu este POST, deci puteți obține valorile formularului folosind matricea PHP $_POST[“”]. Acesta este codul de formular folosit în exemplu:
Ș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.
Vezi demonstrația și codul online
Proprietatea box-shadow este folosită aici împreună cu linear-gradient . Codul CSS complet arată astfel:
Selcls ( umplutură: 3px; chenar: solid 1px #517B97; contur: 0; fundal: -webkit-gradient(liniar, stânga sus, stânga 25, de la(#FFFFFF), color-stop(4%, #CAD9E3), la (#FFFFFF)); fundal: -moz-linear-gradient(sus, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz- box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; lățime: 150px; )
Colțuri rotunjite cu proprietatea border-radius
Pentru opțiunea de selectare HTML, vom seta proprietatea CSS3 border-radius pentru a face colțurile rotunjite. Se schimbă și schema de culori. Puteți experimenta margini, lățimi, margini și alte proprietăți după cum doriți:
Vezi demonstrația și codul online
Utilizarea mai multor atribute și stiluri CSS
Pentru a permite utilizatorilor să selecteze mai multe opțiuni dintr-o listă, utilizați atributul multiplu. În exemplul de mai sus, poate fi selectată o singură opțiune. Când utilizați mai multe, puteți selecta mai multe opțiuni apăsând tasta CTRL:
Vezi demonstrația și codul online
În acest articol, vom lua în considerare elementele care vă permit să creați liste derulante, să învățați cum să formați grupuri în aceste liste, să luăm în considerare cum să dezactivați elemente și chiar grupuri de liste, să faceți cunoștință cu un element care vă permite să creați un multiplu. -line text, îl puteți utiliza mai târziu în interiorul formularelor HTML (element
În plus, am plasat un buton în interiorul formularului, care servește la trimiterea formularului (element cu butonul tip „trimite formular”: tip = „trimite” ).
Rezultatul exemplului nostru:
Indicator pentru zona de text
Și așa vom lua în considerare exemplul final și vom trece la sarcina practică a articolului din acest tutorial.
Datorită atributului (eticheta HTML
Textul indicativ este ascuns atunci când utilizatorul introduce o valoare (orice caracter) în câmpul de text, dacă este eliminat, indicația va fi afișată din nou.
Să luăm în considerare un exemplu de utilizare:
tip = "submit" name = "submitInfo" value = "(!LANG:submit" > !}
În acest exemplu, am creat două zone de text (element
Rețineți că, dacă câmpul de text este doar pentru citire, atunci conținutul nu poate fi modificat, dar utilizatorul poate în continuare să navigheze la conținut, să-l selecteze și să-l copieze.
În plus, am plasat un buton în interiorul formularului, care servește la trimiterea formularului (element cu butonul tip „trimite formular”: tip = „trimite” ).
Rezultatul exemplului nostru:
Întrebări și sarcini pe această temă
Înainte de a trece la următorul subiect, finalizați sarcina practică:
- Folosind cunoștințele dobândite, alcătuiți următorul formular pentru afișarea unui post vacant:
Înainte de a continua cu sarcina, deschideți exemplul într-o fereastră nouă și examinați cu atenție formularul pentru a repeta toate punctele sale. Pentru a finaliza sarcina, veți avea nevoie de cunoștințe din articol. Dacă l-ai ratat, atunci revino să-l studiezi.
După ce ați terminat exercițiul, inspectați codul paginii deschizând exemplul într-o fereastră separată pentru a vă asigura că ați făcut totul corect.
Puteți crea o listă derulantă în HTML folosind eticheta Selectați. Pe lângă lista drop-down (sau „dropdown”), eticheta Selectați vă permite să creați un element de listă cu selecție multiplă. Sintaxă pentru utilizarea unei etichete Selectați HTML-ul arată astfel:
Aici cu eticheta opțiune sunt date elementele listei.
Rezultatul aplicației:
Electronice Syroezhkin Chizhikov Kukushkina
SELECTAȚI atributele etichetei
Luați în considerare atributele etichetei Selectați:
- Nume
- mărimea- numărul de linii afișate în listă (număr);
- multiplu- include funcția de selecție multiplă a elementelor listei derulante;
- dezactivat- blochează accesul la element;
- formă- vă permite să legați o listă derulantă la un formular (poate fi necesar dacă lista în sine se află în afara formularului la care ar trebui să fie atașată). Id-ul formularului este transmis ca argument.
Poate că acestea sunt toate atributele principale ale etichetei Selectați care sunt utilizate cel mai frecvent. Să vedem acum cum să facem o listă drop-down în HTML folosind atributele specificate:
Atributele etichetei OPTION
Etichetă opțiune, după cum sa menționat deja, vă permite să definiți copiii din lista verticală Selectați, care la rândul său acționează ca un container. Etichetă opțiune are propriile sale atribute:
- dezactivat- instituie interdicția de selecție a acestui element din listă;
- eticheta- vă permite să setați o etichetă pentru elementul curent al listei (în loc de textul specificat în etichetă, este afișată valoarea etichetei, ceea ce vă permite să afișați o valoare scurtată); Atenție: atributul nu este acceptat în browserul Firefox
- selectat- elementul curent din listă va fi selectat implicit;
- valoare- valoarea care va fi transmisa serverului;
Să ne uităm la un caz de utilizare avansat pentru etichetă opțiune:
Rezultatul acestui exemplu va arăta astfel:
Domnul Electronic Syroezhkin Cijikov Kukushkina
Creatorul de site-uri web Nubex are capacitatea de a crea formulare personalizate folosind modulul de generare de formulare. Lucrarea listelor derulante din „Nubex” este descrisă în articol: