Valitseminen HTML:n avattavasta luettelosta. Lomakkeen luominen HTML II:ssa. Tietojen syöttäminen silmukan kautta

Optiotunnisteen sisälle sijoitetut tunnisteet ohitetaan.

Esimerkki pudotusvalikosta

TULOS:

Esimerkki monivalintaluettelosta

TULOS:

Luettelon kohteiden ryhmä

Säiliö ... voit ryhmitellä luettelon kohteita. Tällöin kunkin ryhmän nimet korostetaan lihavoituna, ja jotkin selaimet lisäävät myös sisennyksen, jotta käyttäjän on paljon helpompi navigoida valitessaan tarvittavaa kohdetta.

Tagille Yleiset ja tapahtumankäsittelymääritteet ovat saatavilla.

Esimerkki luettelokohteiden ryhmittelystä

TULOS:

Lisäksi selvyyden vuoksi jokainen ryhmä voidaan värjätä omalla värillään CSS:n avulla.

Esimerkki luettelokohteiden ryhmien korostamisesta väreillä

TULOS:

HTML3.2 HTML4.0 HTML5 CSS1 CSS2 CSS3 JavaScript DHTML

Tervehdys, rakkaat blogisivuston lukijat. Tänään haluan puhua HTML-lomakkeista. Olipa sivustosi moottori (cms) mikä tahansa, se käyttää varmasti muodossa tai toisessa lomakkeita, jotka on luotu Form- ja Input-tageilla sekä attribuuttien ja parametrien avulla Painike, Valittu, Arvo, Valintaruutu, Radio, Valintaruutu, Lähetä .

No, voit myös lisätä tähän elementtejä avattavien luetteloiden ja tekstikenttien luomista varten - Select, Optio, Textarea, Label, Fieldset, Legend.

Miksi lomakkeita tarvitaan ja miten ne toimivat nykyaikaisilla verkkosivuilla?

Sama sivustohakumerkkijono () luodaan käyttämällä näitä tageja, ja projektistasi vaaditaan haku. Siksi niiden rakenteen ja toimivuuden ymmärtäminen ei estä sinua työskennelläksesi menestyksekkäästi suunnittelun parissa, eikä ole tarpeetonta, jos mainostat sitä itse.

Olen siis perustellut näiden elementtien tutkimisen tarpeen, joten minusta ei pitäisi enää syntyä kysymyksiä, joten on aika siirtyä suoraan niiden mahdollisten vaihtoehtojen tutkimiseen.

Kyllä, haluan myös muistuttaa, että olemme jo käyneet läpi paljon materiaalia hypertekstin merkintäkielestä, esimerkiksi kolme ) ja .

Lomakkeet koostuvat pohjimmiltaan elementeistä, joiden luomista varten pääsäiliön sisällä olevista Form-tageista lisätään erilaisia ​​tunnisteita - Checked, Value, Checkbox, Radio, Checkbox, Submit jne. Meidän täytyy vain sijoittaa sen koodi mihin tahansa sopivaan paikkaan. paikka sivustomalliin , mikä osoittaa tunnisteiden ja niiden attribuuttien avulla, miltä sen pitäisi näyttää.

Tämä voi olla tekstikenttä, jossa on painike syötetyn kyselyn lähettämistä varten, valinnat valintanapeilla (jossa voit jättää vain yhden tarjotuista painikkeista painettuna), useita tekstikenttiä lähetyspainikkeella () ja paljon muuta.

Esimerkiksi "haku" -attribuutin avulla voit määrittää, mitä kyselyn syöttökentän vieressä olevaan painikkeeseen tarkalleen kirjoitetaan. Lomakkeisiin syötettyjä tietoja on edelleen käsiteltävä jollakin tavalla.

Esimerkiksi palautteen yhteydessä käyttäjällä on oikeus toivoa, että täytettyään kenttään nimellään, syötettyään sähköpostiosoitteensa ja viestin tekstin ja napsauttamalla sitten lähetyspainiketta. lomakkeesta lähetetään sivuston tekijän sähköpostiin. Mutta valitettavasti tätä ei ole mahdollista toteuttaa käyttämällä vain yhtä hypertekstikuvauskieltä ().

