HTML5 puhul, kuigi kõik kaasaegsed brauserid juba toetavad seda standardit. 2011. aasta detsembri seisuga on standard veel väljatöötamisel.

HTML5 lisab palju uusi süntaktilisi funktsioone – , , ja . Need elemendid on loodud selleks, et hõlbustada veebis graafika ja meediumi manustamist ja haldamist, ilma et peaksite kasutama natiivseid pistikprogramme ja API-sid. Muud uued elemendid, nagu , ja, on loodud dokumendi (lehe) semantilise sisu rikastamiseks.

Uued HTML5 sildid

• 1. Sektsiooni sildid (artikkel, kõrvale, jalus, päis, hgroup, nav, jaotis)
• 2. Sisu rühmitamise sildid (joonis, pealdis)
• 3. Sildid semantilise teksti esiletõstmiseks (bdo, mark, time, ruby, rt, rp, wbr)
• 4. Sildid sisu (heli, video, lõuend, manustamine, allikas) sisestamiseks
• 5. Vormielementide sildid (datalist, keygen, output, progress, meter)
• 6. Interaktiivsed elemendid (üksikasjad, kokkuvõte, käsk, menüü)

Silt Lühikirjeldus

	Määratleb artikli
	Määratleb sisu peale põhilehe sisu
	Määrab heli sisu
	Määratleb graafika
	Määrab käsunupu
	Määrab andmed järjestatud loendisse
	Määratleb ripploendi
	Määrab andmemalli
	Määratleb elemendi üksikasjad
	Määratleb dialoogi (vestluse)
	Määrab serveri kaudu saadetud sündmuse eesmärgi
	Määratleb meediumisisu rühma ja nende pealdised
	Määrab jaotise või lehe jaluse
	Määrab jaotise või lehe pealkirjaala
	Määrab valitud teksti
	Määrab mõõtmised ettemääratud vahemikus
	Määrab navigeerimislingid
	Määrab andmemustris pesastatud punkti
	Määrab teatud tüüpi tulemusi
	Määrab mis tahes ülesande edenemise
	Määratleb mallide värskendamise reeglid
	Määrab jaotise (sektsiooni)
	Määrab meediaressursid
	Määrab kuupäeva/kellaaja
	Määrab video

Toetamata sildid: Silt Lühikirjeldus

	Ei toetata.
	Määratleb akronüümi
	Ei toetata.
	Määrab apleti
	Ei toetata.
	Kasutades fondi määramiseks CSS-i asemel
	Ei toetata.
	Määrab suure teksti
	Ei toetata.
	Ei toetata.
	Määrab sektsiooni, mis ei toeta raami
	Ei toetata.
	Ei toetata.
	Määrab läbikriipsutatud teksti
	Ei toetata.

Määratleb TTY-teksti Ei toetata.

Määratleb allajoonitud teksti	Ei toetata. Määrab joondatud teksti	HTML5 atribuutide loend
Atribuudi väärtus Lühikirjeldus	rahulolev	tõsi
vale	Ei toetata. Määrab, kas kasutaja saab sisu (sisu) muuta kontekstimenüü	menüü_id
Määrab elemendi kontekstimenüü	Ei toetata. Määrab joondatud teksti	lohistatav
vale	auto	Määrab, kas kasutaja saab elementi lohistada
ebaoluline	Määrab, et elemendil pole väärtust. Väärtust omavat elementi ei kuvata	viide
URL/id	auto	Määrab lingi teisele dokumendile/dokumendi osale (kasutatakse ainult siis, kui atribuudi väärtus on määratud)

registreerimismärk

reg_mark

Määrab elemendi registreeritud märgi

malli

Määrab lingi teisele dokumendile/dokumendi osale, mida tuleks elemendile rakendada

HTML5 lehe paigutuse struktuur

Tavapärase veebisaidi lehestruktuuri kasutamisel on võimalik tuvastada mitu tüüpilist plokki, mida kirjeldab div silt vastava klassiga (, , , , jne).

Accesskey atribuut võimaldab aktiveerida lingi, kasutades teatud klahvikombinatsiooni lingikoodis määratud tähe või numbriga. Brauserid kasutavad erinevaid klahvikombinatsioone. Näiteks accesskey="s" puhul töötavad järgmised kombinatsioonid.

• Internet Explorer: Alt + S
• Chrome: Alt+S
• Ooper: Shift + Esc , S
• Safari: Alt+S
• Firefox: tõstuklahv + Alt + S

Määrab stiiliklassi, mis võimaldab seostada konkreetse sildi stiilitabeliga. Väärtuses on võimalik määrata korraga mitu klassi, eraldades need tühikuga.

Teatab, et element on kasutajale redigeerimiseks saadaval – on lubatud teksti kustutada ja uus sisestada. Töötavad ka standardkäsud nagu tagasivõtmine, teksti kleepimine puhvrist jne.

Määrab elemendi kontekstimenüü. Väärtus on sildi abil loodud menüü identifikaator.

Määrab teksti suuna ja kuvamise – vasakult paremale või paremalt vasakule. Brauserid eristavad tavaliselt teksti suunda, kui see on Unicode'is, kuid saate teksti kuvamissuuna määramiseks kasutada atribuuti dir. Araabia ja heebrea tähemärkide puhul on Unicode'i suund ülimuslik, seega atribuut dir neid ei mõjuta.

lohistatav

Võimaldab elementi edasiseks manipuleerimiseks lohistada.

dropzone

Määrab, mida teha lohistatava elemendiga.

Peidab elemendi sisu vaate eest. Sellist elementi lehel ei kuvata, vaid see on skriptide kaudu ligipääsetav.

Määrab identifikaatori – elemendi kordumatu nime, mida kasutatakse selle stiili muutmiseks ja sellele skriptide kaudu juurde pääsemiseks. Dokumendi koodis olev identifikaator peab olema ühes eksemplaris ehk teisisõnu esinema ainult üks kord.

itemid, itemprop, itemref, itemscope, itemtype

Atribuutide rühm, mis on loodud töötama mikroandmetega.

Dokumendi tekst võib olla trükitud ühes keeles või sisaldada teistes keeltes sisestusi, mis võivad oma tekstivormingu reeglite poolest erineda. Näiteks vene, saksa ja inglise keeles on erinevad jutumärgid, milles tsitaat võetakse. Määrake keel, milles praeguse elemendi sees olev tekst kirjutatakse ja atribuut lang rakendatakse. Brauser kasutab oma väärtust teatud märkide õigeks kuvamiseks.

Annab brauserile käsu kontrollida, kas teksti õigekiri ja grammatika on õiged või mitte. Kuigi atribuuti saab määrata peaaegu kõikidele elementidele, on mõju märgatav ainult vormiväljadel ( , ) ja redigeeritavatel elementidel (neil on atribuuti sisu muudetav).

Kasutatakse elemendi stiilimiseks CSS-reeglite abil.

Tabindexi atribuut määrab järjestuse, milles fookus võetakse, kui tabeldusklahvi kasutades elementide vahel navigeeritakse. Üleminek toimub väiksemalt väärtuselt suuremale, näiteks 1-lt 2-le, seejärel 3-le ja nii edasi. Sel juhul ei ole range järjestus oluline, on lubatud mõned numbrid vahele jätta ja alustada suvalisest numbrist. Kui elementide tabindexi väärtused on samad, võetakse arvesse nende koodis ilmumise järjekorda.

Loob teksti kohtspikri, mis kuvatakse, kui hõljutate kursorit elemendi kohal. Sellise tööriistaspikri välimus sõltub brauserist ja operatsioonisüsteemi sätetest ning seda ei saa muuta HTML-koodi või stiilide abil.

Oleme selle juba välja mõelnud. Saime teada, et neil on sisu. See pole aga veel kõik. Siltidel on ka atribuudid, mis suurendavad nende võimalusi, ja atribuutidel on omakorda väärtused. Nende abiga saate määrata elemendi parameetreid ja määrata kujundusstiili. Näiteks sildiga

olete lõigu märkinud. Aga kuidas seda paremale joondada? Selleks vajate konkreetset atribuuti vastava väärtusega. Nii nagu mõnel märgendil pole paari, saab ka mõnda atribuuti kasutada ilma väärtusteta.

Kuidas atribuute kirjutada?

Atribuudid on reserveeritud sõnad (nagu sildid, ainult ilma nurksulgudeta), kuid nende tähendused võivad olla erinevad. Sarnaselt siltidele on soovitatav kirjutada väärtustega atribuudid väikeste tähtedega, kuigi üldiselt brausereid ei huvita - see on lihtsalt heade kommete reegel: vene keeles EI OLE VÕETA KIRJUTADA KA CAPS LOCK. ON LUBATUD. Miks on HTML halvem?

Atribuutide väärtused kirjutatakse järgmises vormingus:

Atribuut=”value” lang=”et”

Peaksite alati kirjutama atribuudid avasildi sisse, pärast reserveeritud sõna.

Lõik

Tavaliselt on ühe sildi jaoks saadaval mitu atribuuti. Pole tähtis, millises järjekorras need on loetletud.

Universaalsed atribuudid

Igal HTML-i märgendil on oma atribuutide komplekt. Mõned atribuudid võivad olla saadaval mitme sildi jaoks, samas kui teised võivad töötada ainult ühega. Samuti on rühm universaalseid (globaalseid) atribuute, mida saab kasutada mis tahes sildiga. Vaatame lühidalt selle kategooria atribuute.

• juurdepääsuklahv võimaldab määrata konkreetsele leheobjektile juurdepääsuks kiirklahvi. Näiteks võite veenduda, et kasutaja kasutab konkreetse lingi jälgimiseks klahvikombinatsiooni Alt+1. Seega töötage välja võtmenavigatsioonisüsteem.

Atribuudi väärtus võib olla numbrid 0-9 või ladina tähestiku tähed:

Link avaneb, vajutades klahvikombinatsiooni ühega

• klass võimaldab siduda sildi CSS-i abil eelnevalt määratletud kujundusega. Atribuudi kasutamine võimaldab koodi oluliselt vähendada, sest sama CSS-i ploki korduva sisestamise asemel saab lihtsalt sisestada vastava klassi nime.
• Sisuredigeeritava abil saate lubada kasutajal redigeerida mis tahes HTML-lehe elementi: kustutada, sisestada, muuta teksti. Sama atribuut võimaldab muuta ja keelata. Sellel on ainult kaks väärtust: true – luba redigeerida, false – keela.
• Kontekstimenüü atribuudi abil saate oma äranägemise järgi varustada mis tahes dokumendielemendi unikaalsete kontekstimenüü elementidega. Menüü ise luuakse sildis ja kontekstimenüü atribuudile määratakse selle identifikaator.
• dir määrab teksti suuna: vasakult paremale (ltr) või paremalt vasakule (rtl).
• draggable võimaldab keelata (väär) või lubada (tõene) kasutajal lohistada selle atribuudiga leheelementi.
• dropzone ütleb brauserile, mida teha väljalangenud elemendiga: kopeerida (väärtus kopeerida), teisaldada (teisalda) või luua sellele link (link).
• peidetud - atribuut, mis võimaldab peita elemendi sisu nii, et seda brauseris ei kuvata. Kui atribuut on seatud väärtusele false, kuvatakse objekt, tõene - see on peidetud.
• id määrab elemendi identifikaatori - omamoodi nime, mida on vaja nii objekti stiili muutmiseks kui ka selleks, et skriptid saaksid sellele juurde pääseda. Atribuudi väärtuseks saab selle nimi. See peab algama ladina tähega ja võib sisaldada numbreid, sama ladina tähestiku tähti (suur ja väike), aga ka sidekriipsu (-) ja alakriipsu (_). Ei tohi sisaldada vene tähti.
• lang aitab brauseril mõista, mis keeles sisu on kirjutatud, ja kujundada seda vastavalt (näiteks võivad keeled kasutada erinevaid jutumärke). Väärtused on keelekoodid (vene - ru, inglise - en jne).
• õigekirjakontroll lubab (tõene) või keelab (vale) õigekirjakontrolli. Eriti kasulik on atribuuti kasutada vormivälja siltides, kuhu kasutaja teksti sisestab.
• stiil võimaldab CSS-koodi abil määrata elemendi kujunduse.
• tabindex võimaldab teil määrata, mitu korda peab kasutaja vajutama klahvi Tab, et selle atribuudiga objekt fookusesse jõuda. Klõpsude arv määrab atribuudi väärtuse – positiivne täisarv.
• pealkiri – vihje, mis ilmub, kui liigutad hiirekursori elemendi kohal ja jätad selle mõneks ajaks liikumatuks. Tähenduses olev rida on vihje.

