form-ի էլեմենտների ձևավորում

Բարև ձեզ, հարգելի՛ ընթերցողներ։ Իմ այս գրառման մեջ ես կփորձեմ ձեզ ծանոթացնել form-ի կազմի մեջ մտնող էլեմենտների(input, select և այլն) արտաքին ձևավորման տարբերակներին։ Խոսքս վերաբերվում է այն արտաքին ձևավորմանը, որով օժտված են այդ էլեմենտները լռելյայն(default)։ Չեմ կարծում, որ կարիք կա անդրադառնալու այնպիսի էլեմենտներին, որոնք ենթարկվում են սովորական էլեմենտների ձևավորման ստանդարտ սկզբունքներին։ Այդպիսի էլեմենտներից են օրինակ՝ <input type=”text”>,  <input type=”number”>: Ես ավելի շատ կխոսեմ այնպիսի էլեմենտների մասին, որոնք օժտված են իրենց ուրույն  ձևավորմամբ և չեն ենթարկվում ստանդարտ էլեմենտների ձևավորման սկզբունքներին, օրինակ՝  <input type=”radio”>, <input type=”checkbox”>, <select>: Շատ են լինում դեպքեր, երբ անհրաժեշտ է լինում ձևափոխել այդպիսի էլեմենտների արտաքին տեսքը։ Կոնկրետ օրինակների վրա ներկայացնեմ, թե ինչպես կարելի է իրականացնել վերը նշվածը։

<input type=”checkbox”>

Ինչպես բոլորս շատ լավ գիտենք, checkbox  էլեմենտներն ունեն փոքրիկ վանդակի տեսք՝  ­­­։ Այս վանդակի վրա սեղմելիս հայտվում է նշանը, որը ցույց է տալիս, որ այդ տարրն ընտրված է։ Սա՝ ստանդարտ դեպքում։ Սակայն, այժմ մեզ անհրաժեշտ է փոխել, ենթադրենք, այդ վանդակի եզրագծերի գույնն ու լայնությունը, ինչպես նաև փոխարինել նշանը մեկ այլ նշանով։ Ինչպես արդեն նշեցի, դա հնարավոր չէ իրականացնել՝ ստանդարտ հատկություններ կիրառելով։ Այստեղ մեզ օգնության կգա label էլեմենտը, որը նախատեսված է իր մեջ գրված արտահայտությունը սեղմվող դարձնելու համար,

<form action="">
  <input type="checkbox" name="check" id="check">
  <label for="check">Checkbox Text</label>
</form>

այսինքն՝ տվյալ դեպքում Checkbox Text արտահայտությունը  label-ի միջոցով կկապենք input-ին, և նրա վրա սեղմելիս կսեղմվի նաև input-ը։ Քանի որ մենք չենք կարող CSS-ի, ներկայիս հնարավորություններով վանդակի հետ իրականացնել այն փոփոխությունները, որոնք ցանկանում ենք, ապա ավելի ճիշտ կլինի ընհանրապես թաքցնել այն՝ տալով նրան display: none;

input[type=checkbox]{
       display: none;
}

 Այնուհետև մենք պետք է աշխատենք արդեն այդ input էլեմենտին կապված label-ի հետ։ Կախված այն բանից, թե input և label էլեմենտներն ինչպես են դասավորված միմյանց նկատմամբ, մենք  label-ի համար կօգտագործենք before կամ after պսևդոէլեմենտները։ Այստեղ մենք կորոշենք, թե ինչ պարունակություն պետք է ունենան պսևդոէլեմենտները, անհրաժեշտության դեպքում տանք նրան լայնություն և բարձրություն, ետնապլանի գույն կամ նկար (background), տարբեր գույների ու կորության եզրագծեր և այլ նմանատիպ CSS ստանդարտ հատկություններ։

input[type=checkbox] + label:before{
    width: 30px;
    height: 30px;
}

Այսքանով մենք դեռևս ձևավորեցինք չընտրված checkbox-ը։ Սակայն ընտրվածի մասին նույպես պետք է հոգալ, այսինքն՝ թե ինչ տեսք պետք է ընդունի checkbox-ն այն դեպքում, երբ օգտագործողը ընտրել է այն։ Այս դեպքի համար նույնպես կարելի է կիրառել սելեկտորների բավականին խելամիտ կոմբինացիա, որը կվերաբերվի միայն ընտրված checkbox-ին կապված label-ի պսևդոէլեմենտին։

