HTML formas elementi - saraksts, vipadaє (atlasīt, opcija, optgroup tagi), teksta apgabals, kā arī etiķete, lauku kopa un leģenda. HTML veidlapas Atlasiet atribūtus

Vienkāršākais vipadє HTML — atlasīto tagu ir viegli iegult. Tse tag-container, opciju tagi ir iekļauti jaunajā - smirdēšana pati nosaka vienumus sarakstā.

Є Sarakstu opciju skaits, kurā varat pārlūkot papildu atlases tagu: saraksts (opcijas, lai parādītu klikšķi uz galvenā lauka vai virzītu kursoru virs jauna kursora) і vairāku atlases saraksts - jaunā lapā varat vibrēt vairākas preces. Pirmkārt, smaka ir būtisks mūsdienu vietņu navigācijas elements. Atbilžu variantu sarakstu var atrast, piemēram, katalogos, ir nepieciešams vibrēt preču īpašību sarakstu.

Ir iespējams mainīt saraksta nosaukumu un sarakstu autoritāti papildu universālajiem un īpašajiem atribūtiem.

Atlasiet tagu atribūtus

1. Vairāki — iestatiet vairāku vibrāciju.

2. Izmērs - iestatiet sarakstā redzamo rindu skaitu uz augstumu. Un šeit viss slēpjas daudzkārtēja atribūta klātbūtnē. Ja tā, ja nenorādīsiet izmēru, tad, ja ir redzami vairāki koristuvach, pārspējiet visus ir pieejamas opcijas izvēle, ja ir vairāki skati, tad tiks rādīta tikai viena rinda, un to var izlasīt, ja labajā pusē redzat lifta ikonu. Ja izmērs ir iestatīts un esat mazāks par opciju skaitu, tiks ritināta labā puse.

3. Vārds - im'ya. Saraksts, kuru var izmantot bez jauna, var būt nepieciešams mijiedarbībai ar programmas paraugu serverī. Kā likums, es saku vienu un to pašu.

Atlasītajai atzīmei opcijas taga displejā nav nekādu viskozu atribūtu.

Ligzdotās opcijas taga atribūti

1. Atlasīts - saraksta vienuma vērtības. Koristuvach var redzēt vairāk nekā vienu vienumu, ja uzdevumi ir vairāki atribūts (div. Vishche).
2. Vērtība – vērtība. Tsey atribūts ir obovyzkovy. Tīmekļa serveris ir vainīgs šajā jautājumā, jo pašā vibrav koristuvach sarakstā ir pieturzīmes.
3. Etiķete. Papildu atribūtam varat paātrināt pārējos sarakstu vienumus. Piemēram, ekrānā tiks palaists “Milāna”, lai aizstātu opciju “Milāna ir Lombardijas administratīvais centrs. Північнаіталія ". Šis atribūts ir arī uzvarošs sarakstā iekļautajiem ugrupovannya vienumiem.

Ja saraksts būs plašāks, tad varēsi iestāties par vārdiem pēc saraksta platākā teksta. Zrozumіlo, platumu var mainīt papildu HTML stiliem.

Dažādu veidu saraksts

Varat to rediģēt aiz papildu CSS, piemēram, saraksts tiks parādīts, kad kursors tiks novietots virs sānu elementa. Gribētu redzēt iespējas aizvērt sarakstus uz JavaScript, robotam pajautāšu Jquery bibliotēkā. Papildu bibliotēkas savienojumu saraksts, scho vipadaє, var būt pat salokāms, piemēram, kaskādes. Tātad, atlasot vienumu vienā sarakstā, tiek parādīts aizvainojošs saraksts, piemēram, izvēlnes vienums "Bērnu apģērbs" , mēteļi, kažoki utt.

Mēs esam pārspīlēti galvenās metodes, ar kuru palīdzību jūs varat paplašināt sarakstu, scho vipadaє. Zrozumіlo, є daudz nianšu JavaScript un tajā, kas ļauj mainīt funkcionalitāti un izsaukt sarakstu sarakstu.

