03.04.2021 Vijesti
HTML oznaka koristi se za izradu padajućeg (padajućeg) popisa koji se pojavljuje kada se klikne na element obrasca i omogućuje posjetitelju stranice odabir jedne od unaprijed definiranih opcija.
Element može sadržavati dvije ili više oznaka , definiranje dostupne opcije izbor s padajućeg popisa. Tekst prvog podređenog elementa početno će se prikazati na padajućem popisu, odnosno to će biti zadana vrijednost za popis. Promijenite ili postavite zadanu vrijednost za Odabrani atribut možete dodati željenoj opciji:
Volvo Saab VW Audi
Širina padajućeg popisa bit će određena najviše dugačak tekst navedeno u oznaci .
Napomena: atribut autofokusa nije podržan u IE9 i novijim verzijama ranije verzije, i u Firefoxu.
Onemogućeno: označava da je element neaktivan, što znači da korisnik neće moći komunicirati s elementom. Moguće vrijednosti za onemogućen Boolean atribut: Primjer » obrazac: Definira obrazac s kojim je element povezan. Vrijednost atributa je identifikator elementa . Ovaj atribut omogućuje postavljanje elementa na bilo kojem mjestu u dokumentu, a ne samo kao potomak elementa .
Napomena: atribut obrasca nije podržan u Firefoxu.
Više: Označava da se više opcija može odabrati odjednom. Višestruki odabiri razlikuju se ovisno o operacijski sustav:
Napomena: zbog na razne načine odabir više stavki i dodatno obavještavanje korisnika da je dostupno više opcija, preporučuje se korištenje potvrdnih okvira umjesto padajućeg popisa.
Naziv: Definira naziv za padajući popis. Može se koristiti za pristup podacima obrasca nakon što su poslani ili za referenciranje elementa u JavaScriptu. veličina: Određuje broj vidljivih opcija na padajućem popisu. Ako je vrijednost atributa veličine veća od 1, ali manja od ukupnog broja opcija na popisu, preglednik će automatski dodati traku za pomicanje koja označava da postoji više opcija za pregled.
Padajući popis u HTML-u može se stvoriti pomoću oznake Izaberi. Osim padajućeg (ili "padajućeg") popisa, oznaka Izaberi omogućuje stvaranje stavke popisa s višestrukim odabirom. Sintaksa upotrebe oznake Izaberi HTML izgleda ovako:
Elektronik Syroezhkin Čižikov Kukuškina
Ovdje se koristi oznaka opcija navedeni su elementi liste.
Rezultat primjene:
Elektronika Syroezhkin Chizhikov Kukushkina
Pogledajmo atribute oznake Izaberi:
Možda su to svi glavni atributi oznake Izaberi koji se najčešće koriste. Pogledajmo sada kako napraviti padajući popis u HTML-u koristeći navedene atribute:
Označiti opcija, kao što je već navedeno, omogućuje nam da odredimo dječji elementi padajući popis Izaberi, koji zauzvrat igra ulogu spremnika. Označiti opcija ima svoje atribute:
Pogledajmo napredni slučaj upotrebe oznake opcija:
Gospodin Electronic Syroezhkin Čižikov Kukuškina
Rezultat gornjeg primjera izgledat će ovako:
g. Elektronika Syroezhkin Chizhikov Kukushkina
Alat za izradu web stranica Nubex omogućuje vam stvaranje prilagođenih obrazaca pomoću modula za izradu obrazaca. Rad padajućih popisa u Nubexu opisan je u članku:
Često na web stranicama možete pronaći stranice na kojima su postavljeni HTML obrasci. Web obrasci su prikladan način za primanje informacija od posjetitelja vaše stranice. Primjer za to je - , - koji pruža Povratne informacije s posjetiteljima stranice i programerima. Obrasci su također prikladni za programere web stranica kada razvijaju CMS, što im omogućuje da zadrže glavno svojstvo web mjesta - relevantnost. Ovaj članak posvećen je osnovama izrade HTML obrazaca, njihovoj obradi i načinima prijenosa podataka sa zaslonskih obrazaca u PHP skripte.
Oznake I definirati početak i kraj obrasca. Početna oznaka obrasca sadrži dva atributa: akcijski I metoda. Atribut akcije sadrži URL adresa skripta koja se mora pozvati za obradu skripte. Atribut metoda govori pregledniku kakvu vrstu HTTP zahtjev mora se koristiti za slanje obrasca; moguće vrijednosti POST I DOBITI.
Glavna razlika između metoda POST i GET je način na koji se informacije prenose. U GET metodi, parametri se prosljeđuju kroz adresnu traku, tj. uglavnom u zaglavlju HTTP zahtjeva, dok se u POST metodi parametri prenose kroz tijelo HTTP zahtjeva i ni na koji se način ne odražavaju u adresnoj traci.
$tekst = nl2br($_POST["mojtekst"]); ?>
Zadatak: Pretpostavimo da trebate stvoriti padajući popis s godinama od 2000. do 2050. Riješenje: Potreba za stvaranjem HTML obrazac s elementom SELECT i PHP – skriptom za obradu forme.
Rasprava:
Prvo, kreirajmo dvije datoteke: obrazac.html I akcija.php. U datoteci obrazac.html sadržavat će html obrazac s padajućim popisom. Štoviše, vrijednosti na popisu mogu se odrediti na dva načina:
2000 2001 2002 …………………………………………… 2050
$godina = 2000 ; za ($i = 0; $i<= 50 ; $i ++) // Ciklus od 0 do 50 { $nove_godine = $godina + $i ; // Formiraj novu vrijednost jeka " " . $nove_godine . "" ; //Formiraj novi red } ?>
Kao što vidite, drugi primjer s petljom je kompaktniji. Mislim da nema potrebe davati skriptu rukovatelja za ovaj obrazac, jer se obrađuje potpuno isto kao tekstualno polje, tj. vrijednosti popisa mogu se dohvatiti iz superglobalnog niza $_POST.
Opis:
Kreirajmo HTML obrazac za slanje datoteke na poslužitelj.
Ovaj html obrazac sadrži element pretraživati, koji otvara dijaloški okvir za odabir datoteke za učitavanje na poslužitelj. Kada pritisnete tipku "Prijenos datoteke", datoteka se prosljeđuje skripti rukovatelja.
Zatim trebate napisati skriptu rukovatelja akcija.php. Prije nego što napišemo rukovatelj, moramo odlučiti u koji direktorij ćemo kopirati datoteku:
if(isset($_FILES [ "myfile" ])) // Ako datoteka postoji { $katalog = "../slika/" ; // Naš katalog ako (je_dir($katalog)) // Ako takav direktorij postoji { $myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // Privremena datoteka $myfile_name = $_FILES [ "myfile" ][ "name" ]; // Naziv datoteke if(! kopiraj ($myfile, $catalog)) echo "Pogreška pri kopiranju datoteke". $myfile_name // Ako kopiranje datoteke nije uspjelo } else mkdir ("../slika/" ); // Ako ne postoji takav direktorij, kreirat ćemo ga } ?>
Ako vjerujete korisnicima da uploaduju bilo koje datoteke na vaš poslužitelj, morate biti izuzetno oprezni. Napadači mogu ugraditi "loš" kod u sliku ili datoteku i poslati ga na poslužitelj. U takvim slučajevima morate strogo kontrolirati preuzimanje datoteka.
Ovaj primjer pokazuje stvaranje direktorija i kopiranje datoteke u taj direktorij na poslužitelj.
Također bih želio pokazati primjer s elementom potvrdni okvir. Ovaj element se neznatno razlikuje od ostalih elemenata ako ne i po jednom od elemenata potvrdni okvir’a nije odabrano, tada superglobalna varijabla $_POST vratit će praznu vrijednost:
if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // Ako je odabran barem 1 element inače jeka "Odaberi vrijednost"; ?>
window.onresize = …;
Događaj onresize objekta window odgovoran je za promjenu veličine prozora preglednika. Prema tome, događaj pripada objektu prozora.
Jer među html elementi Ne postoji oznaka identificirana s prozorom preglednika, tada možete obraditi događaj onresize u javascriptu dodjeljivanjem funkcije svojstvu objekta prozora.
Pogledajmo primjer:
Primjer: Napišite skriptu koja prikazuje poruku kada se promijeni veličina prozora "Prozor je promijenjen u veličini!"
window.onresize = function message() (alert("Prozor je promijenjen u veličini!");)
HTML kôd:
Objekt odabira, padajući popis, nudi popis vrijednosti za odabir. Izbor može biti jedan ili nekoliko stavki odjednom. Ovaj složeni objekt, kojemu se u skripti pristupa i kao objektu odabira i kao njegovoj opcijskoj stavci.
Svojstva odabranog objekta: duljina — broj stavki popisa ime — atribut imena opcije — niz stavki selectedIndex — indeks odabrane opcije opcije defaultSelected — zadana odabrana opcija odabrano - odabrana stavka
Svojstva odabranog objekta:
Možete dobiti vrijednost padajućeg popisa (select) u javascriptu putem svojstva value. Ali ima i drugih načina.
Primjer: Postavite padajući popis od tri stavke - gradovi: Moskva, Sankt Peterburg, još. Klikom na gumb dobivate vrijednost svojstva value odabrane opcije (stavke) liste i prikazujete je na ekranu
Identifikacija vrijednosti popisa:
funkcija f())( var a=document.getElementById("s1").vrijednost; upozorenje(a); )
Zadatak js13_1. Kada mijenjate stavku popisa, dodajte tekst iz odabrane stavke izbornika (opcija) u tekstualno polje.
detalji:
Dovršite kôd:
Skripta:
funkcija check() (document.getElementById("t1").value= ...; )
1 2 3
Zadatak js13_2. Napravite stranicu za testiranje znanja učenika pitanjem: “U kojim jedinicama se mjeri rad?” i dva odgovora: "Madež"(pogrešno) i "Džul"(ispravno), dizajniran kao element izbornika s popisom (odaberi). Pokrenite funkciju provjere
Pogledajmo primjer korištenja svojstva odabira objekta - selectedIndex - odabrana stavka opcije:
Primjer: Prikažite indeks odabrane alternative u tekstualnom prozoru:
U u ovom primjeru Kada se stavka izbornika promijeni, generira se događaj onChange. Skripta se izvršava kao vrijednost atributa onChange: tekstualnom polju se pristupa preko niza elemenata obrasca (tekstualno polje je prvi element niza, budući da je 0. element padajući popis za odabir). Kao vrijednost polje za tekst označava broj odabrane stavke popisa (selectedIndex).
Stavka odabira izbornika u javascriptu - opcija - tretira se kao zaseban objekt sa svojim svojstvima:
Određenoj stavci izbornika pristupa se putem opcije zbirke (niza).:
Skripta za pristup prvoj stavci padajućeg izbornika (nulti element niza opcija):
funkcija myFunc())(document.f1.s1.options....=...; ...; )
Pogledajmo primjer korištenja svojstva text objekta opcije:
Primjer: Kada mijenjate odabir stavke popisa u tekstualno polje, ispišite tekst iz odabrane alternative popisa
Pogledajmo još jedno rješenje koje koristi popis višestrukih izbora:
Primjer: Kada mijenjate popis višestrukih izbora, prikažite indekse odabranih alternativa u tekstualnom prozoru (postavite višestruki atribut popisa)
Primjer:
Primjer: Klikom na odlomak (oznaka p) promijenite tekst sadržaja ove oznake i centrirajte tekst u njemu
izmijenjeni tekst
U procesu izrade web stranice ili bloga i daljnjeg popunjavanja sadržajem, iz različitih razloga, ponekad postane potrebno sakriti dio teksta, opsežnije informacije smjestiti u zasad skriveni blok, ali ipak naznačiti korisniku ono što je dostupno nešto drugo i dajte mu priliku da vidi skriveni sadržaj bez prelaska na sljedeći redak ili stranicu. Prethodno se za implementaciju takvog rješenja koristila hrpa javascripta, ali sada se sve to može učiniti vrlo jednostavno pomoću nevjerojatnih svojstava.
Danas ćemo pogledati najjednostavniji način stvaranje na stranicama stranice iu pojedinačnim porukama skrivenih blokova sadržaja koji se otvaraju kada kliknete na određeni tekstualni element, koristeći isključivo CSS3 svojstva. Prekidač može biti jedna riječ, istaknuti izraz, cijela rečenica ili informativna ikona. Takvi se blokovi često koriste na stranicama s veliki iznos sadržaj, kako bi bio što strukturiraniji i kompaktniji, sav sadržaj je podijeljen u tzv. grupe, u kojima se korisniku prikazuju samo naslovi, sav tekst je standardno skriven i može se vidjeti klikom na određeni element (vidi iznad).
Pokušajmo učiniti bez nepotrebne vode, pogledajte cijeli ovaj jednostavan mehanizam na djelu, s jasnim primjerom, a možete i urediti nešto ako želite:
Kao prekidači za padajuće blokove s dodatne informacije koristi se tekst koji nije istaknut ili označen, s nedvosmislenim pozivom da kliknete na njega, što morate učiniti bez straha i sumnje vidjeti)))
Kao što vidite, sve radi više nego savršeno, skriveni sadržaj se bez problema pojavljuje i nestaje laganim klikom miša, a pritom smo upotrijebili minimalno izvršnog koda, kako u html frameworku tako iu formaciji css stilova. Bez povezivanja dodatnih javascript biblioteka, uz vječitu brigu hoće li one biti onemogućene na strani korisnika. Implementacija svih ovih radnji postala je moguća zahvaljujući CSS3 pseudo-klasi :provjereno, primijenjen na elemente sučelja kao što su radio gumbi (). Što smo zapravo napravili u oznaci Atributu tipa dodijelili smo potvrdni okvir vrijednosti, kao i identifikator id="hd-1" koji odgovara jedinstvenom identifikatoru za = "hd-1" trenutni blok prekidač. Potvrdne okvire ćemo temeljito i zauvijek sakriti postavljanjem svojstva display: none u klasi.hide. Zapravo, ovdje se nema što posebno objašnjavati; cijeli mehanizam za uključivanje i isključivanje skrivenih blokova sastoji se od tri elementa:
Nadam se da je iz mog kaotičnog objašnjenja postalo jasno u čemu je stvar. CSS primjenjuje nove stilove (pomoću pseudoklase provjereno) za prikaz bloka sadržaja koji je prethodno bio skriven samo kada korisnik klikne na element koji je jedinstvenim identifikatorom povezan s potvrdnim okvirom.
Iz svega ovoga proizlazi važna nota:
kada koristite više skrivenih blokova na jednoj stranici, svaki radio gumb mora imati jedinstveni identifikator, koji će se razlikovati od identifikatora u drugim blokovima.
Dakle, riječima smo razvrstali što kamo ide i zašto, sada pogledajmo html okvir cijele strukture:
Kliknite ovdje za otvaranje!
Zatim prelazimo izravno na formaciju CSS stilovi, bez kojih cijela ova struktura neće funkcionirati. Sasvim minimum koda, bez ikakvih ukrasa, samo je blago istaknutu pozadinu za padajući blok koji možete definirati i prikazati okvir skrivenog teksta. Možete dizajnirati blokove kako želite, dodati obrube, zaobljene kutove, istaknuti tekst ili .
/* sakrij potvrdne okvire i blokove sadržaja */ .hide, .hide + label ~ div ( display: none; ) /* izgled teksta oznake */ .hide + label, .hide:checked + label ( padding: 0; boja: zelena ; pokazivač: pokazivač; border-bottom: 1px isprekidano zeleno; ) /* izgled teksta oznake kada je prekidač aktivan */ .hide: označeno + oznaka (boja: crvena; border-bottom: 0; ) /* kada je potvrdni okvir je aktivan, prikaži blokove sa sadržajem */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; okvir-sjena: umetnuti 3px 3px 10px #7d8e8f; ispuna: 10px; )
Sve je to, za asketski primjer, sasvim dovoljan minimum. Ali mi uopće nećemo biti mi ako ne dodamo barem neke dobrote, a bolje je vizualno reći korisniku gdje kliknuti. U drugom primjeru dodao sam jednostavan simbol u obliku plusa koji jasno pokazuje da se ovdje krije još nešto, pritiskom istog trena prelazi u minus, a skrivenim blokovima sa sadržajem sam dodao malu animaciju kada pojavljuju se, a sve to isključivo uz pomoć magije CSS3.
/* sakrij potvrdne okvire i blokove sadržaja */ .hide, .hide + label ~ div ( display: none; ) /* izgled teksta oznake */ .hide + label ( margina: 0; padding: 0; boja: zelena; kursor: pointer; display: inline-block; ) /* izgled teksta oznake kada je prekidač aktivan */ .hide:checked + label (boja: crvena; border-bottom: 0; ) /* kada je potvrdni okvir aktivan, prikaži blokovi sa sadržajem */ . hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f ; box-shadow: inset 3px 3px 10px #7d8e8f; margin-left: 20px; padding: 10px; /* mala animacija kada se pojavi */ -webkit-animation:fade ease-in 0,5s; -moz-animation:fade ease -in 0.5s; animacija: fade ease-in 0.5s; ) /* animacija kada se pojave skriveni blokovi */ @-moz-keyframes blijede ( od ( neprozirnost: 0; ) do ( neprozirnost: 1 ) ) @-webkit-keyframes fade ( from ( neprozirnost: 0 ; ) to ( neprozirnost: 1 ) ) @keyframes fade ( from ( neprozirnost: 0; ) to ( neprozirnost: 1 ) ) .hide + label:before ( background-color: #1e90ff; boja: #fff; sadržaj: "\002B"; prikaz: blok; plovak: lijevo; veličina fonta: 14px; font-weight: bold; visina: 16px; line-height: 16px; margina: 3px 5px; poravnanje teksta: središte; širina: 16px; -webkit-border-radius: 50%; -moz-border-radius: 50%; rubni radijus: 50%; ) .hide:checked + label:before ( sadržaj: "\2212"; )
Po svemu sudeći, metoda je nedvojbeno dobra, ali kao i uvijek, i nimalo iznenađujuće, problemi nastaju s vječnom kočnicom napretka, IE preglednikom, pseudoklasom provjereno podržava samo verzije 9 i novije ovog preglednika. Za starije verzije IE-a sve ostaje isto, morat ćete koristiti javascript.
Koristeći skrivene potvrdne okvire, možete jednostavno implementirati stilizirane blokove, klizače, galerije i još mnogo toga.
Sa svim poštovanjem, Andrew
Pridruži nam se!
Već se pretplatilo više od 6000 ljudi. Dobijte najnovije članke.
