Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • OS
  • Tekstualna polja. CSS parametri širine i visine za postavljanje dimenzija elemenata html stranice

Tekstualna polja. CSS parametri širine i visine za postavljanje dimenzija elemenata html stranice

28.03.2019 OS

Posljednje ažuriranje: 08.04.2016

Jednoredni tekstualni okvir se kreira sa elementom za unos kada je atribut tipa je tekst:

Brojni dodatni atributi se mogu koristiti za prilagođavanje okvira za tekst:

    dirname: postavlja smjer teksta

    maksimalna dužina: maksimalna dozvoljeni iznos znakova u okviru za tekst

    obrazac: definira obrazac s kojim bi trebao odgovarati ulazni tekst

    čuvar mjesta: postavlja tekst koji se po defaultu prikazuje u tekstualnom okviru

    readonly: čini polje teksta samo za čitanje

    obavezno: označava da tekstualno polje mora imati vrijednost

    veličina: postavlja širinu tekstualnog okvira u vidljivim znakovima

    vrijednost: postavlja zadanu vrijednost u okviru za tekst

Primijenimo neke atribute:

<a href="https://bumotors.ru/bs/html-mnogostrochnyi-input-tekstovye-polya-ii-vvod-dannyh-cherez.html">Tekstualna polja</a> u HTML5

Ovaj primjer postavlja atribute maxlength i size u drugom tekstualnom okviru. U ovom slučaju, veličina - to jest, broj znakova koji se uklapaju u vidljivi prostor polja je veći od dozvoljenog broja znakova. Međutim, ionako nećemo moći unijeti znakove veće od maksimalne dužine.

V u ovom slučaju takođe je važno razlikovati atribute vrednosti i čuvara mesta, iako su oba postavljena vidljivi tekst u polju. Čuvar mjesta, međutim, postavlja neku vrstu nagoveštaja ili upita za unos, tako da se obično provjerava u sivoj boji... Dok vrijednost predstavlja zadani tekst unet u polje:

Atributi samo za čitanje i onemogućeni čine tekstualno polje nedostupnim, međutim, oni su popraćeni različitim vizuelni efekat... U slučaju da je onemogućeno, tekstualno polje je zasjenjeno:

Među atributima tekstualnog okvira treba istaći i takav atribut kao lista. Sadrži referencu na element liste podataka, koji definira skup vrijednosti koje se pojavljuju kao nagovještaj dok kucate u tekstualni okvir. Na primjer:

Tekstualna polja u HTML5

Atribut liste tekstualnog okvira ukazuje na id elementa liste podataka. Sam element liste podataka koristi ugniježđene elemente opcija za definiranje elemenata liste. I dok kucate u okvir za tekst, ova lista se prikazuje kao opis alata.

Polje za pretragu

Za kreiranje polja za pretraživanje koristite element za unos sa atributom type = "search". Formalno, to je jednostavno tekstualno polje:

Traži u HTML5

Polje za unos lozinke

Za unos lozinke koristite element za unos sa atributom type = "password". Njegovo žig je da su uneseni znakovi maskirani tačkama:

U funkciji printf () moguće je podesiti izlaz varijabli određenog formata, naime, možete podesiti širinu polja varijabli, odrediti tačnost izlaza stvarnih varijabli, odrediti vrstu poravnanja podataka, itd. U ovom slučaju, specifikacija formata je napisana u ovom obliku:

% [zastava] [širina] [preciznost] specifikacija

gdje zastavica - tip poravnanja (prazno - desno poravnanje, `–` - lijevo poravnanje,` + `- uvijek ispisuje znak broja);

širina - ukupna dužina izlaznog polja, tj. ukupan broj znakova u izlazu, uključujući znak i decimalni zarez;

preciznost - broj cifara iza decimalnog zareza.

Primjeri specifikacija formata:

% 12.4f - izlaz realne varijable sa desnim poravnanjem, ukupan broj znakova na izlazu je –12 pozicija, broj znakova iza decimalnog zareza je 4;

% - + 10.0f - izlaz realne varijable sa lijevim poravnanjem i obaveznim izlazom predznaka broja, ukupna dužina izlaznog polja je 10 pozicija, znaci iza decimalnog zareza se ne prikazuju;

% 08d - prikaz cjelobrojne varijable sa desnim poravnanjem, širina polja - 8 pozicija, na lijevoj strani broj je dopunjen nulama;

% 16s - linijski izlaz, širina izlaznog polja - 16 pozicija.

3.3. Scanf () formatirana funkcija unosa

3.3.1. Svrha i opis funkcije

Funkcija vam omogućava da unosite informacije sa tastature. Funkcija je definirana u biblioteci ... sintaksa:

scanf (<управляющая строка>, <список адресов переменных>);

gdje<управляющая строка>- string koji može sadržavati samo specifikacije formata, listu prihvatljive vrijednosti specifikacije su iste kao za funkciju printf () (vidi tabelu 3.1.);

<список адресов переменных>- sadrži adrese varijabli koje je unijela funkcija, navedene odvojene zarezima. Adresa varijable je označena simbolom & iza kojeg slijedi identifikator varijable, na primjer, adresa varijable zastave označena je sa & zastavicom. Znak & nije obavezan za nizove i nizove.

komentar: Kada koristite funkciju scanf () u kontrolna linija nepoželjno je koristiti bilo kakve dodatne znakove (čak i razmake), osim za specifikacije. Ne možete koristiti ni posebne znakove.

1) Unesite s tastature varijable stanovništva i starosti tipa dug cijeli i realni broj:

scanf (“% ld% f”, & stanovništvo, & starost);

2) Unesite s tastature cjelobrojnu varijablu kod u heksadecimalnom formatu, naziv stringa i realnu varijablu dvostruke preciznosti:

scanf (“% x% s% lf”, & kod, ime, & preciznost);

Kada unosite više varijabli, razmaknica, tab i ENTER su graničnici između njih.

3.3.2. Primjer 3.1

Razmotrite program koji izračunava vrijednost funkcije y = sin (x) za dvije vrijednosti argumenata unesene tastaturom. U ovom slučaju, prikaz se mora izvesti u obliku sljedeće tabele (širina polja svake varijable je 8 pozicija, preciznost je 4 znamenke):

Listing 3.1

/ * Program za izračunavanje funkcije y = sin (x) * /

#include

#include

float x1, x2, y1, y2;

printf ("unesite dvije vrijednosti za argument: \ n");

scanf (“% f% f”, & x1, & x2);

printf (“\ n | x | y |”);

printf (“\ n | –––––––– | –––––––– | \ n”);

printf (“|% 8.4f |% 8.4f | \ n”, x1, y1);

printf (“|% 8.4f |% 8.4f | \ n”, x2, y2);

HTML obrasci su kontrole koje se koriste za prikupljanje informacija od posjetitelja web stranice.

Web obrasci se sastoje od kolekcije okvira za tekst, dugmadi, lista i drugih kontrola na koje je moguće kliknuti. Tehnički, obrasci prenose podatke od korisnika do udaljenog servera.

Za primanje i obradu podataka iz obrazaca koriste se web programski jezici, kao npr PHP, Perl.

Prije HTML5, web obrasci su bili zbirka više elemenata. , završava dugmetom ... Bilo je potrebno mnogo truda da se stilizuju formulari u različitim pretraživačima. Osim toga, obrasci su zahtijevali korištenje JavaScripta za validaciju unesenih podataka, a također su bili lišeni specifičnih tipova polja za unos za navođenje svakodnevnih informacija kao što su datumi, adrese Email i urls.

HTML5 forme riješio većinu ovih uobičajenih problema uvođenjem novih atributa pružajući mogućnost promjene izgled elementi forme kroz CSS3.

Rice. 1. Poboljšani web obrasci sa HTML5

Kreiranje HTML5 obrazaca

1. Element

Bilo koji oblik je zasnovan na elementu ...... Ne omogućava unos podataka, jer je kontejner koji drži zajedno sve kontrole obrasca - polja... Atributi ovog elementa sadrže informacije koje su zajedničke za sva polja obrasca, tako da morate uključiti logički kombinovana polja u jedan obrazac.

Tabela 1. Atributi oznake
Atribut Značenje / Opis
accept-charset Vrijednost atributa je razmaknuta lista kodiranja znakova koji će se koristiti za podnošenje obrasca, na primjer .
akcija Obavezni atribut koji specificira url rukovaoca obrascima na serveru kojem se prosljeđuju podaci. To je datoteka (na primjer, action.php) koja opisuje šta treba raditi sa podacima obrasca. Ako vrijednost atributa nije navedena, tada će nakon ponovnog učitavanja stranice elementi obrasca poprimiti svoje zadane vrijednosti.
U slučaju da će se svi radovi obavljati na strani klijenta JavaScript skripte onda za atribut akcije možete odrediti vrijednost #.
Također možete osigurati da obrazac koji je popunio posjetitelj stigne na vašu poštu. Da biste to uradili, potrebno je da izvršite sledeći unos:
autocomplete

enctype Koristi se za označavanje MIME-tip podataka koji se šalju sa formom, na primjer, enctype = "multipart / form-data". Navedeno samo ako je metoda = "post".
application / x-www-form-urlencoded je zadani tip sadržaja, što ukazuje da su dostavljeni podaci lista varijabli obrasca kodiranih URL-om. Znakovi za razmak (ASCII 32) će biti kodirani kao +, a specijalni znakovi kao što su! će biti kodiran u heksadecimalni kao% 21.
multipart / form-data - koristi se za podnošenje obrazaca koji sadrže datoteke, ne-ASCII podatke i binarne podatke, sastoji se od nekoliko dijelova, od kojih svaki predstavlja sadržaj pojedinačni element forme.
tekst / običan - označava da se prenosi običan (ne html) tekst.
metoda Određuje kako se prosljeđuju podaci obrasca.
Get metoda prenosi podatke na server putem adresna traka Pretraživač. Prilikom generisanja zahtjeva serveru, sve varijable i njihove vrijednosti formiraju niz poput www.anysite.ru/form.php?var1=1&var2=2. Imena i vrijednosti varijabli se dodaju adresi servera nakon? i odvojeni su znakom &. Sve Posebni simboli a slova različita od latinice su kodirana u% nn formatu, razmak je zamijenjen sa +. Ovu metodu treba koristiti ako ne prenosite velike količine informacija. Ako namjeravate poslati datoteku uz obrazac, ova metoda neće raditi.
Post metoda se koristi za slanje velikih količina podataka, kao i povjerljiva informacija i lozinke. Podaci poslati ovim metodom nisu vidljivi u zaglavlju URL-a jer se nalaze u tijelu poruke.
ime Setovi naziv obrasca koristiti za pristup elementima obrasca putem skripti, na primjer name = "opros".
novalidate Onemogućuje provjeru valjanosti na dugmetu za podnošenje obrasca. Atribut se koristi bez specificiranja vrijednosti
cilj Određuje prozor na koji će informacije biti usmjerene:
_blank - novi prozor
_self - isti okvir
_parent - roditeljski okvir (ako postoji, ako ne, onda do trenutnog)
_top - prozor vrhunski nivo u odnosu na ovaj okvir. Ako poziv nije iz podređenog okvira, onda u isti okvir.

