Цхецкбок хтмл: примери лепих дугмади на чистом ЦСС-у, креирање "хармоника", добијање вредности из форми помоћу ПХП-а и јКуери-а

7. 3. 2020.

Опција апликације хтмл инпут цхецкбок је веома опсежна, али најчешће се овај елемент користи у обрасцима за пренос података. Међутим, он може да уради много више "трикова" него добијање вредности из форми. Погодно је користити га за креирање разних "хармоника" на чистом ЦСС-у.

Симпле Пуре ЦСС "Аццордион"

ХТМЛ:

       

ЦСС:

 label[for^="accordion"]:hover ~ label[for^="accordion"]{opacity: 0.8;text-shadow: 1px 1px 2px currentColor;} 

У овом примеру, када пређете мишем изнад ознаке ("Тачка 1"), стилови се преносе на све остале ознаке које се налазе испод (браћа и сестре, са енглеског - браћа и сестре). Да бисте проследили својства браћи и сестрама, користите знак "~" за преношење стилова само на наведене ознаке, а не на све браће и сестре на страници. Симбол "^" значи "почиње са ...", у примеру "за ^ = 'хармоника' -" за (за) ид улаз, који почиње речју "хармоника":

 label[for^="accordion"] 

Као резултат, када пређете преко курсора изнад ознаке, стил мањих ознака се мења.

Пребацивање стилова на браћу и сестре са потврдним оквиром за унос ознаке

Ознаке су веома корисне јер је на екранима мобилних телефона веома тешко кликнути на мали оквир за избор хтмл оквира, они проширују подручје које је кориснику на располагању за одабир жељеног одговора. Штавише, захваљујући етикети, можете потпуно уклонити квадрате са екрана:

 input[id^="accordion"]{position: absolute;left: -9999px;} 

Такође можете да додате курсор: показивач тако да посетиоци сајта могу да схвате да су ставке „могуће кликнути“:

 label[for^="accordion"]:hover{cursor:pointer;} 

Као резултат, када пређете преко курсора изнад текста (на пример, "Тачка 1"), курсор уместо "стрелица" ће постати "рука". Да још више оживи "хармонику", у ЦСС можете додати додатне стилове.

 label[for^="accordion"]:hover{cursor:pointer;color: red;text-shadow: 1px 1px 2px currentColor;} 

ЦСС трикови ту не престају. Додајте скривени текст нашој "хармоници".

   
Текст 1.

Текст 2.

Текст 3.

Стилови за скривени текст:

 [id^="accordion-box-"]{overflow: hidden;max-height:0;} 

Да би се текст појавио када кликнете на ознаку, додајте мак-хеигхт: 100% стиловима:

 input[id^="accordion"]:checked + [id^="accordion-box-"]{max-height: 100%;} 

Процес почиње када корисник кликне на ознаку, потврдни оквир хтмл је изабран (унос: означен), а затим прослеђен знаком "+" (што значи "само први брат испод")) мак-хеигхт особина: 100%

са текстом.

Када изаберете одговарајући текст, појављује се текст.

цхецкбок хтмл пример хармоника са скривеним текстом

ХТМЛ:

   
Текст 1.

Текст 2.

Текст 3.

ЦСС:

 label[for^="accordion"]{font-size: 20px;}label[for^="accordion"]:hover{cursor:pointer;color: red;text-shadow: 1px 1px 2px currentColor;}label[for^="accordion"]:hover ~ label[for^="accordion"]{opacity: 0.8;text-shadow: 1px 1px 2px currentColor;}input[id^="accordion"]:checked + [id^="accordion-box-"]{max-height: 100%;margin: 10px;}input[id^="accordion"]{position: absolute;left: -9999px;}[id^="accordion-box-"]{overflow: hidden;max-height:0;} 

Примање и обрада вредности помоћу ПХП-а

Размотрите за цхецкбок хтмл примјере кориштења у обрасцима, гдје је такођер могуће добити вриједности (валуе = "ми_валуе").

Вредности се уписују у валуе = "" оператор.















Када шаљете образац, матрица $ _ПОСТ ће садржати оператор = "" у кључу поља и вредност - вредност = "".

Ако је то био регуларни низ, изгледао би овако:

 $post = array(name => value); 

