Innrykk og marger i html. Tekstfelt

Blokker i CSS er uavhengige objekter formet som et rektangel. Alle elementer i et HTML-dokument er uavhengige blokker som inneholder enhver form for informasjon, enten det er tekst eller bilde (innhold). For eksempel: for et element er innholdet i blokken tekst, og for et element - tekst.

Rundt innholdet, i blokken, kan det være tomme, ubesatte felt (polstring), som forresten gir innholdet i blokken et mer attraktivt utseende. Umiddelbart utenfor jordene ligger blokkgrensen (grense), som kan ha en spesifisert tykkelse, farge og stil. Blokken kan ha innrykk (margin) de. ledig plass rundt grenser. Marger, kantlinjer og polstring er ikke inkludert i blokkens bredde; bredden angis kun for innholdet.

Enger. Egenskaper MARGIN-TOPP, MARGIN-HØYRE,
MARGIN-BUND, MARGIN-VENSTRE

Disse egenskapene angir størrelsen på margene rundt blokken; verdiene er spesifisert i alle lengdeenheter eller prosenter:

  • margin-topp- indikerer bredden på toppmargen;
  • marg-høyre- indikerer bredden på høyre marg;
  • marg-bunn- indikerer bredden på bunnmargen;
  • marg-venstre- indikerer bredden på venstre marg.

En eksempelregel for et avsnitt med marger på 25 piksler til høyre og venstre vil se slik ut:

p(
margin-top: 0px;
marg-høyre : 25px ;
margin-bottom: 0px;
marg-venstre: 25px;
}

MARGIN eiendom

Denne egenskapen er stenografi, som brukes til å forkorte egenskapene ovenfor. Eiendom margin kan ha en rekke verdier fra én til fire:

  • hvis bare én er spesifisert, er margene på alle sider av blokken de samme;
  • hvis to verdier er gitt, betyr den første feltene over og under, den andre - til høyre og venstre (verdiene til hvert par er like);
  • hvis tre verdier er gitt, indikerer den første toppmargen, den andre - venstre og høyre, den tredje - bunnen;
  • hvis alle fire verdiene er gitt, er følgelig den første toppen, deretter høyre marg, deretter bunnen og den siste er venstre.
Vi skriver regelen:

p (margin: 15px 5px 20px)

I dette eksemplet vil den øverste avsnittsmargen være 15 piksler, høyre og venstre marg vil være 5 piksler, og bunnmargen vil være 20 piksler.

Grenser. Egenskaper BORDER-TOP-WIDTH, BORDER-HIGHT-WIDTH, BORDER-BOTTON-WIDTH, BORDER-VENSTRE-WIDTH

Ved å bruke CSS kan du legge ved avsnittstekst i en ramme, slik det ble gjort på sidene i form av eksempler. Disse egenskapene angir bare tykkelsen på blokkkantene for topp-, høyre-, bunn- og venstresegmenter. Verdier kan spesifiseres ved hjelp av nøkkelord:

  • tynn- tynn;
  • medium- middels tykkelse (brukes som standard);
  • tykk- tykk.

Verdier kan også spesifiseres i alle lengdeenheter; prosentverdier er ikke spesifisert. Regelen kan skrives slik:

p(
border-top-wdth : 1px ;
border-right-wdth : 2px ;
border-bottom-wdth: medium;
border-venstre-wdth: tynn;
}

BORDER-WIDTH eiendom

Dette er en stenografi egenskap, verdier settes på samme måte som egenskapen. Regelen skrevet nedenfor vil tilsvare eksemplet skrevet ovenfor:

p (kantbredde: 1px 2px middels tynn)

BORDER-COLOR eiendom

Denne egenskapen er også en forkortelse, den brukes til å sette grensene for blokken, verdiene er:

  • nøkkelord (rød, gul, svart, blå, etc.);
  • heksadesimal fargekode (00FFFF, 000000, FFFFFF, etc.);
  • desimalkode til RGB (farge: rgb (120, 25, 182));
  • gjennomsiktig- gjennomsiktig kant.

Hvis du trenger å angi forskjellige farger for hver av de fire kantene, brukes følgende egenskaper:

  • kant-topp-farge- farge på toppkanten;
  • kant-høyre-farge- høyre kantfarge;
  • kant-bunn-farge- farge på bunnkanten;
  • kant-venstre-farge- venstre kantfarge.

Regelen for et slikt eksempel vil se slik ut:

p(
kant-topp-farge: blå;
kantlinje-høyre-farge : 000000 ;
kant-bunn-farge: FF0000;
kant-venstre-farge: rgb (25, 125, 205);
}

BORDER-STIL eiendom

Egenskapen er stenografi; den spesifiserer typen linjer som er grensene til blokken. For å spesifisere ulike typer linjer for blokkgrenser, brukes individuelle egenskaper:

  • border-top-stil- type linje på den øvre grensen;
  • grense-høyre-stil- høyre kantlinjetype;
  • kant-bunn-stil- type linje av den nedre grensen;
  • grense-venstre-stil- venstre kantlinjetype.

Eiendomsverdier er nøkkelord:

  • ingen- ingen kantlinje (brukt som standard);
  • prikkete- grensen er dannet av en linje som består av prikker;
  • stiplet- stiplet linje;
  • fast- solid linje;
  • dobbelt- dobbel heltrukket linje;
  • spor- kantlinjen vises som en "trykket" linje (simulerer volum);
  • rygg- kantlinjen vises som en "konveks" linje;
  • innfelt- grensen vises slik at hele blokken ser deprimert ut;
  • utgangspunktet- hele blokken ser konveks ut.

La oss se på eksempler:









Stenografi eiendom border-stil lar deg forkorte stilverdiene for alle fire kantsegmentene, satt på samme måte som for . Vi skriver en regel for en blokk med grenser laget av en stiplet linje:

p (kantlinje: stiplet )

Egenskaper BORDER-TOP, BORDER-HIGHT, BORDER-BOTTOM, BORDER-VENSTRE

Dette er stenografiske egenskaper som lar deg forkorte verdiene til egenskaper kant-bredde, border-stil Og grensefarge, se på eksempelet:

p(
border-top: 1px solid rød;
kantlinje-høyre: 3px solid rød;
border-bottom: 1px solid rød;
kant-venstre: 3px solid rød
}

Kantene til avsnittet vil være røde, laget med en heltrukket linje. Kanttykkelsen øverst og nederst er 1px, til høyre og venstre - 3px.

GRENSE-eiendom

Denne egenskapen er en forkortelse og brukes til å angi parametere for alle fire kantsegmenter: bredde, farge og stil. La oss skrive en eksempelregel:

p (kantlinje: 1px helblå)

Kanten rundt dette avsnittet vil være den samme på alle sider, laget med en hel blå linje 1px tykk.

Innrykk. Egenskaper PADDING-TOP, PADDING-HØYRE,
PADDING-BUNN, PADDING-VENSTRE

Disse egenskapene lar deg angi innrykkstørrelsene for hver side separat; verdiene er spesifisert i lengdeenheter eller som en prosentandel:

  • polstring-topp- bredden på toppmargen;
  • polstring-høyre- bredden på høyre marg;
  • polstring-bunn- bunnmarginbredde;
  • polstring-venstre- venstre margbredde.

PADDING eiendom

Dette er en stenografi-egenskap som brukes til å forkorte egenskapene beskrevet ovenfor. Eiendom polstring kan ha fra én til fire verdier, som tildeles på samme måte som for (marginer) og (border). La oss skrive denne regelen:

p(
bakgrunnsfarge: hvit;
kantlinje: 2px blå prikker;
polstring: 10px 25px
}

Ved å bruke eksemplet på det resulterende avsnittet, la oss se hvordan innrykk fungerer:

Posisjonen som søkemotorer vil vise det i søkeresultatene avhenger av hvor optimalisert nettstedet er. Jo høyere denne posisjonen er, jo flere besøkende vil du motta fra søkemotorer. Et viktig stadium av optimalisering er å fylle nettstedet med unikt innhold av høy kvalitet. Det er ikke nødvendig å kopiere interessante artikler om emnet ditt fra andre ressurser eller gjenta det som allerede er tilgjengelig på World Wide Web.

På dette tidspunktet tror jeg at du kan fullføre ditt første bekjentskap med CSS cascading style sheets og begynne å jobbe på egen hånd. Denne kunnskapen er nok til å begynne med, så fortsett å erobre det enorme hyperrommet.


Hva du ikke kan lage en nettside uten: ∼ ∼ Mange mennesker er interessert i:
∼

HTML-skjemaer er kontroller som brukes til å samle inn informasjon fra besøkende på nettstedet.

Nettskjemaer består av en samling tekstfelt, knapper, lister og andre kontroller som aktiveres med et museklikk. Teknisk sett sender skjemaer data fra brukeren til en ekstern server.

For å motta og behandle skjemadata, webprogrammeringsspråk som f.eks PHP, Perl.

Før bruken av HTML5 var nettskjemaer en samling av flere elementer , avsluttes med en knapp . Det tok mye arbeid å style skjemaer på tvers av forskjellige nettlesere. I tillegg krevde skjemaene JavaScript for å validere inndata og manglet spesifikke inndatafelttyper for å spesifisere daglig informasjon som datoer, e-postadresser og URL-er.

HTML5-skjemaer løste de fleste av disse vanlige problemene med tilstedeværelsen av nye attributter, og ga muligheten til å endre utseendet til formelementer ved å CSS3.

Ris. 1. Forbedrede nettskjemaer med HTML5

Opprette et HTML5-skjema

1. Element

Grunnlaget for enhver form er elementet .... Det krever ingen inndata siden det er en beholder som holder alle skjemakontrollene sammen - Enger. Attributtene til dette elementet inneholder informasjon som er felles for alle skjemafelt, så felt som er logisk kombinert må inkluderes i ett skjema.

Tabell 1. Tag-attributter
Egenskap Betydning/beskrivelse
aksept-tegnsett Attributtverdien er et mellomrom atskilt liste over tegnkodinger, som vil bli brukt til å sende inn skjemaet, for eksempel, .
handling Obligatorisk attributt, som spesifiserer url-en til skjemabehandleren på serveren som dataene sendes til. Det er en fil (for eksempel action.php) som beskriver hva som må gjøres med skjemadataene. Hvis attributtverdien ikke er spesifisert, vil skjemaelementene få standardverdiene etter at siden er lastet inn på nytt.
Hvis alt arbeidet skal gjøres på klientsiden av JavaScript-skript, kan du spesifisere verdien # for handlingsattributtet.
Du kan også sørge for at skjemaet fylt ut av den besøkende sendes til deg på e-post. For å gjøre dette må du skrive inn følgende:
autofullfør

enctype Brukes til å indikere MIME-type data sendt sammen med skjemaet, for eksempel enctype="multipart/form-data" . Spesifisert kun i tilfelle av method="post" .
application/x-www-form-urlencoded er standardinnholdstypen, noe som indikerer at dataene som sendes representerer en liste over URL-kodede skjemavariabler. Mellomromstegn (ASCII 32) vil bli kodet som + , og et spesialtegn som ! vil bli kodet i heksadesimal som %21 ​​.
multipart/form-data - brukes til å sende inn skjemaer som inneholder filer, ikke-ASCII-data og binære data, består av flere deler, som hver representerer innholdet i et eget skjemaelement.
text/plain - indikerer at ren (ikke html) tekst blir overført.
metode Angir hvordan skjemadata sendes inn.
Get-metoden sender data til serveren gjennom nettleserens adresselinje. Når du genererer en forespørsel til serveren, danner alle variabler og deres verdier en sekvens som www.anysite.ru/form.php?var1=1&var2=2 . Er variabelnavn og verdier lagt til serveradressen etter skiltet? og er atskilt med &. Alle spesialtegn og ikke-latinske bokstaver er kodet i formatet %nn, mellomrommet erstattes med +. Denne metoden bør brukes hvis du ikke overfører store mengder informasjon. Hvis du skal sende en fil sammen med skjemaet, vil ikke denne metoden fungere.
Postmetoden brukes til å sende store mengder data, samt konfidensiell informasjon og passord. Dataene som sendes ved hjelp av denne metoden er ikke synlige i URL-overskriften fordi de finnes i meldingens brødtekst.
Navn Settene skjemanavn, som vil bli brukt for å få tilgang til skjemaelementer via skript, for eksempel name="opros" .
novalidate Deaktiverer validering i knappen for innsending av skjema. Attributtet brukes uten å spesifisere en verdi
mål Angir vinduet som informasjonen skal sendes til:
_blank - nytt vindu
_selv - samme ramme
_parent — overordnet ramme (hvis den eksisterer, hvis ikke, så til den gjeldende)
_top er vinduet på øverste nivå i forhold til denne rammen. Hvis anropet ikke kommer fra en barneramme, så til samme ramme.

2. Gruppering av skjemaelementer

Element

...
designet for å gruppere elementer relatert til hverandre, og dermed dele formen inn i logiske fragmenter.

Hver gruppe med elementer kan navngis ved hjelp av elementet , som kommer rett etter taggen

. Gruppenavnet vises i øvre venstre kantlinje
. For eksempel hvis i et element
Kontaktinformasjon lagres:

Kontaktinformasjon


Ris. 2. Gruppering av skjemaelementer ved hjelp av

Tabell 2. Tag-attributter
Egenskap Betydning/beskrivelse
funksjonshemmet Hvis attributtet er til stede, er en gruppe relaterte skjemaelementer plassert inne i beholderen
, deaktivert for utfylling og redigering. Brukes til å begrense tilgangen til visse skjemafelt som inneholder tidligere innlagte data. Attributtet brukes uten å spesifisere en verdi -
.
form
i samme dokument. Angir en eller flere former som denne gruppen av elementer tilhører. Attributtet støttes for øyeblikket ikke av noen nettleser.
Navn Definerer Navn, som vil bli brukt til å referere til elementer i JavaScript, eller for å referere til skjemadata etter at skjemaet er fylt ut og sendt inn. Det er analogt med id-attributtet.

3. Opprett skjemafelt

Element oppretter de fleste skjemafelt. Et elements attributter varierer avhengig av hvilken type felt elementet brukes til å lage.

Ved å bruke CSS-stiler kan du endre skriftstørrelse, skrifttype, farge og andre egenskaper til teksten, samt legge til kantlinjer, bakgrunnsfarge og bakgrunnsbilde. Bredden på feltet er spesifisert av width-egenskapen.

Tabell 3. Tag-attributter
Egenskap Betydning/beskrivelse
aksepterer Bestemmer hvilken type fil som kan sendes til serveren. Angitt kun for . Mulige verdier:
file_extension - tillater nedlasting av filer med den angitte filtypen, for eksempel accept=".gif" , accept=".pdf" , accept=".doc"
audio/* - tillater nedlasting av lydfiler
video/* - tillater nedlasting av videofiler
image/* - lar innlasting av bilder
media_type - indikerer medietypen til de nedlastede filene.
alt Definerer alternativ tekst for bilder, kun angitt for .
autofullfør Ansvarlig for å huske verdiene som er lagt inn i tekstfeltet og automatisk erstatte dem neste gang du skriver dem inn:
på - betyr at feltet ikke er beskyttet og verdien kan lagres og hentes,
av - deaktiverer autofyll for skjemafelt.
autofokus Lar deg forsikre deg om at et eller annet inndatafelt allerede har fokus (har blitt valgt) i den innlastede formen, og er klar til å angi en verdi.
krysset av Attributtet sjekker om standardavmerkingsboksen er merket av ved sideinnlasting for felt som type="checkbox" og type="radio" .
funksjonshemmet
form Attributtverdien må være lik elementets id-attributt i samme dokument. Identifiserer ett eller flere skjemaer som dette skjemafeltet tilhører.
formasjon Spesifiserer nettadressen til filen som skal behandle dataene som legges inn i feltene når skjemaet sendes inn. Angis bare for feltene type="submit" og type="image" . Attributtet overstyrer verdien av handlingsattributtet til selve skjemaet.
formenctype Bestemmer hvordan skjemafeltdata skal kodes når de sendes til serveren. Overstyrer verdien til skjemaets enctype-attributt. Angis bare for feltene type="submit" og type="image" . Alternativer:
application/-x-www-form-urlencoded er standardverdien. Alle tegn kodes før sending (mellomrom erstattes med +-tegnet, spesialtegn konverteres til ASCII HEX-verdier)
multipart/form-data - tegn er ikke kodet
tekst/vanlig - mellomrom erstattes med +-symbolet, og spesialtegn er ikke kodet.
formmetode Attributtet spesifiserer metoden nettleseren vil bruke for å sende inn skjemadata til serveren. Angis bare for feltene type="submit" og type="image" . Overstyrer verdien av skjemaets metodeattributt. Alternativer:
get er standardverdien. Dataene fra skjemaet (navn/verdi-par) legges til url-en og sendes til serveren: URL?navn=verdi&navn=verdi
post - skjemadata sendes som en http-forespørsel.
formnovalidate Spesifiserer at skjemafeltdata ikke skal valideres når skjemaet sendes inn. Overstyrer verdien av skjemaets novalidate-attributt. Kan brukes uten å spesifisere en attributtverdi.
formatmål Bestemmer hvor svaret mottatt etter innsending av skjemaet skal vises. Angis bare for feltene type="submit" og type="image" . Overstyrer verdien av skjemaets målattributt.


_parent – ​​laster svaret inn i den overordnede rammen
_top – laster svaret i fullskjerm
rammenavn – laster svaret inn i en ramme med det angitte navnet.
høyde Attributtverdien inneholder antall piksler uten å spesifisere en måleenhet. Angir høyden på et skjemafelt av typen type="image" , for eksempel, . Det anbefales å stille inn både høyde og bredde på feltet samtidig.
liste Er en referanse til et element , inneholder sin id Lar deg gi brukeren flere alternativer å velge mellom når han begynner å skrive inn en verdi i det tilsvarende feltet.
maks Lar deg begrense tillatt inntasting av numeriske data til en maksimal verdi; attributtverdien kan inneholde et heltall eller et brøktall. Det anbefales å bruke dette attributtet sammen med min-attributtet. Fungerer med følgende felttyper: tall, rekkevidde, dato, datetime, datetime-local, month, time and week.
maks lengde Attributtet spesifiserer maksimalt antall tegn som legges inn i feltet. Standardverdien er 524288 tegn.
min Lar deg begrense tillatt numerisk inndata til en minimumsverdi.
flere Lar brukeren angi flere attributtverdier, atskilt med komma. Gjelder filer og e-postadresser. Spesifisert uten attributtverdi.
Navn Angir navnet som skal brukes for å få tilgang til elementet , for eksempel i css-stilark. Det er analogt med id-attributtet.
mønster Lar deg bestemme bruken vanlig uttrykk syntaksen til dataene som må tillates å legges inn i et bestemt felt. For eksempel, pattern="(3)-(3)" - firkantede parenteser angir rekkevidden av akseptable tegn, i dette tilfellet - alle små bokstaver, tallet i krøllede parenteser indikerer at tre små bokstaver er nødvendig, etterfulgt av en bindestrek, deretter tre sifre i området fra 0 til 9.
plassholder Inneholder teksten som vises i inntastingsfeltet før den fylles ut (oftest er dette et verktøytips).
skrivebeskyttet Tillater ikke brukeren å endre verdiene til skjemaelementer; valg og kopiering av tekst er fortsatt tilgjengelig. Spesifisert uten attributtverdi.
nødvendig Viser en melding som indikerer at dette feltet er obligatorisk. Hvis brukeren prøver å sende inn skjemaet uten å angi ønsket verdi i dette feltet, vil en advarsel vises på skjermen. Spesifisert uten attributtverdi.
størrelse Angir den synlige bredden av feltet i tegn. Standardverdien er 20. Fungerer med følgende felttyper: tekst, søk, tel, url, e-post og passord.
src Angir nettadressen til bildet som brukes som innsendingsknapp for skjema. Angitt kun for feltet .
steg Brukt for elementer som krever inntasting av numeriske verdier, indikerer hvor mye verdiene økes eller reduseres med i løpet av rekkeviddejusteringsprosessen (trinn).
type knapp - oppretter en knapp.
avkrysningsboks – gjør et inndatafelt til en avkrysningsboks som kan krysses av eller fjernes, f.eks.
jeg har en bil
farge - Genererer fargepaletter i støttende nettlesere, slik at brukere kan velge fargeverdier i heksadesimalt format.
dato — lar deg angi en dato i formatet dd.mm.åååå.
Fødselsdag:
datetime-local - lar deg angi dato og klokkeslett atskilt med stor engelsk bokstav T ved å bruke mønsteret dd.mm.åååå tt:mm.
Fødselsdag - dag og tid:
e-post – Nettlesere som støtter dette attributtet vil forvente at brukeren legger inn data som samsvarer med syntaksen til e-postadresser.
E-post:
fil - lar deg laste ned filer fra brukerens datamaskin.
Velg Fil:
skjult - Skjuler kontrollen, som ikke vises av nettleseren og hindrer brukeren i å endre standardverdiene.
bilde - oppretter en knapp, slik at du kan sette inn et bilde i stedet for tekst på knappen.
måned – Lar brukeren angi år og månedsnummer ved å bruke mønsteret åååå-mm.
tall - beregnet for å legge inn heltallsverdier. Attributtene min , maks og trinn spesifiserer henholdsvis øvre, nedre grenser og trinn mellom verdier. Disse attributtene antas for alle elementer som har numeriske indikatorer. Standardverdiene deres avhenger av elementtypen.
Vennligst oppgi mengde (fra 1 til 5):
passord - oppretter tekstfelt i skjemaet, mens tegnene som legges inn av brukeren erstattes med stjerner, kuler eller andre ikoner installert av nettleseren.
Oppgi passord:
radio - lager en bryter - en kontroll i form av en liten sirkel som kan slås av eller på.
Vegetarisk:
rekkevidde - lar deg lage et grensesnittelement som en glidebryter, min / maks - lar deg angi utvalgsområdet
tilbakestill - oppretter en knapp som sletter skjemafelt for brukerangitte data.
søk - betegner et søkefelt, som standard er inndatafeltet rektangulært i form.
Søk:
send - lager en standardknapp som aktiveres med et museklikk. Knappen samler informasjon fra skjemaet og sender det til behandling.
tekst - Oppretter tekstfelt på et skjema, og skriver ut et enkeltlinjes tekstfelt for tekstinntasting.
tid - lar deg legge inn tid i 24-timers format ved å bruke tt:mm-mønsteret. I støttende nettlesere vises det som en numerisk inndatafeltkontroll med en museredigerbar verdi og lar bare tidsverdier angis.
Spesifiser tid:
url – feltet er ment for å spesifisere URL-er.
Hjemmeside:
uke - Det tilsvarende pekerverktøyet lar brukeren velge én uke i året, hvoretter det vil gi datainntasting i nn-åååå-format. Avhengig av år kan antall uker være 52 eller 53.
Spesifiser uke:
verdi Bestemmer teksten som vises på en knapp, i et felt eller i tilknyttet tekst. Ikke spesifisert for felt av typen fil.
bredde Attributtverdien inneholder antall piksler. Lar deg angi bredden på skjemafeltene.

4. Tekstinntastingsfelt

Element brukes i stedet for element når du skal lage store tekstfelt. Teksten som vises som den opprinnelige verdien er plassert inne i taggen. Feltedimensjonene settes ved hjelp av attributtene cols - horisontale dimensjoner, rader - vertikale dimensjoner. Høyden på feltet kan stilles inn ved hjelp av høydeegenskapen. Alle størrelser beregnes basert på størrelsen på ett tegn i en monospace-font.

Tabell 4. Tag-attributter

7. Knapper

Element oppretter klikkbare knapper. I motsetning til opprettede knapper ( , , , ), inne i elementet .

Knapper lar brukere sende inn data til et skjema, slette skjemainnhold eller utføre andre handlinger. Du kan lage rammer, endre bakgrunnen og justere tekst på en knapp.

Tabell 9. Tag-attributter
Egenskap Betydning/beskrivelse
autofokus Setter fokus på knappen når siden lastes inn.
funksjonshemmet Deaktiverer knappen, slik at den ikke kan klikkes.
form Indikerer ett eller flere skjemaer som denne knappen tilhører. Attributtverdien er identifikatoren til det tilsvarende skjemaet.
formasjon Attributtverdien inneholder URL-en til skjemadatabehandleren som sendes når knappen klikkes. Bare for knapptype type="submit" . Overstyrer verdien til handlingsattributtet som er spesifisert for elementet .
formenctype Angir kodingstypen for skjemadata før de sendes til serveren når knapper som type="submit" klikkes. Overstyrer verdien til enctype-attributtet spesifisert for elementet . Mulige verdier:
application/x-www-form-urlencoded er standardverdien. Alle tegn vil bli kodet før sending.
multipart/form-data - tegn er ikke kodet. Brukes når filer lastes opp ved hjelp av et skjema.
tekst/vanlig - tegn er ikke kodet, og mellomrom erstattes med +-symbolet.
formmetode Attributtet spesifiserer metoden nettleseren skal bruke for å sende inn skjemaet. Overstyrer verdien til metodeattributtet som er spesifisert for elementet . Spesifisert kun for knapper av typen "submit". Mulige verdier:
get - data fra skjemaet (navn/verdi-par) legges til url og sendes til serveren. Denne metoden har begrensninger på størrelsen på dataene som sendes og er ikke egnet for sending av passord og konfidensiell informasjon.
post - data fra skjemaet legges til som en http-forespørsel. Metoden er mer pålitelig og sikker enn få og har ingen størrelsesbegrensninger.
formnovalidate Attributtet spesifiserer at skjemadata ikke skal valideres ved innsending. Spesifisert kun for knapper av typen "submit".
formatmål Attributtet spesifiserer i hvilket vindu resultatet skal vises etter innsending av skjemaet. Spesifisert kun for knapper av typen "submit". Overstyrer verdien til målattributtet som er spesifisert for elementet .
_blank - laster svaret inn i et nytt vindu/fane
_self - laster svaret inn i samme vindu (standard)
_parent – ​​laster svaret inn i den overordnede rammen
_top - laster svaret i fullskjerm
rammenavn - laster svaret inn i en ramme med det angitte navnet.
Navn Angir navnet på knappen, attributtverdien er tekst. Brukes for å lenke til skjemadata etter at skjemaet er sendt inn, eller for å lenke til en gitt knapp(er) i JavaScript.
type Definerer knappetypen. Mulige verdier:
knapp - klikkbar knapp
reset — tilbakestillingsknapp, returnerer den opprinnelige verdien
send - knapp for å sende inn skjemadata.
verdi Angir standardverdien som sendes når knappen klikkes.

8. Avmerkingsbokser og alternativknapper i skjemaer

Avmerkingsbokser i skjemaer settes ved hjelp av konstruksjonen , og bryteren - ved hjelp av .

Avmerkingsbokser, i motsetning til alternativknapper, kan settes til flere i én form. Hvis det avmerkede attributtet er spesifisert for avmerkingsbokser, vil avmerkingsboksene på de tilsvarende skjemafeltene allerede være valgt når siden lastes inn.

Element

Søkefeltet er sannsynligvis et av de vanligste elementene i brukergrensesnittet. Når du arbeider på nivået av grensesnitt bekvemmelighet, er det ofte et ønske om å legge til et stilig søkefelt. I denne opplæringen vil vi lage et så populært element ved å bruke pseudo-elementer.

HTML-oppmerking

For å forberede et slikt felt vil merkingen være minimal.

Den spesielle HTML5-plassholderen og nødvendige attributter brukes her:

  • plassholder- dette attributtet spesifiserer at tekst vises i feltet før feltet mottar inputfokus, deretter skjules teksten.
  • nødvendig- dette attributtet spesifiserer en obligatorisk betingelse for tilstedeværelse av informasjon i inndatafeltet før innsending av skjemaet.

HTML5 har også en ny betydning for typeattributtet: type="search" . Men det støttes dårlig i nettlesere, så vi vil ikke bruke det foreløpig.

HTML-elementer som img og input har ikke noe innhold. Derfor vil ikke et pseudo-element som:before vise noen piler for knappen.

Løsningen på dette problemet i vårt tilfelle er å bruke knappen type="submit" i stedet for input type="submit" . På denne måten beholder vi skjemaet ved å bruke ENTER-tasten.

CSS

Nedenfor er stilene som trengs for demonstrasjonen vår:

Avbryt tekstbryting

Cf:before, .cf:after( content:""; display:table; ) .cf:after( clear:both; ) .cf( zoom:1; )

Formelementer

Nettleserprefikser vises ikke i koden for bedre klarhet. Du kan se hele koden i kildeteksten.

/* Stiler for skjemabeholderen */ .form-wrapper ( width: 450px; padding: 15px; margin: 150px auto 50px auto; background: #444; background: rgba(0,0,0,.2); border- radius : 10px; box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2); ) /* Tekstinndatafeltstiler */ .form-wrapper input ( bredde: 330px; høyde: 20px; polstring: 10px 5px; float: venstre; font: fet 15px "lucida sans", "trebuchet MS", "Tahoma"; kantlinje: 0; bakgrunn: #eee; border-radius: 3px 0 0 3px; ) .form-wrapper input:focus ( outline: 0; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; ) .form-wrapper input::- webkit -input-placeholder ( farge: #999; font-weight: normal; font-style: italic; ) .form-wrapper input:-moz-placeholder ( farge: #999; font-weight: normal; font-style: kursiv ; ) .form-wrapper input:-ms-input-placeholder ( farge: #999; font-weight: normal; font-style: italic; ) /* Skjemainnsending-knapp */ .form-wrapper-knapp ( overflyt: synlig ; posisjon: relativ; flyte: høyre; kantlinje: 0; polstring: 0; markør: peker; høyde: 40px; bredde: 110px; font: fet 15px/40px "lucida sans", "trebuchet MS", "Tahoma"; farge: #fff; tekst-transform: store bokstaver; bakgrunn: #d83c3c; kantradius: 0 3px 3px 0; tekst-skygge: 0 -1px 0 rgba(0, 0 ,0, .3); ) .form-wrapper button:hover( bakgrunn: #e54040; ) .form-wrapper button:active, .form-wrapper button:focus( bakgrunn: #c42f2f; disposisjon: 0; ) .form-wrapper button:before ( / * venstre pil */ innhold: ""; posisjon: absolutt; kantlinjebredde: 8px 8px 8px 0; kantlinje: solid solid solid ingen; kantfarge: gjennomsiktig #d83c3c gjennomsiktig; topp: 12px; venstre: -6px; ) .form-wrapper button:hover:before( border-right-color: #e54040; ) .form-wrapper button:focus:before, .form-wrapper button:active:before( border-right-color: #c42f2f; ) .form-wrapper button::-moz-focus-inner ( /* Fjern ekstra plass ved siden av en knapp i Mozilla Firefox */ border: 0; padding: 0; )

Sist oppdatert: 04.08.2016

Et enkeltlinjes tekstfelt opprettes ved å bruke input-elementet når typeattributtet er satt til tekst:

Du kan tilpasse tekstfeltet ved å bruke en rekke tilleggsattributter:

    dirname: angir retningen til teksten

    maxlength : det maksimale antallet tegn som er tillatt i et tekstfelt

    mønster : definerer mønsteret som inndatateksten skal samsvare med

    plassholder : Angir teksten som vises som standard i tekstboksen

    skrivebeskyttet : Gjør tekstfeltet skrivebeskyttet

    obligatorisk : indikerer at tekstfeltet må ha en verdi

    størrelse : angir bredden på tekstfeltet i synlige tegn

    verdi : Angir standardverdien i tekstfeltet

La oss bruke noen attributter:

Tekstfelt i HTML5

I dette eksemplet angir den andre tekstboksen umiddelbart makslengde- og størrelsesattributtene. I dette tilfellet er størrelse - det vil si at antallet tegn som passer inn i det synlige rommet i feltet er større enn det tillatte antallet tegn. Vi vil imidlertid fortsatt ikke kunne legge inn flere tegn enn makslengde.

I dette tilfellet er det også viktig å skille mellom verdi- og plassholderattributtene, selv om begge setter den synlige teksten i feltet. Plassholder setter imidlertid et slags hint eller spørsmål om inndata, så den er vanligvis nedtonet. Mens verdi representerer standardteksten som er skrevet inn i feltet:

De skrivebeskyttede og deaktiverte attributtene gjør tekstfeltet utilgjengelig, men har en annen visuell effekt. I tilfelle deaktivert er tekstfeltet nedtonet:

Blant attributtene til et tekstfelt bør vi også merke oss et slikt attributt som list . Den inneholder en referanse til et datalisteelement, som definerer et sett med verdier som vises som et verktøytips når de legges inn i et tekstfelt. For eksempel:

Tekstfelt i HTML5

Listeattributtet til et tekstfelt peker på ID-en til datalisteelementet. Datalisteelementet selv definerer elementene i listen ved å bruke nestede alternativelementer. Og når du skriver inn et tekstfelt, vises denne listen som et verktøytips.

Søkefelt

For å lage søkefelt, bruk inndataelementet med type="search"-attributtet. Formelt sett er det et enkelt tekstfelt:

Søk i HTML5

Passordfelt

For å angi et passord, bruk input-elementet med type="password"-attributtet. Dets karakteristiske trekk er at de angitte tegnene er maskert med prikker:

Marginer og utfylling er svært viktige stiler når du bygger en HTML-side. De lar deg plassere elementer mer nøyaktig, lage en ramme med nødvendige hull, etc. Begge stilene er veldig like og utfører lignende funksjoner. Men det er fortsatt forskjeller.

Elementer kan være nestet eller plassert ved siden av hverandre. La oss se på følgende eksempel:

Vi har to bord, sitron og blå, plassert under hverandre. Tabeller består av én celle. Det er en rød blokk i den første tabellcellen. Ved å bruke dette eksemplet, la oss se på hvordan marginer og innrykk fungerer.

Felt er satt etter stil polstring. Denne stilen gjelder bare for beholderelementer, som kan inneholde andre elementer. Stilen lar deg angi margen mellom kantene på et element og innholdet. Stil margin lar deg sette innrykk fra et element til de nærmeste kantene til et annet element. Kantene til et annet element kan være kantene til den overordnede beholderen, så vel som kantene på selve siden.

Det er flere måter å angi disse stilene på. Spesifiser for eksempel størrelsen på alle marger eller innrykk direkte med ett argument i en eller annen måleenhet (px, ex, em, pt, cm, og så videre):

polstring: 3px; margin: 3px;

I dette tilfellet vil margene og innrykk være de samme på alle fire sider. Når du spesifiserer to argumenter atskilt med et mellomrom:

polstring: 3px 5px; margin: 3px 5px;

den første vil bestemme mengden marginer/innrykk øverst og nederst, den andre - til venstre og høyre. Når gitt tre argumenter:

polstring: 3px 5px 2px; margin: 3px 5px 2px;

den første er margen/innrykket øverst, den andre er både venstre og høyre, den tredje er nederst. Med fire argumenter:

polstring: 3px 5px 2px 6px; margin: 3px 5px 2px 6px;

den første er margen/mellomrommet øverst, den andre er til høyre, den tredje er nederst, den fjerde er til venstre. Det er lett å huske: den første er fra toppen, deretter med klokken. I tillegg kan du angi marger og polstring for en spesifikk kant separat, ved å bruke de riktige stilene: polstring-topp, polstring-høyre, polstring-bunn, polstring-venstre, margin-topp, marg-høyre, marg-bunn, marg-venstre. Verdien av disse stilene kan bare være ett argument, som spesifiserer mengden margin/utfylling for en gitt side.

I figuren er den røde blokken inne i tabellcellen og ved siden av dens grenser, det vil si at cellen ikke har noen marginer. La oss sette cellemarginene ved å bruke stilen:

polstring: 5px;

Som et resultat vil siden endres til følgende:

La oss nå se på innrykk. To bord ligger ved siden av hverandre, hvis vi ønsker å flytte dem litt fra hverandre kan vi bruke innrykk. Det er to alternativer her: enten angi nederste innrykk i den første tabellen, eller toppinnrykk i den andre tabellen. La oss bruke den andre:

marg-top: 5px;

Vær oppmerksom på at vi setter innrykk spesifikt til tabellen, og ikke til tabellcellen, slik tilfellet er med felt. Her er resultatet:

Forresten, i det første tilfellet (gapet mellom den røde blokken og grensene til den overordnede cellen), kan den samme effekten oppnås ved å sette blokkinnrykk. Generelt, hvis noe ikke er klart, gi oss beskjed i kommentarene.

HTML-kode for den eksperimentelle siden:

<html > <hodet > <tittel > Test</tittel> <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </hode> <kroppen > <stil > tabell (bredde: 200px; høyde: 150px; border: 1px solid #555; border-collapse: collapse) td (vertical-align: top; polstring: 0px) div (bredde: 100px; høyde: 100px; bakgrunn: rød)</stil> <tabellstil = "bakgrunn: lime" > <tr > <td style = "polstring: 5px" > <div style = "margin: 0px" ></div> </td> </tr> </tabell> <bordstil = "bakgrunn: himmelblå; margin-top: 5px"> <tr > <td ></td> </tr> </tabell> </body> </html>