Es apmeklēju visus sava emuāra lasītājus. Šodien es jums pastāstīšu, kā strādāt ar html vipadє, kādi tagi un atribūti ir nepieciešami, lai uzvarētu, kā arī jebkādiem mērķiem, kurus jūs zināt.

Izvēlieties tagu un atstājiet sarakstu

Arī sarakstam HTML formātā sekos atlases taga pāris, kurā ir iekļauti pārī savienotie opciju tagi. Tajās visas opcijas tiks pierakstītas, kā tas tiks ierosināts, noklikšķinot uz saraksta. muca:

Vibe radījums Bik govs vivtsya radinieks

Tajā pašā laikā tie, kas tiek rādīti starp displeju un opcijas izliekto daļu, varat spēlēt uz ekrāna, un vērtība, kas parādās vērtību atribūtos, tiks nosūtīta uz serveri vai pārskatīta saskaņā ar palīdzību no skripta.

Saraksts HTML formātā var būt ļoti vienkāršs un ar vairākiem atbilžu variantiem. Ja vēlaties pievienot tukšu vairāku atribūtu, lai atlasītu, ir jāpievieno tukšs vairāku atribūts. Schob vibrēt vērtību, melodija ctrl un iespiediet mish pogu.

Pirmais kanēļa atribūts ir izmērs. Wien ļauj atlasīt, rindas tiks parādītas sarakstā.

Cits atribūts ir atspējots. Saraksts nav pieejams uzbrukumam un punktu skatienam, taču to var redzēt malā.

Obligāts - html5 atribūts. Ja ir uzdevumi, veidlapa netiks nosūtīta bez atlases no saraksta. Zagalom, vin staє ir saistošs viboram. Ne visām pārlūkprogrammām ir šis atribūts.

Opciju taga atribūti

Vlasne, izvēlieties, lai kalpotu kā konteiners saraksta vienumiem, pati smaka tiek prasīta aiz papildu opciju birkas. Jaunā gadījumā vērtības parametrs, kā jau tika uzskatīts, ir kārtībā, ale krіm tsіe є y іnshi. piemēram:
Atspējots — atspējojiet atlasei nepieejamo vienumu sarakstā. To nav iespējams vizualizēt, bet nav iespējams uz tā noklikšķināt.

Atlasīts - prece tiks izpirkta atlīdzināšanai. Fiksētam sarakstam atribūtu bez vērtības var iestatīt tikai ar vienu vienumu, daudziem - ar klikšķi.

Precizējums ir svarīgāks pareizajam robotam

Ja atlases rezultāts būs jānosūta uz serveri vai jāapstrādā ar skriptu palīdzību, tad formā ir jāieraksta atlase, lai nebūtu piedošanas. Labajā pusē sarakstā ir saraksts ar to, kā pēc kārtas atvērt, kas pats par sevi ir viens no formas elementiem.

Kas ir nepieciešams, izvēlieties

Nosauciet savu vārdu, iespējams, laicīgi, ja apmeklējat savu vietni, lai veiktu restaurāciju vai vēlaties veikt pieredzi. Elements nav ļoti labs — tas ir tikpat labs, cik tas ir pieejams caur css.

Nospiežot uz saraksta, aiz ieteikumiem parādās zils rāmis, tāda pati krāsa ir redzama saraksta punktos, kursora kursorā. Nospiežot, rāmis neparādījās vai bija redzams tādā pašā krāsā, varat ierakstīt šādu atlasītāju:

Izvēlieties: fokuss (
kontūra: 1 pikselis cieti oranžs;
}

Tagad rāmis būs oranžs.

Opciju var arī stilizēt, ale ass, virzot virs punkta, fons kļūst zils un cauri stils nemainās.

Opcija (
krāsa: brūna;
fons: ūdens;
}

Pirms runājat, varbūt jūs zināt, kā mainīt fona krāsu, virzot kursoru virs vienuma, izmantojot css?

Axis, vlasne, atstājiet і visu pēc taga izvēlieties і yogo stasosuvannya. Jaunajiem html nav papildu funkciju. Visas darbības ar to var veikt ar javascript un php palīdzību. Piemēram, ja jums ir jāatver saraksts tautas mūzikas izvēlei un var būt 80-100 jaunas iespējas, vai jūs tās nenodosit?

Yakraz par veselumu un ir nepieciešams izvēlēties programmu, bet pats cikls. Nu, labi, šī ir tēma arī іnshoї rozmovi, un par šo gadu visa informācija, kā es vēlos jūs redzēt. Varat uzzināt vairāk par galvenajiem HTML tagiem.

Yak vi domā, kāds ir jūsu vietnes dizains? Kāpēc tu baidies no tevis? Jūs varat, jūs domājat, ka tas ir gudri, un jūs nevēlaties doties uz centru. Ale par naspravd all yde kudi inakshe. Aje jaunas tehnoloģijas (es, iespējams, uvazi tajā pašā laikā CSS3) nāca, lai atvieglotu tīmekļa dizainera dzīvi un ieviestu savas papildu iespējas atklāšanā jaunākā viglyāde vietne. Parunāsim par šiem saraksta dizaina veidiem.

Saraksts, scho vipadaє vietnei

Tas nav viegls lēmums, es paskatījos tumsā:

šantāža

Es gribu teikt uzreiz no demonstrācijas diska: okmemu failu HTML, kas ļauj paņemt nepieciešamo kodu. Arī redakcijas stila failos ādas dizaina sarakstam. Jums ir liegta vibrācija, kas jums vislabāk atbilst un zināt šo stila failu 🙂.

Nekas nav pieejams rozmіttsі sarakstā:

Jak tad šķiet: vīns i Afritsi ... Vidējie tagi , Kurā sarakstā ir vienumi.

Jūs varat izmantot neparastus atribūtus savos dibenos, piemēram, datu klase abo datu saite... Nav ko baidīties, smirdoņa ir vajadzīga pareizai saraksta darbībai, tāpēc var būt papildus informācija.

Iesim cauri stiliem.

Galvenie stili ir failā cs-select.css... Ir stili, kas piešķir sarakstam neparastu izskatu, piemēram, bachiti skaņas.

Un, lai radītu stilu vēl nebijušam un oriģinālam, ir jābūt uzvarošam un atkarīgam no varas. Pirmajam dibenam () stila pirmajam solim:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