2. Grupisanje elemenata forme

Element

...
namijenjen je grupiranju elemenata koji su međusobno povezani, čime se oblik dijeli na logičke fragmente.

Svaka grupa elemenata može se imenovati pomoću elementa koji prati oznaku

... Naziv grupe pojavljuje se na lijevoj strani u gornjem rubu
... Na primjer, ako je element
kontakt informacije se pohranjuju:

Kontakt informacije


Rice. 2. Grupisanje elemenata forme pomoću

Tabela 2. Atributi oznake
Atribut Značenje / Opis
onemogućeno Ako je atribut prisutan, tada je grupa povezanih elemenata obrasca koji se nalaze unutar kontejnera
onemogućeno za popunjavanje i uređivanje. Koristi se za ograničavanje pristupa nekim poljima obrasca koja sadrže prethodno unesene podatke. Atribut se koristi bez navođenja vrijednosti -
.
formu
u istom dokumentu. Označava jedan ili više oblika kojima se ovu grupu elementi. Na ovog trenutka atribut ne podržava nijedan pretraživač.
ime Definiše ime koristiti za referenciranje elemenata u JavaScript-u ili za referenciranje podataka obrasca nakon što je obrazac popunjen i poslan. Analogno atributu id.

3. Kreirajte polja obrasca

Element kreira većinu polja obrasca. Atributi elementa se razlikuju ovisno o vrsti polja za koje se element koristi.

WITH koristeći css-styles, možete promijeniti veličinu fonta, vrstu fonta, boju i druga svojstva teksta, kao i dodati ivice, boju pozadine i pozadinska slika... Širina polja je postavljena svojstvom širine.

Tabela 3. Atributi oznake
Atribut Značenje / Opis
prihvatiti Određuje vrstu datoteke koja je dozvoljena za slanje na server. Indicirano samo za . Moguće vrijednosti:
file_extension - Omogućava preuzimanje datoteka sa navedenu ekstenziju, na primjer, accept = ". gif", accept = ". pdf", accept = ". doc"
audio / * - omogućava preuzimanje audio datoteka
video / * - omogućava postavljanje video datoteka
image / * - omogućava postavljanje slika
media_type - označava vrstu medija učitanih datoteka.
alt Definiše alternativni tekst za slike, naznačeno samo za .
autocomplete Odgovoran za pamćenje vrijednosti unesenih u tekstualno polje i njihovu automatsku zamjenu prilikom naknadnog unosa:
uključeno - znači da polje nije zaštićeno, a njegova vrijednost se može pohraniti i preuzeti,
isključeno - onemogućuje automatsko dovršavanje za polja obrasca.
autofokus Omogućava vam da se uvjerite da u učitanom obrascu ovo ili ono polje za unos već ima fokus (odabrano), spremno za unos vrijednosti.
provjereno Atribut provjerava da li je polje za potvrdu označeno po defaultu pri učitavanju stranice za polja tipa = "checkbox" i type = "radio".
onemogućeno
formu Vrijednost atributa mora biti jednaka id atributu elementa u istom dokumentu. Određuje jedan ili više obrazaca kojima ovo polje obrasca pripada.
formiranje Postavlja url datoteke koja će obraditi podatke unesene u polja prilikom slanja obrasca. Postavlja se samo za polja tipa type = "submit" i type = "image". Ovaj atribut nadjačava vrijednost atributa akcije samog obrasca.
formenctype Određuje kako će podaci polja obrasca biti kodirani kada se pošalju na server. Nadjačava vrijednost atributa enctype obrasca. Postavlja se samo za polja tipa type = "submit" i type = "image". Opcije su:
aplikacija / -x-www-form-urlencoded je zadana postavka. Svi znakovi su kodirani prije slanja (razmaci se zamjenjuju sa +, specijalni znakovi se pretvaraju u ASCII HEX vrijednosti)
multipart / form-data - znakovi nisu kodirani
tekst / običan - razmaci se zamjenjuju znakom +, a specijalni znakovi nisu kodirani.
formmethod Atribut specificira metodu koju će pretraživač koristiti za slanje podataka obrasca na server. Postavlja se samo za polja tipa type = "submit" i type = "image". Nadjačava vrijednost atributa metode obrasca. Opcije su:
get je zadana postavka. Podaci iz obrasca (par ime/vrijednost) se dodaju na url i šalju na server: url? Ime = vrijednost & ime = vrijednost
post - Podaci obrasca se šalju kao http zahtjev.
formnovalidate Određuje da se podaci polja obrasca ne trebaju provjeravati kada se obrazac pošalje. Nadjačava vrijednost novalidate atributa obrasca. Može se koristiti bez specificiranja vrijednosti atributa.
formtarget Određuje gdje će se prikazati odgovor primljen nakon slanja obrasca. Postavlja se samo za polja tipa type = "submit" i type = "image". Nadjačava vrijednost ciljni atribut forme.


_parent - Učitava odgovor u roditeljski okvir
_top - učitava odgovor na cijelom ekranu
framename - Učitava odgovor u okvir sa navedenim imenom.
visina Vrijednost atributa sadrži broj piksela bez navođenja jedinice. Postavlja visinu polja obrasca tipa type = "image", na primjer ... Preporučuje se istovremeno postavljanje i visine i širine polja.
lista Je referenca na stavku , sadrži svoj id. Omogućava vam da korisniku date nekoliko opcija za izbor kada počne da unosi vrijednost u odgovarajuće polje.
max Omogućava vam da ograničite važeći unos brojeva maksimalna vrijednost, vrijednost atributa može sadržavati cijeli broj ili razlomak broj... Preporučuje se korištenje ovog atributa zajedno s atributom min. Radi sa sljedećim tipovima polja: broj, raspon, datum, datum i vrijeme, datum i vrijeme-lokalno, mjesec, vrijeme i sedmica.
maxlength Atribut specificira maksimalni iznos znakova unesenih u polje. Zadana vrijednost je 524288 znakova.
min Omogućava vam da ograničite važeći numerički unos na minimalnu vrijednost.
višestruko Omogućava korisniku da unese više vrijednosti atributa, odvojenih zarezom. Odnosi se na fajlove i adrese e-pošte. Navedeno bez vrijednosti atributa.
ime Određuje ime koje će se koristiti za pristup elementu , na primjer, u tabelama css stilovi... Analogno atributu id.
uzorak Omogućava vam da definirate korištenje regularni izraz sintaksu podataka koji moraju biti dozvoljeni u određenom polju. Na primjer, obrazac = "(3) - (3)" - uglaste zagrade postavljaju raspon važećih znakova, u ovom slučaju bilo koji mala slova, broj u kovrčave zagrade označava da su potrebna tri mala slova, nakon kojih slijedi crtica, nakon koje slijede tri cifre u rasponu od 0 do 9.
čuvar mjesta Sadrži tekst koji se prikazuje u polju za unos prije popunjavanja (najčešće je nagovještaj).
samo za čitanje Ne dozvoljava korisniku da mijenja vrijednosti elemenata forme, dok je odabir i kopiranje teksta dostupno. Navedeno bez vrijednosti atributa.
potrebno Prikazuje poruku u kojoj se navodi da je ovo polje obavezno. Ako korisnik pokuša poslati obrazac bez unošenja tražene vrijednosti u ovo polje, na ekranu će se prikazati poruka upozorenja. Navedeno bez vrijednosti atributa.
veličina Određuje prividnu širinu margine, u znakovima. Podrazumevano je 20. Radi sa sljedećim tipovima polja: tekst, pretraga, tel, url, email i lozinka.
src Određuje url slike koji će se koristiti kao dugme za slanje podataka obrasca. Određeno samo za polje .
korak Koristi se za stavke koje zahtijevaju unos numeričke vrijednosti, označava iznos za povećanje ili smanjenje vrijednosti tijekom podešavanja raspona (korak).
tip dugme - kreira dugme.
potvrdni okvir - pretvara polje za unos u kvadratić koji se može označiti ili poništiti, na primjer
imam auto
boja - Generira birače boja u podržanim pretraživačima, dajući korisnicima mogućnost odabira vrijednosti boja u heksadecimalnom formatu.
datum - omogućava vam da unesete datum u formatu dd.mm.gggg.
rođendan:
datetime-local - omogućava vam da unesete datum i vrijeme odvojeno velikim slovima Englesko pismo T uzorak dd.mm.gggg hh: mm.
Rođendan - dan i vrijeme:
e-pošta - pretraživači koji podržavaju dati atributće očekivati ​​da korisnik unese podatke koji odgovaraju sintaksi e-mail adresa.
Email:
fajl - omogućava vam da otpremite fajlove sa računara korisnika.
Odaberite fajl:
skriveno - sakriva kontrolu koja nije vidljiva pretraživaču i sprečava korisnika da promeni podrazumevane vrednosti.
slika - kreira dugme, omogućavajući vam da umetnete sliku umesto teksta na dugme.
mjesec - Omogućava korisniku da unese godinu i mjesec koristeći obrazac yyyy-mm.
broj - namijenjen za unos cjelobrojnih vrijednosti. Njegovo min atributi, max i step određuju gornje, donje granice i korak između vrijednosti. Ovi atributi se pretpostavljaju za sve stavke koje imaju numeričke vrijednosti. Njihove zadane vrijednosti zavise od tipa elementa.
Navedite količinu (od 1 do 5):
lozinka - kreira tekstualna polja u obrascu, dok se znakovi koje unese korisnik zamjenjuju zvjezdicama, markerima ili drugim, instaliran od strane pretraživača značke.
Unesite lozinku:
radio - stvara radio dugme - kontrolu u obliku malog kruga koji se može uključiti ili isključiti.
vegetarijanac:
raspon - omogućit će vam da kreirate element sučelja kao što je klizač, min / max - omogućit će vam da postavite raspon odabira
reset - kreira dugme koje briše polja obrasca od podataka koje je uneo korisnik.
pretraga - označava polje za pretragu, po defaultu je polje za unos pravougaonog oblika.
Traži:
podneti - kreira standardno dugme kliknuti. Dugme prikuplja informacije iz obrasca i šalje ih na obradu.
text - Kreira tekstualne okvire na obrascu, izlazeći okvir za tekst u jednom redu za unos teksta.
vrijeme - omogućava vam da unesete vrijeme u 24-satnom formatu pomoću šablona hh: mm. U podržanim pretraživačima, pojavljuje se kao kontrola numeričkog unosa sa vrijednošću na koju se može kliknuti mišem i prihvaća samo vrijednosti vremena.
Navedite vrijeme:
url - polje je namijenjeno za navođenje URL adresa.
Glavna stranica:
sedmica - Odgovarajući alat za pokazivač omogućava korisniku da odabere jednu sedmicu u godini, a zatim daje unos podataka u formatu nn-gggg. U zavisnosti od godine, broj sedmica može biti 52 ili 53.
Navedite sedmicu:
vrijednost Određuje tekst prikazan na dugmetu, u okviru ili povezani tekst. Nije navedeno za polja tipa datoteke.
širina Vrijednost atributa sadrži broj piksela. Omogućava vam da postavite širinu polja obrasca.