Näitä tarkoituksia varten tarvitset erityisen prosessoriohjelman, joka, kun käyttäjä napsauttaa lähetyspainiketta, ottaa kaikki tiedot palautekentistä ja lähettää ne sähköpostitse resurssin omistajalle. Sinun on määritettävä mikä ohjelma tekee tämän itse käyttämällä Action-attribuuttia.

Tyypillisesti käsittelyohjelma on PHP:llä kirjoitettu komentosarja. Siksi Form-tunnisteen Action-attribuutissa sinun on määritettävä polku tämän skriptin tiedostoon, joka sijaitsee isäntäpalvelimellasi. Annan sinulle esimerkin blogini RSS-syötteen tilaamisesta sähköpostitse:

Se saattaa tuntua aluksi hieman epäselvältä, mutta uskon, että kaikki selkenee tarinan edetessä.

Lomake- ja syöttötunnisteet painikkeiden, valintaruutujen ja valintanappien luomiseen

Kaikki lomakkeet on suljettava avaus- ja sulkemistunnisteisiin Lomake. Tämä on eräänlainen säiliö heidän luomiselle. Tällä tunnisteella on useita pakollisia ja valinnaisia ​​määritteitä:

1. Nimi – yksilöllinen nimi, joka on määritettävä, jos HTML-tiedosto, jossa teet jotain, käyttää useita verkkolomakkeita
2. Action – pakollinen attribuutti, joka osoittaa polun komentosarjaan, johon sen tiedot siirretään jatkokäsittelyä varten
3. Method – sen avulla voit muuttaa tapaa, jolla tiedot siirretään tästä verkkolomakkeesta käsittelijän tiedostoskriptiin. Jos et määritä sitä, niin oletusarvoisesti käytetään Get-menetelmää, joka on itse asiassa tarkoitettu pääasiassa muuttujille ja lyhytsanoille sekä myös tiedon avoimeen välittämiseen selaimen osoitepalkin kautta. Lomaketietojen siirtämiseksi käsittelijän komentosarjaan on silti parempi käyttää POST-menetelmä, suunniteltu erityisesti tekstiviestien lähettämiseen yksityisellä tavalla

Katsotaanpa jäljellä olevia tunnisteita, joiden avulla voit luoda erilaisia ​​verkkolomakkeita. Monipuolisin on Syöte. Sen sisään on kirjoitettava Type-attribuutti, joka määrittää, mikä tällä tunnisteella luotu HTML-lomake tarkalleen tulee olemaan.

Syöte ja tyyppi avulla voit luoda seuraavat elementit:

1. yksiriviset tekstikentät (Type="Text")
2. kentät salasanan syöttämistä varten (Type="Password")
3. valintaruudut (Type="Checkbox")
4. valintanapit (Type="Radio")
5. piilotetut kentät (Type="Hidden")
6. tavalliset painikkeet (Type="Button")
7. painikkeet tietojen lähettämiseksi käsittelijälle (Type="Lähetä")
8. painikkeet verkkolomakkeen palauttamiseksi alkuperäiseen tilaan (Type="Reset")
9. kentät tiedostojen lataamiseksi palvelimelle (Type="File)
10. painikkeet, joissa on kuva (Type="Image")

Syötteellä ei ole lopputunnistetta. Se, miltä sillä luotu verkkolomake tarkalleen näyttää, riippuu täysin Type-attribuutissa määritetystä parametrista. Jos Tyyppiä ei ole määritetty, tekstikenttä luodaan oletuksena.

Esimerkkejä syötteellä luoduista lomakkeista, joissa Tyyppi on eri arvoilla

Muut Input tag -attribuutit ja esimerkkejä niiden käytöstä

Katsotaanpa, mihin muita määritteitä tarvitaan:

1. Nimi – jos tiedot on lähetettävä käsittelijän ohjelman komentosarjaan, sinun on määritettävä Name-attribuutille parametri. Tällä nimellä lomakkeesta lähetetyt tiedot näkyvät tietojenkäsittelyohjelmassa.
2. Koko – tätä käytetään määrittämään luotavan verkkolomakkeen kentän koko. Arvo ilmaistaan ​​tähän kenttään mahtuvien merkkien lukumääränä. Jos kokoa ei ole määritetty, leveys on oletuksena 24 merkkiä
3. Maxlength - oletusarvoisesti HTML-lomakkeeseen kirjoitettavien merkkien määrää ei ole rajoitettu, mutta Maxlengthillä voit asettaa tämän rajoituksen. Et voi syöttää enempää merkkejä kuin kentässä on ilmoitettu.
4. Arvo - sen avulla voit määrittää, mitä tarkalleen kirjoitetaan oletuksena kenttään tai tietojen lähetyspainikkeeseen
5. Valittu on lippuattribuutti, joka voidaan lisätä Input for radio buttons tai -valintaruutuihin. Tässä tapauksessa tämä valintanappi tai valintaruutu on aktiivinen, kun verkkolomaketta sisältävä sivu ladataan (niillä on jo valintamerkki)

Katsotaan nyt kaikkea esimerkkejä lomakkeista syötteellä. Tekstikentän ulkoasu on samanlainen kuin salasanan syöttökentän ulkonäkö, joten harkitaan vain tekstin luomista esimerkiksi sähköpostiosoitteen kirjoittamista varten:

Katsotaanpa nyt verkkolomakkeen luomista valintanapeilla (Radio):

Huomaa, että tämä lomake käyttää Input-tunnistetta kahdesti, kerran kummankin valintanapin luomiseen. Lisäksi jokainen niistä sisältää Name-attribuutin, jolla on sama arvo (resultat), ja Arvo-arvo on erilainen (YES ja NO).

Tämä tarkoittaa sitä, että kun sitä käsitellään, jos jokin kytkimistä valitaan, lähetetään muuttuja, jonka nimi kirjoitetaan nimellä Name, mutta tämän muuttujan arvo riippuu valitusta kytkimestä.

Katsotaanpa esimerkkiä verkkolomakkeen luomisesta valintaruuduilla:

Valintaruudut eroavat valintanapeista siten, että voit valita useita vaihtoehtoja kerralla. Nimeä käytetään käsittelijätiedostossa määrittämään, mihin valintaruutuun valintaruudut asetetaan, ja Arvo määrittää arvon, joka lähetetään käsittelijälle (jos Arvoa ei ole määritetty, tämän valintaruudun vieressä oleva teksti lähetetään käsittelijälle ).

Select, Option, Textarea, Label, Fieldset, Legend - avattavat luettelot, tekstialueet ja muut verkkolomakkeen elementit

Aluksi haluaisin muistuttaa hieman siitä, mitä verkkolomakkeet oikeastaan ​​ovat ja miksi niitä tarvitaan verkkosivustojen sivuille. Ne on ensisijaisesti suunniteltu kopioimaan mistä tahansa käyttöjärjestelmästä löytyviä elementtejä käyttäjäystävällisessä muodossa: painikkeet, tekstinsyöttökentät, avattavat luettelot, valintaruudut, kytkimet ja vastaavat.

Kaikki käyttäjät ilman lisäselityksiä ymmärtävät näiden elementtien tarkoituksen ja jos he näkevät HTML-lomakepainikkeen, he ymmärtävät, että heidän on napsautettava sitä.

Lisäksi kaikki sen osaelementit (kuten Select, Option, Textarea, Label, Fieldset, Legend) ovat jo valmiita aihioita (säilöjä), joiden lisäämiseksi sinun tarvitsee vain käyttää haluttua tunnistetta tarvittavin attribuuteineen ja parametreineen.

Selaimet osaavat itse näyttää tämän tai toisen verkkolomakkeen elementin. Totta, saman elementin näyttövaihtoehdot eri selaimissa voivat poiketa hieman toisistaan, mutta pääsääntöisesti ei merkittävästi.

Että. käy ilmi, että HTML-muotoiset verkkolomakkeet ovat yritys siirtää avainta missä tahansa käyttöjärjestelmässä käytettyjä elementtejä, verkkosivuston sivuille. Mutta miksi niitä saatetaan tarvita sivuston sivuilla?

Periaatteessa samaan tarkoitukseen kuin käyttöjärjestelmissä käytetään vastaavia elementtejä - tiedon siirtäminen käyttäjältä. Lomakkeiden tapauksessa tiedot käyttäjältä siirretään palvelimelle, jossa ne käsitellään erikoisohjelmalla (hypertekstin merkintäkieli ei valitettavasti salli tietojen käsittelyä).

Tietoja voidaan kuitenkin lähettää paitsi palvelimelle, myös esimerkiksi sähköpostitse Form-tunnisteen Action-attribuutissa määritettyyn osoitteeseen. Lähettäessäsi tietoja HTML:stä sähköpostiin, kenttiä täyttävä käyttäjä käynnistää lähetä tiedot -painikkeen painamisen jälkeen tietokoneellaan olevan oletuspostiohjelman.

Avaavan lomaketunnisteen pitäisi tässä tapauksessa näyttää suunnilleen tältä:

Valitse ja Optio - pudotusluettelon tagit

Kaikki verkkolomakkeen elementit, jotka luovat pudotusluettelokenttiä, muodostetaan samalla tavalla. Ensin yhdistelmälaatikon säilö asetetaan käyttämällä avaavaa ja sulkevaa Html Select -tunnistetta. Ja sitten tämän säilön sisällä luodaan erilliset säilöt tämän luettelon kohteista (elementeistä). Tämä tehdään käyttämällä avaus- ja sulkemisoptiotunnisteita.

Siitä tulee jotain tällaista:

Mutta tämä on yksinkertaistettu suunnittelu, koska Selectillä ja Optiolla on useita määritteitä, jotka määrittelevät luodun avattavan luettelokentän ominaisuudet ja ulkoasun.

1. Nimi – Sinun on määritettävä yksilöllinen nimi tälle Select-toiminnolla luodulle verkkolomakeelementille. Tämä nimi välitetään palvelimelle tietojenkäsittelyohjelmalle muuttujan nimeksi. Tämän muuttujan arvo on käyttäjän valitseman avattavan luettelon kohteen Value-attribuutin arvo (joka on asetettu kullekin kohteelle Optio-kohdassa).
2. Koko—voit käyttää sitä näytettävien kohteiden määrän määrittämiseen. Toisin sanoen Size-komennolla voit asettaa luettelon korkeuden, mitattuna näytettyjen rivien määränä. Jos et nimenomaisesti määritä koko-arvoa Select-tunnisteessa, käytetään avattavan luettelon oletuskorkeutta, ja se on erilainen, jos Select-attribuutti puuttuu tai on Select-attribuutissa:
   1. Jos Select-kohdassa on Useita, verkkolomakkeen avattavan luettelon korkeus on oletusarvoisesti sama kuin sen elementtien lukumäärä. Nuo. Kaikki usean valinnan avattavan luettelon kohteet tulevat näkyviin. Katso esimerkki monikkomuodosta alla. Jos Valitse-kohdan Koko-määrite on asetettu pienemmäksi kuin kohteiden määrä, oikealle tulee näkyviin vierityspalkki.
   2. Jos Useita puuttuu Select-kohdasta, verkkolomakkeen avattavan luettelon korkeus on oletuksena yhtä riviä. Nuo. Vain yksi rivi on näkyvissä, ja loput kohteet ovat käytettävissä vain painamalla hissipainiketta (oikealla). Katso esimerkki alla
3. Useita - määrittämällä tämän attribuutin Select-tunnisteeseen, voit luoda avattavan luettelon, jossa voit valita useita kohteita samanaikaisesti. Lue lisää tästä ominaisuudesta alta.

Lomakkeet, joissa on avattavat luettelot, voidaan jakaa kahteen vaihtoehtoon. Ensimmäisessä vaihtoehdossa voit valita vain yhden kentän elementin (rivin) avattavalla luettelolla. Toisessa vaihtoehdossa voit valita useita käytettävissä olevia kohteita samanaikaisesti pitämällä Ctrl- tai Shift-näppäintä painettuna.

Tässä tapauksessa toisessa vaihtoehdossa tiedot kaikista valituista kohteista lähetetään palvelimelle. Luotava avattava luettelo määräytyy Select-tunnisteen Multiple-attribuutin läsnäolon tai puuttumisen perusteella.

Useita määritetään kohdassa Select ilman parametria, koska Se on yksinkertaisesti kirjoitettu Multiple ja se on siinä. Jos se on olemassa, luodaan pudotusluettelon verkkolomake, jossa voidaan tehdä useita valintoja (pitämällä Ctrl- tai Shift-näppäintä painettuna).

Kentän muunnelma avattavalla luettelolla, joka sisältää monivalinta mahdollista, näyttää suunnilleen tältä:

Oikealla on esimerkki usean valinnan avattavasta verkkolomakkeesta, joka perustuu yllä olevaan koodiin. Kuten näet, pitämällä Ctrl- tai Shift-näppäintä painettuna voit valita useita kohteita samanaikaisesti.

Jos Select-tunnisteessa ei ole Multiple-attribuuttia, vain yksi elementti tästä avattavasta luettelosta (rivistä) voidaan valita.

Esimerkki, jossa voit valita vain yhden kohteen, on tässä:

Tunniste Valitse SELECTED site Legend

Vaihtoehtotunnisteen attribuutit

Luotuun avattavaan luetteloon (käyttäen Valitse ja Optio) voit lisätä jotain erottimia ryhmäotsikoineen, jotka eroavat muista valikon kohdista kirjasintyyliltään.

Luodaksesi ryhmän alasvetoluettelon kohteista, sinun on suljettava ne Optgroup-lomakkeen avaus- ja sulkemistunnisteisiin ja lisättävä avaavaan Optgroup-tunnisteeseen Label-attribuutti, jonka parametriksi sinun on syötettävä haluamasi ryhmän nimi.

Esimerkiksi näin:

Label Valitse
Valitun verkkosivuston legenda

Textarea - tekstikentän luominen lomakkeeseen

Verkkolomakkeissa on vielä yksi elementti, jota emme ole huomioineet - Textarea (kenttä, jossa voi kirjoittaa monirivistä tekstiä). Se luodaan pariksi liitetyn HTML-tunnisteen Textarea avulla. Lisäksi voit rivittää siinä olevan tekstin uudelle riville ja se välitetään palvelimelle tehdyt käännökset huomioiden.

Joten monirivisen tekstikentän luomiseksi sinun on määritettävä aloitus- ja sulkemistekstialue, ja niiden väliin voit lisätä tekstiä, joka tulee näkyviin, kun verkkolomaketta sisältävä sivu ladataan. Käyttäjä voi sitten poistaa tämän tekstin ja kirjoittaa oman.

Mitä voit kertoa meille itsestäsi?

Kuten näet, tekstin napsauttaminen tämän elementin aktivoimiseksi on hyödytöntä - sinun on napsautettava sitä itse. Juuri tämä on tilanne, jota Label-tunniste on suunniteltu korjaamaan. Sen avulla voit tehdä verkkolomakkeen elementin vieressä olevasta tekstistä napsautettavan, mikä on epäilemättä parantaa käytettävyyttä.

Mutta kuinka yhdistää HTML-lomakeelementti ja teksti? Tätä varten sinun on lisättävä attribuutille tunnus, jossa on yksilöllinen parametri, ja tekstin ympärillä on oltava avaus- ja sulkemistunnisteet. Eikä siinä vielä kaikki. Avaavaan Label-tunnisteeseen tulee sisällyttää For-attribuutti, jonka parametrin on oltava täsmälleen sama kuin lomakeelementin HTML-tunnisteen ID-attribuutin. Siitä tulee jotain tällaista:

Kuten näet, nyt Labelin käytön ansiosta verkkolomakkeen elementit voidaan aktivoida paitsi napsauttamalla sitä itse, myös napsauttamalla sen vieressä olevaa tekstiä.

Fieldset ja Legend - muodon hajottaminen osiin

Olet luultavasti usein nähnyt, että HTML:n suuret lomakkeet on jaettu ryhmiin (Fieldset), joita ympäröi kehys ja jokaisella tällaisella ryhmällä on oma otsikkonsa (Legend). Tämä toteutetaan käyttämällä vain kahta tunnistetta: Fieldset ja Legend. Ne on paritettu, ts. Niissä on oltava avaus- ja sulkemiskohta.

Joten, jotta voit luoda komponenttiosien ryhmän, sinun on suljettava kaikki nämä osat aloittaviin ja sulkeviin Fieldset-tunnisteisiin. Ja asettaaksesi otsikon (Selite) tälle ryhmälle, sinun on heti aloitettavan Fieldsetin jälkeen kirjoitettava konstruktio avaus- ja sulkemislegendasta, joiden väliin on lisättävä ryhmän otsikon teksti.

Tässä on esimerkki ryhmien luomisesta Fieldsetin ja Legendin avulla:

Onnea sinulle! Nähdään pian blogisivuston sivuilla

Saatat olla kiinnostunut

Valitse, Optio, Textarea, Label, Fieldset, Legend - Html-tunnisteet avattavien luetteloiden ja tekstikenttien muotoon
Luettelot HTML-koodilla - UL-, OL-, LI- ja DL-tunnisteet
MailTo - mikä se on ja kuinka luoda linkki HTML-muodossa sähköpostin lähettämistä varten
Kuinka värit asetetaan HTML- ja CSS-koodissa, RGB-sävyjen valinta taulukoissa, Yandex-lähtö ja muut ohjelmat
Mikä on hypertekstin merkintäkieli Html ja kuinka tarkastella luetteloa kaikista W3C-validaattorissa olevista tunnisteista
Linkin ja kuvan (valokuva) lisääminen HTML:ään - IMG- ja A-tunnisteet
Taulukot HTML-muodossa - Taulukko-, Tr- ja Td-tunnisteet sekä Colspan, Cellpadding, Cellspacing ja Rowspan niiden luomiseen
Fontti (kasvot, koko ja väri), Blockquote ja Pre-tagit – vanha tekstin muotoilu puhtaalla HTML:llä (ei CSS:ää käytössä)
Kuinka luoda hyperlinkki (A, Href, Kohdetyhjä), kuinka avata se uuteen ikkunaan sivustolla ja myös tehdä kuvasta linkki HTML-koodissa

HTML:n avattava luettelo voidaan luoda tagin avulla valitse. Avattavan luettelon (tai "pudotusvalikon") lisäksi tunniste valitse voit luoda luettelokohteen, jossa on useita valintoja. Tunnisteen käytön syntaksi valitse HTML näyttää tältä:

Elektronik Syroezhkin Chizhikov Kukushkina

Tässä tagia käyttäen vaihtoehto luetteloelementit on määritetty.

Hakemuksen tulos:

Elektroniikka Syroezhkin Chizhikov Kukushkina

VALITSE tunnisteen attribuutit

Katsotaanpa tunnisteen attribuutteja valitse:

• nimi
• koko- luettelossa näytettyjen rivien lukumäärä (numero);
• useita- mahdollistaa pudotusluettelon elementtien usean valinnan;
• liikuntarajoitteinen- estää pääsyn elementtiin;
• muodossa- voit linkittää avattavan luettelon lomakkeeseen (saattaa olla tarpeen, jos luettelo itsessään on sen lomakkeen ulkopuolella, johon se pitäisi linkittää). Lomakkeen tunnus välitetään argumenttina.

Ehkä nämä ovat kaikki tunnisteen tärkeimmät ominaisuudet valitse joita käytetään useimmiten. Katsotaanpa nyt, miten pudotusluettelo tehdään HTML:ssä määritettyjä attribuutteja käyttämällä:

OPTION-tunnisteen attribuutit

Tag vaihtoehto, kuten jo todettiin, voit määrittää alasvetoluettelon lapsia valitse, joka puolestaan ​​toimii säiliönä. Tag vaihtoehto on omat attribuuttinsa:

• liikuntarajoitteinen- asettaa kiellon tietyn luetteloelementin valitsemiselle;
• etiketti- voit asettaa tunnisteen nykyiselle listaelementille (tunnisteessa määritetyn tekstin sijaan näytetään tarran arvo, mikä mahdollistaa lyhennetyn arvon näyttämisen); Huomaa: tätä määritettä ei tueta Firefoxissa.
• valittu- nykyinen luettelon kohde valitaan oletusarvoisesti;
• arvo- palvelimelle siirrettävä arvo;

Katsotaanpa tunnisteen edistyneitä käyttötapauksia vaihtoehto:

Herra Electronic Syroezhkin Chizhikov Kukushkina

Yllä olevan esimerkin tulos näyttää tältä:

Mr. Elektroniikka Syroezhkin Chizhikov Kukushkina

Nubex-verkkosivustojen rakennustyökalun avulla voit luoda mukautettuja lomakkeita käyttämällä lomakkeiden rakennusmoduulia. Nubexin avattavien luetteloiden toiminta kuvataan artikkelissa: