HTML ձևի ստեղծում: Ինչպե՞ս է կատարվում բացվող ցուցակը html-ում: Ձևերի ցուցակների բացվող տարրերի խմբերի ստեղծում

Ողջույն, բլոգի կայքի հարգելի ընթերցողներ: Որպես բարդությունների ուսումնասիրության մաս, որպես հաջորդ առաջադրանք, մենք կշարունակենք վերլուծել կայքում համապատասխան ձևաթղթերի ստեղծման մանրամասները:

Այսօր մենք կսովորենք, թե ինչպես ստեղծել բացվող (բացվող) ցուցակներ, ներառյալ բազմակի ընտրությամբ, օգտագործելով ընտրություն և տարբերակ, ինչպես կառուցել տեքստային դաշտ 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-ում: Օրինակները ցույց կտան նաև, թե ինչպես ոճավորել

Օգտագործելով արժեք հատկանիշը

Ինչպես նշվեց ավելի վաղ, արժեք հատկանիշի արժեքը կարող է տարբերվել էջում ցուցադրված տեքստից: Օրինակ՝ օգտատերերի համար կարող եք ցուցադրել երկրների կամ գույների անունները և արժեք հատկանիշում օգտագործել կարճ կոդեր:

Հետևյալ օրինակում մենք կստեղծենք բացվող ցուցակ արժեքի հատկանիշով.

Դիտեք առցանց ցուցադրությունը և կոդը

Tag-ի համար

JavaScript-ում ընտրված տարբերակ մուտք գործելու օրինակ

Այժմ ստեղծենք ընտրված տարբերակի արժեքին մուտք գործելու և որոշ գործողություններ կատարելու օրինակ։ Նույն ցուցակը, ինչպես վերը նշված օրինակում, մենք ստեղծում ենք գունային ընտրանքներով: Ընտրվելուց հետո սեղմեք կոճակը՝ այդ գույնը փաստաթղթում կիրառելու համար.

Դիտեք առցանց ցուցադրությունը և կոդը

HTML տարբերակի արժեքը օգտագործում է հետևյալ կոդը.

Կոդերի հետևյալ տողը օգտագործվում է JavaScript-ում՝ տարբերակի արժեքի հատկանիշի արժեքին մուտք գործելու համար արժեքը տարբերվում է տեքստից. Գույն ընտրելուց հետո jQuery-ն ցուցադրում է ազդանշանի տեսանելի տեքստը: Պիտակի կոդը

Ահա թե ինչպես է մուտքագրվում այս արժեքը HTML ընտրելու տարբերակը ընտրված է JavaScript-ը:

var selectedcolor = $("#jqueryselect option:selected").text();

Դուք կարող եք նաև մուտք գործել արժեք՝ օգտագործելով jQuery $.val() մեթոդը՝

var selectedcolor = $("#jqueryselect").val();

Փոխարինեք այս տողը վերևի օրինակում, և կոդը տեսանելի տեքստի փոխարեն կցուցադրի արժեք հատկանիշի կարճ կոդը/գույնի արժեքը:

PHP սկրիպտում արժեք ստանալու օրինակ

Բացվող ցանկից ընտրված տարբերակի արժեքը ստանալու այս օրինակում ձևը ստեղծվում է պիտակի միջոցով

Եվ ահա, թե ինչպես է PHP սկրիպտը օգտագործվում HTML-ի ընտրության ընտրանքի արժեքը ստանալու համար.

".$_POST["selphp"]։"; } ?>

Եթե ​​ձևը ունի GET մեթոդ, ապա օգտագործեք PHP զանգված $_GET[“”].

Բացվող ոճերի սահմանում CSS-ով

Հիմա եկեք տեսնենք, թե ինչպես ոճավորել բացվող ցանկը:

Այս օրինակում մենք նշում ենք

Բրաուզերում այն ​​ունի հետևյալ տեսքը.

Ցանկի տարրերի խմբավորում

Դիտարկենք հետևյալ պիտակը A, որն օգտագործվում է առնչվող տվյալները բացվող ցուցակում խմբավորելու համար name = "սև և սպիտակ"> label="whitelist">

Այս օրինակում մենք ընտրել ենք 2 խումբ պիտակով . Տարրի պիտակի հատկանիշը թավատառերով նշում է ընտրված խմբի անունը.

Հետևյալ օրինակում, օգտագործելով disabled boolean հատկանիշը, մենք կանջատենք մեկ խումբ (" Բ խումբ"):

</span> HTML թեգի անջատված հատկանիշի օգտագործման օրինակ <optgroup><span>

Մեր օրինակի արդյունքը.

Ցանկի անջատում և բազմակի ընտրություն

</span>Պիտակի անջատված և մի քանի ատրիբուտներ <select><span>

Այս օրինակում մենք ստեղծել ենք երկու բացվող ցուցակ: Առաջին ցուցակի համար մենք օգտագործել ենք disabled հատկանիշը, որը թույլ չի տալիս ցանկի հետ փոխազդել (անջատում է այն):

Երկրորդ ցուցակի համար մենք օգտագործել ենք բազմակի հատկանիշը, որը ցույց է տալիս, որ թույլատրվում է միանգամից մի քանի տարբերակ ընտրել ցանկում (միջոցով. ctrl Windows-ում և միջոցով հրաման Mac-ում):

Բրաուզերում այն ​​ունի հետևյալ տեսքը.

Տեքստի տարածք

Մեր օրինակի արդյունքը.

Տեքստի տարածքի անջատում

Նախկինում դիտարկված տարրերի անալոգիայով պիտակը


type = "submit" name = "submitInfo" value = "(!LANG:submit" > !}

Այս օրինակում մենք ստեղծել ենք երկու տեքստային տարածք (տարր