Tervitused kõigile minu ajaveebi lugejatele. Täna räägin teile, kuidas koostada 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 valimismärgendit, millesse paigutatakse seotud valikusildid. Just neisse salvestatakse kõik valikud, mida loendil klõpsates pakutakse. Näide:
Valige loom
Sel juhul näete, mis kuvatakse ekraanil 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 või valikvastustega. Et oleks võimalik valida mitu üksust, peate valimiseks 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 klõpsamatuks ja mitteklõpsatavaks, kuid siiski lehel nähtavaks.
Nõutav – html5 atribuut. Kui see on määratud, ei esitata vormi ilma ripploendist väärtust valimata. Üldiselt muutub see kohustuslikuks valikuks. Kuigi atribuut ei tööta kõigis brauserites.
Option Sildi atribuudid
Tegelikult toimib valik ainult loendiüksuste konteinerina, need ise määratakse valikumärgendi abil. Sellel on väärtuse parameeter, nagu me juba teada saime, 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 mitmele loendile, selle saab määrata mitmele.
Oluline selgitus õigeks tööks
Kui valikutulemus tuleb serverisse saata või skriptide kaudu töödelda, siis pane valik vormile, et vigu ei tekiks. Fakt on see, et ripploend loodi algselt ühe vormielemendina.
Milleks valikut kasutatakse?
Tavaliselt võib see teile kasulik olla, kui registreerute oma veebisaidil või soovite läbi viia küsitluse. Elemendil on puudus - see ei muuda css-i kaudu välimust kuigi hästi.
Vaikimisi kuvatakse loendil klõpsamisel sinine raam need loendi elemendid, mille kohal kursor hõljutatakse, on sama värviga esile tõstetud. Selleks, et raam ei ilmuks klõpsamisel või et see oleks 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 mingil põhjusel see stiilide kaudu ei muutu.
Option(
värvus: pruun;
taust: aqua;
}
Muide, võib-olla teavad mõned teist, kuidas css-i kaudu üksuse kohal hõljutades taustavärvi muuta?
See on praeguseks valitud sildi ja selle kasutamise kohta kõik. Selle jaoks pole html-is lisafunktsioone ette nähtud. Kõiki muid sellega seotud toiminguid saab teha javascripti ja php abil. Näiteks kui teil on vaja sünniaasta valimiseks luua loend ja seal võib olla 80-100 erinevat valikut, kas te ei kirjutaks need käsitsi?
Just seetõttu 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 peamiste siltidega saate tutvuda html-is.
Selles artiklis vaatleme elemente, mis võimaldavad teil luua ripploendeid, õpime nendes loendites rühmi moodustama, uurime, kuidas keelata üksusi ja isegi loendirühmi, tutvume elemendiga, mis võimaldab teil luua mitmerealine tekstiväli, mida saate hiljem kasutada HTML-vormide sees (element
Lisaks asetasime vormi sisse nupu, mida kasutatakse vormi esitamiseks (element nupuga "esita vorm": type = "submit" ).
Meie näite tulemus:
Tekstiala kohtspikker
Ja nii me vaatame viimast näidet ja liigume edasi selle õpiku artikli praktilise ülesande juurde.
Tänu atribuudile (HTML tag
Vihje tekst on peidetud, kui kasutaja sisestab tekstiväljale väärtuse (mis tahes tähemärgi), kui see eemaldatakse, kuvatakse vihje uuesti.
Vaatame kasutamise näidet:
type = "submit" name = "submitInfo" value = "submit" > !}
Selles näites oleme loonud kaks tekstiala (element
Pange tähele, et kui tekstiväli on kirjutuskaitstud, ei saa sisu muuta, kuid kasutaja saab siiski sisu juurde navigeerida, seda valida ja kopeerida.
Lisaks asetasime 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 harjutusülesanne:
- Kasutades omandatud teadmisi, koostage järgmine töökuulutuse vorm:
Enne ülesandega alustamist avage näide uues aknas ja uurige hoolikalt vormi, et korrata kõiki selle punkte. Ülesande täitmiseks vajate artiklist saadud teadmisi. 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.
Veebilehe või ajaveebi loomisel ja selle edasisel sisuga täitmisel tekib erinevatel põhjustel mõnikord vajadus mõnda tekstiosa varjata, mahukamat infot esialgu peidetud plokki paigutada, kuid siiski viidata kasutajale, mis on saadaval midagi muud, ja anda talle võimalus vaadata peidetud sisu ilma järgmisele reale või lehele liikumata.
Kui varem kasutati sellise lahenduse juurutamiseks hunnikut javascripti, siis nüüd saab seda kõike imeliste omaduste abil väga lihtsalt teha.
Täna vaatleme lihtsaimat viisi peidetud sisuplokkide loomiseks saidi lehtedel ja üksikutes sõnumites, mis avanevad, kui klõpsate teatud tekstielemendil, kasutades ainult CSS3 atribuute. Lüliti võib olla üks sõna, esiletõstetud fraas, terve lause või informatiivne ikoon.
Selliseid plokke kasutatakse sageli suure sisuga lehtedel, struktureeritumaks ja kompaktsemaks muutmiseks jagatakse kogu sisu nn gruppidesse, milles esitatakse kasutajale ainult pealkirjad, kogu tekst on vaikimisi peidetud ja seda saab näha, klõpsates konkreetsel elemendil (vt ülal).
Proovime ilma tarbetu veeta hakkama, vaatame kogu seda lihtsat mehhanismi töös selge näitega ja soovi korral saate ka midagi muuta:
Näide nr 1
Valimata ja märgistamata teksti kasutatakse lisateabega rippmenüü plokkide lülititena koos ühemõttelise kutsega sellel klõpsata, mida peate kartmata ja kahtluseta tegema)))
Nagu näete, töötab kõik enam kui ideaalselt, peidetud sisu ilmub probleemideta ja kaob kerge hiireklõpsuga ning samal ajal kasutasime nii html-i raamistikus kui ka moodustamisel minimaalselt käivitatavat koodi css-stiilidest. Ilma täiendavaid javascripti teeke ühendamata, igavene murega, kas need on kasutaja poolel keelatud.
Kogu selle toimingu rakendamine sai võimalikuks tänu CSS3 pseudoklassile :kontrollitud, rakendatakse liidese elementidele, nagu raadionupud (). Mida me sildil tegelikult tegime Määrasime tüübi atribuudile väärtuse märkeruudu , samuti unikaalsele identifikaatorile vastava identifikaatori id="hd-1" for="hd-1" praeguse ploki lüliti. Peidame märkeruudud põhjalikult ja igaveseks, määrates klassis.hide kuva: none property.
Tegelikult pole siin midagi erilist selgitada; kogu peidetud plokkide sisse- ja väljalülitamise mehhanism koosneb kolmest elemendist:
- Märkeruut – silt tähendusega märkeruut atribuut tüüp ja konkreetse linkimisidentifikaatoriga
- Pealkiri (teksti lüliti) – silt atribuudi kordumatu identifikaatori väärtusega jaoks, (identifikaator peab olema sama, mis sildi identifikaator sisend tähendusega märkeruut atribuut tüüp).
- Sisuplokk on div silt, mis sisaldab paremate aegadeni kuni kasutaja klõpsamiseni erinevat peidetud sisu (tekst, pildid jne jne)
Loodan, et minu kaootilisest selgitusest on selgunud, milles on kogu mõte. CSS rakendab uusi stiile (kasutades pseudoklassi kontrollitud), et kuvada varem peidetud sisuplokk ainult siis, kui kasutaja klõpsab elemendil, mis on kordumatu identifikaatoriga seotud märkeruuduga.
Sellest kõigest järeldub oluline märkus:
Kui kasutate samal lehel mitut peidetud plokki, peab igal raadionupul olema kordumatu ID, mis erineb teiste plokkide ID-dest.
Niisiis, sõnades oleme välja selgitanud, mis kuhu ja miks läheb, vaatame nüüd kogu struktuuri html-raamistikku:
< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Avamiseks klõpsake siin! label> < div>Varjatud sisu...... div> < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Lisateabe lugemiseks klõpsake siin! label> < div>Peidetud sisu... div> |
Järgmisena liigume otse CSS-stiilide moodustamise juurde, ilma milleta kogu see disain ei tööta. Väga minimaalne kood ilma kaunistusteta tõstis vaid veidi esile rippmenüü ploki tausta, et see saaks teie jaoks määratleda ja näidata peidetud teksti raami. Saate kujundada plokke vastavalt oma soovile, lisada ääriseid, ümaraid nurki, esile tõsta teksti või .
1.CSS
. peita,. peida + silt ~ div ( kuva: puudub; ) /* sildi teksti tüüp */. peida + silt, . peida: märgistatud + silt ( polster: 0 ; värv: roheline; kursor: kursor; ääris- alumine: 1px punktiirroheline; ) . peida: märgitud + silt + div ( kuva: plokk; taust: #efefef; - moz- kast- vari: sisestus 3px 3px 10px #7d8e8f; - veebikomplekt- kast- vari: sisestus 3px 3px 10px #7d8e8f; kast- vari: sisestus 3px 3px 10px #7d8e8f padding: 10px ) |
/* peida märkeruudud ja sisuplokid */ .hide, .hide + label ~ div ( kuva: puudub; ) /* sildi teksti välimus */ .hide + silt, .hide:checked + label ( polster: 0; värv: roheline kursor: ääris-alumine: 1px punktiir roheline ) /* sildi teksti ilmumine, kui lüliti on aktiivne */ .hide: checked + label ( värv: punane; ääris-alumine: 0; ); märkeruut on aktiivne, näita sisuga plokke */ .hide:checked + silt + div ( kuva: plokk; taust: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f: sisestus 3px 10px #7d8e8f;
See kõik on askeetliku näite jaoks täiesti piisav miinimum. Kuid me pole üldse meie, kui me ei lisa vähemalt mõnda maiuspala, ja parem on kasutajale visuaalselt öelda, kus klõpsata.
Teises näites lisasin lihtsa sümboli plussi kujul, mis annab selgelt märku, et vajutades on siin veel midagi peidus, muutub see hetkega miinuseks ja sisuga peidetud plokkidesse lisasin veidi animatsiooni; need ilmuvad ja seda kõike ainult CSS3 võlu abil.
2.CSS
/* peida märkeruudud ja sisuplokid */. peita,. peida + silt ~ div ( kuva: puudub; ) /* sildi teksti tüüp */. peida + silt ( veeris: 0 ; polster: 0 ; värv: roheline; kursor: kursor; kuvamine: inline-blokk; ) /* sildi teksti ilmumine, kui lüliti on aktiivne */. peida: märgistatud + silt ( värvus: punane; ääris- alumine: 0 ; ) /* kui märkeruut on aktiivne, kuvab sisuga plokid */. peida: märgistatud + silt + div ( kuva: plokk; taust: #efefef; - moz- kast- vari: sisestus 3px 3px 10px #7d8e8f; - veebikomplekt- kast- vari: sisestus 3px 3px 10px #7d8e8f; kast- vari: sisestus 3px 3px 10px #7d8e8f margin-left: 20px; /* ilmumisel väike animatsioon */- veebikomplekt - animatsioon: tuhmumine - 0,5 sekundiga; - moz- animatsioon: fade easy- in 0. 5s; animatsioon: fade easy- in 0. 5s; ) /* animatsioon peidetud plokkide ilmumisel */@- moz- võtmekaadrid tuhmuvad ( alates ( läbipaistmatus: 0 ; ) kuni ( läbipaistmatus: 1 ) ) @- veebikomplekt- võtmekaadrid tuhmuvad ( alates ( läbipaistmatus: 0 ; ) kuni ( läbipaistmatus: 1 ) ) @ võtmekaadrid tuhmuvad ( alates ( läbipaistmatus: 0 ) kuni ( läbipaistmatus: 1 ) ). peida + silt: enne ( taustavärv: #1e90ff; värv: #fff; sisu: " \002 B"; kuva: plokk; ujuk: vasak; fondi suurus: 14 pikslit; fondi kaal: paks; kõrgus: 16 pikslit; rea kõrgus: 16 pikslit; veeris: 3px 5px; tekst- joondus: keskel; laius: 16 pikslit; - veebikomplekt - piirde raadius: 50%; - moz- piiri- raadius: 50%; piiri raadius: 50%; ) . peida: märgitud + silt: enne ( sisu: " \221 2" ; } |
/* peida märkeruudud ja sisuplokid */ .hide, .hide + label ~ div ( kuva: puudub; ) /* sildi teksti välimus */ .hide + silt ( veeris: 0; polsterdus: 0; värv: roheline; kursor : pointer display: inline-block ) /* sildi teksti ilmumine, kui lüliti on aktiivne */ .hide: checked + label ( color: red; border-bottom: 0; ) /* kui märkeruut on aktiivne, kuvatakse; sisuga plokid */ . hide:checked + label + div ( kuva: plokk; taust: #efefef; -moz-box-shadow: sisestus 3px 3px 10px #7d8e8f; -webkit-box-shadow: sisestus 3px 3px 10px #7d8e8f ; box-shadow: inset 3px 3px: margin-left: 20px /* -webkit-animation: fade ease-in 0.5s ) /*; peidetud plokkide ilmumisel */ @-moz-keyframes tuhmuvad ( alates ( läbipaistmatus: 0; ) kuni ( läbipaistmatus: 1 ) ) @-webkit-keyframes tuhmuvad ( alates ( läbipaistmatus: 0 ; ) kuni ( läbipaistmatus: 1 ) ) @keyframes fade ( alates ( läbipaistmatus: 0; ) kuni ( läbipaistmatus: 1 ) ) .hide + label:before ( taustavärv: #1e90ff; värv: #fff; sisu: "\002B"; kuva: plokk; ujuk: vasak; fondi suurus: 14 pikslit; fondi kaal: paks; kõrgus: 16 pikslit; rea kõrgus: 16 pikslit; veeris: 3px 5px; teksti joondamine: keskel; laius: 16 pikslit; -veebikomplekti piiriraadius: 50%; -moz-border-raadius: 50%; piiri raadius: 50%; ) .hide:checked + label:before ( sisu: "\2212"; )
Meetod on kõigi eelduste kohaselt kahtlemata hea, kuid nagu alati, ja see pole sugugi üllatav, tekivad probleemid igavese progressipiduri, IE brauseri, pseudoklassiga. kontrollitud toetab ainult selle brauseri versioone 9 ja uuemaid. IE vanemate versioonide puhul jääb kõik samaks, peate kasutama javascripti.
Peidetud märkeruutude abil saate hõlpsasti rakendada stiilitud plokke, liugureid, galeriisid ja palju muud.
Kogu lugupidamisega, Andrew
Sageli leiate veebisaitidelt lehti, millele on paigutatud HTML-vormid. Veebivormid on mugav viis veebisaidi külastajatelt teabe saamiseks. Selle näiteks on -, -, mis annab tagasisidet saidi külastajatele ja arendajatele. Vormid on mugavad ka saidi arendajatele CMS-i väljatöötamisel, mis võimaldab neil säilitada saidi peamise omaduse - asjakohasuse. See artikkel on pühendatud HTML-vormide loomise põhitõdedele, nende töötlemisele ja andmete edastamise viisidele ekraanivormidelt PHP-skriptidesse.
1) Looge lihtne vorm
Sildid
kommenteerida
Peamine erinevus POST- ja GET-meetodite vahel on teabe edastamise viis. GET meetodil lastakse parameetrid läbi aadressiriba, st. sisuliselt HTTP päringu päises, samas kui POST meetodi puhul edastatakse parameetrid HTTP päringu keha kaudu ja aadressiribal neid kuidagi ei kajastata.
$tekst = nl2br($_POST["minutekst"]);
?>
Ülesanne: Oletame, et peate looma ripploendi aastate 2000 kuni 2050 vahel.
Lahendus: Vormi töötlemiseks peate looma HTML-vormi elemendiga SELECT ja PHP-skripti.
Arutelu:
Esiteks loome kaks faili: form.html Ja action.php. Failis form.html sisaldab HTML-vormi koos ripploendiga. Lisaks saab loendis olevaid väärtusi määrata kahel viisil:
I. Andmete käsitsi sisestamine:
II. Andmete sisestamine tsükli kaudu:
Nagu näete, on teine silmusega näide kompaktsem. Arvan, et selle vormi jaoks pole vaja anda käitleja skripti, sest seda töödeldakse täpselt samamoodi nagu tekstivälja, st. loendi väärtusi saab hankida superglobaalsest massiivist $_POST.
Kirjeldus:
Loome faili serverisse saatmiseks HTML-vormi.
See html-vorm sisaldab elementi sirvida, mis avab dialoogiboksi serverisse üleslaaditava faili valimiseks. Kui vajutate nuppu "Edasta fail", edastatakse fail töötleja skriptile.
Seejärel peate kirjutama käitleja skripti action.php. Enne töötleja kirjutamist peame otsustama, millisesse kataloogi faili kopeerime:
if(isset($_FILES [ "minu fail" ])) // Kui fail on olemas
{
$catalog = "../image/" ; // Meie kataloog
if (on_dir($catalog)) // Kui selline kataloog on olemas
{
$minufail = $_FILES [ "minu fail" ][ "tmp_nimi"]; // Ajutine fail
$minufaili_nimi = $_FILES [ "minu fail" ][ "nimi"]; // Faili nimi
if(! kopeeri ($minufail, $kataloog)) kaja "Viga faili kopeerimisel". $minu faili_nimi // Kui faili kopeerimine ebaõnnestus
}
else mkdir (../image/" ); // Kui sellist kataloogi pole, siis loome selle
}
?>
kommenteerida
Kui usaldate kasutajaid failide oma serverisse üles laadima, peate olema eriti ettevaatlik. Ründajad saavad pildile või failile manustada "halva" koodi ja saata selle serverisse. Sellistel juhtudel peate failide allalaadimist rangelt kontrollima.
See näide demonstreerib kataloogi loomist ja faili kopeerimist sellesse kataloogi serverisse.
Samuti tahaksin demonstreerida näidet elemendiga märkeruut. See element erineb teistest elementidest veidi selle poolest, et kui mitte üks element märkeruut’a pole valitud, siis on superglobaalne muutuja $_POST tagastab tühja väärtuse:
Sinine
Must
Valge
if (!empty($_POST [ "minuvärv" ])) kaja $_POST [ "minuvärv" ]; // Kui on valitud vähemalt 1 element
muidu kajab "Vali väärtus";
?>