4. Polja za unos teksta

Element koristi se umjesto elementa kada trebate kreirati velike tekstualne okvire. Tekst prikazan kao originalna vrijednost nalazi se unutar oznake. Dimenzije polja se postavljaju pomoću atributa cols - horizontalne dimenzije, redovi - vertikalne dimenzije. Visina polja se može postaviti pomoću svojstva visine. Sve veličine se izračunavaju na osnovu veličine jednog znaka monoprostornog fonta.

Tabela 4. Atributi oznake

7. Dugmad

Element kreira dugmad na koja se može kliknuti. Za razliku od kreiranih dugmadi ( , , , ), unutar elementa .

Dugmad omogućavaju korisnicima da dostave podatke u obrazac, obrišu sadržaj obrasca ili poduzmu neku drugu radnju. Možete kreirati ivice, promijeniti pozadinu i poravnati tekst na gumbu.

Tabela 9. Atributi oznake
Atribut Značenje / Opis
autofokus Postavlja fokus na dugme pri učitavanju stranice.
onemogućeno Onemogućuje dugme, čime se ne može kliknuti.
formu Označava jedan ili više oblika kojima ovo dugme pripada. Vrijednost atributa je identifikator odgovarajućeg obrasca.
formiranje Vrijednost atributa sadrži url rukovatelja za podatke obrasca koji se šalju kada se klikne na dugme. Samo za tipku tipa = "pošalji". Nadjačava vrijednost atributa akcije specificiranog za element .
formenctype Određuje tip kodiranja podataka obrasca prije nego što se predaju serveru kada se kliknu na tipke tipa = "pošalji". Nadjačava vrijednost atributa enctype specificiranog za element ... Moguće vrijednosti:
aplikacija / x-www-form-urlencoded je zadana postavka. Svi znakovi će biti kodirani prije slanja.
multipart / form-data - znakovi nisu kodirani. Koristi se kada se fajlovi učitavaju pomoću obrasca.
tekst / običan - znakovi nisu kodirani i razmaci se zamjenjuju znakom +.
formmethod Atribut definira metodu koju će pretraživač koristiti za slanje obrasca. Nadjačava vrijednost atributa metode navedenog na elementu ... Naveden je samo za tipke tipa = "submit". Moguće vrijednosti:
get - podaci iz obrasca (par ime/vrijednost) se dodaju u url i šalju na server. Ova metoda ima ograničenja u veličini poslanih podataka i nije pogodan za slanje lozinki i povjerljivih informacija.
post - podaci iz obrasca se dodaju kao http zahtjev. Metoda je pouzdanija i sigurnija od get i nema ograničenja veličine.
formnovalidate Atribut specificira da se podaci obrasca ne trebaju provjeravati nakon podnošenja. Naveden je samo za tipke tipa = "submit".
formtarget Atribut određuje u kojem prozoru će se prikazati rezultat nakon slanja obrasca. Naveden je samo za tipke tipa = "submit". Nadjačava vrijednost ciljnog atributa specificiranog za element .
_blank - učitava odgovor u novi prozor / karticu
_self - učitava odgovor u isti prozor (podrazumevano)
_parent - Učitava odgovor u roditeljski okvir
_top - učitava odgovor na cijelom ekranu
framename - Učitava odgovor u okvir sa navedenim imenom.
ime Određuje ime dugmeta, vrednost atributa je tekst. Koristi se za povezivanje sa podacima obrasca nakon slanja obrasca ili za povezivanje sa datim dugmetom(ima) u JavaScript-u.
tip Definira tip dugmeta. Moguće vrijednosti:
dugme - dugme na koje se može kliknuti
reset - dugme za resetovanje, vraća se izvorno značenje
pošalji - dugme za slanje podataka obrasca.
vrijednost Postavlja zadanu vrijednost koja se šalje kada se klikne na dugme.