@ Font-face (fontu saime: "icomoon"; src: url ( "../Fonts/icomoon/icomoon.eot?-rdnm34"); src: url ( "../Fonts/icomoon/icomoon.eot?#iefix-rdnm34") Formāts ("embedded-opentype"), url ( "../Fonts/icomoon/icomoon.woff?-rdnm34") Formāts ("woff"), url ( "../Fonts/icomoon/icomoon.ttf?-rdnm34") Formāts ("truetype"), url ( "../Fonts/icomoon/icomoon.svg?-rdnm34#icomoon") Formāts ("svg"); fonta svars: normāls; fonta stils: normāls; ) Div.cs-skin-border (fons: caurspīdīgs; fonta izmērs: 2 em; fonta svars: 700; maksimālais platums: 600 pikseļi;) @media ekrāns un (maksimālais platums: 30 em) (.cs-skin-border (font-size: 1em;)) .cs-skin-border> span (apmale: 5 pikseļi solid # 000; apmales krāsa: iedzimta; pāreja: fons 0,2 s, apmales krāsa 0,2 s;) .cs-skin-border> span :: after, .cs-skin-border .cs-selected span :: after (font-family: "icomoon"; saturs: " \ E000 "; ) .Cs-skin-border ul span :: after (saturs: ""; necaurredzamība: 0;) .cs-skin-border .cs-selected span :: after (saturs: " \ E00e "; krāsa: # ddd9c9; fonta izmērs: 1,5 em; necaurredzamība: 1; pāreja: necaurredzamība 0,2s; ) .Cs-skin-border .cs-active> span (fons: #fff; border-color: #fff; krāsa: # 2980b9;) .cs-skin-border .cs-options (krāsa: # 2980b9; font- izmērs: 0,75 em; necaurredzamība: 0; pāreja: necaurredzamība 0,2 s, redzamība 0 s 0,2 s;) .cs-skin-border .cs-active .cs-options (caurredzamība: 1; pāreja: necaurredzamība 0,2 s;) .cs- skin-border ul span (polsterējums: 1em 2em; backface-redzamība: paslēpts;) .cs-skin-border .cs-options li span: hover, .cs-skin-border li.cs-focus span (fons: # f5f3ec ;)

Un apkārtējā failā ir daudz stilu (lai nodrošinātu gludumu) cs-skin-border.css.

visnovok

Kāpēc gan zrobish nemudināt jūsu vietnes unikālu dizainu! Pirmkārt un galvenokārt – nebaidieties eksperimentēt ar dizainu, krāsojiet to visu laiku. Ratiet un uzstādiet (ar eksperimentu ceļu) tieši to, ko pagodinās jūsu koristuvachi un smirdēšana, lai teiktu: "Oho, man vajadzētu būt kā dizainam, kas ir tik foršs visā vietnē!" 😉.

Ierosinātāju vienumu saraksta vērtības, kurām varat vibrēt vienu vai vairākus. būt ieskautam ar tagiem … .

tagu atribūti autofokuss automātiski noraida fokusējiet, kad malas ir bloķētas. Vērtību var iestatīt trīs veidos: ... ... ... atspējots Bloķēt vibrāciju no saraksta. Vērtību var iestatīt trīs veidos: ... ... ... vairāki Ļauj vienu stundu vibrēt sarakstā iekļauto vienumu skaitu. Slīdēja līdz brutālai cieņai, taču, ja ir daudz izvēles iespēju dot no vienas formas, var būt daži no palīgiem kopā ar vienu un to pašu cilvēku. Jūsu apstrādes programma ir vainīga noteiktu situāciju pārsūtīšanā un pareizajā apstrādē. nosaukums Ім'я saraksts. Objektu viskozs atribūts. nepieciešams Obligāti vainīgs preces pārvēršanā uz netukšām vērtībām. Ja tas nav visonano, pārlūkprogramma būs redzama un veidlapa netiks nosūtīta serverim. Skatu un izmaiņas nav iespējams saglabāt pārlūkprogrammā, un mēs to nevaram mainīt (ne IE un Safari gadījumā). izmērs Vertikālais izmērs sarakstā. Ja izlaidumu atribūts pārsniedz vērtību 1, tiek parādīts vienumu saraksts. Ja norādītais skaitlis ir lielāks par 1, tad saraksta punkti tiks parādīti logā ar tumšu ritināšanu. Ja atribūta vērtība ir lielāka, faktiskais vienumu skaits sarakstā ir mazāks, tad tiek pievienoti tukši vienumi. Ar їх viborі pagriežam tukšos laukus.

preču saraksts

Kozhen preču sarakstu ieskauj tagi ...... Atzīmes aizvēršana nav obligāta.

tagu atribūti

atspējots Bloķēt vibrējošo vienumu sarakstā. etiķete Sarakstā esošā vienuma atzīme. Ja vērtība ir etiķetes atribūts, tā vērtība tiks parādīta sarakstā, nevis teksta taga vidū (Nav īsti labs pārlūkprogrammā Firefox). atlasīts Vienums sarakstā, lūdzu, skatiet preces. vērtība Skriptam pārsūtītā vērtība dziedāšanas punkta izvēles brīdī. Kad tiek parādīts atribūts, skriptā tiks parādīts teksts, kas tiks nosūtīts pa labi no taga .

Visi atzīmes, kas ievietotas opcijas taga vidū, tiks ignorētas.

Mucu saraksts

tēja Kava pienu kāts tēvs

REZULTĀTS:

Atveriet sarakstu ar vairākām izvēlēm

tēja Kava pienu kāts tēvs

REZULTĀTS:

Tēja Kava Piens Shinka Sir

Vienumu grupa sarakstā

konteiners ... Atļauj grupēt punktus sarakstā. Visam nosaukumu diapazonam ādas grupas nosaukums tiks parādīts treknrakstā, un pārlūkprogrammas pievienos soli, tāpēc, atlasot vajadzīgo vienumu, varat sākt to lietot vienkāršāk.

par atzīmi pieejamie iekšējie atribūti un pod-apstrādes atribūti.

Butt ugruvannya vienumi sarakstā

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

REZULTĀTS:

Turklāt papildu nolūkā ādas grupai papildus CSS jūs varat rosefarbuvati savā krāsā.

Vizualizācija pēc saraksta vienumu krāsu grupas

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

REZULTĀTS:

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

... formas vietā ...

Visi formas elementi ir vainīgi vadības elementu izskaušanā, kas var būt diezgan daudz.

Veidlapas atribūti:

• Darbības atribūti satur servera failu ar skriptu, kas tiek izmantots galvenajai datu apstrādei, kuru var ignorēt no formas. Izsauciet visa faila kodu, kas jāraksta uz servera mov programmas, piemēram, uz mov php abo perl.
• Atribūts enctype norāda informācijas serverim pārsūtītās informācijas veidu, kas ir tikai teksta dati - teksts / vienkāršs, ja veidlapa tiek izmantota failu attēlošanai, tad jāizmanto daudzdaļīgs / form-data.
• Metodes atribūts norāda datu pārraides veidu. Mēs neiedziļināsimies detaļās kopumā, tomēr, teiksim, svarīgākai pārraidei izmantojiet pasta metodi.

Veidlapas elementi html

<ievades veids = "teksts" nosaukums = "pieteikšanās" size = "20" value = "(! LANG :(! LANG: Pieteikties" maxlength = "25" > !}!}

rezultāts:

• Tipa atribūta vērtība - text - to gadījumā, kas ir pats teksta lauks
• izmērs - teksta lauka lielums rakstzīmēs
• maxlength - maksimālais rakstzīmju skaits laukā
• vērtība - vālītes teksts tekstlodziņā
• name - elementa nosaukums, nepieciešams apstrādāt datus faila paraugā

rezultāts:


Laukā esošo tekstu aizstāj ar masku – zvaigznēm vai krūzēm

<ievades veids = "iesniegt" vērtība = "Vidraviti dani">

rezultāts:

Iesniegšanas poga atlasa visus datus no lietotāja ievadītās formas un pārsūta uz darbības formas atribūtos norādīto adresi.

<ievades veids = "atiestatīt" value = "(! LANG :(! LANG: Notīriet veidlapu" > !}!}

rezultāts:

Poga pagriež visu vadības elementu dzirnaviņas uz primāro (notīra veidlapu)

<ievades veids = "checkbox" name = "asp" value = "(! LANG :(! LANG: jā" > !}!} ASP<br> <ievades veids = "checkbox" name = "js" value = "(! LANG :(! LANG: jā" checked = "checked" > !}!} javascript<br> <ievades veids = "checkbox" name = "php" value = "(! LANG :(! LANG: jā" > !}!} PHP<br> <ievades veids = "checkbox" name = "html" value = "(! LANG :(! LANG: jā" checked = "checked" > !}!} HTML<br>

ASP
javascript
PHP
HTML



rezultāts:

ASP
javascript
PHP
HTML

html valodā patriarhs var kalpot vairāku izvēļu organizēšanai, tāpēc, ja nepieciešams un iespējams vibrēt dažas izvēles

<ievades veids = "radio" nosaukums = "grāmata" vērtība = "(! LANG :(! LANG: asp" > !}!} ASP<br> <ievades veids = "radio" nosaukums = "grāmata" vērtība = "(! LANG :(! LANG: js" > !}!} Javascript<br> <ievades veids = "radio" nosaukums = "grāmata" vērtība = "(! LANG :(! LANG: php" > !}!} PHP<br> <ievades veids = "radio" nosaukums = "grāmata" vērtība = "(! LANG :(! LANG: html" checked = "checked" > !}!} HTML<br>

ASP
Javascript
PHP
HTML




rezultāts:

ASP
Javascript
PHP
HTML

radio pogu html, lai izmantotu vienu decilkoh opciju izvēli

Atzīmētais atribūts nekavējoties iestatīs elementu

svarīgi: elementiem radio tas ir nepieciešams, bet atribūta vērtība nosaukums visiem grupas elementiem mums būs viens un tas pats: šāda veida vienībā problēmu nebūs, ja būs ieslēgts viens elements, es būšu iekļauts

Saraksts, wipadaє HTML