input[type=checkbox]:checked + label:before{
     width: 40px;
     height: 40px;
}

checkbox էլեմենտներին արտաքին ձևավորում հաղորդելու ընդհանուր սկզբունքը սա էր, իսկ թե կոնկրետ ինչպիսի ձևավորում դուք կհաղորդեք ձեր օգտագործած input-ներին, կախված կլինի ձեր կոնկրետ խնդրից և ձեր երևակայությունից։ Այստեղ կարող եք ծանոթանալ տարբեր տեսակի ձևավորումների հետ, որոնք կարող եք օգտագործել ձեր պրոյեկտներում checkbox-ների ձևավորման համար։

<input type=”radio”>

Այստեղ նույնպես սկզբունքը նույնն է։ Քանի որ մենք չենք կարող փոփոխել radio input-ի ստանդարտ տեսքը, ապա մենք կթաքցնենք այն

input[type=radio]{
  display: none;
}

և նրան կապված label-ի պսևդոէլեմենտների(after, before) միջոցով կձևավորենք մեր նախընտրած ոճով։

Այստեղ կարող եք ծանոթանալ radio input-ների ձևավորման մի քանի տարբերակների, որոնք կարող են օգնել ձեզ ձեր պրոյեկտներում։

<select>

Շատ են լինում դեպքեր, երբ անհրաժեշտ է լինում արտաքնապես ձևափոխել select էլեմենտը։ Այն մասամբ կարելի է ձևավորել էլեմենտների ձևավորման ստանդարտ սկզբունքներով, այնպես, ինչպես օրինակ text տիպի input էլեմենտները։ Սակայն, եթե մեզ անհրաժեշտ է լինում ձևափոխել select-ի մեջ գտնվող ներքև ուղղված սլաքը, ապա մենք պետք է դիմենք որոշ խորամանկության։ Բավականին տարածված տարբերակներից է այդ սլաքը թաքցնելը և select էլեմենտին մեր նախընտրած սլաքի տեսքով ետնանկար (background) հաղորդելը։ Իսկ այդ ստանդարտ սլաքը թաքցնելու համար օգտագործվում է appearance հատկությունը, որը դիտարկիչների վրա կարող է աշխատել միայն համապատասխան նախածանցի (prefix) առկայության դեպքում։ Այս հատկությունն առանձնահատուկ է նաև նրանով, որ տարբեր դիտարկիչների համար կարող է ընդունել տարբեր տեսակի արժեքներ։ Օրինակ՝ Chrome դիտարկչի համար այն կարող է ընդունել initial, inherit և none արժեքները, իսկ Mozilla-ի համար հնարավոր արժեքների ցանկը շատ մեծ է, և այդ արժեքները կարող են ամբողջությամբ փոխել select էլեմենտի տեսքը։ Սակայն այդ արժեքներից օգտվելն այնքան էլ լավ գաղափար չէ։ Ավելի ճիշտ կլինի, եթե մենք բոլոր դիտարկիչների համար appearance-ին հաղորդենք none արժեքը և ձևավորենք այն մեր ուզածով, որի արդյունքն էլ միանման կլինի բոլոր դիտարկիչների համար։

select{
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
            border-color: #abf;
            background: transparent;
            padding: 10px 35px 10px 15px;
            font-size: 2em;
            cursor: pointer;
            background: url("https://github.com/amvmkrtich/itblog-files/raw/master/scroll_up_down-256.png") no-repeat right center;
}
select:focus{
  background: rgba(180, 183, 180, .3) url("https://github.com/amvmkrtich/itblog-files/raw/master/scroll_up_down-256.png") no-repeat right center;
}

Ընդհանուր առմամբ այս սկզբունքերից օգտվելով` դուք կարող էք form-ի կազմի մեջ մտնող բոլոր էլեմենտներին հաղորդել ձեր ցանկացած ձևավորումը։ Կարծում եմ իմ այս գրառումը օգտակար կլինի ձեզ համար, իսկ որևէ հարցի դեպքում կարող եք դիմել մեզ մեկնաբանությունների կամ քննարկումների բաժիններում։

Շնորհակալություն մեր բլոգից օգտվելու համար։ Հարգանքներով՝ IT-Blog.am թիմ: