Vormi loomine HTML-is. Kuidas HTML-is rippmenüüd koostatakse? Vormiloendite rippmenüü elementide rühmade loomine

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:

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:

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:

Sisesta tekst:

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:

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:

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:

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 määrake sildi abil valimiseks valikud
  • 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

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 väärtus erineb tekstist. Pärast värvi valimist kuvab jQuery hoiatuses nähtava teksti. Märgi kood

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

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.

Selles näites märgistame

Brauseris näeb see välja selline:

Menüüelementide rühmitamine

Vaatleme järgmist silti A, mida kasutatakse seotud andmete rühmitamiseks rippmenüüsse name="must&valge"> label="whitelist">

Selles näites oleme valinud 2 sildiga rühma . Elemendi atribuut label määrab valitud rühma nime paksus kirjas:

Järgmises näites, kasutades atribuuti keelatud tõeväärtus, keelame ühe rühma (" B-rühm"):

</span> Näide HTML-märgendi keelatud atribuudi kasutamisest <optgroup><span>

Meie näite tulemus:

Loendi ja mitmikvaliku keelamine

</span> Märgendi keelatud ja mitu atribuuti <select><span>

Selles näites oleme loonud kaks ripploendit. Esimese loendi jaoks kasutasime atribuuti keelatud, mis takistab loendiga suhtlemist (keelab selle).

Teise loendi jaoks kasutasime atribuuti mitu, mis näitab, et loendis on lubatud korraga valida mitu valikut (läbi ctrl Windowsis ja selle kaudu käsk Macis).

Brauseris näeb see välja selline:

Tekstiala

Meie näite tulemus:

Tekstiala keelamine

Analoogiliselt eelnevalt vaadeldud elementidega silt


type = "submit" name = "submitInfo" value = "(!LANG:submit" > !}

Selles näites oleme loonud kaks tekstiala (element