Sisestage raadio nupu kujul. Märkeruutude ja raadionuppude stiil CSS3 abil. Seega peame standardsed sisendraadiod kuvama stiliseeritud nuppude kujul

Viimases tunnis õppisime kuju mõistet. Selle põhiülesanne on kombineerida teatud tüüpi andmesisestusvorme. Näiteks võib vorm kombineerida küsimustiku, testi vms andmeid. Selles õpetuses õpime ise sisestusvälju tegema!

Ankeedi täitmise eest vastutab spetsiaalne isik. tag , sellel on atribuut type, mis võimaldab luua teatud täidetavaid välju: tekstiväljad, raadionupud, märkeruudud, loendid, nupud. Kordan, kõik ülaltoodud elemendid on saadaval ainult ühes sildis - .

Tag HTML-is

on üks silt, mille abil saate luua teatud dokumendielemente (tekstiväljad, raadionupud, märkeruudud, loendid, nupud), mis on mõeldud täitmiseks otse HTML-lehel.

allpool näide tööd HTML-is

Sildi juures On mitmeid väga olulisi atribuutide väärtusi.

nimi- atribuut, mis tuleks elemendile alati määrata, et töötleja (skript) saaks aru, millist sisendinime ta töötleb.

Nii saab töötlemisskript aru, et tegemist on kahe erineva väljaga.

tüüp- see atribuut vastutab välja tüübi näitamise eest. Nagu varem mainitud, võib teatud tüüpi sisendist saada raadionupp, märkeruut, loend, nupp, tekstiväli.

suurus- atribuut, mis näitab tekstivälja suurust, kui tüüp on tekstina määratud. Määratud andmeid tajutakse välja laiusena.

Tag sellel on palju muid atribuute, näiteks id (unikaalne välja identifikaator, vajalik näiteks JavaScriptiga töötamisel), väärtus (seda käsitletakse allpool). Artiklis märkisin kõik peamised atribuudid ja väärtused, mis on sisestusväljadega töötamiseks täiesti piisavad.

Tippige sisendiks atribuut

Vaatame nüüd lähemalt tüüpi atribuut ja selle tähendused:
tekst- atribuudi väärtus näitab, et kuvatakse tavaline tekstiväli, mis on esialgu muutmiseks saadaval.

väärtuse atribuut pole nõutav, selle võib üldse ära jätta. Kui aga on vaja määrata vaikeväärtus, mis algselt väljale ilmub, siis tuleb see täita.
parool- muudab sisendi parooliväljaks. Erinevus tekstist seisneb selles, et sisestatud andmed kuvatakse tärnidena ja pärast kogu vormi täitmist saab brauser aru, et parool on sellel väljal ja küsib, kas see tuleb salvestada.
Esita- atribuudi type sarnane väärtus defineerib sisendi nupuna, mille vajutamisel töödeldakse teatud skripti (mis on skript, saate teada hiljem PHP ja JavaScripti keeli õppides). Nupu abil saadetakse vormidelt töötlejale näiteks ülaltoodud keeltes kirjutatud andmed. On ka teisi, kuid ma tõin välja kõige populaarsemad.
lähtestada- See on teist tüüpi nupp, mis lähtestab kõik vormi väärtused. Pärast selle vajutamist tuleb need uuesti täita.

raadio- See väärtus loob raadionupu, st lüliti. Tavaliselt kasutatakse väikese arvu valikutega väärtuste jaoks. Näiteks valige sugu, vanusevahemik jne. järgnevalt:

Tüübi atribuudiks on seatud raadio – see on raadionupp. Väärtuse väärtus sisaldab fraasi või sõna, mida soovite saada, kui keegi valis konkreetse raadionupu ja saatis andmed.
On ka teisi juhtumeid, kui kasutaja peab valima mitu vastusevalikut. Sel juhul ei kasutata enam raadionuppu (aktsepteerib ainult ühte valikut), vaid märkeruutu või märkeruutu.
märkeruut on väli, mis töötab samamoodi nagu raadionupp. Ainus erinevus on see, et saate vastusevalikutena valida mitu märkeruutu. Nii nagu raadionupu puhul, kui küsimuse juurde kuulub mitu märkeruutu, tuleb nende atribuut name täita võrdselt. Väärtus näitab vastavalt valitud välja väärtust.

