Tere, kallid ajaveebisaidi lugejad. Keerukuse uurimise osana jätkame järgmise ülesandena saidil vormide loomise üksikasjade analüüsimist, kasutades selleks sobivaid.
Täna õpime, kuidas luua rippmenüü (rippmenüü) loendid, sealhulgas valikvastustega, kasutades valikut ja valikut, kuidas konstrueerida tekstiväli textarea kaudu ning räägime ka võimalusest laiendada vormide funktsionaalsust siltide abil väljakomplekt, silt ja legend.
Tuletan meelde, et kõik lehel olevad vormid luuakse kasutades ja on mõeldud kasutaja mis tahes teabe sisestamiseks ja serverisse saatmiseks (näide -).
Kahjuks ei võimalda hüperteksti märgistuskeele tööriistad meil seda infot otse töödelda, mistõttu HTML-iga loome ainult vormi välimuse ning vajalikud andmed saadetakse töötlemiseks. Selleks luuakse veebiserveris sihipäraselt spetsiaalne fail, mis on kirjutatud ühes serverikeeles (enamasti PHP). Oletame, et tagasiside saamiseks võite luua faili mail.php, mis on töötleja.
Selles väljaandes saadud teabe praktilisel kasutamisel ärge unustage, kuidas see välja peaks nägema, kus kõigi nähtavate leheelementide, sealhulgas vormide koodid on alati kehasildis.
See teave on oluline, sest isegi kui kasutate kõiki kaasaegseid sisseehitatud arendaja tööriistu (tuletan teile meelde, et esimene märk selle funktsiooni rakendamisel oli), peate selgelt aru saama peamiste siltide kasutamise mehhanismist ja seejärel HTML-i redigeerimisest. kood, mille järele vajadus aeg-ajalt tekib, muutuvad lõbusaks tegevuseks.
2. mitmekordne- see atribuut, millel pole parameetreid, võimaldab mitut valikut, erinevalt ülaltoodud näitest, kus saate valida ainult ühe elemendi (rea). Proovige selles loendis hiirega valida korraga mitu rida (ükshaaval suvalises kohas, hoides all klahvi Ctrl või klahvi Shift järgi ükshaaval):
3. suurus- määrab ripploendi kõrguse, st kuvatavate ridade arvu. Kui atribuut mitu on olemas ja suurust pole määratud (nagu ülaltoodud näites), siis vaikimisi kuvatakse neli rida, ja näiteks suurus = "5" on nähtav viis:
Valik Textarea Label Fieldset Legend |
4. Nõutud(pole parameetreid) – määrab, et enne andmete töötlejale saatmist tuleb teha valik. Kui loendist mõnda elementi ei valita, siis vormiandmeid ei saadeta:
Valik Textarea Label Fieldset Legend |
5. autofookus(pole oluline) seab fookuse loendile kohe pärast lehe laadimist. Lisaks, kui kasutaja on harjunud enamikku toiminguid tegema klahvidega, siis just selline eelkonfigureeritud teravustamine aitab ilma hiirt kasutamata teha loendist valiku klaviatuuri noolte abil:
6. Keelatud(parameetreid pole) - blokeerib juurdepääsu loendile (keelab selle). Praktikas kasutatakse seda tavaliselt koos skriptidega juhtudel, kui peate ripploendi lubama ainult siis, kui teatud tingimused on täidetud:
7. Vorm— seob loendi ühe või mitme vormiga, millesse see kuulub, kuid asub väljaspool konteinerit
. Samal ajal kirjutatakse parameeter vormi atribuudi väärtuse rollis globaalse id atribuut, mis lisatakse vormisildile:
Valige loendist Option Textarea Label Fieldset Legend |
Ärge ajage segi valiku märgendi atribuuti vormi loomise põhimärgendiga. Ülaltoodud näites lisatakse vormi märgendile atribuut id="data" ja atribuut form="data" valiku märgendile, mis võimaldas ripploendi seostada konkreetse vormiga.
valiku märgendi atribuudid
1. väärtus- määrab ripploendist väärtuse, mis saadetakse serverisse (vormikäsitleja). Tegelikult saadetakse nimi töötlejale, mille määrab valiku märgendi name atribuut ja väärtus(selle näite puhul - 1, 2, 3, 4, 5), mis vastab ripploendi valitud reale:
Valik Textarea Label Fieldset Legend |
2. Keelatud— blokeerib ripploendi elemendi valimiseks.
Valik Textarea Label Fieldset Legend |
Nagu näitest näha, on rida "Valik" passiivne ja seda ei saa valida.
3. silt- kuvab ühe või teise loendi elemendi tekstisisu (mis on selle väärtus). Kui silt on olemas, kuvatakse string, mis on identne selle atribuudi väärtusega, ja valikumärgendi tekstisisu ignoreeritakse. Sama juhtub siis, kui sisu vahel puudub täielikult.
Textarea silt Sildi silt Väljakomplekti silt Legendi silt |
Vaata. Ülaltoodud näites on koodi esimene valiku rida tühi (tabeli vasakus servas), kuid parameeter label="Option tag" on määratud, mille tulemusena ilmus see tekst loendisse (on parem pool). Teisel koodireal on suvandisildi sisuna tekst "Textarea Tag", kuid parempoolses rippmenüüs on sõna "Textarea", mis vastab label="Textarea" väärtusele.
4. Valitud- tõstab esile ripploendi praeguse üksuse:
Valik Textarea Label Fieldset Legend |
Kui atribuut on mitu, saab valida rohkem kui ühe elemendi:
Valik Textarea Label Fieldset Legend |
optgroupi sildi atribuudid
Kui ripploendit on vaja kuidagi sorteerida, näiteks gruppidesse jagada, siis kasutatakse iga sellise grupi jaoks konteinerit, mis koosneb optgroupi avamise ja sulgemise siltidest, mis sisaldab osa ripploendi elementidest. Sellise ripploendi kohandamiseks on aga kaks atribuuti.
1. silt- määrab parameetrina iga rühma nime:
Valik Textarea Label Fieldset Legend |
Sama, kuid valiku märgendiga mitu ja size="7":
Valik Textarea Label Fieldset Legend |
2. Keelatud(väärtused puuduvad) - blokeerib selle rühma elementide valimise, mille suhtes see on määratud, pealegi on passiivsed üksused tavaliselt hallina:
Valik Textarea Label Fieldset Legend |
Siin oleks väga abiks lühike video:
Tekstiväli vormis tekstiala kaudu
Veel üks saidi vormielement, mida me kaalume, on väli, millel on võimalus sisestada sellele mitmerealine tekst. Selle saab luua tekstiala märgendi abil. Ilma vaikeatribuutideta annab selle märgendi rakendamine järgmise tulemuse:
Sisesta tekst: |
Väljal saate teha reavahetusi, samal ajal kui tekst edastatakse serveris olevale töötlejale, võttes arvesse tehtud muudatusi. Välja saab venitada laiusesse ja pikkusesse, haarates hiirega kinni kahe diagonaalse triibuga tähistatud paremast alumisest nurgast.
Nüüd proovime lisada algsele koodile mitu parameetritega atribuuti:
1. Nimi- Määrab tekstiala nime väärtusena, mis tuvastab selle pärast vormiandmete esitamist, kui neid töödeldakse serveris.
2. Cols- välja laius, mille parameetrina määrab horisontaalselt kõrvuti seisvate identsete märkide arv. Vaikeväärtus on 20.
3. read- tekstivälja kõrgus, mis määratakse ridade arvu järgi. Kui kasutaja sisestatud tekstiridade arv on suurem kui selle atribuudiga määratud väärtus, kuvatakse paremale vertikaalne kerimisriba.
4. Max pikkus- Määrab tekstiväljale paigutatavate märkide maksimaalse arvu. Kui limiit on ületatud, ei ole edasine sisestamine võimalik.
Allpool on näide kõigi ülaltoodud atribuutidega, mille mõju saate ise kontrollida, asetades lihtsalt tekstialale vajaliku arvu tähti ja ridu (sama tähemärgi saate lihtsalt mitu korda sisestada):
Sisesta tekst: |
5. minpikkus- Määrab minimaalse märkide arvu, mis tuleb tekstialale sisestada. Kui kasutaja proovib esitada vähema tähemärgiga teksti, kuvab brauser lühisõnumi teabega, mis mainib vormi sisu täitmise vajadust ja juba sisestatud tähemärke.
7. Loe ainult(ilma parameetriteta) - kui see atribuut on tekstialale lisatud, on tekstiväljale kasutajatele juurdepääsematu ja see on kirjutuskaitstud. Kuid saate sellele keskenduda (viia kursor väljale ja klõpsata vasakklõpsuga), samuti teksti valida ja kopeerida (osaliselt või täielikult):
Veel mõned atribuudid, mis rakendavad väljade täitmisel täiendavaid funktsioone:
8. Automaatne täitmine- näitab, kas brauser peaks andma vihjeid, kui kasutaja vormi täidab eelnevalt sisestatud andmete põhjal ning võimaldab vastava teksti automaatselt sisestada.
Omab kokku kaks parameetrit: peal(sees) ja väljas(välja lülitatud). Siin on näide koodist:
See atribuut, mille olekuks on seatud "sees", töötab ainult siis, kui kasutaja veebibrauseris on lubatud vormiväljad automaatne täitmine.
9. Mähi- määrab brauseri rea murdmise reeglid tekstialal, kasutades kolme väärtust:
Pehme- märkide komplekt, mis laiuselt väljale ei mahu, murtakse automaatselt uuele reale. Samal ajal protsessor tekst saadetakse ühe reana. Juhul, kui kasutaja mähib teksti "Enter" abil suvalisse soovitud kohta, salvestatakse selline murramine veebivormi esitamisel.
Sisesta tekst: |
Raske- sidekriipsutamine toimub automaatselt, kui tekst ei mahu laiuselt väljale, ja töötlejale saatmisel salvestatakse sellise sidekriipsu kohad. Seda seadet kasutatakse ainult koos atribuudiga cols:
Sisesta tekst: |
Väljas- keelake reavahetused. Kui sisestate tekstifragmendi ilma mehaanilise ülekandeta, kasutades sisestusklahvi, asetatakse kogu tekst ühele reale ja kuvatakse horisontaalne kerimisriba:
Sisesta tekst: |
10. autofookus(parameetreid pole) – käivitab vormiga lehe laadimisel fookuse tekstiväljale.
11. Keelatud- erinevalt kirjutuskaitstud atribuudist (mis keelab ka välja sisu redigeerimise, kuid võimaldab sellele keskenduda), blokeerib see täielikult juurdepääsu tekstialale, mis on tavaliselt halliks värvitud:
Tervitused kõigile minu ajaveebi lugejatele. Täna räägin teile, kuidas teha html-is ripploendit, milliseid silte ja atribuute peate kasutama ning ka millistel eesmärkidel võite seda vajada.
Valige silt ja looge ripploend
Seega luuakse HTML-i rippmenüü, kasutades paaris valikumärgendit, kuhu paigutatakse seotud valikusildid. Just neisse salvestatakse kõik valikud, mida loendil klõpsates pakutakse. Näide:
Valige loom
Sel juhul näete ekraanil seda, mis kuvatakse valiku ava- ja sulgemisosa vahel ning atribuudis value sisalduv väärtus saadetakse serverisse või töödeldakse skripti abil.
HTML-i loend võib olla tavaline ja valikvastustega. Mitme üksuse valimise võimaldamiseks peate valikule Select lisama tühja mitme atribuudi. Mitme väärtuse valimiseks hoidke all ctrl ja vajuta hiire vasakut nuppu.
Teine kasulik atribuut on suurus. See võimaldab teil valida, mitu rida ripploendis kuvatakse.
Teine atribuut on keelatud. See muudab loendi üksuste klõpsamiseks ja vaatamiseks kättesaamatuks, kuid samal ajal on see lehel nähtav.
Nõutav on html5 atribuut. Kui see on määratud, siis vormi ei esitata, välja arvatud juhul, kui ripploendist on valitud väärtus. Üldiselt muutub see kohustuslikuks valikuks. Kuigi atribuut ei tööta kõigis brauserites.
valiku märgendi atribuudid
Tegelikult toimib Select ainult loendiüksuste konteinerina, need ise määratakse valikumärgendi abil. Sellel on väärtuse parameeter, nagu oleme juba teada saanud, kuid peale selle on ka teisi. Näiteks:
Keelatud – muudab loendiüksuse valimiseks kättesaamatuks. See kuvatakse, kuid te ei saa sellel klõpsata.
Valitud – element valitakse vaikimisi. Tavalises loendis saab selle väärtuseta atribuudi määrata ainult ühele üksusele, mitme loendi puhul mitmele.
Oluline selgitus õigeks tööks
Kui valiku tulemus tuleb serverisse saata või skriptide kaudu töödelda, sisestage valik vormi, et vigu ei tekiks. Fakt on see, et ripploend loodi algselt täpselt ühe vormielemendina.
Mille jaoks valitakse?
Tavaliselt võib see teile kasulik olla, kui registreerute oma saidil või soovite läbi viia uuringu. Elemendil on puudus - see ei muuda välimust kuigi hästi läbi css-i.
Vaikimisi, kui klõpsate loendil, kuvatakse sinine raam, sama värviga tõstab esile need loendi üksused, mille kohal kursor liigub. Et raam ei ilmuks klõpsamisel või on erineva värviga esile tõstetud, võite kirjutada järgmise valija:
select:focus(
kontuur: 1px ühevärviline oranž;
}
Raam on nüüd oranž.
Suvandit saab ka stiilida, kuid kui hõljutate kursorit üksuse kohal, muutub selle taust siniseks ja miskipärast see stiilide kaudu ei muutu.
Option(
värvus: pruun
taust: aqua;
}
Muide, võib-olla keegi teist teab, kuidas muuta taustavärvi, kui hõljute CSS-i abil üksuse kohal?
Tegelikult puudutab see kõik valitud sildi ja selle rakendust. Selle jaoks pole html-is lisafunktsioone ette nähtud. Kõiki muid toiminguid sellega saab teha javascripti ja php abil. Näiteks kui sünniaasta valimiseks on vaja koostada nimekiri ja seal võib olla 80-100 erinevat varianti, siis kas sa ei kirjutaks neid käsitsi?
Just selleks peate kasutama programmeerimist, nimelt tsüklit. Olgu, see on teise vestluse teema, kuid tänaseks on see kogu teave, mida ma teile rääkida tahtsin. Teiste põhimärgenditega saate tutvuda html-is.
HTML-i valikumärgendit kasutatakse ripploendi loomiseks, mis võimaldab kasutajal valida ühe valiku eelmääratletud väärtuste hulgast.
Kasutajale nähtav tekst võib erineda väärtuse atribuudis määratud tekstist. Rippmenüü saate luua järgmiselt.
- Rippmenüü luuakse märgendi abil
- Sildi sees
- Sildis
Saate määrata ka CSS-klassi, mitte kasutada rippmenüü stiiliks ID-d.
Järgmises jaotises näitan näiteid HTML-i rippmenüü kasutamise kohta JavaScriptis/JQuerys. Näited näitavad ka stiili kujundamist
Näide lihtsa ripploendi loomisest
Seda HTML-i valikuvaliku näidet kasutatakse kolme valikuga ripploendi loomiseks.
Ülaltoodud näites kasutatakse ripploendi loomiseks järgmist märgistust:
Väärtuse atribuudi kasutamine
Nagu varem mainitud, võib atribuudi value väärtus erineda lehel kuvatavast tekstist. Näiteks saate kuvada kasutajate jaoks riikide nimesid või värve ning kasutada väärtuse atribuudis lühikoode.
Järgmises näites loome väärtuse atribuudiga rippmenüü:
Vaadake veebipõhist demo ja koodi
Sildi jaoks
Näide valitud valikule juurdepääsust JavaScriptis
Nüüd loome näite valitud suvandi väärtusele juurdepääsust ja mõne toimingu sooritamisest. Sama loendi, mis ülaltoodud näites, koostame värvivalikutega. Pärast valimist klõpsake dokumendile selle värvi rakendamiseks nuppu:
Vaadake veebipõhist demo ja koodi
HTML-i valiku väärtus kasutab järgmist koodi:
JavaScriptis kasutatakse valiku väärtuse atribuudi väärtusele juurdepääsuks järgmist koodirida
var seltheme = document.getElementById(“selcolor”).value;
Nupule klõpsamisel kutsutakse välja JS-funktsioon, mis määrab ripploendist valitud väärtuse muutujale. Seda väärtust kasutatakse praegusele dokumendile värvi rakendamiseks.
Juurdepääs nähtavale tekstile jQuerys
Seekord kasutan JQueryt, et pääseda juurde valitud suvandi väärtusele: nii tekst kui ka väärtus . Selles demos pääsen juurde HTML-i valikumärgendi nähtavale tekstile:
Vaadake veebipõhist demo ja koodi
Märgendi iga valiku koodis
Siit saate teada, kuidas sellele väärtusele juurde pääseb HTML-i valik on valitud JavaScript:
var selectedcolor = $("#jqueryselect option:selected").text();
Väärtusele pääsete juurde ka jQuery $.val() meetodi abil:
var selectedcolor = $("#jqueryselect").val();
Asendage see rida ülaltoodud näites ja kood kuvab nähtava teksti asemel väärtuse atribuudis lühikoodi/värvi väärtuse.
Näide väärtuse hankimisest PHP-skriptis
Selles ripploendist valitud suvandi väärtuse hankimise näites luuakse vorm märgendi abil
Vaadake veebipõhist demo ja koodi
Näites kasutatav vormimeetod on POST , nii et saate vormi väärtused kasutada PHP massiivi $_POST[“”] abil. See on näites kasutatud vormikood:
Ja siin on see, kuidas PHP-skripti kasutatakse HTML-i valiku väärtuse saamiseks:
".$_POST["selphp"].""; } ?>
Kui vormil on GET-meetod, siis kasuta PHP massiiv $_GET[""].
Rippmenüü stiilide määratlemine CSS-iga
Nüüd vaatame, kuidas ripploendi stiili kujundada.
Vaadake veebipõhist demo ja koodi
Kasti-varju omadust kasutatakse siin koos lineaarse gradiendiga . Täielik CSS-kood näeb välja selline:
Selcls ( polster: 3px; ääris: ühtlane 1px #517B97; kontuur: 0; taust: -webkit-gradient(lineaarne, vasak ülemine, vasak 25, from(#FFFFFF), color-stop(4%, #CAD9E3), kuni (#FFFFFF)); taust: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); kasti vari: rgba(0,0,0, 0,1) 0px 0px 8px; -moz- kasti vari: rgba(0,0,0, 0,1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0,1) 0px 0px 8px; laius: 150px; )
Ümardatud nurgad piiriraadiuse omadusega
HTML-i valiku jaoks määrame nurgad ümardamiseks atribuudi CSS3 border-radius. Samuti muutub värvilahendus. Saate katsetada ääriste, laiuste, veeriste ja muude omadustega, nagu soovite:
Vaadake veebipõhist demo ja koodi
Mitme CSS-i atribuudi ja stiili kasutamine
Kui soovite lubada kasutajatel valida loendist mitu valikut, kasutage atribuuti mitu. Ülaltoodud näites saab valida ainult ühe valiku. Kui kasutate mitut, saate CTRL-klahvi vajutades valida mitu valikut:
Vaadake veebipõhist demo ja koodi
Selles artiklis käsitleme elemente, mis võimaldavad teil luua ripploendeid, õppida, kuidas nendes loendites rühmi moodustada, kaaluda, kuidas keelata üksusi ja isegi loendirühmi, tutvuda elemendiga, mis võimaldab teil luua mitut loendit. -rea tekstivälja, saate seda hiljem kasutada HTML-vormide sees (element
Lisaks panime vormi sisse nupu, mida kasutatakse vormi esitamiseks (element nupuga "esita vorm": type = "submit" ).
Meie näite tulemus:
Tekstiala kohtspikker
Seetõttu kaalume viimast näidet ja liigume selle õpetuse artikli praktilise ülesande juurde.
Tänu atribuudile (HTML tag
Vihje tekst on peidetud, kui kasutaja sisestab tekstiväljale väärtuse (suvalise märgi), selle eemaldamisel kuvatakse vihje uuesti.
Vaatleme kasutusnäidet:
type = "submit" name = "submitInfo" value = "(!LANG:submit" > !}
Selles näites oleme loonud kaks tekstiala (element
Pange tähele, et kui tekstiväli on kirjutuskaitstud, siis sisu muuta ei saa, kuid kasutaja saab siiski sisu juurde navigeerida, seda valida ja kopeerida.
Lisaks panime vormi sisse nupu, mida kasutatakse vormi esitamiseks (element nupuga "esita vorm": type = "submit" ).
Meie näite tulemus:
Küsimused ja ülesanded teemal
Enne järgmise teema juurde liikumist täitke praktiline ülesanne:
- Kasutades saadud teadmisi, koostage vaba töökoha avaldamiseks järgmine vorm:
Enne ülesandega jätkamist avage näide uues aknas ja uurige hoolikalt vormi, et korrata kõiki selle punkte. Ülesande täitmiseks vajate teadmisi artiklist. Kui see jäi vahele, tulge tagasi seda uurima.
Pärast harjutuse sooritamist kontrollige lehe koodi, avades näite eraldi aknas, veendumaks, et tegite kõik õigesti.
Märgendi abil saate luua HTML-is ripploendi vali. Lisaks ripploendile (või "ripploendile") on märgend vali võimaldab luua mitme valikuga loendiüksuse. Sildi kasutamise süntaks vali HTML näeb välja selline:
Siin koos sildiga valik loetelu elemendid on antud.
Rakenduse tulemus:
Elektroonika Syroezhkin Chizhikov Kukushkina
VALI sildi atribuudid
Mõelge sildi atribuutidele vali:
- nimi
- suurus- kuvatavate ridade arv loendis (arv);
- mitmekordne- sisaldab ripploendi elementide mitmekordse valimise funktsiooni;
- puudega- blokeerib juurdepääsu elemendile;
- vormi- võimaldab linkida vormiga rippmenüü (võib olla vajalik, kui loend ise on väljaspool vormi, millele see tuleks lisada). Vormi ID edastatakse argumendina.
Võib-olla on need kõik sildi peamised atribuudid vali mida kõige sagedamini kasutatakse. Vaatame nüüd, kuidas määrata HTML-is ripploendit, kasutades määratud atribuute:
OPTION sildi atribuudid
Tag valik, nagu juba märgitud, võimaldab teil määratleda ripploendi lapsed vali, mis omakorda toimib konteinerina. Tag valik sellel on oma atribuudid:
- puudega– kehtestab loetelu selle elemendi valimise keelu;
- silt- võimaldab määrata loendi aktiivsele elemendile sildi (sildis määratud teksti asemel kuvatakse sildi väärtus, mis võimaldab kuvada lühendatud väärtust); Tähelepanu: atribuuti ei toetata Firefoxi brauseris
- valitud- vaikimisi valitakse praegune loendi üksus;
- väärtus- serverile edastatav väärtus;
Vaatame märgendi täpsemat kasutusjuhtu valik:
Selle näite tulemus näeb välja selline:
Hr Elektrooniline Syroezhkin Tšižikov Kukuškina
Nubexi veebisaidi koostajal on võimalus vormikoostaja mooduli abil luua kohandatud vorme. "Nubexi" rippmenüüde tööd kirjeldatakse artiklis: