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ä:
- Nimi – yksilöllinen nimi, joka on määritettävä, jos HTML-tiedosto, jossa teet jotain, käyttää useita verkkolomakkeita
- Action – pakollinen attribuutti, joka osoittaa polun komentosarjaan, johon sen tiedot siirretään jatkokäsittelyä varten
- 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:
- yksiriviset tekstikentät (Type="Text")
- kentät salasanan syöttämistä varten (Type="Password")
- valintaruudut (Type="Checkbox")
- valintanapit (Type="Radio")
- piilotetut kentät (Type="Hidden")
- tavalliset painikkeet (Type="Button")
- painikkeet tietojen lähettämiseksi käsittelijälle (Type="Lähetä")
- painikkeet verkkolomakkeen palauttamiseksi alkuperäiseen tilaan (Type="Reset")
- kentät tiedostojen lataamiseksi palvelimelle (Type="File)
- 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:
- 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.
- 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ä
- 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.
- Arvo - sen avulla voit määrittää, mitä tarkalleen kirjoitetaan oletuksena kenttään tai tietojen lähetyspainikkeeseen
- 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ä:
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
Erityisesti tätä artikkelia varten löysin 16 erilaista esimerkkiä, joista voi olla hyötyä verkkosivuston kehittämisessä. Ja niin aloitetaan.
1. Mukautettu luettelo
Html-malli, jonka avulla voit mukauttaa omia värejäsi avattavaan luetteloon.
2. Valmistettu CSS3/JavaScriptillä
Kirjoitettu CSS3:lla ja JavaScriptillä. Tavallinen avattava luettelo.
3. Tyyli: metroasemat
Läpinäkyvä avattava luettelo metroasemien tyylillä.
4. Droppy. Kirjoitettu SCSS:llä ja jQueryllä
5. Pitkiä luetteloita varten
Erinomainen ratkaisu pitkille alasvetovalikkoille.
Pudotusvalikko, joka on kirjoitettu puhtaalla CSS:llä ilman komentosarjoja.
Täydellinen sivuvalikoihin verkkosivustolla visuaalisesti näyttämään luokkia verkkosivustolla.
8. Tyylikäs käyttäjäasetusvalikko
9. CSS3-pudotusvalikko
Valmistettu käyttöliittymätyylillä, se sopii sivuston käyttöliittymätyyliin.
12. Lipun valinta
Pudotusvalikko maan valintatyyliin.
13. Pelkkä HTML, CSS-pudotusvalikko
Toivottavasti pidit valinnastani. Jätä kommentteja, jaa mielipiteesi ja lähetä omia töitäsi!
Kuinka tehdä avattava luettelo html-muodossa (TOP 16 -valinta) Bolgerista
Vaakasuuntainen pudotusvalikko käytetään sivuston navigointirakenteen järjestämiseen. Pesätasojen optimaalinen määrä on yksi tai kaksi. Mitä vähemmän liitteitä on, sitä helpompi sivuston kävijän on löytää tarvitsemansa tiedot. Tavallisen vaakasuuntaisen valikon luominen on kuvattu yksityiskohtaisesti kohdassa.
Kuinka tehdä vaakasuuntainen pudotusvalikko
1. HTML-merkintä ja perustyylit avattavalle valikolle, jossa on yksi sisäkkäistaso
Vaakasuuntaisen pudotusvalikon HTML-merkintä eroaa tavallisesta valikosta siinä, että se linkittää haluttuun luettelokohtaan
- tai<оl> .
Alivalikon sijoittamiseksi suhteessa päävalikkoon määritetään seuraavat tyylit:
— luetteloelementille, johon avattava luettelo on sisäkkäin: li (sijainti: suhteellinen;) ;
— pudotusvalikossa ul (sijainti: absoluuttinen;) , sekä vasemmalle ja ylimmälle arvolle.
Selkeyden ja muotoilun helpottamiseksi lisätään luokan ylävalikko päävalikkoon ja alivalikko avattavaan valikkoon.
Avattava valikko voidaan piilottaa useilla tavoilla:
1) näyttö: ei mitään;
2) näkyvyys: piilotettu;
3) opasiteetti: 0;
4) muunnos: scaleY(0);
5) jQuery-kirjaston avulla.
Tapa 1. (näyttö: ei mitään;)
Pudotusvalikko on piilotettu käyttämällä .submenu (näyttö: ei mitään;) , kun se näytetään .topmenu li:hover .submenu (näyttö: block;) .
Tapa 2. (näkyvyys: piilotettu;)
Valikko piilotetaan käyttämällä .alivalikkoa (näkyvyys: piilotettu;) ja näytetään .topmenu li:hover .submenu -komennolla (näkyvyys: näkyvä;) .
Menetelmä 3. (opasiteetti: 0;)
Valikko piilotetaan käyttämällä .submenua (opasiteetti: 0;) ja näytetään .topmenu li:hover .submenu (opasiteetti: 1;) avulla. Lisää näkyvyys: piilotettu, jos haluat estää valikon näkymisen, kun vie hiiri sen sijaintialueen päälle. , ja kun pidät osoitinta, muuta se näkyvyyteen: näkyvä; .
Menetelmä 4. (muunnos: scaleY(0);)
Valikko piilotetaan komennolla .submenu (muunnos: scaleY(0);) ja näytetään komennolla .topmenu li:hover .submenu (muunnos: scaleY(1);) . Koska oletuselementin muunnos tapahtuu keskeltä, sinun on lisättävä kohtaan .submenu (transform-origin: 0 0;) , ts. vasemmasta yläkulmasta.
Tapa 5: jQueryn käyttäminen
$(".viisi li ul").hide(); // piilota avattava valikko $(.five li:has(.submenu")").hover(function())( $(.five li ul").stop().fadeToggle(300) ;) /* valitse listaelementti, joka sisältää .submenu-luokan elementin ja lisää siihen hover-funktio, joka näyttää ja piilottaa pudotusvalikon */);2. 3D-pudotusvalikko
Mielenkiintoisia tehosteita voidaan luoda käyttämällä CSS3-muunnoksia, esimerkiksi saamalla valikon näkyviin ruudun syvyyksistä.
* ( laatikon koko: border-box; ) runko ( marginaali: 0; tausta: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); taustan koko: 10px 10px; ) nav ul (luettelotyyli) ei mitään : rgba(255,255,255,.8); ) .topmenu > li ( näyttö: inline-block; sijainti: suhteellinen; ) .topmenu > li > a ( font-family: "Exo 2", sans-serif; korkeus: 70px; rivin korkeus: 70 pikseliä; täyte: 0 30 pikseliä; fontin paino: lihavoitu; väri: #003559; tekstin muunnos: isot kirjaimet; ) .down:after ( sisältö: "\f107"; marginaali vasen: 8px; font-family : FontAwesome; ) .ylävalikko li a:hover ( väri: #E6855F; ) .alivalikko ( tausta: valkoinen; reuna: 2px kiinteä #003559; sijainti: absoluuttinen; vasen: 0; näkyvyys: piilotettu; peittävyys: 0; z-indeksi : 5; leveys: 150 pikseliä; muunnos: perspektiivi (600 pikseliä) kiertääX(-90 astetta); muunnos-alkuperä: 0% 0%; siirtymä: .6s helpotus sisään-ulos; ) .topmenu > li:hover .submenu( näkyvyys: näkyvä; opasiteetti: 1; muunnos: perspektiivi(600px) rotateX(0deg); ) .alivalikko li a ( väri: #7f7f7f; fontin koko: 13px; rivin korkeus: 36px; täyte: 0 25px; font-family: "Kurale", serif; )
3. Laajentava pudotusvalikko logolla
Tässä esimerkissä sivun yläosassa on logo ja sivustonavigointi. Logo voi olla kuva tai teksti. Pudotusvalikko laajenee vähitellen ylimmän luettelokohdan alapuolelta käyttämällä CSS3-muunnostoimintoa.
4. Laajenna avattava valikko
Toinen esimerkki pudotusvalikosta. Suurennusvaikutus valikon ilmestyessä toteutetaan pienentämällä alkuperäistä size.submenu (muunnos: mittakaava(.8);) , osoittimen ollessa päällä koko kasvaa arvoon.topmenu > li:hover .submenu (muunnos: scale(1);) .
* ( box-sizing: border-box; ) body ( marginaali: 0; tausta: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav ( tausta: valkoinen; ) nav ul ( listatyyli: ei mitään; marginaali: 0; täyttö: 0; ) nav a ( tekstin koristelu: ei mitään; ääriviivat: ei mitään; näyttö: lohko; siirtymä: .4s ease-out; ) .topmenu ( tekstin tasaus: keskellä; täyttö: 10px 0; ) .topmenu > li ( näyttö: inline-block; sijainti: suhteellinen; ) .topmenu > li:after ( sisältö: ""; sijainti: absoluuttinen; oikea: 0; leveys: 1px; korkeus: 12px; tausta: #d2d2d2; ylhäällä: 16px; box-shadow: 4px -2px 0 #d2d2d2; muunnos: rotate(30aste); ) .topmenu > li:last-child:after ( tausta: ei mitään; laatikko -shadow: ei mitään; ) .topmenu > li > a ( täyttö: 12px 26px; väri: #767676; tekstin muunnos: isot kirjaimet; fontin paino: lihavoitu; kirjainvälit: 1px; font-family: "Exo 2", sans-serif; ) .ylävalikko li a:hover ( väri: #c0a97a; ) .alivalikko ( sijainti: absoluuttinen; vasen: 50%; yläosa: 100%; leveys: 210px; margin-vasen: -105px; tausta: #fafafa ; reuna: 1px kiinteä #ededed; z-indeksi: 5; näkyvyys: piilotettu; opasiteetti: 0; muunnos: asteikko(.8); siirtyminen: .4s easy-in-out; ) .alivalikko li a ( täyttö: 10px 0; marginaali: 0 10px; reunus-ala: 1px kiinteä #efefef; fontin koko: 12px; väri: #484848; kirjasinperhe: "Kurale", serif; ) .topmenu > li:hover .submenu ( näkyvyys: näkyvä; peittävyys: 1; muunnos: asteikko(1); )
5. Pudotusvalikko
Vaakavalikko minianimaatiolla: kun viet hiiren osoittimen valikon ylälinkkien päälle, näkyviin tulee pieni ympyrä, joka liittyy myös avattavan valikon ulkoasuun.
@import url("https://fonts.googleapis.com/css?.jpg); taustan sijainti: keskellä keskellä; taustan toistoa: ei toistoa; taustan koko: kansi; korkeus: 100vh; sijainti: suhteellinen; ) runko: ennen ( sisältö: ""; sijainti: absoluuttinen; vasen: 0; alaosa: 0; korkeus: 100 %; leveys: 100 %; tausta: lineaarinen gradientti (45 astetta, rgba(0,0,0,0) , rgba(255,255,255,.8)); ) nav ( tekstin tasaus: keskellä; täyttö: 40px 0 0; ) nav ul ( listatyyli: ei mitään; marginaali: 0; täyttö: 0; ) nav a ( tekstin koristelu : ei mitään; näyttö: lohko; väri: #222; ) .topmenu > li ( näyttö: inline-block; sijainti: suhteellinen; ) .topmenu > li > a ( sijainti: suhteellinen; täyte: 10px 15px; font-family: " Kaushan Script", kursiivinen; kirjasinkoko: 1,5 em; rivinkorkeus: 1; kirjainväli: 3 kuvapistettä; .topmenu > li > a:before (sisältö: ""; sijainti: absoluuttinen; z-indeksi: 5; vasen: 50%; yläosa: 100%; leveys: 10px; korkeus: 10px; tausta: valkoinen; reunuksen säde: 50%; muunnos: käännä (-50%, 20px); peittävyys: 0; siirtymä: 0,3 s; ) .topmenu li:hover a:before ( muunnos: translate(-50%, 0); opasiteetti: 1; ) .alivalikko ( sijainti: absoluuttinen; z-indeksi: 4; vasen: 50%; yläosa: 100%; leveys: 150px; täyte: 15px 0 15px; margin-top: 5px; tausta: valkoinen; reunuksen säde: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); laatikon koko: border-box; näkyvyys: piilotettu; peittävyys: 0; muunnos: kääntää (-50%, 20px); siirtymä: .3s ; ) .topmenu > li:hover .submenu ( näkyvyys: näkyvissä; peittävyys: 1; muunnos: translate(-50%, 0); ) .submenu a ( font-family: "Libre Baskerville", serif; fontin koko: 11px; kirjainväli: 1px; täyte: 5px 10px; siirtymä: .3s lineaarinen; ) .alavalikko a:hover (tausta: #e8e8e8;)
Tässä artikkelissa tarkastellaan elementtejä, joiden avulla voit luoda avattavia luetteloita, opimme muodostamaan ryhmiä näissä luetteloissa, tarkastelemme kohteiden ja jopa luetteloryhmien poistamista käytöstä, tutustumme elementtiin, jonka avulla voit luoda monirivinen tekstikenttä, jota voit myöhemmin käyttää HTML-lomakkeissa (element
Lisäksi asetimme lomakkeen sisään painikkeen, jota käytetään lomakkeen lähettämiseen (elementti painikkeella "lähetä lomake": type = "lähetä" ).
Esimerkkimme tulos:
Tekstialueen työkaluvinkki
Ja niin katsomme viimeistä esimerkkiä ja siirrymme tämän oppikirjan artikkelin käytännön tehtävään.
Kiitos attribuutin (HTML tag
Työkaluvihjeen teksti piilotetaan, kun käyttäjä syöttää arvon (mitä tahansa merkkiä) tekstikenttään; jos se poistetaan, työkaluvihje näytetään uudelleen.
Katsotaanpa esimerkkiä käytöstä:
type = "lähetä" name = "submitInfo" value = "submit" > !}
Tässä esimerkissä olemme luoneet kaksi tekstialuetta (elementti
Huomaa, että jos tekstikenttä on vain luku -tilassa, sisältöä ei voi muuttaa, mutta käyttäjä voi silti navigoida sisältöön, valita ja kopioida sen.
Lisäksi asetimme lomakkeen sisään painikkeen, jota käytetään lomakkeen lähettämiseen (elementti painikkeella "lähetä lomake": type = "lähetä" ).
Esimerkkimme tulos:
Aiheeseen liittyviä kysymyksiä ja tehtäviä
Ennen kuin siirryt seuraavaan aiheeseen, suorita harjoitustehtävä:
- Luo seuraava työpaikkailmoituslomake käyttämällä hankkimaasi tietoa:
Ennen kuin aloitat tehtävän, avaa esimerkki uudessa ikkunassa ja tutki lomake huolellisesti toistaaksesi sen kaikki kohdat. Tehtävän suorittamiseksi tarvitset artikkelin tiedot. Jos unohdat sen, tule takaisin opiskelemaan sitä.
Kun olet suorittanut harjoituksen, tarkista sivukoodi avaamalla esimerkki erillisessä ikkunassa varmistaaksesi, että teit kaiken oikein.
Tänään haluan esittää pienen "reseptin" luettelon luomiseen CSS:ssä. Ei JQueryä, ei CSS3:a - vain vanha kunnon selain-CSS. Esimerkki on melko yksinkertainen, joten kokeneet toverit eivät ehkä ole kiinnostuneita. Toteutamme avattavan luettelon sosiaalisilla painikkeilla.
Älkäämme siis puhuko pitkään, vaan siirtykäämme suoraan asiaan
HTML
Jaa tämä postaus
- Viserrys
- Google plus
- Yhteydessä
- RSS
Jätän tarkoituksella pois yleiset kohdat, kuten tyylien sisällyttämisen, jotta koodi ei kasva. Sivun alareunaan annan linkin lähteisiin - kaikki on siellä.
HTML:ssä on tavallinen luettelo ja epätavallinen otsikko. Sen epätavallisuus on, että se on tehty hyperlinkillä, jonka avulla voit seurata tapahtumaa :hover eli opastusta. Avattava luettelo toimii, kun viet hiiren osoittimen otsikon päälle.
CSS
Katsotaanpa ensin avattavan luettelon perustyylejä. Yritin kommentoida jokaista koodiriviä selventääkseni sitä:
/*Palauta täyte*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Peruskääre*/ .droplink ( leveys:200px; position:absolute; margin:10px 0 0 25px ) /*Hover block style*/ .droplink:hover( height:auto; background-color:#3E403D; border:solid 1px #3A3C39 ) /*Otsikko normaalitilassa*/ .droplink h3 a( text-align:center ; leveys: 100 %; näyttö: lohko; täyttö: 12px 0px; väri: #999; tekstin koristelu: ei mitään ) .droplink h3 a img(border:none) /*Tyyli hover title*/ .droplink:hover h3 a (väri:#FFF; font-weight:bold; position:absolute )
Tässä ei ole mitään erityistä; osoitimme lohkon koon ja tyylin, otsikon tyylin ja molempien elementtien tyylit, kun osoitinta siirretään. Mene eteenpäin:
/*Piilota luettelo ilman hiiriä*/ .droplink ul( list-style:none; display:none ) /*Näytä luettelo hoverissa*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li( näyttö:lohko)
Tämä koodi on mielenkiintoisempi ja näyttää kuinka se käyttäytyy pudotusvalikosta kun pidät kohdistinta. Normaalissa kunnossa maksaa näyttö: ei mitään, eli sitä ei näytetä. Kun osoitin pidetään, näytämme sen lohkona. Siinä koko salaisuus. Koristele nyt luettelon elementtejä hieman ja lisää kuvakkeet:
/*Luettelokohteen tyyli*/ .droplink li a( padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; font-size:12px ; background-repeat:ei toistoa; taustan sijainti: 10px 3px ) /*Elementin hover style*/ .droplink li a:hover( background-color:#999 ) /*Icons*/ .facebook a (taustakuva : url("icons/facebook.png")) .twitter a (background-image:url("icons/twitter.png")) .vk a (background-image:url("icons/vk.png")) . rss a (background-image:url("icons/rss.png")) .gplus a (background-image:url("kuvakkeet/gplus.png"))
Siinä kaikki, oikeastaan. Pudotusvalikko on valmis ja näyttää melko hyvältä. Voit suunnitella elementit oman harkintasi mukaan, lisätä pyöristettyjä kulmia ja muita kelloja ja pillejä.
Jos haluat luettelon "päällekkäisen" alla olevan tekstin kanssa, kun osoitinta pidetään, katso sivulle z-indeksi.
Jos jokin on epäselvää tai ei toimi, kysy kommenteissa tai käytä "Lähetä viesti" -painiketta, se on siellä —>