Kreiranje obrasca u HTML-u. Kako se padajuća lista radi u html-u? Kreiranje grupa padajućih elemenata lista obrazaca

Pozdrav, dragi čitaoci blog stranice. U sklopu proučavanja zamršenosti, kao sljedeći zadatak, nastavit ćemo analizirati detalje kreiranja obrazaca na stranici koristeći odgovarajuće.

Danas ćemo naučiti kako da kreiramo padajuće (padajuće) liste, uključujući sa višestrukim izborom, korištenjem select i option, kako konstruirati tekstualno polje kroz textarea, a govori se i o mogućnosti proširenja funkcionalnosti formi korištenjem oznaka skup polja, oznaka i legenda.

Dozvolite mi da vas podsjetim da je svaki obrazac prisutan na stranici kreiran pomoću i dizajniran je da unese bilo koju informaciju od korisnika i pošalje je na server (primjer -).

Nažalost, alati jezika za označavanje hiperteksta ne dozvoljavaju nam direktnu obradu ovih informacija, tako da HTML-om kreiramo samo izgled forme, a potrebni podaci se šalju na obradu. U tu svrhu se na web serveru namjenski kreira posebna datoteka napisana na jednom od serverskih jezika (najčešće PHP). Recimo, za povratne informacije, možete kreirati mail.php fajl, koji će biti rukovalac.

U praktičnoj upotrebi informacija dobijenih u ovoj publikaciji, ne zaboravite kako bi to trebalo izgledati, gdje su kodovi za sve vidljive elemente stranice, uključujući obrasce, uvijek unutar oznake tijela.

Ova informacija je bitna, jer čak i ako koristite sve moderne ugrađene alate za programere (podsjećam vas da je prvi znak u implementaciji ove funkcionalnosti bio), morate jasno razumjeti mehanizam korištenja glavnih oznaka, zatim uređivanje HTML-a koda, potreba za kojim se s vremena na vrijeme javlja, pretvoriti u zabavnu aktivnost.

2. višestruko- ovaj atribut, koji nema parametre, omogućava višestruki odabir, za razliku od gornjeg primjera, gdje možete odabrati samo jedan element (linija). Pokušajte mišem odabrati nekoliko redova na ovoj listi odjednom (jedan po jedan na bilo kojem mjestu, držeći pritisnut tipku Ctrl, ili pomoću Shift-a koji slijedi redom jedan po jedan):

3. veličina- postavlja visinu padajuće liste, odnosno broj prikazanih redova. Ako je višestruki atribut prisutan i veličina nije navedena (kao u gornjem primjeru), onda podrazumevano se prikazuju četiri reda, i, na primjer, sa size="5" pet će biti vidljivo:

Opcija Textarea Label Fieldset Legenda

4. Obavezno(nema parametara) - specificira da se mora napraviti izbor prije slanja podataka rukovaocu. Ako element sa liste nije odabran, tada podaci obrasca neće biti poslani:

Opcija Textarea Label Fieldset Legenda

5. auto fokus(nije bitno) postavlja fokus na listu odmah nakon što se stranica učita. Osim toga, ako je korisnik navikao većinu radnji obavljati pomoću tipki, tada će upravo takav unaprijed konfigurirani fokus pomoći da se napravi izbor sa liste pomoću strelica na tastaturi bez upotrebe miša:

6. Onemogućeno(bez parametara) - blokira pristup listi (onemogućava ga). U praksi se obično koristi zajedno sa skriptama u slučajevima kada je potrebno da omogućite padajuću listu samo ako su ispunjeni određeni uslovi:

7. Forma— povezuje listu sa jednim ili više obrazaca kojima pripada, ali je izvan kontejnera

. Parametar se istovremeno ispisuje u ulozi vrijednosti atributa forme globalni id atribut, koji se dodaje u oznaku forme:

Odaberite sa liste Opcija Textarea Label Fieldset Legend

Nemojte brkati atribut oznake za odabir sa glavnom oznakom za kreiranje obrasca. U gornjem primjeru, atribut id="data" je dodan u oznaku forme, a atribut form="data" je dodan u oznaku za odabir, što je omogućilo povezivanje padajuće liste sa određenim obrascem.

atributi oznake opcija

1. vrijednost- određuje vrijednost iz padajuće liste koja će biti poslata serveru (obradavač obrazaca). Zapravo, ime se šalje rukovaocu, koji je postavljen atributom name označene oznake i vrijednost(za ovaj primjer - 1, 2, 3, 4, 5), što odgovara odabranoj liniji padajuće liste:

Opcija Textarea Label Fieldset Legenda

2. Onemogućeno— blokira element padajuće liste za odabir.

Opcija Textarea Label Fieldset Legenda

Kao što možete vidjeti iz primjera, linija "Opcija" je neaktivna i ne može se odabrati.

3. etiketa- prikazuje tekstualni sadržaj (koji je njegova vrijednost) jednog ili drugog elementa liste. Ako je oznaka prisutna, tada se prikazuje niz koji je identičan vrijednosti ovog atributa, a sadržaj teksta unutar oznake opcije se zanemaruje. Isto se dešava ako sadržaj između potpuno je odsutan.

Oznaka Textarea Oznaka oznake Oznaka skupa polja Oznaka legende

Vidi. U gore navedenom primjeru, prvi red za opciju u kodu je prazan (na lijevoj strani tabele), ali je specificiran parametar label="Option tag", kao rezultat toga, ovaj tekst se pojavio na listi (na desnu stranu). Drugi red koda sadrži tekst "Textarea Tag" kao sadržaj oznake opcije, ali padajuća lista sa desne strane prikazuje riječ "Textarea", koja odgovara vrijednosti label="Textarea".

4. Odabrano- ističe trenutnu stavku na padajućoj listi:

Opcija Textarea Label Fieldset Legenda

Ako je prisutan višestruki atribut, tada se može odabrati više od jednog elementa:

Opcija Textarea Label Fieldset Legenda

atributi oznake optgroup

Ako padajuću listu treba nekako sortirati, na primjer, podijeliti u grupe, tada se za svaku od ovih grupa koristi kontejner koji se sastoji od otvarajućih i zatvarajućih oznaka optgroup, koji sadrži dio stavki padajuće liste. Međutim, postoje dva atributa za prilagođavanje takve padajuće liste.

1. etiketa- postavlja naziv svake grupe kao parametar:

Opcija Textarea Label Fieldset Legenda

Isto, ali sa višestrukim i size="7" oznake za odabir:

Opcija Textarea Label Fieldset Legenda

2. Onemogućeno(bez vrijednosti) - blokira odabir elemenata grupe u odnosu na koju je postavljena, štoviše, neaktivne stavke su obično zasivljene:

Opcija Textarea Label Fieldset Legenda

Kratak video bi ovdje bio od velike pomoći:

Polje za tekst u formi preko textarea

Još jedan element obrasca za stranicu koji ćemo razmotriti je polje s mogućnošću unosa višerednog teksta u njega. Može se kreirati pomoću oznake textarea. Bez zadanih atributa, primjena ove oznake će proizvesti sljedeći rezultat:

Unesite tekst:

Unesite tekst:

U polju možete izvršiti prijelome reda, dok će se tekst prenijeti u rukovaoce na serveru, uzimajući u obzir napravljene promjene. Polje se može rastegnuti u širinu i dužinu tako što se mišem uhvati donji desni ugao, koji je označen sa dvije dijagonalne pruge.

Sada pokušajmo dodati nekoliko atributa s parametrima u originalni kod:

1. Ime- Određuje ime oblasti teksta kao vrijednost za identifikaciju nakon što se podaci obrasca predaju kada se obrađuju na serveru.

2. Cols- širina polja, koja je kao parametar postavljena brojem identičnih karaktera koji stoje jedan pored drugog, postavljenih horizontalno. Zadana vrijednost je 20.

3. Redovi- visina tekstualnog polja, određena brojem redova. Ako je broj redova teksta koje je unio korisnik veći od vrijednosti specificirane ovim atributom, desno će se pojaviti vertikalna traka za pomicanje.

4. Maxlength- Određuje maksimalan broj znakova koji se mogu postaviti u tekstualno polje. Ako je granica prekoračena, dalji unos neće biti moguć.

Ispod je primjer sa svim gore navedenim atributima, a učinak svakog od njih možete sami provjeriti jednostavnim postavljanjem potrebnog broja slova i redova u tekstualno područje (možete jednostavno unijeti isti znak nekoliko puta):

Unesite tekst:

Unesite tekst:

5. minlength- Određuje minimalni broj znakova koji se moraju unijeti u tekstualno područje. Ukoliko korisnik pokuša da pošalje tekst sa manje znakova, pretraživač će prikazati kratku poruku sa informacijom u kojoj će se navesti potreba za popunjavanjem sadržaja obrasca i koliko je karaktera već uneto.

7. Samo za čitanje(bez parametara) - ako je ovaj atribut pridružen tekstualnom području, tada će tekstualno polje biti nedostupno korisnicima za promjenu i biće samo za čitanje. Ali možete se fokusirati na njega (pomaknuti kursor na polje i kliknuti lijevom tipkom miša), kao i odabrati i kopirati (djelomično ili potpuno) tekst:

Još nekoliko atributa koji implementiraju dodatnu funkcionalnost prilikom popunjavanja polja:

8. Autocomplete- označava da li pretraživač treba da daje nagoveštaje kada korisnik popuni formular na osnovu prethodno unetih podataka i omogućava automatsko umetanje odgovarajućeg teksta.

Ima ukupno dva parametra: on(uključeno) i isključeno(isključen). Evo primjera koda:

Unesite tekst:

Ovaj atribut, postavljen na "on", radi samo kada korisnikov web pretraživač ima omogućena polja obrasca za automatsko dovršavanje.

9. Zamotajte- postavlja pravila prelamanja linija pretraživača u oblasti teksta koristeći tri vrijednosti:

Soft- skup znakova koji ne stane u polje po širini automatski se premotava u novi red. Istovremeno, procesor tekst će biti poslat kao jedan red. U slučaju da korisnik premota tekst na bilo koje željeno mjesto pomoću tipke "Enter", tada se takvo premotavanje pohranjuje prilikom slanja web obrasca.

Unesite tekst:

Unesite tekst:

Teško- precrtavanje se izvodi automatski ako se tekst ne uklapa u polje po širini, a kada se pošalje rukovaocu, mjesta takve crtice će biti sačuvana. Ova postavka se koristi samo u u sprezi sa atributom cols:

Unesite tekst:

Unesite tekst:

Isključeno- onemogućiti prijelome redova. Ako ispišete fragment teksta bez mehaničkog prijenosa pomoću tipke "Enter", tada će cijeli tekst biti postavljen u jedan red i pojavit će se horizontalna traka za pomicanje:

Unesite tekst:

Unesite tekst:

10. auto fokus(bez parametara) - Pokreće fokus na tekstualno polje kada se učita stranica sa formom.

11. Onemogućeno- za razliku od atributa samo za čitanje (koji također zabranjuje uređivanje sadržaja polja, ali omogućava fokusiranje na njega), potpuno blokira pristup području teksta, koje je obično obojeno sivo:

Pozdrav svim čitaocima mog bloga. Danas ću vam reći kako napraviti padajuću listu u html-u, koje oznake i atribute trebate koristiti, kao i u koje svrhe vam može zatrebati.

Odabir oznake i kreiranje padajuće liste

Dakle, padajuća lista u html-u se kreira pomoću uparene oznake za odabir, u koju se postavljaju uparene oznake opcija. U njima se bilježe sve opcije koje će vam se ponuditi kada kliknete na listu. primjer:

Odaberite životinju

U ovom slučaju, ono što je prikazano između otvaranja i zatvaranja dijela opcije, vidjet ćete na ekranu, a vrijednost sadržana u atributu value bit će poslana na server ili obrađena pomoću skripte.

Lista u html-u može biti normalna i sa višestrukim izborom. Da biste omogućili odabir više stavki, trebate dodati prazan višestruki atribut u select . Za odabir više vrijednosti, držite ctrl i pritisnite lijevu tipku miša.

Još jedan koristan atribut je veličina. Omogućava vam da odaberete koliko će se redova prikazati na padajućoj listi.

Drugi atribut je onemogućen. To čini listu nedostupnom za klikanje i pregled stavki, ali je istovremeno vidljiva na stranici.

Potreban je html5 atribut. Ako je postavljen, obrazac neće biti dostavljen osim ako se vrijednost ne izabere sa padajuće liste. Općenito, to postaje izbor koji morate imati. Dok atribut ne radi u svim pretraživačima.

atributi oznake opcija

Zapravo, select služi samo kao kontejner za stavke liste, one se same postavljaju pomoću oznake opcija. Ima parametar vrijednosti, kao što smo već saznali, ali postoje i drugi osim ovog. Na primjer:
Onemogućeno - čini stavku liste nedostupnom za odabir. Biće prikazano, ali ne možete kliknuti na njega.

Odabrano - element će biti odabran prema zadanim postavkama. U redovnoj listi, ovaj atribut bez vrijednosti može se postaviti na samo jednu stavku, u višestrukoj listi, na nekoliko.

Važno pojašnjenje za ispravan rad

Ako će se rezultat odabira morati poslati na server ili obraditi putem skripti, onda stavite odabir u obrazac kako ne bi došlo do grešaka. Činjenica je da je padajuća lista izvorno kreirana upravo kao jedan od elemenata obrasca.

Za šta je odabrano?

Obično vam može biti od koristi ako se registrujete na svom sajtu ili želite da sprovedete anketu. Element ima nedostatak - ne mijenja dobro izgled kroz css.

Podrazumevano, kada kliknete na listu, pojavljuje se plavi okvir, stavke liste preko kojih se kursor lebdi su označene istom bojom. Da kada kliknete da se okvir ne pojavi, ili je istaknut drugom bojom, možete napisati sljedeći selektor:

select:focus(
kontura: 1px puna narandžasta;
}

Okvir će sada biti narandžasti.

Opcija se također može stilizirati, ali kada zadržite pokazivač miša iznad stavke, njena pozadina postaje plava i iz nekog razloga se to ne mijenja kroz stilove.

Opcija(
boja: smeđa
pozadina: aqua;
}

Usput, možda neko od vas zna kako promijeniti boju pozadine pri prelasku miša preko stavke koristeći css?

To je, u stvari, sve o select tag-u i njegovoj primeni. Za to nisu predviđene nikakve dodatne funkcije u html-u. Sve ostale operacije sa njim mogu se obaviti koristeći javascript i php. Na primjer, ako trebate napraviti listu za odabir godine rođenja i može postojati 80-100 različitih opcija, da li biste ih napisali ručno?

Samo za ovo morate koristiti programiranje, odnosno petlju. Pa dobro, ovo je tema za drugi razgovor, ali za danas su to sve informacije koje sam htio da vam kažem. Možete se upoznati sa ostalim osnovnim tagovima u html-u.

HTML oznaka opcije se koristi za kreiranje padajuće liste koja omogućava korisniku da izabere jednu opciju iz unapred definisanog skupa vrednosti.

Tekst koji je vidljiv korisniku može se razlikovati od teksta navedenog u atributu vrijednosti. Evo kako možete kreirati padajuću listu:

  • Padajuća lista se kreira pomoću oznake definirati opcije za odabir pomoću oznake
  • U oznaci

Također možete postaviti CSS klasu umjesto korištenja ID-a za stiliziranje padajućeg izbornika.

U sljedećem odjeljku ću pokazati primjere kako koristiti HTML padajuću listu u JavaScript/JQuery. Primjeri će također pokazati kako stilizirati

Korištenje atributa vrijednosti

Kao što je ranije spomenuto, vrijednost atributa value može se razlikovati od teksta prikazanog na stranici. Na primjer, možete prikazati imena zemalja ili boja za korisnike i koristiti kratke kodove u atributu vrijednosti.

U sljedećem primjeru kreirat ćemo padajuću listu s atributom vrijednosti:

Pogledajte online demo i kod

Za Tag

Primjer pristupa odabranoj opciji u JavaScript-u

Sada napravimo primjer pristupa vrijednosti odabrane opcije i izvođenja nekih radnji. Istu listu kao u gornjem primjeru kreiramo s izborom boja. Kada odaberete, kliknite na dugme da primenite tu boju na dokument:

Pogledajte online demo i kod

Vrijednost HTML opcije koristi sljedeći kod:

Sljedeća linija koda se koristi u JavaScript-u za pristup vrijednosti atributa value opcije vrijednost se razlikuje od teksta. Nakon što odaberete boju, jQuery prikazuje vidljivi tekst u upozorenju. Tag code

Evo kako se pristupa ovoj vrijednosti HTML odaberite opciju odabran JavaScript:

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

Također možete pristupiti vrijednosti pomoću jQuery $.val() metode:

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

Zamijenite ovaj red u primjeru iznad i kod će prikazati vrijednost kratkog koda/boje u atributu value umjesto vidljivog teksta.

Primjer dobivanja vrijednosti u PHP skripti

U ovom primjeru dobivanja vrijednosti opcije odabrane sa padajuće liste, obrazac se kreira pomoću oznake

A evo kako se PHP skripta koristi za dobivanje vrijednosti opcije HTML odabira:

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

Ako obrazac ima metodu GET, onda koristite PHP niz $_GET[“”].

Definiranje padajućih stilova pomoću CSS-a

Pogledajmo sada kako stilizirati padajuću listu.

U ovom primjeru označavamo

U pretraživaču to izgleda ovako:

Grupisanje stavki menija

Razmotrimo sljedeću oznaku A koji se koristi za grupisanje povezanih podataka u padajućoj listi name="black&white"> label="whitelist">

U ovom primjeru odabrali smo 2 grupe sa oznakom . Atribut oznake elementa navodi naziv odabrane grupe podebljanim:

U sljedećem primjeru, koristeći disabled boolean atribut, onemogućit ćemo jednu grupu (" Grupa B"):

</span> Primjer korištenja disabled atributa HTML oznake <optgroup><span>

Rezultat našeg primjera:

Onemogućavanje liste i višestruki izbor

</span> Onemogućeni i višestruki atributi oznake <select><span>

U ovom primjeru kreirali smo dvije padajuće liste. Za prvu listu koristili smo atribut disabled, koji onemogućava interakciju sa listom (onemogućava je).

Za drugu listu koristili smo atribut multiple, koji označava da je dozvoljeno odabrati nekoliko opcija na listi odjednom (preko ctrl na Windows i kroz komanda na Macu).

U pretraživaču to izgleda ovako:

Oblast teksta

Rezultat našeg primjera:

Onemogućavanje oblasti za tekst

Po analogiji sa prethodno razmatranim elementima, tag


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

U ovom primjeru kreirali smo dva tekstualna područja (element