или

 $post = array("HTML_name" => "HTML","CSS_name" => "CSS","javascript_name" => "Javascript","jQuery_name" => "jQuery","PHP_name" => "PHP","ajax_name" => "Ajax",); 

Ми претварамо $ _ПОСТ поље у стринг користећи функцију ПХП имплоде () и додељујемо вредност $ _ПОСТ ["ајак_наме"] променљивој $ ајак. Обично, за све $ _ПОСТ вредности, креирају се варијабле, али на пример, пишемо само једну да не бисмо преоптеретили код непотребним информацијама. Такође је потребно проверити безбедност улазних података $ _ПОСТ, али овде то нећемо урадити, о томе смо већ писали у другим чланцима.

ПХП:

 echo " 

Мои навыки: ".implode( ', ', $_POST );if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo "

Переменная $ajax установлена";}echo "
{$ajax = $_POST["ajax"];} echo "

Мои навыки: ".implode( ', ', $_POST );if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo "

Переменная $ajax установлена";}echo "
  "; вар_думп ($ _ ПОСТ); ецхо" 
";

Преузимање кључева форме и вредности помоћу јКуери

Да бисте добили вредности из обрасца без поновног учитавања странице, користите скрипте (јавасцрипт или јКуери):

 $(document).ready(function() );$("#log").html("Выбрано: " + val.join( ", " ) + " 

");});});
{$("input.my-class").on("click", function(e) {var val = [];$("input:checked").each( function(){val.push( $(this).val() );} $(document).ready(function() );$("#log").html("Выбрано: " + val.join( ", " ) + "

");});});

Направите низ:

 var val = []; 

Тада се свака (свака) изабрана ставка ("инпут: цхецкед") уз помоћ пусх функције уписује у вал () поље:

 $("input:checked").each( function(){val.push( $(this).val() );}); 

Садржај низа вал () ће бити приказан на страници, за коју ћемо додати хтмл објекат

јКуери:

 $("#log").html("Выбрано: " + val.join( ", " ) + " 

");

Можете сазнати да ли је цхецкбок хтмл одабран помоћу .ис (": цхецкед") и .проп ("означено").

Добит ћемо вриједности (вал) сваке означене кутије и исписати их путем упозорења ():

 if ( $(this).is(':checked') ) alert($(this).val()); 

Урадите исто да бисте добили идентификатор (ид) користећи .проп ("означено"):

 if ( $(this).prop('checked') ) alert($(this).attr("id")); 

Излаз кључева и вредности преко алерт () је, на пример, само, они нису потребни да би форма функционисала, тако да би их требало уклонити из кода.

Нека је дугме за слање обрасца недоступно ("онемогућено") ако није изабран потврдни оквир:

  
 $('#submitButton').prop("disabled", !$(this).prop("checked")); 

Обратите пажњу на двоточку: .ис (": цхецкед") исправно ради са двоточком, а .проп ("чекирано") ради без двоточке !!!

Додајте могућност означавања свих ставки одједном.

   
 if($("#checkAll").prop("checked") ) $('input.my-class').not(this).prop('checked', this.checked); 

Алл цоде.

ХТМЛ:

Потребне вјештине:

















јКуери:

 $(document).ready(function() );if($("#checkAll").prop("checked") ) else });}); {$("input.my-class").on("click", function(e) {var val = [];if ( $(this).is(':checked') ) alert($(this).val());if ( $(this).prop('checked') ) alert($(this).attr("id"));$('#submitButton').prop("disabled", !$(this).prop("checked"));if($("#checkAll").prop("checked") ) $('input.my-class').not(this).prop('checked', this.checked);$("input:checked").each( function(){val.push( $(this).val() );} $(document).ready(function() );if($("#checkAll").prop("checked") ) else });}); {$("#log").html("Выбрано: ALL

");} $(document).ready(function() );if($("#checkAll").prop("checked") ) else });}); {$("#log").html("Выбрано: " + val.join( ", " ) + "

");} $(document).ready(function() );if($("#checkAll").prop("checked") ) else });});

ПХП:

 if(isset($_POST["ALL"])){echo "Мои навыки: все перечисленные";}else{echo " 

Мои навыки: ".implode( ', ', $_POST );}if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo "

Переменная $ajax установлена";}echo "
{$ajax = $_POST["ajax"];} if(isset($_POST["ALL"])){echo "Мои навыки: все перечисленные";}else{echo "

Мои навыки: ".implode( ', ', $_POST );}if( isset( $_POST["ajax"] ) ) if( isset( $ajax ) ){echo "

Переменная $ajax установлена";}echo "
  "; вар_думп ($ _ ПОСТ); ецхо" 
";

Чист дизајн ЦСС тастера

Да би се тастери уредили у складу са дизајном сајта, користићемо само ЦСС. Сакријте оригинални квадрат користећи својства з-индекса и непрозирности, у овом случају квадрати се не померају са екрана, већ једноставно постају транспарентни (непрозирност: 0).

ЦСС:

  position: absolute;z-index: -1;opacity: 0;margin: 10px 0 0 20px; 

На истом месту приказујемо дугмад са сопственим дизајном.

Ознака улаза може се појавити испред ознаке етикете, а затим користити први пример дугмади за обликовање:

 .my-class {position: absolute;z-index: -1;opacity: 0;margin: 10px 0 0 20px;}.my-class + label {position: relative;padding: 0 0 0 60px;cursor: pointer;}.my-class + label:before {content: '';position: absolute;top: -4px;left: 0;width: 50px;height: 26px;border-radius: 13px;background: #CDD1DA;box-shadow: inset 0 2px 3px rgba(0,0,0,.2);transition: 1.2s;}.my-class + label:after {content: '';position: absolute;top: -2px;left: 2px;width: 22px;height: 22px;border-radius: 10px;background: #FFF;box-shadow: 0 2px 5px rgba(0,0,0,.3);transition: .2s;}.my-class:checked + label:before {background: #87CEFA;-webkit-animation: blackblur 2s 0.15s 1 alternate;}.my-class:checked + label:after {left: 26px;}.my-class:focus + label:before {box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(206,250,135,.7);}@-webkit-keyframes blackblur {from { box-shadow: 0 0 72px black; color: transparent; }to { box-shadow: 0; color: black; }} 

Ако је улаз унутар ознаке етикете, онда је поље за потврду смештено у див са класом "текст". Стилови се прослеђују са улаза: проверавају се у див са класом "текст" у другом примеру:

 .label input{position: absolute;z-index: -1;opacity: 0;margin: 10px 0 0 20px;}.text {position: relative;padding: 0 0 0 60px;cursor: pointer;}.text:before {content: '';position: absolute;top: -4px;left: 0;width: 50px;height: 26px;border-radius: 13px;background: #CDD1DA;box-shadow: inset 0 2px 3px rgba(0,0,0,.2);transition: .2s;}.text:after {content: '';position: absolute;top: -2px;left: 2px;width: 22px;height: 22px;border-radius: 10px;background: #FFF;box-shadow: 0 2px 5px rgba(0,0,0,.3);transition: .2s;}.label input:checked + .text:before {background: #87CEFA;-webkit-animation: blackblur 2s 0.15s 1 alternate;}.label input:checked + .text:after {left: 26px;}.label input:focus + .text:before {box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(206,250,135,.7);}@-webkit-keyframes blackblur {from { box-shadow: 0 0 72px black; color: transparent; }to { box-shadow: 0; color: black; }} 

ХТМЛ:

Потребне вјештине:

Означи све
ХТМЛ
ЦСС
Јавасцрипт
јКуери
Пхп
Мискл
Ајак
ЦСС контролног поља за унос

Стога, у зависности од ситуације, увек можете изабрати одговарајућу локацију за унос и ознаку. Ако из неког разлога опција када је улаз смјештен испред наљепнице није прикладан, можете поставити улаз унутар ознаке наљепнице.

Можете и стилизовати цхецкбок хтмл користећи сцриптс (јавасцрипт, јКуери), модерни претраживачи раде с њима одличан посао. Али ако корисник уђе на сајт са старог претраживача, онда је преференција и даље ЦСС.

Такође је потребно узети у обзир да ће различити оперативни системи изгледати другачије. Ако Гоогле Цхроме покуша да изглади те разлике, онда у другим претраживачима дизајн тастера може бити веома различит.