Sisestusväljade toimimise omadused
Siinkohal teen ettepaneku vaadata mõningaid küsimusi, millega võite ka sisendiga töötades alguses kokku puutuda.
Kuidas veenduda, et kasutaja valib kohe vastuse (märkeruudu või raadionupu)?
Selle jaoks on üks kontrollitud atribuut. See tuleb täpsustada sisendsildi lõpus. Kuna atribuut on üksik, pole sellel väärtusi. Peate selle lihtsalt sisendelemendile lisama. Näiteks nagu allolevas kirjes:

Kuidas teha kindlaks, et seda valikut selgitav tekst on märkeruudu või raadionupu kõrval nähtav?
Selleks kirjutame enne ja pärast raadionuppu või märkeruutu sildi . Ja seletuse enda sisestame ka sildi sisse. Vaatame näidet:
Olen lepinguga tutvunud
Vastavalt sellele märgite ava- ja sulgemissildis märkeruudu enda ja vajalikud sõnad. Ja tähelepanu! Isegi kui kasutaja klõpsab sõnal, on märkeruut endiselt esile tõstetud.
HTML kood

Näide sisestusväljade kasutamisest HTML-is

Kas teile meeldib see sait?

Jah

Ei

Raske vastata

Millised õppetunnid on kõige huvitavamad?

HTML

CSS

PHP

Tekstiplokk:

Viimati värskendatud: 08.04.2016

Märkeruut

Märkeruut tähistab elementi, mis võib olla kahes olekus: märgitud ja märkimata. Märkeruut luuakse atribuudi type="checkbox" sisendelemendi abil:
Märkeruut HTML5-s
Uuritud tehnoloogiad

HTML5

.NET

Java

Kontrollitud atribuut võimaldab teil määrata märkeruudu märgistatud olekusse.

Lülitid

Raadionupud või raadionupud sarnanevad märkeruutudega ja võivad olla ka märgistatud või märkimata olekus. Ainult raadionuppude jaoks saate luua ühe rühma, milles saab korraga valida ainult ühe raadionupu. Näiteks:
HTML5 raadionupud

Palun märkige sugu

meessoost

naissoost

Valige tehnoloogia

HTML5

.NET

Java

Raadionupu loomiseks peate määrama atribuudi type="radio". Ja nüüd viitab veel üks nimeatribuut mitte elemendi nimele, vaid selle rühma nimele, kuhu raadionupu element kuulub. Sel juhul on meil kaks raadionuppude rühma: sugu ja tehnika. Igast rühmast saame valida ainult ühe raadionupu. Jällegi, raadionupu märkimiseks määrake selle märgitud atribuut:

Oluline atribuut on atribuut väärtus, mis võimaldab vormi esitamisel serveril määrata, millist raadionuppu märgiti.

Lisame oma näitele natuke koodi, et saaksime uurida selle vormi genereeritud andmeid. HTML-i muudetakse, et lisada element, mis esindab eelvormindatud teksti, mis tuleb esitada täpselt nii, nagu HTML-failis on kirjutatud.">
blokeerida vormiandmete väljastamiseks:

Meil Telefon Mail

Raadiosisendite kasutamine

Raadionuppude põhitõdesid käsitlesime juba eespool. Vaatame nüüd teisi levinumaid raadionuppudega seotud funktsioone ja tehnikaid, millest peate võib-olla teadma.

Vaikimisi raadionupu valimine

Et raadionupp vaikimisi valitud oleks, lisage lihtsalt märgitud atribuut, nagu on näidatud eelmise näite muudetud versioonis:

Valige eelistatud kontaktiviis:

Meil Telefon Mail

Sel juhul on nüüd vaikimisi valitud esimene raadionupp.

Märge: kui panete märgitud atribuudi rohkem kui ühele raadionupule, alistavad hilisemad eksemplarid varasemad; see tähendab, et valitud on viimati kontrollitud raadionupp. Selle põhjuseks on asjaolu, et grupis saab korraga valida ainult ühe raadionupu ja kasutajaagent tühistab automaatselt teiste valikud iga kord, kui uus nupp märgitakse märgituks.

Suurema löögiala pakkumine raadionuppudele

Ülaltoodud näidetes olete ehk märganud, et saate valida raadionupu, klõpsates sellega seotud elemendil, mis tähistab kasutajaliidese üksuse pealkirja."> elemendil, samuti raadionupul endal. See on HTML-vormi siltide väga kasulik funktsioon, mis muudab kasutajate jaoks soovitud valiku klõpsamise lihtsamaks, eriti väikese ekraaniga seadmetes, nagu nutitelefonid.

Lisaks juurdepääsetavusele on see veel üks hea põhjus õigesti seadistada elemendid teie vormidel.

Kinnitamine

Raadionupud ei osale piirangute valideerimises; neil pole tegelikku väärtust, mida piirata.

Raadiosisendite kujundamine

Järgmine näide näitab artiklis nähtud näite pisut põhjalikumat versiooni koos täiendava stiili ja parema semantikaga, mis on loodud spetsiaalsete elementide abil. HTML näeb välja selline:

Valige eelistatud kontaktiviis:
Meil Telefon Mail

Siin pole palju uut tähele panna, välja arvatud see, et elemendi lisamist kasutatakse mitmete juhtelementide ja siltide rühmitamiseks ( ) veebivormis.">
ja element tähistab selle vanema sisu pealkirja
."> elemendid, mis aitavad funktsionaalsust kenasti ja semantiliselt grupeerida.