8. Polje za potvrdu i radio dugmad u obrascima

Polje za potvrdu u obrascima se postavlja pomoću konstrukcije i prekidač sa .

Za razliku od radio dugmadi, nekoliko polja za potvrdu može se postaviti u jednom obliku. Ako je označeni atribut naveden za potvrdne okvire, onda kada se stranica učita, potvrdni okviri će već biti označeni u odgovarajućim poljima obrasca.

Element

Pozdrav dragi čitaoci! Danas ćemo pogledati kako postaviti dimenzije. blok elementi web stranice koristeći css svojstva i prilagodite prikaz sadržaja ako se ne uklapa u element.

širina i visina - širina i visina elemenata u css-u

Koristeći atribute stila širinu i visinu, možete postaviti širinu i visinu blok elemenata, respektivno:

širina: auto |<ширина>naslijediti
visina: auto |<ширина>naslijediti

Kao vrijednosti možete koristiti sve dostupne u css jedinice mjerenja - na primjer, pikseli (px), inči (in), tačke (pt), itd.:

p (širina: 200px; visina: 150px)

Pored apsolutnih jedinica, možete odrediti relativnu vrijednost veličine elemenata u procentima. U ovom slučaju, širina i visina elementa ovisit će o širini i visini. roditeljski element... Ako roditelj nije eksplicitno naveden, tada će dimenzije zavisiti od prozora pretraživača.

div (širina: 40%;)

Auto daje kontrolu nad veličinom elementa web pretraživaču i podrazumevana je vrednost. U ovom slučaju, veličina elementa će biti takva da će sav njegov sadržaj stati u njega.

Pogledajmo nekoliko primjera.





širina i visina




Dobrodošli na našu web stranicu automobila. Ovdje ćete naći mnogo zanimljivih i korisnih članaka o automobilima, o njima tehničke karakteristike i karakteristike.




rezultat:

U ovom primjeru smo kreirali div blok i stavite pasus p sa tekstom u njega. Za div, striktno smo postavili dimenzije na 300 x 300 piksela. Element p ima vrijednosti svojstva širine i visina su jednake auto, tako da kao što možete vidjeti na snimku ekrana, njegova širina je postavljena na širinu roditeljskog elementa, a visina je postavljena tako da stane sav tekst sadržan u pasusu.

Sada se promijenimo css postavke za paragraf p i postaviti fiksne dimenzije:

sloj 2 (
pozadina: #eee;
širina: 250px;
}

rezultat:

Kao što vidite, širina pasusa je postala uža i jednaka 250 piksela, a visina mu se povećala tako da će tekst stati, budući da je parametar visine ostao jednak auto.

Sada postavimo visinu i širinu pasusa u procentima:

sloj 2 (
pozadina: #eee;
širina: 50%;
visina: 50%;
}

rezultat:

Kao što možete vidjeti na slici, širina p elementa je postala jednaka polovini širine. div element... A visina se povećala na 75 posto visine diva.

Prilikom postavljanja širine i visine bilo kojeg elementa u relativne jedinice, možda ćete morati navesti minimalne i maksimalne moguće veličine. Zaista, na primjer, kada se promijeni veličina prozora pretraživača, veličina elementa se može smanjiti i povećati do takve veličine da čitljivost web stranice postaje vrlo niska.

Možete odrediti minimalnu širinu i visinu koristeći atribute min-width i min-heigh:

min-širina:<ширина>
min-visina:<высота>

Slični atributi stila max-width i max-height vam omogućavaju da postavite maksimalne veličine:

maksimalna širina:<ширина>
maksimalna visina:<высота>

Jasno je da pri određivanju maksimalne i minimalne vrijednosti visine i širine dimenzije elementa ne mogu postati veće od maksimalne i manje od minimalnih vrijednosti.

Vrijedi pojasniti da je zadatak visinske parametre a širina ima smisla samo za blok oznake , jer za inline elemente ove parametre ne obrađuje pretraživač.

To se može ispostaviti prilikom podešavanja tvrdi parametri visina i širina elementa, sadržaj koji sadrži možda neće stati u ograničeno područje.

Na primjer, smanjimo veličinu paragrafa p sa gornjih primjera na 100 piksela:

sloj 2 (
pozadina: #eee;
širina: 100px;
visina: 100px;
}

rezultat:

Kao što vidite, tekst je izašao izvan granica pasusa i ne izgleda baš lijepo. Izbjeći slične situacije postoji css pravilo- prelivanje.

Opcija preklapanja za skrivanje (skriveno, vidljivo) ili pomicanje (skrolovanje, automatsko) sadržaj