• translate lubab (jah) või keelab (ei) sildi sisu tõlkimise.
• align määrab elemendi joonduse. Näiteks saate seda kasutada teksti joondamiseks vasakule (vasakule), paremale, keskele või joondamiseks. Piltide jaoks (silt ) on võimalik joondada ka rea ​​kõrgeima elemendi ülemise äärisega (ülemine), alumise äärisega (alumine) ja väärtus middle paneb pildi keskmise joone kokku langema joone alusjoonega.

Tasub meeles pidada, et atribuudi joondamine ei ole soovitatav ja parem on teksti joondamine CSS-i abil.

Näide atribuutide kasutamisest

Näiteks vaadake HTML-koodi rida:

Seda teksti saab redigeerida

Terve rida loob tekstilõigu, mida kasutaja saab brauseris redigeerida.

Vaatame iga joone elementi.

- lõiku salvestava konteineri avasilt.

- sulgev silt.

Sümbolite > ja vahel< расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.

contenteditable =”true” – see on atribuut ja selle väärtus. Pea meeles, kuidas koolis: x=3. Sama siin: contenteditable = "true". Atribuut contenteditable määrab, kas kasutaja saab muuta elemendi sisu võrdusmärgiga eraldatud jutumärkides kirjutatud väärtus true võimaldab redigeerida:

Atribuut=”value” contenteditable=”true”

Veel XHTML/HTML4 päevil olid arendajatel vaid mõned võimalused suvaliste DOM-iga seotud andmete salvestamiseks. Võiksite oma atribuudid välja mõelda, kuid see oli riskantne – teie kood ei kehti, brauserid võivad teie andmeid ignoreerida ja see võib põhjustada probleeme, kui nimi vastab standardsete HTML-atribuutidele.

Seetõttu jäi enamik arendajaid kinni atribuutidest class või rel, kuna need olid ainus mõistlik viis täiendavate ridade salvestamiseks. Oletame näiteks, et loome vidina sõnumite kuvamiseks nagu Twitteri sõnumite ajaskaala. Ideaalis peaks JavaScript olema konfigureeritav ilma koodi ümber kirjutamata, seega määratleme kasutaja ID klassi atribuudis järgmiselt:

Meie JavaScripti kood otsib elementi ID-ga msglist . Skripti kasutades otsime klassid, mis algavad kasutaja__ga ja “bob” on meie puhul kasutaja ID ning kuvame kõik selle kasutaja sõnumid.

Oletame, et soovime määrata ka maksimaalse sõnumite arvu ja jätta vahele sõnumid, mis on vanemad kui kuus kuud (180 päeva):

Meie klassi atribuut läheb väga kiiresti segamini – viga on lihtsam teha ja stringide sõelumine JavaScriptis muutub aina keerulisemaks.

HTML5 andmeatribuudid

Õnneks tutvustas HTML5 kohandatud atribuutide kasutamise võimalust. Võite kasutada mis tahes väiketähtedega nime, mille eesliide on data-, näiteks:

Kohandatud andmeatribuudid:

• need on stringid – neisse saab salvestada mis tahes teavet, mida saab esitada või stringina kodeerida, näiteks JSON. Tüübi ülekandmine peab toimuma JavaScripti abil
• tuleks kasutada juhtudel, kui puuduvad sobivad HTML5 elemendid või atribuudid
• viita ainult lehele. Erinevalt mikrovormingutest peaksid välised süsteemid, nagu otsingumootorid ja roomajad, neid ignoreerima

JavaScripti töötlemise näide nr 1: getAttribute ja setAttribute

Kõik brauserid võimaldavad teil hankida ja muuta andmete atribuute, kasutades meetodeid getAttribute ja setAttribute:

Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);

See töötab, kuid seda tuleks kasutada ainult vanemate brauseritega ühilduvuse säilitamiseks.

JavaScriptis töötlemise näide nr 2: jQuery teegi data() meetod

Alates versioonist jQuery 1.4.3 töötleb meetod data() HTML5 andmeatribuute. Te ei pea andmeprefiksit selgesõnaliselt määrama, nii et selline kood töötab:

Var msglist = $("#msglist"); var show = msglist.data("nimekirja suurus"); msglist.data("nimekirja suurus", näita+3);

Kuid pidage meeles, et jQuery proovib teisendada selliste atribuutide väärtused sobivateks tüüpideks (tõveväärtused, numbrid, objektid, massiivid või null) ja see mõjutab DOM-i. Erinevalt setAttribute'ist ei asenda meetod data() füüsiliselt atribuuti data-list-size – kui kontrollite selle väärtust väljaspool jQueryt, on see ikkagi 5.

JavaScripti töötlemise näide nr 3: API andmekogudega töötamiseks

Lõpuks on meil HTML5 andmekogumitega töötamiseks API, mis tagastab DOMStringMapi objekti. Oluline on meeles pidada, et andmeatribuudid vastendatakse objektile ilma andmete eesliideteta, nimedest eemaldatakse sidekriipsud ja nimed ise teisendatakse näiteks CamelCase'iks:

Atribuudi nimi	Andmestiku API nimi
andmekasutaja	kasutaja
andmete maksmine	maxage
data-list-size	loendi suurus

Meie uus kood:

Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;

Seda API-d toetavad kõik kaasaegsed brauserid, kuid mitte IE10 ja vanemad. Nende brauserite jaoks on olemas lahendus, kuid tõenäoliselt on otstarbekam kasutada jQueryt, kui kirjutate vanematele brauseritele.

Autori märkus. Pole kahtlust, et kasutate iga päev veebis vähemalt ühte vormi. Olenemata sellest, kas otsite sisu või logite sisse oma Facebooki lehele, on veebivormide kasutamine veebis üks levinumaid ülesandeid. Kujundajate ja arendajate jaoks on vormide loomine mõnevõrra üksluine, eriti nende jaoks andmete valideerimisskriptide kirjutamine. HTML5 tutvustab palju uusi atribuute, sisendtüüpe ja muid märgistustööriistade elemente.

Selles artiklis keskendume uute atribuutide uurimisele ja järgmises käsitleme andmesisestuse tüüpe.

On näha, et uued funktsioonid muudavad meie elu kasutajatele muljet avaldades palju lihtsamaks. Mis on siin kõige atraktiivsem? Saate neid nüüd kasutada. Alustame HTML5 vormide väga lühikese ajalooga.

See artikkel on väljavõte 6. peatükist raamatust Beginning HTML5 and CSS3: The Web Evolved by Christopher Murphy, Oli Studholme, Richard Clark and Divya Manian, kirjastas Apress.

Märkus. Kuna see artikkel on väljavõte raamatust, võib brauseri atribuutide ja sisestustüüpide käsitlus olla pärast ekraanipiltide tegemist muutunud. Lisaks võib brauseri tugi olla pärast avaldamist laienenud, seega vaadake selle praeguse oleku kohta artikli lõpus olevaid linke.

HTML5 vormide ajalugu

HTML5 vormide jaotis oli algselt spetsifikatsioon nimega Web Forms 2.0, mis lisas uut tüüpi vormihaldustööriistu. See sai alguse Operast ja toimetas tollane Opera töötaja Ian Hickson. W3C kiitis selle heaks 2005. aasta alguses. Tööd viis algselt läbi W3C. Seejärel ühendati see spetsifikatsiooniga Web Applications 1.0, et moodustada Web Hypertext Application Technology Working Group (WHATWG) HTML5 spetsifikatsiooni aluseks.

HTML5 disaini põhimõtete rakendamine

HTML5 vormide üks parimaid omadusi on see, et peaaegu kõiki uusi andmesisestuse tüüpe ja atribuute saab kohe rakendada. Need ei vaja täiendavaid kiipe, häkke ega muid plaastreid. Asi pole selles, et need kõik on veel "toetatud", kuid tänapäevastes brauserites, mis neid tegelikult toetavad, saavad nad teha lahedaid asju – ja halveneda ilusti brauserites, mis neid ei mõista. Kõik see on tänu HTML5 disainipõhimõtetele. Sel juhul viitame konkreetselt kauni lagunemise põhimõttele. Üldiselt oleks andestamatu, kui neid funktsioone kohe kasutama ei hakkaks. Tegelikult tähendab see, et olete teistest ees.

HTML5 vormi atribuudid

Selles artiklis vaatleme järgmisi 14 uut atribuuti.

kohatäide

Esimene on kohahoidja atribuut, mis võimaldab meil määrata kohatäite teksti, mida kuni viimase ajani tehti HTML4-s atribuudi väärtus abil. Seda saab kasutada ainult lühikirjelduste jaoks. Pikemate puhul kasutage atribuuti title. Erinevus HTML4-st seisneb selles, et teksti näidatakse ainult siis, kui väli on tühi ega ole fookuses. Niipea kui väli fookusesse jõuab (näiteks hiirega klõpsates või väljale osutades) ja hakkate tippima, kaob tekst lihtsalt ära. Väga sarnane Safari otsinguväljaga.

Mõelgem välja, kuidas kohatäiteatribuuti rakendada.

< input type = "text" name = "user-name" id = "user-name" placeholder = "vähemalt 3 tähemärki" >

Nagu nii! Ma kuulen teid mõtlemas: "Mis on temas nii erilist? Olen seda kogu oma elu JavaScriptis teinud." Jah see on õige. HTML5-ga muutub see aga brauseri osaks, mis tähendab, et paremini juurdepääsetava brauseriülese kasutuskogemuse saavutamiseks tuleb kirjutada vähem skripte (isegi kui JavaScript on keelatud). Joonis näitab, kuidas kohatäite teksti atribuut Chrome'is töötab.

Brauserid, mis ei toeta kohatäiteatribuuti, ignoreerivad seda, seega seda ei käivitata. Kuid selle sisselülitamisel parandate nende kasutuskogemust, kelle brauserid seda toetavad, ja ühtlasi tagate, et teie sait on tulevikukindel. Kõik kaasaegsed brauserid toetavad kohatäite teksti.

autofookus

Automaatne teravustamine teeb täpselt seda, mida ta lubab. Selle lisamine sisendisse teravustab lehe renderdamisel välja automaatselt. Nagu kohatäite puhul, kasutasime varem automaatse teravustamise jaoks JavaScripti.