Kaasatud CSS on veidi olulisem:
Html ( fondiperekond: sans-serif; ) div:first-of-type ( kuva: flex; align-items: flex-start; margin-bottom: 5px; ) silt ( margin-parem: 15px; rea kõrgus: 32 pikslit; ) sisend ( -veebikomplekti välimus: puudub; -moz-välimus: puudub; välimus: puudub; äärise raadius: 50%; laius: 16 pikslit; kõrgus: 16 pikslit; ääris: 2px ühtne #999; üleminek: 0,2 s kõik lineaarne: puudub ääris: 4px; ) nupp: aktiivne ( taustavärv: valge; värv: must; kontuur: 1 pikslit täismust)
Kõige tähelepanuväärsem on siin atribuudi -moz-appearance kasutamine (koos mõnede brauserite toetamiseks vajalike eesliidetega). Vaikimisi on raadionupud (ja märkeruudud) kujundatud nende juhtelementide jaoks operatsioonisüsteemi loomulike stiilidega. Määrates välimuse: none , saate oma stiili täielikult eemaldada ja luua nende jaoks oma stiilid. Siin oleme kasutanud ääris koos piiriraadiusega ja üleminek kena animeeriva raadiovaliku loomiseks. Pange tähele ka seda, kuidas märkeruut ), ( ), või valik (
Legend
Täielik tugi Täielik tugi Ühilduvus teadmataÜhilduvus teadmata
Vaata ka

elementi kasutatakse veebipõhiste vormide interaktiivsete juhtelementide loomiseks, et kasutajalt andmeid vastu võtta; olenevalt seadmest ja kasutajaagendist on saadaval lai valik sisendandmete tüüpe ja juhtvidinaid."> ja elemendid."> HTMLInputElement liides, mis seda rakendab.

või a
element."> RadioNodeList : liides, mis kirjeldab raadionuppude loendit

a! Kas loote sageli oma veebisaitidel erinevaid vorme ja küsitlusi? Kui jah, siis ilmselt tahtsite standardseid elemente muuta. Selles artiklis näitan teile, kuidas standardelemente lihtsalt ja lihtsalt asendada märkeruut(märkeruudud) ja Raadio nupp(lülitub) omale. Kasutame raha Ainult CSS3!
Vaadake ja proovige demolehel leiduvat teavet või laadige alla allikad:
HTML märgistus

Järjestame elemendid lehel:

Siin pole midagi erilist, igale elemendile anname id ja nime, samuti kasutame silti, et kirjeldada elemente “switch” ja “checkbox”. Sisestage sildisildi sisse vahemik. Miks täpselt, on kirjas allpool.

CSS-i reeglid

Nüüd algab lõbus. Analüüsime ainult "märkekasti" elemendi loomist, "lüliti" moodustatakse sarnaselt. Esimese asjana peitme standardse märkeruudu vaate eest:

input[ type= "checkbox" ] (
kuva: puudub;
}

Nüüd saab selgeks, mille jaoks span element on mõeldud. Varjatud standardse märkeruudu asemel loome uue, kasutades span :

1
2
3
4
5
6
7
8
9

input[ type= "checkbox" ] + sildivahemik (
ekraan: inline-block;
laius: 19 pikslit;
kõrgus: 19 pikslit;
veeris : -1px 4px 0 0 ;
vertikaalne joondus: keskmine;
taust : url () vasak ülemine no-repeat ;
kursor: kursor;
}

Valige CSS-i valija abil kõik sildisildis olevad ulatused, mis kuuluvad tüüpi sisendelementidele märkeruut(st valige kõik "märkeruudud"). Ja me kasutame seda spraiti (üks tavaline pilt paljude asemel):

Määrake valitud ulatuse kõrguseks ja laiuseks 19 pikslit ning asetage taustpilt.

Jääb üle vaid korraldada aktiivse “märkekasti” jaoks reegel (pseudovalija : checked ). Selleks nihutage seda pilti lihtsalt 19 piksli võrra vasakule:

input[ type= "checkbox" ] : märgitud + sildivahemik (
taust : url () -19px top no-repeat ;
}

Sel lihtsal viisil, kasutades mitut taktikat, saate saidil elemente oma maitse järgi korraldada. “Switchide” puhul on reeglid üles ehitatud sarnaselt, ainult vastavalt sellele nihutatakse taustapilti veel 19px võrra ja CSS-i valijat veidi muudetakse, asemel kasutatakse type="checkbox" type="radio" asemel.

Jätkame viimase tunni teemat ja selles vaatasime tavaliste tekstisisestusväljade loomise protsess. Täna õpime jätkuks veel ühe vormielemendi - raadionuppude loomist. Selliseid nuppe kasutatakse siis, kui peate märkima ühe valiku vastusevariantidest, näiteks "jah" või "ei", mitte aga mõlemat. Loome need raadionupud, võtame viimase tunni lõpptulemuse ja pärast välju sisend loome uue lõigu ja kirjutame teise sildi ja selles märgime järgmised atribuudid.

Esimene on välja tüüp tüüp="raadio"- atribuut, mis määrab nupu tüübi. Teine on atribuut, mis määrab meie nupu nime nimi ="aeg". See väärtus saadetakse meie töötlejale hetkel, kui külastaja klõpsab nuppu "Saada". See tähendab, et kui see raadionupp on aktiivne, saadetakse see väärtus töötlejale väärtus="jah". Selle tulemusena jõudsime sellise jooneni. Sisestades selle rea redaktorisse ja värskendades brauserit, saame lihtsa raadionupu.

HTML

Muidugi tundub nüüd raadionupp täiesti ebaselge, pole küsimust ja vastust, st pole selge, mida see teeb. Seetõttu loome kõigepealt märgendi abil vastusevariandi

HTML

Nüüd on meie nupul juba vastuse valik (selle väärtus). Nüüd loome teise raadionupu vastupidise vastusega "ei". Seda tehakse väga lihtsalt, kopeerige juba loodud nupp ja muutke selles ja atribuudis sõna "jah" sõnaks "ei" väärtus seadke väärtus ei . Oluline on olla teadlik tõsiasjast, et raadionuppude nimed peaksid jääma samaks, kuna see näitab brauserile, et need kaks nuppu kuuluvad samasse rühma ja on üksteist välistavad.

HTML

Siin on meil teine raadionupp ja kui klõpsame ühel nupul, tõstetakse meie valitud nupp esile. See tähendab, et need välistavad üksteist ja see juhtub seetõttu, et neil on samad nimed. Kui määrate kaks erinevat nime, on võimalik valida kaks nuppu korraga, mis ei muutu loogiliselt täiesti õigeks.

Noh, nüüd esitame oma nuppude jaoks küsimuse ise, enne nuppe loome oma küsimusega teise lõigu.

HTML

Kas sulle meeldivad puuviljad?

Noh, nüüd on veel üks huvitav punkt, mis võib olla raadionuppude kasutamisel kasulik: nupu automaatne aktiveerimine. Kui värskendate lehte praegu, pole mitu nuppu aktiivne. Esialgu saame määrata, milline nupp selleks on aktiivne, lisades selle nupule, see aktiveeritakse vaikimisi; Ja seda atribuuti nimetatakse kontrollitud , mis tähendab inglise keeles "märgitud". See atribuut on üsna ebatavaline, see ei nõua väärtust.

See on raadionuppude jaoks kõik. Kahe õppetunni kokkuvõttes saime järgmise koodi:

HTML
Raadionupud