Avattava tapahtumat html php css. Luomme tyylikkäitä avattavia luetteloita. Tavallinen HTML, CSS-pudotusvalikko

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-tunnisteiden sekä attribuuttien ja parametrien Painike, Checked, Value, Checkbox, Radio, Checkbox, Submit avulla.

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ä kun hän on täyttänyt kenttään nimellään, syöttänyt sähköpostiosoitteensa ja viestin tekstin ja napsauttamalla lähetä-painiketta 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 käsittelijäohjelman, joka, kun käyttäjä klikkaa lähetä-painiketta, 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ä valintanappien tai -valintaruutuihin. Tässä tapauksessa tämä valintanappi tai valintaruutu on aktiivinen, kun verkkolomaketta sisältävä sivu ladataan (niissä 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 erota 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 pudotusluettelon kohteet tulevat näkyviin. Katso esimerkki monikkosta alla. Jos Valitse-kohdan Koko-määrite on asetettu pienemmäksi kuin kohteiden määrä, oikealle tulee näkyviin vierityspalkki.
    2. Jos Useita ei ole Select-kohdassa, verkkolomakkeen avattavan luettelon korkeus on oletuksena yksi 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 elementin (rivin) kentästä pudotusvalikosta, toisessa vaihtoehdossa pitämällä Ctrl- tai Shift-näppäintä painettuna voit valita samanaikaisesti useita käytettävissä olevia kohteita.

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 avattavan luettelon verkkolomake, jossa on useita valintaominaisuuksia (pitämällä Ctrl- tai Shift-näppäintä painettuna).

Kentän muunnelma, jossa on avattava luettelo 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.

Kuten näet, tekstin napsauttaminen tämän elementin aktivoimiseksi on hyödytöntä - sinun on napsautettava sitä itse. Tämä on juuri se 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 tälle ryhmälle otsikon (Selite), sinun on heti aloitettavan Fieldsetin jälkeen kirjoitettava konstruktio, joka koostuu avaus- ja sulkemisseliteistä, joiden väliin sinun 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

Kahden viime vuoden aikana web-sovellusten (verkkosivustojen) kehitys on edennyt huimasti ja se, mitä käytimme aiemmin verkkosivuston luomiseen, on jo vanhentunutta tai uudempia menetelmiä on ilmaantunut.

Aiemmin avattavan luettelon luominen html:ssä ( englanniksi. - pudota alas), käytimme juuri

Tässä esimerkissä merkitsemme

Selaimessa se näyttää tältä:

Valikon kohteiden ryhmittely

Katsotaanpa seuraavaa tagia , jota käytetään ryhmittelemään liittyvät tiedot avattavaan luetteloon nimi = "mustavalkoinen" > label = "Valkoinen lista" >

Tässä esimerkissä olemme korostaneet 2 ryhmää tunnisteella . Elementin label-attribuutti määrittää valitun ryhmän nimen lihavoituna:

Seuraavassa esimerkissä poistamme käytöstä yhden ryhmän (" Ryhmä B"):

</span> Esimerkki HTML-tunnisteen käytöstä poistetun attribuutin käyttämisestä <optgroup><span>

Esimerkkimme tulos:

Poista luettelo ja monivalinta käytöstä

</span> Käytöstä poistetut ja useat tunnisteet <select><span>

Tässä esimerkissä loimme kaksi avattavaa luetteloa. Ensimmäisessä luettelossa käytimme Disable-attribuuttia, joka estää vuorovaikutuksen luettelon kanssa (poistaa sen käytöstä).

Toisessa luettelossa käytimme multiple-attribuuttia, joka osoittaa, että luettelosta on mahdollista valita useita vaihtoehtoja kerralla ( Ctrl Windowsissa ja kautta Komento Macissa).

Selaimessa se näyttää tältä:

Tekstialue

Esimerkkimme tulos:

Tekstialueen poistaminen käytöstä

Analogisesti aiemmin käsiteltyjen tunnisteelementtien kanssa



type = "lähetä" name = "submitInfo" value = "submit" > !}

Tässä esimerkissä olemme luoneet kaksi tekstialuetta (elementti