Sarakstam pievienotā muca ir redzama:

1 2 3 4 5 6

<atlasiet nosaukumu = "grāmatas" izmērs = "1"> <opcijas vērtība = "(! LANG :(! LANG: asp" > !}!} ASP</ Opcija> <opcijas vērtība = "(! LANG :(! LANG: js" > !}!} JavaScript</ Opcija> <opcijas vērtība = "(! LANG :(! LANG: php" > !}!} PHP</ Opcija> <opcijas vērtība = "(! LANG :(! LANG: html" selected = "selected" > !}!} HTML</ Opcija> </ Atlasīt>

ASP JavaScript PHP HTML

rezultāts:

• Saraksts, kas izskatās pēc galvas atzīmes — atlasiet — ko var izmantot, lai izlocītu pāri, un ādas vienums sarakstā ir opciju tags, kura vidū tiek parādīts vienumam teksts.
• Lieluma atribūts vērtībām "1" tiem, kuru sarakstā slēgtajā skatā ir redzams viens vienums, kas tiek parādīts, nospiežot uz izvēlnes rindām
• Atlasītais (opcijas) vienuma atribūts sakārtos tos, lai faktiskā prece būs redzama sarakstā, un inshі punkti tiks "izslēgti"

Lieliskiem un salokāmiem sarakstiem jauda pievienot virsrakstus- optgroup tags ar etiķetes atribūtu (rakstīts):

1 2 3 4 5 6 7 8 9 10 11 12

<atlasiet nosaukumu = "grāmatas" izmērs = "1"> <optgroup label = "angļu valodā"> <opcijas vērtība = "(! LANG :(! LANG: asp" > !}!} ASP</ Opcija> <opcijas vērtība = "(! LANG :(! LANG: js" > !}!} JavaScript</ Opcija> <opcijas vērtība = "(! LANG :(! LANG: php" > !}!} PHP</ Opcija> <opcijas vērtība = "(! LANG :(! LANG: html" selected = "selected" > !}!} HTML</ Opcija> </ Optgroup> <optgroup label = "krievu valoda"> <opcijas vērtība = "(! LANG :(! LANG: asp_rus" > !}!} ASP krievu valodā</ Opcija> <opcijas vērtība = "(! LANG :(! LANG: js_rus" > !}!} JavaScript krievu valodā</ Opcija> </ Optgroup> </ Atlasīt>

ASP JavaScript PHP HTML ASP krievu valodā JavaScript krievu valodā

Lai iegūtu lielāku elastību atlasiet dažus punktus vienas stundas laikā jāpievieno vairāku atribūts. Bet šajā gadījumā lieluma atribūtam ir jāiestata vērtība, vairāk, zem 1:

tekstu

rezultāts:

• Elementa platums atrodas atribūtā cols, it kā jūs vēlētos novietot simbolus horizontālā virzienā
• Atribūts rindas ir elementa rindu skaits

інші elementi

Papildu vienumi un atribūti

• Par vadības elementiem radioі izvēles rūtiņa manuāli vikoristovuvati papildu preces, Yaki, Pershe, lai pieradinātu teksta piesaisti pašam radio elementam vai izvēles rūtiņai, citā veidā pievienojiet apli, noklikšķinot:

<ievades veids = "checkbox" id = "book1"> <etiķete = "grāmata1"> ASP</ Etiķete>

ASP

Lietojumprogrammai ir rakstīts (iezīmes tags) izvēles rūtiņas elementam. Saite ir redzama caur id atribūtu, kura vērtība ir norādīta atribūtu rakstīšanai.

rezultāts:



• Atspējotais atribūts ļauj bloķēt elementu, kas lietotājam nav pieejams:

<ievades veids = "teksts" nosaukums = "pieteikšanās" size = "20" value = "(! LANG :(! LANG: Pieteikties" maxlength = "25" disabled = "disabled" >!} !} <ievades veids = "checkbox" name = "asp" value = "(! LANG :(! LANG: jā" > !}!} ASP<br> <ievades veids = "checkbox" name = "js" value = "(! LANG :(! LANG: jā" checked = "checked" disabled = "disabled" > !}!} javascript<br>


ASP
javascript