Ողջույն, բլոգի կայքի հարգելի ընթերցողներ: Որպես բարդությունների ուսումնասիրության մաս, որպես հաջորդ առաջադրանք, մենք կշարունակենք վերլուծել կայքում համապատասխան ձևաթղթերի ստեղծման մանրամասները:
Այսօր մենք կսովորենք, թե ինչպես ստեղծել բացվող (բացվող) ցուցակներ, ներառյալ բազմակի ընտրությամբ, օգտագործելով ընտրություն և տարբերակ, ինչպես կառուցել տեքստային դաշտ textarea-ի միջոցով, ինչպես նաև խոսել պիտակների միջոցով ձևերի ֆունկցիոնալությունը ընդլայնելու հնարավորության մասին դաշտերի հավաքածու, պիտակ և լեգենդ.
Հիշեցնեմ, որ էջում առկա ցանկացած ձև ստեղծվում է օգտագործելով և նախատեսված է օգտագործողից ցանկացած տեղեկատվություն մուտքագրելու և սերվեր ուղարկելու համար (օրինակ -):
Ցավոք, հիպերտեքստի նշագրման լեզվի գործիքները մեզ թույլ չեն տալիս ուղղակիորեն մշակել այս տեղեկատվությունը, ուստի HTML-ով մենք ստեղծում ենք միայն ձևի տեսքը, և անհրաժեշտ տվյալները ուղարկվում են մշակման: Այդ նպատակով վեբ սերվերի վրա նպատակաուղղված ստեղծվում է հատուկ ֆայլ, որը գրված է սերվերի լեզուներից մեկով (առավել հաճախ՝ PHP): Ասենք, հետադարձ կապի համար կարող եք ստեղծել mail.php ֆայլ, որը կլինի մշակողը:
Այս հրապարակման մեջ ստացված տեղեկատվության գործնականում օգտագործելիս մի մոռացեք, թե ինչպիսի տեսք պետք է ունենա այն, որտեղ տեսանելի էջի բոլոր տարրերի կոդերը, ներառյալ ձևերը, միշտ գտնվում են մարմնի պիտակի մեջ:
Այս տեղեկատվությունը կարևոր է, քանի որ նույնիսկ եթե դուք օգտագործում եք մշակողի բոլոր ժամանակակից ներկառուցված գործիքները (հիշեցնում եմ ձեզ, որ այս ֆունկցիոնալության իրականացման առաջին նշանն էր), դուք պետք է հստակ հասկանաք հիմնական թեգերի օգտագործման մեխանիզմը, այնուհետև խմբագրեք HTML-ը: կոդը, որի անհրաժեշտությունը ժամանակ առ ժամանակ առաջանում է, վերածվում են զվարճալի գործունեության։
2. բազմակի- այս հատկանիշը, որը չունի պարամետրեր, թույլ է տալիս բազմակի ընտրություն, ի տարբերություն վերը նշված օրինակի, որտեղ կարող եք ընտրել միայն մեկ տարր (տող): Փորձեք մկնիկով ընտրել այս ցուցակում միանգամից մի քանի տող (մեկ առ մեկ ցանկացած վայրում, սեղմած պահելով Ctrl ստեղնը կամ Shift-ի միջոցով հերթով հետևելով հերթով).
3. չափը- սահմանում է բացվող ցուցակի բարձրությունը, այսինքն՝ ցուցադրվող տողերի քանակը: Եթե առկա է բազմակի հատկանիշը, և չափը նշված չէ (ինչպես վերը նշված օրինակում), ապա լռելյայնորեն ցուցադրվում են չորս տողեր, և, օրինակ, size="5"-ով հինգը տեսանելի կլինի.
Option Textarea Label Fieldset Legend |
4. Պահանջվում է(պարամետրեր չունի) - նշում է, որ պետք է ընտրություն կատարել նախքան տվյալներ մշակողին ուղարկելը: Եթե ցանկից որևէ տարր ընտրված չէ, ապա ձևի տվյալները չեն ուղարկվի.
Option Textarea Label Fieldset Legend |
5. ավտոմատ ֆոկուս(կարևոր չէ) - էջը բեռնելուց անմիջապես հետո կենտրոնացնում է ցանկը: Բացի այդ, եթե օգտագործողը սովոր է ստեղներով կատարել գործողությունների մեծ մասը, ապա հենց այդպիսի նախապես կազմաձևված ֆոկուսը կօգնի ընտրություն կատարել ցուցակից՝ օգտագործելով ստեղնաշարի սլաքները՝ առանց որևէ մկնիկի օգտագործման.
6. Անաշխատունակ(առանց պարամետրերի) - արգելափակում է մուտքը դեպի ցուցակ (անջատում է այն): Գործնականում այն սովորաբար օգտագործվում է սկրիպտների հետ միասին այն դեպքերում, երբ դուք պետք է միացնեք բացվող ցուցակը միայն որոշակի պայմանների առկայության դեպքում.
7. Ձևը— ցուցակը կապում է մեկ կամ մի քանի ձևերի հետ, որոնց այն պատկանում է, բայց գտնվում է բեռնարկղից դուրս
. Միևնույն ժամանակ, պարամետրը գրվում է ձևի հատկանիշի արժեքի դերում գլոբալ id հատկանիշ, որն ավելացվում է ձևի պիտակին՝
Ցանկից ընտրեք Option Textarea Label Fieldset Legend |
Մի շփոթեք ընտրված թեգի հատկանիշը ձևը ստեղծելու հիմնական թեգի հետ: Վերևի օրինակում id="data" հատկանիշը ավելացվում է ձևի պիտակին, իսկ form="data" հատկանիշը ավելացվում է ընտրված պիտակին, ինչը հնարավորություն է տալիս բացվող ցուցակը կապել կոնկրետ ձևի հետ:
տարբերակի պիտակի ատրիբուտները
1. արժեքը- որոշում է բացվող ցանկի արժեքը, որը կուղարկվի սերվեր (ձևաթղթերի մշակիչ): Փաստորեն, անունը ուղարկվում է մշակողին, որը սահմանված է ընտրված թեգի անվան հատկանիշով և արժեքը(այս օրինակի համար՝ 1, 2, 3, 4, 5), որը համապատասխանում է բացվող ցանկի ընտրված տողին.
Option Textarea Label Fieldset Legend |
2. Անաշխատունակ— արգելափակում է բացվող ցանկի տարրը ընտրության համար:
Option Textarea Label Fieldset Legend |
Ինչպես երևում է օրինակից, «Option» տողը ակտիվ չէ և չի կարող ընտրվել:
3. պիտակ- ցուցադրում է ցանկի այս կամ այն տարրի տեքստի բովանդակությունը (որը նրա արժեքն է): Եթե առկա է պիտակ, ապա ցուցադրվում է այս հատկանիշի արժեքին նույնական տողը, և ընտրանքային պիտակի ներսում տեքստի բովանդակությունը անտեսվում է: Նույնը տեղի է ունենում, եթե բովանդակությունը միջեւ իսպառ բացակայում է։
Textarea պիտակ Label tag Fieldset tag Legend tag |
Տեսնել. Վերևում ներկայացված օրինակում կոդի տարբերակի առաջին տողը դատարկ է (աղյուսակի ձախ կողմում), սակայն նշված է label="Option tag" պարամետրը, ինչի արդյունքում այս տեքստը հայտնվել է ցանկում (ին. աջ կողմը): Կոդի երկրորդ տողը պարունակում է «Textarea Tag» տեքստը որպես ընտրանքային պիտակի բովանդակություն, սակայն աջ կողմում բացվող ցանկը ցույց է տալիս «Textarea» բառը, որը համապատասխանում է label="Textarea" արժեքին:
4. Ընտրված է- ընդգծում է բացվող ցանկի ընթացիկ տարրը.
Option Textarea Label Fieldset Legend |
Եթե առկա է մի քանի հատկանիշ, ապա կարելի է ընտրել մեկից ավելի տարր.
Option Textarea Label Fieldset Legend |
optgroup պիտակի ատրիբուտներ
Եթե բացվող ցուցակը պետք է ինչ-որ կերպ տեսակավորվի, օրինակ՝ բաժանվի խմբերի, ապա այս խմբերից յուրաքանչյուրի համար օգտագործվում է կոնտեյներ՝ բաղկացած բացվող և փակվող optgroup թեգերից, որը պարունակում է բացվող ցուցակի տարրերի մի մասը: Այնուամենայնիվ, նման բացվող ցուցակը հարմարեցնելու երկու հատկանիշ կա:
1. պիտակ- սահմանում է յուրաքանչյուր խմբի անունը որպես պարամետր.
Option Textarea Label Fieldset Legend |
Նույնը, բայց ընտրված պիտակի բազմակի և «7» չափով.
Option Textarea Label Fieldset Legend |
2. Անաշխատունակ(առանց արժեքների) - արգելափակում է խմբի տարրերի ընտրությունը, որոնց նկատմամբ այն սահմանված է, ավելին, ոչ ակտիվ տարրերը սովորաբար մոխրագույն են.
Option Textarea Label Fieldset Legend |
Կարճ տեսանյութը շատ օգտակար կլինի այստեղ.
Տեքստային դաշտը ձևով textarea-ի միջոցով
Կայքի մեկ այլ ձևի տարր, որը մենք կքննարկենք, դաշտ է, որը կարող է մուտքագրել բազմագիծ տեքստ դրանում: Այն կարող է ստեղծվել՝ օգտագործելով textarea պիտակը: Առանց լռելյայն ատրիբուտների, այս պիտակի կիրառումը կբերի հետևյալ արդյունքը.
Մուտքագրեք տեքստը. |
Դաշտում կարող եք կատարել տողերի ընդմիջումներ, մինչդեռ տեքստը կփոխանցվի սերվերի մշակողին՝ հաշվի առնելով կատարված փոփոխությունները: Դաշտը կարելի է ձգել լայնությամբ և երկարությամբ՝ մկնիկի օգնությամբ բռնելով ներքևի աջ անկյունը, որը նշված է երկու անկյունագծային գծերով։
Այժմ փորձենք սկզբնական կոդը ավելացնել մի քանի ատրիբուտներ՝ պարամետրերով.
1. Անուն- Նշում է տեքստի տարածքի անվանումը որպես արժեք՝ այն նույնացնելու համար, երբ ձևի տվյալները ներկայացվեն, երբ դրանք մշակվեն սերվերում:
2. Գնդ- դաշտի լայնությունը, որը որպես պարամետր սահմանվում է կողք կողքի կանգնած միանման նիշերի քանակով, որոնք տեղադրված են հորիզոնական: Նախնական արժեքը 20 է.
3. Շարքեր- տեքստային դաշտի բարձրությունը, որը որոշվում է տողերի քանակով: Եթե օգտագործողի կողմից մուտքագրված տեքստի տողերի թիվը մեծ է այս հատկանիշով սահմանված արժեքից, աջ կողմում կհայտնվի ուղղահայաց ոլորման տող:
4. Առավելագույն երկարությունը- Նշում է նիշերի առավելագույն քանակը, որոնք կարող են տեղադրվել տեքստային դաշտում: Եթե սահմանը գերազանցվի, հետագա մուտքագրումը հնարավոր չի լինի:
Ստորև բերված է վերը նշված բոլոր ատրիբուտներով օրինակ, որոնցից յուրաքանչյուրի ազդեցությունը կարող եք ստուգել ինքներդ՝ պարզապես տեղադրելով անհրաժեշտ քանակությամբ տառեր և տողեր տեքստի տարածքում (կարող եք պարզապես մի քանի անգամ մուտքագրել նույն նիշը).
Մուտքագրեք տեքստը. |
5. Minlength- Նշում է նիշերի նվազագույն քանակը, որոնք պետք է մուտքագրվեն տեքստի տարածքում: Եթե օգտատերը փորձի ավելի քիչ նիշերով տեքստ ուղարկել, զննարկիչը կցուցադրի կարճ հաղորդագրություն տեղեկատվություն պարունակող տեղեկություններով, որտեղ նշված կլինի ձևի բովանդակությունը լրացնելու անհրաժեշտությունը և քանի նիշ արդեն մուտքագրված:
7. Միայն կարդալու համար(առանց պարամետրերի) - եթե այս հատկանիշը կցված է textarea-ին, ապա տեքստային դաշտն անհասանելի կլինի օգտվողների համար փոխելու համար և կլինի միայն կարդալու համար: Բայց դուք կարող եք կենտրոնանալ դրա վրա (կուրսորը տեղափոխել դաշտ և սեղմել ձախ մկնիկի կոճակը), ինչպես նաև ընտրել և պատճենել (մասնակի կամ ամբողջությամբ) տեքստը.
Եվս մի քանի ատրիբուտներ, որոնք իրականացնում են լրացուցիչ գործառույթներ դաշտերը լրացնելիս.
8. Ավտոլրացում- ցույց է տալիս, թե արդյոք բրաուզերը պետք է հուշումներ տա, երբ օգտագործողը լրացնում է ձևը նախկինում մուտքագրված տվյալների հիման վրա և հնարավորություն է տալիս ավտոմատ կերպով տեղադրել համապատասխան տեքստը:
Ունի ընդհանուր երկու պարամետր: վրա(վրա) և անջատված(անջատված). Ահա մի օրինակ կոդը.
Այս հատկանիշը, որը դրված է «on», աշխատում է միայն այն դեպքում, երբ օգտատիրոջ վեբ զննարկիչում միացված են ձևի ավտոմատ լրացման դաշտերը:
9. Պատել- սահմանում է զննարկչի տողերի փաթեթավորման կանոնները տեքստի տարածքում՝ օգտագործելով երեք արժեք.
Փափուկ- նիշերի մի շարք, որոնք լայնությամբ չեն տեղավորվում դաշտում, ավտոմատ կերպով փաթաթվում են նոր տողով: Միաժամանակ պրոցեսորը տեքստը կուղարկվի մեկ տողով. Այն դեպքում, երբ օգտագործողը տեքստը փաթաթում է ցանկացած ցանկալի վայրում՝ օգտագործելով «Enter» ստեղնը, ապա այդպիսի փաթաթումը պահպանվում է վեբ ձևը ներկայացնելիս:
Մուտքագրեք տեքստը. |
Դժվար- գծագրերը կատարվում են ավտոմատ կերպով, եթե տեքստը լայնությամբ չի տեղավորվում դաշտում, և երբ ուղարկվում է մշակողին, այդպիսի գծագրերի տեղերը կպահպանվեն: Այս պարամետրը օգտագործվում է միայն cols հատկանիշի հետ համատեղ:
Մուտքագրեք տեքստը. |
Անջատված- անջատել գծերի ընդմիջումները: Եթե դուք մուտքագրեք տեքստի հատված առանց մեխանիկական փոխանցման՝ օգտագործելով «Enter» ստեղնը, ապա ամբողջ տեքստը կտեղադրվի մեկ տողի վրա, և կհայտնվի հորիզոնական ոլորման տող.
Մուտքագրեք տեքստը. |
10. ավտոմատ ֆոկուս(առանց պարամետրերի) - սկսում է կենտրոնանալ տեքստային դաշտի վրա, երբ բեռնված է ձևով էջը:
11. Անաշխատունակ- ի տարբերություն readonly հատկանիշի (որը նաև արգելում է խմբագրել դաշտի բովանդակությունը, բայց հնարավորություն է տալիս կենտրոնանալ դրա վրա), այն ամբողջությամբ արգելափակում է մուտքը դեպի տեքստի տարածք, որը սովորաբար ներկված է մոխրագույնով.
Ողջույններ իմ բլոգի բոլոր ընթերցողներին: Այսօր ես ձեզ կասեմ, թե ինչպես կարելի է բացվող ցուցակ կազմել html-ում, ինչ պիտակներ և ատրիբուտներ պետք է օգտագործել, ինչպես նաև ինչ նպատակների համար կարող է դա ձեզ անհրաժեշտ լինել:
Ընտրեք պիտակը և բացվող ցուցակի ստեղծումը
Այսպիսով, html-ում բացվող ցուցակը ստեղծվում է զուգակցված ընտրված պիտակի միջոցով, որում տեղադրվում են զուգակցված ընտրանքների պիտակներ: Հենց դրանցում են գրանցվում բոլոր այն տարբերակները, որոնք կառաջարկվեն ցանկի վրա սեղմելիս։ Օրինակ:
Ընտրեք կենդանի
Այս դեպքում այն, ինչ ցուցադրվում է տարբերակի բացման և փակման միջև, կտեսնեք էկրանին, և արժեք հատկանիշի մեջ պարունակվող արժեքը կուղարկվի սերվեր կամ կմշակվի սկրիպտի միջոցով:
Ցուցակը html-ում կարող է լինել նորմալ և բազմակի ընտրությամբ: Որպեսզի հնարավոր լինի ընտրել մի քանի տարրեր, դուք պետք է ավելացնեք դատարկ բազմակի հատկանիշ ընտրվածին: Բազմաթիվ արժեքներ ընտրելու համար պահեք ctrlև սեղմեք մկնիկի ձախ կոճակը:
Մեկ այլ օգտակար հատկանիշ չափն է: Այն թույլ է տալիս ընտրել, թե քանի տող ցուցադրվի բացվող ցանկում:
Մեկ այլ հատկանիշ անջատված է: Ցանկը անհասանելի է դարձնում տարրերը սեղմելու և դիտելու համար, բայց միևնույն ժամանակ այն տեսանելի է էջում։
Պահանջվում է html5 հատկանիշ: Եթե սահմանված է, ձևը չի ներկայացվի, քանի դեռ բացվող ցանկից արժեք չի ընտրվել: Ընդհանրապես, այն դառնում է պարտադիր ընտրություն: Մինչդեռ հատկանիշը չի աշխատում բոլոր բրաուզերներում:
տարբերակի պիտակի ատրիբուտները
Փաստորեն, ընտրվածը ծառայում է միայն որպես ցանկի տարրերի կոնտեյներ, դրանք իրենք են սահմանվում՝ օգտագործելով տարբերակի պիտակը: Այն ունի արժեքային պարամետր, ինչպես արդեն պարզել ենք, բայց բացի սրանից կան ուրիշներ։ Օրինակ:
Անջատված - ցուցակի տարրը դարձնում է անհասանելի ընտրության համար: Այն կցուցադրվի, բայց դուք չեք կարող սեղմել դրա վրա:
Ընտրված - Տարրը կընտրվի լռելյայն: Սովորական ցանկում առանց արժեքի այս հատկանիշը կարող է սահմանվել միայն մեկ տարրի, բազմակի ցուցակում՝ մի քանիսի:
Կարևոր պարզաբանում ճիշտ աշխատանքի համար
Եթե ընտրության արդյունքը պետք է ուղարկվի սերվեր կամ մշակվի սկրիպտների միջոցով, ապա ընտրվածը դրեք ձևի մեջ, որպեսզի սխալներ չառաջանան: Փաստն այն է, որ բացվող ցուցակն ի սկզբանե ստեղծվել է հենց որպես ձևի տարրերից մեկը:
Ինչի համար է ընտրված:
Սովորաբար դա կարող է օգտակար լինել ձեզ համար, եթե դուք գրանցվում եք ձեր կայքում, կամ ցանկանում եք հարցում անցկացնել: Տարրը մի թերություն ունի՝ այն այնքան էլ լավ չի փոխում տեսքը css-ի միջոցով։
Լռելյայնորեն, երբ սեղմում եք ցուցակի վրա, հայտնվում է կապույտ շրջանակ, ցուցակի տարրերը, որոնց վրա սավառնում է կուրսորը, ընդգծված են նույն գույնով: Որպեսզի սեղմելիս շրջանակը չհայտնվի կամ ընդգծվի այլ գույնով, կարող եք գրել հետևյալ ընտրիչը.
ընտրել:կենտրոնանալ(
ուրվագիծ՝ 1px պինդ նարնջագույն;
}
Շրջանակն այժմ նարնջագույն կլինի:
Ընտրանքը կարող է նաև ոճավորվել, բայց երբ սավառնում եք որևէ տարրի վրա, նրա ֆոնը դառնում է կապույտ, և ինչ-ինչ պատճառներով դա չի փոխվում ոճերի միջոցով:
Տարբերակ (
գույնը՝ շագանակագույն
ֆոն՝ ջրային;
}
Ի դեպ, միգուցե ձեզնից մեկը գիտի, թե ինչպես փոխել ֆոնի գույնը, երբ սավառնելիս սավառնում եք իրի վրա՝ օգտագործելով css:
Դա, ըստ էության, վերաբերում է ընտրված պիտակի և դրա կիրառմանը: html-ում ոչ մի լրացուցիչ հնարավորություն նախատեսված չէ դրա համար: Նրա հետ մնացած բոլոր գործողությունները կարող են կատարվել Javascript-ի և php-ի միջոցով: Օրինակ, եթե ծննդյան տարեթիվն ընտրելու համար ցուցակ ստեղծեք և կարող է լինել 80-100 տարբեր տարբերակ, կգրեի՞ք դրանք ձեռքով:
Պարզապես դրա համար անհրաժեշտ է օգտագործել ծրագրավորում, մասնավորապես օղակը: Լավ, լավ, սա այլ խոսակցության թեմա է, բայց այսօրվա համար սա այն ամբողջ տեղեկությունն է, որը ես ուզում էի ձեզ ասել։ html-ում կարող եք ծանոթանալ այլ հիմնական թեգերի հետ։
HTML տարբերակի թեգը օգտագործվում է բացվող ցուցակ ստեղծելու համար, որը թույլ է տալիս օգտվողին ընտրել մեկ տարբերակ նախապես սահմանված արժեքների շարքից:
Օգտագործողի համար տեսանելի տեքստը կարող է տարբերվել արժեք հատկանիշում նշված տեքստից: Ահա թե ինչպես կարող եք ստեղծել բացվող ցուցակ.
- Բացվող ցուցակը ստեղծվում է պիտակի միջոցով
- Պիտակի ներսում
- Պիտակի մեջ
Դուք կարող եք նաև տեղադրել CSS դաս՝ բացվող ցուցակը ոճավորելու համար ID օգտագործելու փոխարեն:
Հաջորդ բաժնում ես ցույց կտամ օրինակներ, թե ինչպես օգտագործել HTML բացվող ցուցակը JavaScript/JQuery-ում: Օրինակները ցույց կտան նաև, թե ինչպես ոճավորել
Պարզ բացվող ցուցակի ստեղծման օրինակ
HTML-ի ընտրության ընտրանքի այս օրինակն օգտագործվում է բացվող ցուցակ ստեղծելու համար՝ ընտրելու երեք տարբերակներով.
Վերևի օրինակում բացվող ցուցակը ստեղծելու համար օգտագործվում է հետևյալ նշումը.
Օգտագործելով արժեք հատկանիշը
Ինչպես նշվեց ավելի վաղ, արժեք հատկանիշի արժեքը կարող է տարբերվել էջում ցուցադրված տեքստից: Օրինակ՝ օգտատերերի համար կարող եք ցուցադրել երկրների կամ գույների անունները և արժեք հատկանիշում օգտագործել կարճ կոդեր:
Հետևյալ օրինակում մենք կստեղծենք բացվող ցուցակ արժեքի հատկանիշով.
Դիտեք առցանց ցուցադրությունը և կոդը
Tag-ի համար
JavaScript-ում ընտրված տարբերակ մուտք գործելու օրինակ
Այժմ ստեղծենք ընտրված տարբերակի արժեքին մուտք գործելու և որոշ գործողություններ կատարելու օրինակ։ Նույն ցուցակը, ինչպես վերը նշված օրինակում, մենք ստեղծում ենք գունային ընտրանքներով: Ընտրվելուց հետո սեղմեք կոճակը՝ այդ գույնը փաստաթղթում կիրառելու համար.
Դիտեք առցանց ցուցադրությունը և կոդը
HTML տարբերակի արժեքը օգտագործում է հետևյալ կոդը.
Կոդերի հետևյալ տողը օգտագործվում է JavaScript-ում՝ տարբերակի արժեքի հատկանիշի արժեքին մուտք գործելու համար
var seltheme = document.getElementById («selcolor»).արժեք;
Երբ կոճակը սեղմվում է, կոչվում է JS ֆունկցիա, որը վերագրում է բացվող ցանկում ընտրված արժեքը փոփոխականին: Այս արժեքը օգտագործվում է ընթացիկ փաստաթղթին գույն կիրառելու համար:
jQuery-ում տեսանելի տեքստի հասանելիություն
Այս անգամ ես կօգտագործեմ JQuery՝ ընտրված տարբերակի արժեքը մուտք գործելու համար՝ և՛ տեքստ, և՛ արժեք: Այս ցուցադրությունում ես մուտք կունենամ տեսանելի տեքստ HTML-ում ընտրանքային պիտակի մեջ.
Դիտեք առցանց ցուցադրությունը և կոդը
Պիտակի յուրաքանչյուր տարբերակի կոդում
Ահա թե ինչպես է մուտքագրվում այս արժեքը HTML ընտրելու տարբերակը ընտրված է JavaScript-ը:
var selectedcolor = $("#jqueryselect option:selected").text();
Դուք կարող եք նաև մուտք գործել արժեք՝ օգտագործելով jQuery $.val() մեթոդը՝
var selectedcolor = $("#jqueryselect").val();
Փոխարինեք այս տողը վերևի օրինակում, և կոդը տեսանելի տեքստի փոխարեն կցուցադրի արժեք հատկանիշի կարճ կոդը/գույնի արժեքը:
PHP սկրիպտում արժեք ստանալու օրինակ
Բացվող ցանկից ընտրված տարբերակի արժեքը ստանալու այս օրինակում ձևը ստեղծվում է պիտակի միջոցով
Դիտեք առցանց ցուցադրությունը և կոդը
Օրինակում օգտագործված ձևի մեթոդը POST է, այնպես որ կարող եք ստանալ ձևի արժեքները՝ օգտագործելով $_POST[“”] PHP զանգվածը: Սա օրինակում օգտագործված ձևի կոդը.
Եվ ահա, թե ինչպես է PHP սկրիպտը օգտագործվում HTML-ի ընտրության ընտրանքի արժեքը ստանալու համար.
".$_POST["selphp"]։"; } ?>
Եթե ձևը ունի GET մեթոդ, ապա օգտագործեք PHP զանգված $_GET[“”].
Բացվող ոճերի սահմանում CSS-ով
Հիմա եկեք տեսնենք, թե ինչպես ոճավորել բացվող ցանկը:
Դիտեք առցանց ցուցադրությունը և կոդը
Box-shadow հատկությունը այստեղ օգտագործվում է գծային գրադիենտի հետ միասին: CSS-ի ամբողջական կոդը այսպիսի տեսք ունի.
Selcls ( լիցք՝ 3px; եզրագիծ՝ պինդ 1px #517B97; ուրվագիծ՝ 0; ֆոն՝ -webkit-gradient (գծային, ձախ վերև, ձախ 25, from(#FFFFFF), color-stop (4%, #CAD9E3), մինչև (#FFFFFF)); ֆոն՝ -moz-linear-gradient (վերև, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); տուփ-ստվեր՝ rgba(0,0,0, 0.1) 0px 0px 8px; -moz- տուփ-ստվեր՝ rgba(0,0,0, 0,1) 0px 0px 8px; -webkit-box-shadow՝ rgba(0,0,0, 0,1) 0px 0px 8px; լայնությունը՝150px;)
Կլորացված անկյուններ սահման-շառավիղ հատկությամբ
HTML ընտրության ընտրանքի համար մենք կսահմանենք CSS3 border-radius հատկությունը, որպեսզի անկյունները կլորացվեն: Գունային սխեման նույնպես փոխվում է. Դուք կարող եք փորձարկել սահմանները, լայնությունները, լուսանցքները և այլ հատկություններ, ինչպես ցանկանում եք.
Դիտեք առցանց ցուցադրությունը և կոդը
Օգտագործելով բազմաթիվ CSS հատկանիշներ և ոճեր
Օգտագործողներին ցանկից մի քանի տարբերակ ընտրելը թույլ տալու համար օգտագործեք բազմակի հատկանիշը: Վերոնշյալ օրինակում կարելի է ընտրել միայն մեկ տարբերակ: Բազմաթիվ օգտագործելիս կարող եք ընտրել մի քանի տարբերակ՝ սեղմելով CTRL ստեղնը.
Դիտեք առցանց ցուցադրությունը և կոդը
Այս հոդվածում մենք կքննարկենք տարրեր, որոնք թույլ են տալիս ստեղծել բացվող ցուցակներ, սովորել, թե ինչպես ձևավորել խմբեր այս ցուցակներում, հաշվի առնել, թե ինչպես անջատել տարրերը և նույնիսկ ցուցակների խմբերը, ծանոթանալ մի տարրի հետ, որը թույլ է տալիս ստեղծել բազմաբնույթ - տողի տեքստային դաշտ, այն կարող եք հետագայում օգտագործել HTML ձևերի ներսում (տարր
Բացի այդ, ձևի ներսում տեղադրեցինք կոճակ, որը ծառայում է ձևը (տարր կոճակի տիպով «submit form»: type = «submit»):
Մեր օրինակի արդյունքը.
Տեքստի տարածքի գործիքի հուշում
Եվ այսպես, մենք կքննարկենք վերջնական օրինակը և կանցնենք այս ձեռնարկի հոդվածի գործնական առաջադրանքին:
Շնորհիվ հատկանիշի (HTML թեգ
Գործիքների հուշման տեքստը թաքցվում է, երբ օգտվողը տեքստային դաշտում նշում է արժեք (ցանկացած նիշ), եթե այն հեռացվի, գործիքի հուշումը նորից կցուցադրվի:
Դիտարկենք օգտագործման օրինակ.
type = "submit" name = "submitInfo" value = "(!LANG:submit" > !}
Այս օրինակում մենք ստեղծել ենք երկու տեքստային տարածք (տարր
Նկատի ունեցեք, որ եթե տեքստային դաշտը միայն կարդալու համար է, ապա բովանդակությունը հնարավոր չէ փոխել, բայց օգտվողը դեռ կարող է նավարկել դեպի բովանդակություն, ընտրել այն և պատճենել այն:
Բացի այդ, ձևի ներսում տեղադրեցինք կոճակ, որը ծառայում է ձևը (տարր կոճակի տիպով «submit form»: type = «submit»):
Մեր օրինակի արդյունքը.
Հարցեր և առաջադրանքներ թեմայի վերաբերյալ
Հաջորդ թեմային անցնելուց առաջ կատարեք գործնական առաջադրանքը.
- Օգտագործելով ձեռք բերված գիտելիքները՝ թափուր աշխատատեղի տեղադրման համար կազմեք հետևյալ ձևաթուղթը.
Առաջադրանքին անցնելուց առաջ օրինակը բացեք նոր պատուհանում և ուշադիր ուսումնասիրեք ձևը, որպեսզի կրկնեք դրա բոլոր կետերը: Առաջադրանքը կատարելու համար ձեզ անհրաժեշտ կլինի գիտելիք հոդվածից։ Եթե բաց եք թողել, ապա վերադարձեք այն ուսումնասիրելու։
Վարժությունն ավարտելուց հետո ստուգեք էջի կոդը՝ բացելով օրինակը առանձին պատուհանում՝ համոզվելու համար, որ ամեն ինչ ճիշտ եք արել:
Դուք կարող եք ստեղծել բացվող ցուցակ HTML-ում՝ օգտագործելով թեգը ընտրել. Բացի բացվող (կամ «բացվող») ցանկից, պիտակը ընտրելթույլ է տալիս ստեղծել ցանկի տարր բազմակի ընտրությամբ: Տեգ օգտագործելու շարահյուսություն ընտրել HTML-ն ունի հետևյալ տեսքը.
Այստեղ պիտակով տարբերակտրված են ցանկի տարրերը.
Դիմումի արդյունքը.
Էլեկտրոնիկա Սիրոեժկին Չիժիկով Կուկուշկինա
SELECT պիտակի ատրիբուտներ
Հաշվի առեք պիտակի հատկանիշները ընտրել:
- Անուն
- չափը- ցանկում ցուցադրված տողերի քանակը (համար);
- բազմակի- ներառում է բացվող ցանկի տարրերի բազմակի ընտրության գործառույթը.
- անաշխատունակ- արգելափակում է մուտքը տարր;
- ձեւը- թույլ է տալիս բացվող ցուցակը կապել ձևի հետ (կարող է անհրաժեշտ լինել, եթե ցուցակն ինքնին դուրս է այն ձևից, որին այն պետք է կցվի): Ձևի id-ը փոխանցվում է որպես փաստարկ:
Թերևս սրանք բոլորը պիտակի հիմնական ատրիբուտներն են ընտրելորոնք առավել հաճախ օգտագործվում են. Այժմ տեսնենք, թե ինչպես կարելի է HTML-ում բացվող ցուցակ կազմել՝ օգտագործելով նշված ատրիբուտները.
OPTION պիտակի ատրիբուտներ
Նշել տարբերակ, ինչպես արդեն նշվեց, թույլ է տալիս սահմանել բացվող ցուցակի երեխաները ընտրել, որն իր հերթին հանդես է գալիս որպես կոնտեյներ։ Նշել տարբերակունի իր սեփական հատկանիշները.
- անաշխատունակ- արգելք է սահմանում ցուցակի այս տարրի ընտրության վրա.
- պիտակ- թույլ է տալիս պիտակ սահմանել ցանկի ընթացիկ տարրի համար (պիտակի մեջ նշված տեքստի փոխարեն ցուցադրվում է պիտակի արժեքը, որը թույլ է տալիս ցուցադրել կրճատված արժեք); Ուշադրություն. հատկանիշը չի աջակցվում Firefox բրաուզերում
- ընտրված- ընթացիկ ցանկի տարրը կընտրվի լռելյայն.
- արժեքը- արժեքը, որը կփոխանցվի սերվերին.
Եկեք նայենք պիտակի առաջադեմ օգտագործման դեպքին տարբերակ:
Այս օրինակի արդյունքը կունենա հետևյալ տեսքը.
Պարոն Էլեկտրոնիկ Սիրոեժկին Չիժիկով Կուկուշկինա
Nubex կայքի ստեղծողն ունի ձևաստեղծ մոդուլի միջոցով անհատական ձևեր ստեղծելու հնարավորություն: «Nubex»-ում բացվող ցուցակների աշխատանքը նկարագրված է հոդվածում.