Prelijevanje sadržaja može se dogoditi kada su i širina i visina elementa ograničene. Razmotrite dva paragrafa:

Tekst prvog pasusa


Tekst drugog pasusa

rezultat:

Pošto za pasuse nisu specificirane ni širina ni visina, pretraživač ih sam izračunava na osnovu sopstvenog razumevanja vrednosti auto. Kao rezultat, paragrafi po širini zauzimaju sve raspoloživog prostora, a po visini prema sadržaju koji sadrže.

Sada ograničimo širinu prvog pasusa:

Tekst prvog pasusa


Tekst drugog pasusa

rezultat:

Kao što se i očekivalo, širina pasusa je smanjena, a visina je postavljena da primi sav tekst.

Pa, hajde da sada ograničimo visinu prvog pasusa:

Tekst prvog pasusa


Tekst drugog pasusa

Kao rezultat toga, ispostavilo se da se tekst ne uklapa u tako ograničeni pasus, te je stoga naišao na područje donjeg susjeda. Shodno tome, praktično je nemoguće pročitati tekst ni u prvom ni u drugom pasusu. Postoji kontrola ponašanja sadržaja u takvim situacijama pravilo prelivanja:

prelivanje: vidljivo | skriveno | pomicanje | auto | naslijediti

Prema zadanim postavkama, overflow je vidljiv, što govori pretraživaču da prikaže sadržaj koji se ne uklapa u kontejner. Rezultat se može vidjeti u primjeru iznad.

Pravilo skriva sve što ne stane u kontejner:

Vrijednost pomicanja će prikazati trake za pomicanje okomito i vodoravno na elementu, čak i ako cijeli sadržaj stane:

Tekst prvog pasusa


Tekst drugog pasusa

Najpopularnije i najlogičnije rješenje, ako trebate napraviti trake za pomicanje za kontejner, je vrijednost auto... U ovom slučaju, pretraživač će sam odrediti kada i duž kojih osa trebaju biti prikazane trake za pomicanje:

Tekst prvog pasusa


Tekst drugog pasusa

rezultat:

Također možete koristiti atribute stila overflow-x i overflow-y da prilagodite trake za pomicanje, koje vam omogućavaju da prilagodite prikaz pomicanja duž pojedinačnih osa. Dakle, odgovoran je za horizontalna osa i za vertikalna osa.

Stoga, ako vam, na primjer, to treba u paragrafu horizontalno pomicanje nikada se nije pojavila, a vertikala se pojavila samo kada je potrebno, onda je dovoljno napisati sledeće pravilo css:

p (overflow-x: hidden; overflow-y: auto;)

I zadatak će biti riješen.

To je sve. Do sljedećeg puta. Ne zaboravite se pretplatiti na ažuriranja bloga i bit ću vam zahvalan ako koristite dugmad društvenih mreža.

Tag je jedan od raznovrsnih elemenata forme i omogućava vam da kreirate različiti elementi interfejs i obezbeđuju interakciju korisnika. Uglavnom dizajniran za kreiranje tekstualnih polja, raznih dugmadi, radio dugmadi i okvira za potvrdu. Iako element ne treba stavljati unutar kontejnera , koji definiše formu, ali ako se podaci koje unese korisnik treba poslati na server, gdje ih CGI program obrađuje, onda se mora specificirati FORM. Isti je slučaj i za obradu podataka sa klijentske aplikacije, na primjer, skripte u JavaScriptu.

Glavni parametar oznake , definirajući tip elementa - tip. Omogućava vam da pitate sljedeće stavke obrasci: tekstualno polje (tekst), polje lozinke (lozinka), radio dugme, potvrdni okvir, skriveno polje, dugme, dugme za slanje obrasca (pošalji), dugme za brisanje obrasca (resetovanje), polje za slanje datoteke (fajla) i dugme sa slikom (slikom). Svaki element ima svoju listu parametara koji određuju njegovu vrstu i karakteristike.

Sintaksa

Parametri

Opis parametara oznake


ALIGN parametar

Određuje kako poravnati polje slike s tekstom ili drugim elementima obrasca.

Sintaksa

Argumenti

  • dnu- Poravnajte donju ivicu slike sa okolnim tekstom
  • lijevo- Poravnava sliku lijevo od prozora
  • srednji- Poravnanje sredine slike prema osnovnoj liniji trenutne linije.
  • u pravu- Poravnava sliku sa desnom ivicom prozora.
  • top- Gornja granica slike je poravnata sa najvišim elementom trenutne linije.

Zadana vrijednost je donja. Pretraživači takođe podržavaju argumente absbottom, absmiddle, osnovna linija i texttop koji nisu uključeni u HTML 4.01 specifikaciju.

ALT parametar

Parametar alt postavlja alternativni tekst za polje slike. Ovaj tekst vam omogućava da dobijete tekstualne informacije o slici kada je učitavanje slika onemogućeno u pretraživaču. Budući da se slike učitavaju nakon što pretraživač primi informacije o njima, tekst koji zamjenjuje sliku pojavljuje se ranije. I dok se učitava, tekst će biti zamijenjen slikom. Preglednici također prikazuju alternativni tekst kao opis alata koji se pojavljuje kada miš pređe preko slike.

Sintaksa

Vrijednost može biti bilo koja prikladna tekstualni niz... Mora biti stavljen u dvostruke ili jednostruke navodnike.

BORDER parametar

Pretraživači rukuju slikama dodatim preko oznake poput slika kreiranih sa oznakom ... Uključujući i oko slike, možete dodati okvir čija boja odgovara boji teksta.

Sintaksa

Važeća vrijednost je bilo koji cijeli broj pozitivan broj u pikselima. Zadana vrijednost je 0.

PROVJEREN parametar

Ovaj parametar određuje da li je element obrasca kao što je okvir za potvrdu ili radio dugme prethodno označen. U slučaju korišćenja radio dugmeta može se označiti samo jedan element grupe, a za checkboxove je dozvoljeno označiti najmanje sve elemente.

Sintaksa


ONEMOGUĆEN parametar

Blokira pristup i izmjenu polja obrasca. U tom slučaju je prikazan sivo i nije dostupan za aktivaciju od strane korisnika. Osim toga, takvo polje ne može dobiti fokus pritiskom na tipku Tab, mišem ili na bilo koji drugi način. Međutim, ovo stanje polja može se promijeniti pomoću skripti.

Sintaksa

MAXLENGTH parametar

Postavlja maksimalan broj znakova koji korisnik može unijeti u okvir za tekst. Kada se ovaj broj dostigne tokom biranja, dalji unos nije moguć.

Sintaksa


Parametar NAME

Određuje jedinstveno ime za element obrasca. Obično se ovo ime koristi prilikom slanja podataka na server ili za pristup unesenim podacima polja putem skripti.

Sintaksa

Ime je skup karaktera, uključujući brojeve i slova. JavaScript je osjetljiv na velika i mala slova, pa kada se pozivate na element po imenu, koristite isti pravopis kao za parametar imena.

Parametar READONLY

Kada označiti dodaje se parametar samo za čitanje, polje za tekst ne može promijeniti korisnik, uključujući i uneseno novi tekst ili modificirati postojeći. Osim toga, takvo polje ne može dobiti fokus pritiskom na tipku Tab, mišem ili na bilo koji drugi način. Međutim, stanje i sadržaj polja mogu se promijeniti pomoću skripti.

Sintaksa


SIZE parametar

Širina tekstualnog okvira, koja je određena brojem znakova u monoprostornom fontu. Drugim riječima, širina je data 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 pozitivan cijeli broj.

SRC parametar

Adresa grafički fajl biti prikazan na web stranici u polju slike.

Sintaksa

Vrijednost je puna ili relativni put u fajl.

TYPE parametar

Traženi parametar tipa govori pretraživaču koji je tip elementa obrasca.

Sintaksa

Argumenti

  • dugme- Dugme.
  • polje za potvrdu- Zastave. Omogućava vam da odaberete više od jedne opcije od predloženih.
  • fajl- Polje za unos naziva fajla koji se šalje na server.
  • skriveno- Skriveno polje. Ni na koji način se ne prikazuje na web stranici.
  • slika- Polje slike. Kada kliknete na sliku, podaci obrasca se šalju na server.
  • lozinka- Normalno tekstualno polje, ali se razlikuje od njega po tome što su svi znakovi prikazani zvjezdicama. Dizajniran je tako da niko ne može proviriti unesenu lozinku.
  • radio- Prekidači. Koriste se kada je potrebno izabrati jednu opciju od nekoliko predloženih.
  • resetovati- Dugme za vraćanje podataka obrasca na originalnu vrijednost.
  • submit- Dugme za slanje podataka obrasca na server.
  • tekst- Polje za tekst. Dizajniran za unos znakova pomoću tastature.

Zadana vrijednost je tekst.

VALUE parametar

Određuje vrijednost elementa obrasca koji se šalje serveru ili prima pomoću klijentskih skripti. Par "ime = vrijednost" se šalje na server, gdje je ime specificirano parametrom imena oznake a vrijednost je specificirana parametrom vrijednosti.

Ovisno o vrsti elementa, parametar vrijednosti igra sljedeću ulogu:

  • za dugmad (tip unosa = "dugme | resetuj | pošalji") postavlja natpis na njima;
  • za tekstualna polja (tip unosa = "lozinka | tekst") specificira prethodno uneseni niz. Korisnik može obrisati tekst i unijeti svoje znakove, ali kada se koristi u obliku gumba Reset, korisnički tekst se briše i vraća uneseni parametar vrijednosti;
  • za potvrdne okvire i radio dugmad (tip unosa = "checkbox | radio") jedinstveno identifikuje svaki element tako da klijent ili serverski program mogao nedvosmisleno odrediti koju je stavku korisnik odabrao.

Top srodni članci

Različiti pokreti miša okomito i horizontalno
Različiti pokreti miša okomito i horizontalno
Kako komprimirati teksture u Fallout 4
Kako komprimirati teksture u Fallout 4
Ostaje samo razumjeti potreban nivo
Ostaje samo razumjeti potreban nivo
Kategorije:
© 2021 bumotors.ru. Kako podesiti pametne telefone i računare. Informativni portal.