Traditsioonilistel JavaScripti meetoditel on aga tõsiseid kasutusprobleeme. Näiteks kui kasutaja hakkab vormi täitma enne, kui skript on täielikult laaditud, naaseb see (ebameeldivalt) pärast laadimist esimesele vormiväljale. HTML5 automaatse teravustamise atribuut lahendab selle probleemi, keskendudes dokumendi laadimisel, ilma et peaks ootama JavaScripti laadimist. Siiski soovitame seda kasutada kasutatavusprobleemide vältimiseks ainult nendel lehtedel, mille ainus eesmärk on vorm (nagu Google'i oma).

See on tõeväärtus (välja arvatud juhul, kui kirjutate XHTML5; vaadake märkust) ja see käivitatakse järgmiselt:

< input type = "text" name = "first-name" id = "first-name" autofocus >

Kõik kaasaegsed brauserid toetavad seda ja nagu kohatäidet, automaatse teravustamiseta brauserid lihtsalt ignoreerivad seda.

Märkus. Mõned uued HTML5 vormiatribuudid on tõeväärtused. See tähendab lihtsalt, et need on installitud, kui need on olemas, ja mitte installitud, kui need puuduvad. HTML5-s saab neid kirjutada mitmel erineval viisil.

autofocus autofocus="" autofocus="autofocus"

autofookus autofookus = "" autofookus = "autofookus"

XHTML5 kirjutamisel tuleks aga kasutada stiili autofocus="autofocus".

automaatne täitmine

Automaatse täitmise atribuut aitab kasutajatel täita vorme eelneva andmesisestuse põhjal. Atribuuti on kasutatud alates IE5.5-st, kuid lõpuks standarditi see HTML5 osana. Vaikimisi on see aktiivne. See tähendab, et üldiselt ei pea me seda kasutama. Kui soovite aga nõuda vormivälja sisestamist iga kord selle täitmisel (erinevalt sellest, et brauser täidab välja automaatselt), tehke seda järgmiselt:

< input type = "text" name = "tracking-code" id = "tracking-code" autocomplete = "off" >

Välja automaatse täitmise olek alistab mis tahes automaatse täitmise oleku, mis on määratud sisaldaval vormielemendil.

nõutud

Nõutav atribuut ei nõua esitust; nagu autofookus, teeb see täpselt seda, mida ootate. Kui lisate selle vormiväljale, nõuab brauser kasutajalt enne vormi esitamist sellele väljale andmete sisestamist. See asendab praegu JavaScriptiga tehtava põhivormi valideerimise, muutes kõik mugavamaks ja säästes meile veel arendusaega. nõutav on tõeväärtuslik atribuut, nagu autofookus. Vaatame seda tegevuses.

< input type = "text" id = "given-name" name = "given-name" required >

Praegu on nõutav ainult operatsioonisüsteemides Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 ja Chrome 5+, seega peate esialgu jätkama teiste brauserite jaoks kliendipoolse väljakontrolli skriptide kirjutamist (*köha- köha* IE!). Opera, Chrome ja Firefox näitavad kasutajale vormi esitamisel veateadet. Enamikus brauserites lokaliseeritakse vead deklareeritud keele alusel. Safari ei näita esitamisel veateadet, vaid asetab selle välja fookusesse.

"Nõutava" tõrketeate vaikekuva erineb iga brauseriga; Veamulli ei saa praegu kõigis brauserites CSS-iga kujundada. Chrome'il on aga oma omadus, mida saab kasutada veateate stiili kujundamiseks. Samuti saate andmesisestusele stiile määrata, kasutades pseudoklassi:required. Alternatiiviks on alistada JavaScripti sõnastus ja stiilid, kasutades meetodit setCustomValidity(). Samuti on väga oluline mitte unustada, et selline brauseripõhine valideerimine ei asenda serveripoolset valideerimist.

muster

Mustri atribuut on tavaliselt paljudele arendajatele suur probleem (noh, sama palju kui mis tahes vormiatribuut). See määrab JavaScripti regulaaravaldise väljale, mille väärtust tuleb kontrollida. Muster muudab koodide, kontonumbrite ja muu sellise jaoks eraldi kinnituse rakendamise lihtsamaks. Mustri võimalused on tohutud ja siin on vaid üks lihtne näide tootenumbri kasutamisest.

Tootenumber:

< label >Tootenumber: < input pattern = "{3}" name = "product" type = "text" title = "Ühekohaline number, millele järgneb kolm suurtähte." / > < / label >

See muster eeldab, et tootenumber peab koosnema ühest numbrist, millele järgneb kolm suurtähte (3). Rohkem malle näete HTML5 mallide veebisaidil, kus on tavaliste stiilimallide regulaaravaldiste loend, mis aitab teil nendega alustada.

Nagu nõutud, on praegu ainsad brauserid, mis toetavad malle, Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 ja Chrome 5+. Kuid teised jõuavad brauserituru kiire edenemise tõttu peagi järele.

loendi ja andmeloendi elemendid

Loendi atribuut annab kasutajale võimaluse siduda valikute loend ühe väljaga. Loendi atribuudi väärtus peab olema sama, mis samas dokumendis asuva andmeloendi elemendi ID. Andmeloendi element on HTML5 jaoks uus ja esindab vormijuhtimisvalikute eelmääratletud loendit. See toimib sarnaselt brauserisiseste otsinguväljadega, mis täidavad sõnu sisestamise ajal automaatselt.

Järgmine näide näitab, kuidas loend ja andmeloend kombineeritakse.

Teie lemmikpuuvili: Blackberry Mustsõstar Mustikas Kui muu, siis täpsustage:

< label >Sinu lemmikpuuvili: < datalist id = "fruits" > < option value = "Blackberry" >Blackberry< / option > < option value = "Mustsõstar" >Mustsõstar< / option > < option value = "Mustikas" >Mustikas< / option > < ! -- …-- > < / datalist > Kui muu, täpsustage: < input type = "text" name = "fruit" list = "fruits" > < / label >

Lisades andmeloendisse valitud elemendi, saate lihtsalt suvandielemendi rakendamisega saavutada suurepärase halvenemise. Siin on Jeremy Keithi loodud elegantne märgistusmall, mis sobib ideaalselt HTML5 järkjärgulise lagunemise põhimõtetega.

Teie lemmikpuuvili: Blackberry Mustsõstar Mustikas Kui muu, siis täpsustage:

< label >Sinu lemmikpuuvili: < datalist id = "fruits" > < select name = "fruits" > < option value = "Blackberry" >Blackberry< / option > < option value = "Mustsõstar" >Mustsõstar< / option > < option value = "Mustikas" >Mustikas< / option > < ! -- …-- > < / select > Kui muu, täpsustage: < / datalist > < input type = "text" name = "fruit" list = "fruits" > < / label >

Loendi ja andmeloendi brauseri tugi on praegu piiratud versioonidega Opera 9.5+, Chrome 20+, Internet Explorer 10 ja Firefox 4+.

mitmekordne

Saate oma loendi ja andmeloendi sammu võrra kaugemale viia, kasutades atribuuti mitu tõeväärtust, et saaksite andmeloendist sisestada rohkem kui ühe väärtuse. Siin on näide.

Teie lemmikpuuvili: Blackberry Mustsõstar Mustikas Kui muu, siis täpsustage:

< label >Sinu lemmikpuuvili: < datalist id = "fruits" > < select name = "fruits" > < option value = "Blackberry" >Blackberry< / option > < option value = "Mustsõstar" >Mustsõstar< / option > < option value = "Mustikas" >Mustikas< / option > < ! -- …-- > < / select > Kui muu, täpsustage: < / datalist > < input type = "text" name = "fruit" list = "fruits" multiple > < / label >

Mitut ei kasutata aga ainult andmeloendiga. Veel üks näide mitme kasutamisest on meiliaadressid üksuste sõbrale edastamisel või failide manustamisel, nagu siin näidatud:

Faile üles laadima:

< label >Faile üles laadima: < input type = "file" multiple name = "upload" > < / label >

mitut toetatakse versioonides Firefox 3.6+, Safari 4+, Opera 11.5+, Internet Explorer 10 ja Chrome 4+.

novalideerima ja vorminvalideerima

Atribuudid novalidate ja formnovalidate näitavad, et vormi esitamisel ei ole vaja andmeid kinnitada. Mõlemad on tõeväärtuslikud atribuudid. formnovalidate saab rakendada sisenditele, mille tüüp on Esita või pilt. Atribuudi novalidate saab määrata ainult vormielemendile.

Näide atribuudi formnovalidate kasutamisest on näha nupul "salvesta mustand", kus vormil on väljad, mis on vajalikud mustandi esitamiseks, kuid mitte kohustuslikud mustandi salvestamiseks. Novalidate'i kasutatakse juhtudel, kui te ei pea vormi kinnitama, kuid soovite kasutada uute andmesisestustüüpide pakutavat paremat kasutajakogemust.

Fornovalidaadi kasutamist võib näha järgmises näites:

Meil:

< form action = "process.php" > < label for = "email" >Meil:< / label > < input type = "text" name = "email" value = "[e-postiga kaitstud]" > < input type = "submit" formnovalidate value = "Esita" > < / form >

Ja see näide näitab novalidate kasutamist:

Meil:

< form action = "process.php" novalidate >