Označiti (s engleskog ulazni- ulaz) jedan je od svestranih elemenata oblika i omogućuje vam stvaranje različitih dijelova sučelja i pružanje interakcije s korisnikom.
Uglavnom dizajniran za stvaranje tekstualnih polja, raznih gumba, radio gumba i potvrdnih okvira.
Glavni atribut , koji određuje tip elementa - tip . Omogućuje vam postavljanje sljedeće elemente obrasci: tekstualno polje (text), polje za lozinku (password), radio button (radio), checkbox (čekboks), skriveno polje (hidden), button (gumb), gumb za podnošenje obrasca (submit), gumb za brisanje obrasca (reset ), polje za slanje datoteke (file), gumb sa slikom (image) itd. Za svaki element postoji svoj popis atributa koji određuju njegov izgled i karakteristike. Osim toga, više od desetak novih atributa dodano je u HTML5.
Sintaksa
Završna oznaka nije potrebna.
WAI ARIJA
Ne vrijednosti uloga zadano.
Valjane vrijednosti uloga:
- dugme
- potvrdni okvir
- kombinirani okvir
- veza
- stavka izbornika
- stavka izbornika potvrdni okvir
- menuitemradio
- opcija
- radio
- okvir za pretraživanje
- klizač
- gumb za okretanje
- sklopka
- tekstni okvir
Atributi
- prihvatiti - postavlja filtar za vrste datoteka koje možete poslati putem polja za učitavanje datoteka.
- alt - Alternativni tekst za gumb sa slikom.
- autocomplete - Omogućuje ili onemogućuje autocomplete.
- autofokus - postavlja fokus na polje obrasca.
- označeno - unaprijed aktivirani radio gumb ili potvrdni okvir.
- dirname - Parametar koji prenosi smjer teksta poslužitelju.
- onemogućeno - Blokira pristup i modifikaciju elementa.
- obrazac - Povezuje polje s obrascem pomoću identifikatora.
- formation - Definira adresu rukovatelja obrascima.
- formenctype - Postavlja kako se podaci obrasca kodiraju kada se šalju na poslužitelj.
- formmethod - govori pregledniku koju metodu da koristi za slanje podataka obrasca na poslužitelj.
- formnovalidate - Otkazuje ugrađenu provjeru valjanosti podataka.
- formtarget - Definira prozor ili okvir u koji će se učitati rezultat koji vraća rukovatelj obrasca.
- popis - Pokazuje na popis opcija koje se mogu odabrati prilikom unosa teksta.
- max - Gornja vrijednost za unos broja ili datuma.
- maksimalna dužina - Maksimalni iznos dozvoljenih znakova u tekstu.
- min - Donja vrijednost za unos broja ili datuma.
- minlength - Najmanji broj dopuštenih znakova u tekstu.
- višestruko - Omogućuje preuzimanje više datoteka u isto vrijeme.
- ime - Naziv polja, namijenjen da ga procesor obrasca može identificirati.
- uzorak - Postavlja uzorak unosa.
- rezervirano mjesto - Prikazuje tekst savjeta.
- samo za čitanje - Određuje da korisnik ne može mijenjati polje.
- obavezno - Obavezno polje.
- veličina - širina polje za tekst.
- src - Adresa grafička datoteka za polje sa slikom.
- korak - Korak povećanja za numerička polja.
- type - govori pregledniku koji je tip elementa obrasca.
- vrijednost - vrijednost elementa.
prihvatiti
Postavlja filtar za vrste datoteka koje možete prenijeti putem polja za učitavanje datoteka. Vrsta datoteke određena je kao vrsta MIME; za više vrijednosti one su navedene odvojene zarezima. Ako datoteka ne odgovara instaliranom filtru, neće biti prikazana u prozoru za odabir datoteke.
Primjenjuje se na polje za učitavanje datoteke ( ).
Podrška za preglednik
Zadana vrijednost
alt
Postavlja atribut alt alternativni tekst za polje sa slikom. Ovaj tekst vam omogućuje da dobijete tekstualne informacije o slici pri učitavanju slika je onemogućeno u pregledniku, a namijenjeno je i tražilicama.
Sintaksa
Vrijednosti
Bilo koja prikladna tekstualni niz.
Zadana vrijednost
automatsko dovršavanje
Ovaj atribut pomaže ispuniti polja obrasca tekstom koji je prethodno u njih unesen. Vrijednosti se spremaju i zamjenjuju u pregledniku, dok korisnik može onemogućiti automatsko dovršavanje u postavkama preglednika iz sigurnosnih razloga i tada se ne može kontrolirati atributom samodovršavanja.
Kada unesete prva slova teksta, prikazuje se popis prethodno spremljenih vrijednosti s kojih možete odabrati onu koja vam je potrebna.
Automatsko popunjavanje određenog polja obrasca vezano je za njegov atribut naziva i gubi se kada se vrijednost promijeni.
Sintaksa
Vrijednosti
- uključeno - Omogućuje automatsko dovršavanje teksta.
- isključeno - Onemogućuje automatsko popunjavanje. Ova se vrijednost obično koristi kako bi se spriječilo preglednik da sprema važne podatke (lozinke, brojeve bankovne kartice), kao i rijetko unesene ili jedinstvene podatke (captcha).
Zadana vrijednost
Ovisi o postavkama preglednika.
autofokus
Automatski postavlja fokus na polje obrasca. U takvo polje možete odmah upisati tekst bez eksplicitnog klika na njega kursorom miša.
Sintaksa
Vrijednosti
Zadana vrijednost
Prema zadanim postavkama, atribut autofokusa nije postavljen.
provjereno
Ovaj atribut određuje je li element obrasca kao što je potvrdni okvir ili radio gumb unaprijed označen. Kada koristite radiobuttone, samo jedan element grupe može biti označen, za potvrdne okvire dopušteno je označiti barem sve elemente.
Sintaksa
Vrijednosti
Zadana vrijednost
dirname
Ako je prisutan atribut dirname, par ime/vrijednost šalje se poslužitelju, gdje je ime navedeno atributom dirname, a vrijednost zamjenjuje preglednik. Za tekst koji se kreće slijeva nadesno, vrijednost će biti ltr, a za tekst koji se kreće zdesna nalijevo (hebrejski, na primjer) vrijednost će biti rtl.
Sintaksa
Vrijednosti
Proizvoljni tekstualni niz koji služi kao naziv parametra. Kako bi se označilo da ovaj parametar određuje smjer teksta, uobičajeno je dodati .dir na kraj retka.
Zadana vrijednost
onemogućeno
Blokira pristup i izmjenu polja obrasca. U tom je slučaju prikazan sivo i korisnik ga ne može aktivirati. Osim toga, takvo polje ne može dobiti fokus pritiskom na tipku Tab, korištenjem miša ili na neki drugi način. Međutim, ovo stanje polja može se promijeniti pomoću skripti. Vrijednost blokirana u polju ne šalje se poslužitelju.
Sintaksa
Vrijednosti
Zadana vrijednost
Prema zadanim postavkama ovaj je atribut onemogućen.
oblik
Povezuje polje s obrascem pomoću njegovog identifikatora. Takva veza je neophodna kada se polje nalazi vani
Vrijednosti
ID obrasca (vrijednost atributa id elementa
Mogućnosti
Opis parametara oznake
ALIGN parametar
Određuje kako poravnati polje slike u odnosu na tekst ili druge elemente obrasca.
Sintaksa
Argumenti
- dno- Poravnajte donji rub slike s okolnim tekstom
- lijevo- Poravnava sliku na lijevi rub prozora
- sredini- Poravnava sredinu slike s osnovnom linijom trenutnog retka.
- pravo- Poravnava sliku na desni rub prozora.
- vrh- Gornji obrub slike poravnat je s najvišim elementom trenutnog retka.
Zadana vrijednost je dno. Preglednici također podržavaju argumente absbottom, absmisddle, Osnovna linija I texttop, koji nisu uključeni u specifikaciju HTML 4.01.
ALT parametar
Parametar alt postavlja alternativni tekst za polje slike. Ovaj tekst vam omogućuje da dobijete tekstualne informacije o slici kada je učitavanje slika onemogućeno u pregledniku. Budući da se slike učitavaju nakon što preglednik primi informacije o njima, zamjenski tekst slike pojavljuje se ranije. I dok se učitava, tekst će biti zamijenjen slikom. Preglednici također prikazuju alternativni tekst kao opis alata kada mišem prijeđete iznad slike.
Sintaksa
Vrijednost može biti bilo koji odgovarajući tekstualni niz. Mora biti u dvostrukim ili jednostrukim navodnicima.
BORDER parametar
Preglednici obrađuju slike dodane putem oznake , slično slikama stvorenim pomoću oznake . Također možete dodati okvir oko slike, čija boja odgovara boji teksta.
Sintaksa
Važeća vrijednost je bilo koji pozitivni cijeli broj u pikselima. Zadana vrijednost je 0.
PROVJEREN parametar
Ovaj parametar određuje je li element obrasca kao što je potvrdni okvir ili radio gumb unaprijed označen. U slučaju korištenja radiobuttona, može se označiti samo jedan element grupe, a za potvrdne okvire dopušteno je označiti barem sve elemente.
Sintaksa
ONEMOGUĆEN parametar
Blokira pristup i izmjenu polja obrasca. U tom je slučaju prikazan sivo i korisnik ga ne može aktivirati. Osim toga, takvo polje ne može dobiti fokus pritiskom na tipku Tab, korištenjem miša ili na neki drugi način. Međutim, ovo stanje polja može se promijeniti pomoću skripti.
Sintaksa
MAXLENGTH parametar
Postavlja najveći broj znakova koje korisnik može unijeti u tekstualno polje. Kada se taj broj dosegne tijekom tipkanja, daljnji unos postaje nemoguć.
Sintaksa
Parametar NAME
Definira jedinstveno ime za element obrasca. Obično se ovo ime koristi prilikom slanja podataka na poslužitelj ili za pristup unesenim podacima polja putem skripti.
Sintaksa
Naziv je skup znakova, uključujući brojeve i slova. JavaScript je osjetljiv na velika i mala slova, pa kada se pozivate na element imenom, koristite isti oblik kao parametar imena.
Parametar SAMO ZA ČITANJE
Kada označiti dodan je parametar samo za čitanje, korisnik ne može mijenjati tekstualno polje, uključujući unos novog teksta ili izmjenu postojećeg. Osim toga, takvo polje ne može dobiti fokus pritiskom na tipku Tab, korištenjem miša ili na neki drugi način. Međutim, stanje i sadržaj polja mogu se mijenjati pomoću skripti.
Sintaksa
parametar VELIČINA
Širina tekstualnog polja, koja je određena brojem znakova u monospace fontu. Drugim riječima, širina je određena brojem susjednih slova iste horizontalne širine. Ako se veličina fonta mijenja pomoću stilova, širina se također mijenja u skladu s tim.
Sintaksa
Važeća vrijednost je bilo koji pozitivni cijeli broj.
SRC parametar
Adresa grafičke datoteke koja će biti prikazana na web stranici u polju slike.
Sintaksa
Vrijednost je puni ili relativni put do datoteke.
TYPE parametar
Traženi parametar tipa govori pregledniku koji je tip elementa obrasca.
Sintaksa
Argumenti
- dugme- Dugme.
- potvrdni okvir- Zastave. Omogućuje odabir više od jedne opcije među predloženim.
- datoteka- Polje za unos naziva datoteke koja se šalje na poslužitelj.
- skriven- Skriveno polje. Ni na koji način nije prikazan na web stranici.
- slika- Polje sa slikom. Kada kliknete na sliku, podaci obrasca šalju se na poslužitelj.
- lozinka- Obično tekstualno polje, ali se od njega razlikuje po tome što su svi znakovi prikazani kao zvjezdice. Osmišljen kako bi spriječio bilo koga da uhodi unesenu lozinku.
- radio- Prekidači. Koriste se kada je potrebno odabrati jednu opciju od nekoliko ponuđenih.
- resetirati- Gumb za vraćanje podataka obrasca na izvornu vrijednost.
- podnijeti- Gumb za slanje podataka obrasca na poslužitelj.
- tekst- Polje za tekst. Dizajniran za unos znakova pomoću tipkovnice.
Zadana vrijednost je tekst.
VRIJEDNOST parametra
Definira vrijednost elementa obrasca koja će biti poslana na poslužitelj ili primljena pomoću klijentskih skripti. Par "ime=vrijednost" šalje se poslužitelju, gdje je naziv specificiran parametrom naziva oznake , a vrijednost je parametar vrijednosti.
Ovisno o vrsti elementa, parametar vrijednosti ima sljedeću ulogu:
- za gumbe (input type="button | reset | submit") postavlja tekstualnu oznaku na njih;
- za tekstualna polja (input type="password | text") specificira prethodno uneseni niz. Korisnik može obrisati tekst i unijeti vlastite znakove, ali kada se koristi u obrascu Reset gumb, korisnički tekst se briše i vrijednost unesena u parametru vrijednosti se vraća;
- za potvrdne okvire i radio gumbe (input type="checkbox | radio") jedinstveno definira svaki element tako da program klijent ili poslužitelj može jedinstveno odrediti koju je stavku korisnik odabrao.
Mislim da su mnogi dizajneri izgleda (i ne samo) morali rasporediti tekstualna polja ( ), dajući im proizvoljne veličine. Ali kako učiniti ovaj element gume i zadovoljavaju uvjete:
- Mogućnost ugradnje bilo kojeg horizontalnog i okomite margine na tekstu;
- Element mora zauzimati cijeli spremnik u kojem se nalazi;
- Klikom miša bilo gdje u tekstualno polje postavlja se kursor u njega.
Odgovor je vrlo jednostavan i može se riješiti pomoću sljedeće metode:
Prvo morate razumjeti što se događa s elementom unosa kada njegovu širinu postavite na 100% i dodate ispunu s lijeve i desne strane za tekst.Prema CSS standardima (i in u ovom slučaju podržavaju ih svi preglednici), rezultirajuća širina ulazni element, u nedostatku granica ( granica) i margine margine ( margina), bit će jednako:
širina = širina + padding-lijevo + padding-desno
Oni. bit će veći za iznos unutarnjih vodoravnih rubova, a rezultirajući element stršit će izvan područja koje mu je dodijeljeno.
Da bi konačna širina bila jednaka 100%, možete koristiti sustav od dva spremnika:
Svaki spremnik obavlja svoju ulogu:
- ulazna širina– ovaj spremnik navodi rezultirajuću širinu tekstualnog polja;
- postavljač širine– ovaj spremnik specificira širinu ulaznog elementa minus vodoravno ispunjavanje.
Input-width ( height:23px; border:1px solid #999; background:#fff; ) .width-setter (height:23px; margin:0 9px; ) .width-setter input ( width:100%; height:14px ; padding:4px 9px 5px; margin:0; font-family:Tahoma, Geneva, sans-serif; font-size:12px; line-height:14px; color:#000; border:0 none; background:#9C6; )
Primjer 1
Od stilova ispada da element ulazna širina specificira širinu koju bi tekstualno polje trebalo zauzimati. Element postavljač širine postavlja širinu ulaznog elementa manju za horizontalne podstava. Vrijedno je napomenuti da njegove margine ( margina) moraju biti jednaki padding-lijevo I padding-desno za ulazni element.
S ovim opisom, ulazni element će stršati iz postavljač širine količinom vodoravnih uvlaka ( podstava), au IE6 - rastegnuti sve "roditelje" na njihove vlastite veličine (primjer 1). Također u preglednicima IE6-7, ulazni element ima ispunu koja se ne može ukloniti brisanjem svojstva margina. Da biste promijenili ovaj raspored, potrebno je tekstualno polje pomaknuti ulijevo, za veličinu lijeve uvlake ( padding-lijevo). To možete učiniti pomoću position:relative, ali u IE6 ostat će rastegnuto kako bi odgovaralo širini teksta polja za unos spremnik postavljač širine. Kako biste uklonili rastezanje, morate biti sigurni da element ne može utjecati na veličinu svog roditelja, na primjer postavljanjem pozicija: apsolutna.
Opišimo izvorni skup spremnika na nov način:
Input-width ( height:23px; border:1px solid #999; background:#fff; ) .width-setter (height:23px; margin:0 9px; position:relative; ) .width-setter input ( width:100% ; visina:14px; padding:4px 9px 5px; margin:0; font-family:Tahoma, Geneva, sans-serif; font-size:12px; line-height:14px; color:#000; border:0 none; background :#9C6; pozicija:apsolutna; lijevo:-9px; gore:0; )
Primjer 2
Kao rezultat toga, pri korištenju takvih stilova ispunjavaju se zadaci postavljeni na početku. Pokazalo se da je tekstualno polje zadane uvlake gumenast i klikabilan na bilo kojem mjestu.
Da biste postavili određenu širinu za konačni element, trebate samo navesti svojstvo širina za kontejner ulazna širina.
Bilješka. Dana metoda za implementaciju gumenog tekstualnog polja testirana je na Doctypeu: HTML 4.01, XHTML 1.0 i HTML (HTML 5) - i kompatibilna je s više preglednika: IE6-8, Opera 9+, FF 2.0+, Safari 2.0+, Chrome . Ako nema Doctype-a, nije zajamčena funkcionalnost metode na više preglednika.
Mislim da su mnogi dizajneri izgleda (i ne samo) morali rasporediti tekstualna polja ( ), dajući im proizvoljne veličine. Ali kako ovaj element učiniti gumenim i zadovoljiti uvjete:
- Mogućnost postavljanja vodoravnih i okomitih uvlaka za tekst;
- Element mora zauzimati cijeli spremnik u kojem se nalazi;
- Klikom miša bilo gdje u tekstualno polje postavlja se kursor u njega.
Odgovor je vrlo jednostavan i može se riješiti pomoću sljedeće metode:
Prvo morate razumjeti što se događa s elementom unosa kada njegovu širinu postavite na 100% i dodate ispunu s lijeve i desne strane za tekst.Prema CSS standardima (au ovom slučaju ih podržavaju svi preglednici), rezultirajuća širina elementa unosa, ako nema granica ( granica) i margine margine ( margina), bit će jednako:
širina = širina + padding-lijevo + padding-desno
Oni. bit će veći za iznos unutarnjih vodoravnih rubova, a rezultirajući element stršit će izvan područja koje mu je dodijeljeno.
Da bi konačna širina bila jednaka 100%, možete koristiti sustav od dva spremnika:
Svaki spremnik obavlja svoju ulogu:
- ulazna širina– ovaj spremnik navodi rezultirajuću širinu tekstualnog polja;
- postavljač širine– ovaj spremnik specificira širinu ulaznog elementa minus vodoravno ispunjavanje.
Input-width ( height:23px; border:1px solid #999; background:#fff; ) .width-setter (height:23px; margin:0 9px; ) .width-setter input ( width:100%; height:14px ; padding:4px 9px 5px; margin:0; font-family:Tahoma, Geneva, sans-serif; font-size:12px; line-height:14px; color:#000; border:0 none; background:#9C6; )
Primjer 1
Od stilova ispada da element ulazna širina specificira širinu koju bi tekstualno polje trebalo zauzimati. Element postavljač širine postavlja manju širinu ulaznog elementa vodoravnim popunjavanjem. Vrijedno je napomenuti da njegove margine ( margina) moraju biti jednaki padding-lijevo I padding-desno za ulazni element.
S ovim opisom, ulazni element će stršati iz postavljač širine količinom vodoravnih uvlaka ( podstava), au IE6 - rastegnuti sve "roditelje" na njihove vlastite veličine (primjer 1). Također u preglednicima IE6-7, ulazni element ima ispunu koja se ne može ukloniti brisanjem svojstva margina. Da biste promijenili ovaj raspored, potrebno je tekstualno polje pomaknuti ulijevo, za veličinu lijeve uvlake ( padding-lijevo). To možete učiniti pomoću position:relative, ali u IE6 spremnik za unos ostat će rastegnut kako bi odgovarao širini tekstualnog polja postavljač širine. Kako biste uklonili rastezanje, morate biti sigurni da element ne može utjecati na veličinu svog roditelja, na primjer postavljanjem pozicija: apsolutna.
Opišimo izvorni skup spremnika na nov način:
Input-width ( height:23px; border:1px solid #999; background:#fff; ) .width-setter (height:23px; margin:0 9px; position:relative; ) .width-setter input ( width:100% ; visina:14px; padding:4px 9px 5px; margin:0; font-family:Tahoma, Geneva, sans-serif; font-size:12px; line-height:14px; color:#000; border:0 none; background :#9C6; pozicija:apsolutna; lijevo:-9px; gore:0; )
Primjer 2
Kao rezultat toga, pri korištenju takvih stilova ispunjavaju se zadaci postavljeni na početku. Ispostavilo se da je tekstualno polje gumasto i na njega se može kliknuti na bilo kojem mjestu s navedenim uvlakama.
Da biste postavili određenu širinu za konačni element, trebate samo navesti svojstvo širina za kontejner ulazna širina.
Bilješka. Dana metoda za implementaciju gumenog tekstualnog polja testirana je na Doctypeu: HTML 4.01, XHTML 1.0 i HTML (HTML 5) - i kompatibilna je s više preglednika: IE6-8, Opera 9+, FF 2.0+, Safari 2.0+, Chrome . Ako nema Doctype-a, nije zajamčena funkcionalnost metode na više preglednika.