Checkbox html: примери на красиви бутони на чист CSS, създаване на "акордеон", получаване на данни за формуляри с помощта на PHP и jQuery

01.02.2019 Category: Компютри Author: admin

Опциите за използване на полето за въвеждане на html са много големи, но най-често този елемент се използва при формите на предаване на данни. Въпреки това, той е в състояние да изпълнява много повече "трикове" от получаването на ценностите на формите. Удобно е да го използвате, за да създадете различни "акордеони" на чист CSS.

Обикновено чиста CSS акордеон

HTML:

Позиция 1 




]


Позиция 3

CSS:

етикет [за ^ = акордеон "]: етикет" hover "[за ^ =" акордеон "] {
 непрозрачност: 0.8;
текстова сянка: 1px 1px 2px currentColor; 
}

В този пример, когато задържите мишката върху етикета на етикета („параграф 1“), стиловете се прехвърлят към всички останали етикети, които са по-долу (братя и сестри, от английски - братя и сестри) , За прехвърляне на свойства към братя и сестри използвайте знака "~" за прехвърляне на стилове само към определени етикети, а не на всички братя и сестри на страницата. Знакът "^" обозначава "започва с", в примера "за вход = = акордеон" - "(за), който започва с думата" акордеон ":

В резултат на това, когато задържите курсора върху етикета, стилът на долните етикети се променя.

Етикетите са много полезни, защото на екраните на мобилните телефони е много трудно да кликнете върху квадратчето за отметка в малкия прозорец, те разширяват зоната, която е на разположение на потребителя, за да изберете желания отговор. Освен това, благодарение на етикета можете напълно да премахнете квадратите от екрана:

вход [id ^ = "акордеон"] {
 позиция: абсолютна;
вляво: -9999px; 
}

Можете също да добавите курсор: указател, за да могат посетителите да разберат сайта,че точките "clickable":

етикет [за ^ = "акордеон"]: hover {
 курсор: указател; 
}

В резултат на това, когато задържите курсора на мишката над текста (например, "Елемент 1"), курсорът ще бъде "ръка" вместо стрелката. Можете да добавите допълнителни CSS стилове за още повече акордеон.

CSS "Stunts" не свършват дотук. Ще добавим скрит текст към нашата "акордеон".

Позиция 1

Текст 1.




Параграф 2

Текст 2.



Позиция 3

Текст 3.

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

[id ^ = "акордеон-кутия -"] {
 препълване: скрито;
max-height: 0; 
}

За да получите текст, като кликнете върху етикета, добавете max-height: 100% в стил:

input [id ^ = "акордеон" ]: check + [id ^ = "акордеон-кутия -"] {
 max-height: 100%; 
}

Процесът започва, когато потребителят кликне върху етикета, квадратчето за отметка html е избрано (вход: отметен), след което преминава със знака "+" (което означава "само първия брат по-долу") свойство max-height: 100% на

с текста.

Когато изберете съответния елемент, текстът се появява.

HTML:

Параграф 1

Текст 1. 

96) 
Позиция 2

Текст 2.



Позиция 3 
)
Текст 3.

CSS:

етикет [за ^ = "акордеон"] {
 размер на шрифта: 20px; 
}
етикет [за ^ = "акордеон"]: hover {
 курсор: указател;
цвят: червен;
text-shadow: 1px 1px 2px currentColor; 
}
етикет [за ^ = "акордеон"]: етикет "hover" [за ^ = "акордеон"] {
 непрозрачност: 0.8;
текстова сянка: 1px 1px 2px currentColor; 
}
вход [id ^ = "акордеон"]: проверено + [id ^ = "акордеон-кутия -"] {
 max-height: 100%;
марж: 10px; 
}
вход [id ^ = "акордеон"] {
 позиция: абсолютна;
вляво: -9999px; 
}
[id ^ = "акордеон-кутия -"] {
 препълване: скрито; 
max-height: 0; 
}

Получаване и обработване на стойности с помощта на PHP

Помислете например за примерите в квадратчетата html във форми, където също е възможно да получите стойност (value = "my_value").

Записваме стойността в операторната стойност = "".


HTML 


CSS 


javascript 


jQuery 


]


 


аякс


)

Когато изпращате формуляр, масивът $ _POST ще съдържа масива name = "" в масива и value value = "".

Ако беше нормален масив, то изглеждаше така:

$ post = array ("име" =>>);
"$ css_name" = & gt;

или

$ post = array (
 "HTML_name" = & gt; HTML; CSS,
javascript_name = & gt; javascript,
jQuery_name = & gt; jQuery,
PHP_name = & gt; PHP,
ajax_name = & gt; Ajax, 
;

Конвертиране на низовия масив $ _POST чрез функцията PHP implode () и присвояване на стойността $ _POST ["ajax_name"] чрез промяна на $ ajax. Обикновено, за всички стойности на $ _POST се създават променливи, но например ще пишем само едно, така че да не претоварваме кода с излишна информация. Също така трябва да проверите сигурността на входните данни $ _POST, но ние няма да направим това тук, много е написано в други статии.

Моите умения: ".implode (',', $ _POST);
ако (isset ($ _POST [" ajax "])) {
$ ajax = $ _POST [
}
ако (isset ($ ajax)) {
echo "

Променливата $ ajax е зададена ;;
}
ехо"

"
 var_dump ($ _ POST);
echo"

Получаване на ключове и стойности на формуляри с помощта на jQuery

За да получите стойности от формуляр, без да презареждате страницата,използвайте javascript или jQuery скриптове):

$ (document) .ready (function () {
 $ ("input.my-class"). on ("click", function (e } {{219}} {{219}} {{219}} {{219}} {{219}} {
$ ("# log"). Html ("Избрано:" + val.join (",") + "
 
"); 
}); 
}) ;

Да създадем масив:

var val = [];

След това всяка (избрана) позиция ("вход: проверена") с помощта на push функцията ще запише в val () масива:

$ ("вход: проверен") ) .each (функция () {
 val.push ($ (this) .val ()); 
});

Съдържанието на масива val () ще бъде показано на страницата, за която ще добавим html

jQuery: 240]

$ ("# log") Html ("Избрано:" + val.join (",") + "
 
");

Разберете дали е избрано квадратчето за отметка html, можете да използвате .is (": checked"). Prop ("checked").

Получаваме стойността (val) на всеки флаг и ще го извеждаме чрез сигнал ():

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

Същото нещо, което правим за id (id) с .prop ("проверено"):

if ($ (this) .prop ('checked') )) сигнал ($ (this) .attr ("id"));

Изходът на ключовете и стойностите чрез alert () е само за примера, те не са необходими за работата, така че те трябва да бъдат премахнати от кода.

Ще направим бутона за изпращане на формуляра недостъпен ("забранено"), ако не е поставена отметка:

) $ ('# submitButton'). prop ("забранено",! $ (this) .prop ("проверено"));

Обърнете внимание на двоеточие: .is (": checked") работи правилно с двоеточие, а .prop ("проверено") работи без двоеточие !!!

Добавяме възможността незабавно да маркираме всички точки.

Избери всички

ако ($ ("# checkAll") prop ("check") ))$ ('input.my-class'). не (this) .prop ('checked', this.checked);

Всички кодове.

HTML:

Необходими умения: 


Избери всички 
283)



CSS



 

jQuery


PHP









Аякс

jQuery:

$ (документ) .ready (функция () {
 $ ("input.my-class"). "click", функция (e) {
 може да val = [];
if ($ (this) .is (': checked')) alert ($ (this) .val ());
() ($ (this) .prop ('checked')) alert ($ (this) .attr ("id"));
$ ('# submitButton'). (Прокси ("проверено"));
if ($ ("# checkAll"). Prop ("check")) $ ('input.my-class'). Not (this) .prop ('
$ ("input: checked"). всеки (function () {
 val.push ($ (this) .val ()); 
}) 335) ако ($ ("# checkAll") prop ("check")) {
 $ ("# log"). Html ("Избрано: ALL

"); 
} else {{340} $ ("# log"). html ("Избрано:" + val.join (",") + "
 
"); 
} 
}) 
});

PHP:

ако (isset ($ _ POST ["ALL"])) {
 echo "Моите умения: всички изброени"; 
} else {
 echo "

Моите умения:" .implode (',', $ _POST); 
}
if (isset ($ _POST ["ajax"]))) {
 $ ajax = $ _POST ["ajax"]; 
}
if (isset ($ ajax)) {
 echo '

Променлива $ ajax set "; 
}
ехо";
var_dump ($ _ POST);
ехо "
";

Декориране на бутони на чист CSS

За да направите бутони в съответствие с дизайна на сайта, ще използваме само CSS. Скриване на оригиналния квадрат със свойствата на z-index и opacity, в този случай квадратите не се движат от екрана, а просто стават прозрачни (непрозрачност: 0).

CSS:

позиция: абсолютна;
z-индекс: -1;
непрозрачност: 0;
марж: 10px 0020px;

На същото място показваме бутони със собствен дизайн.

Входният таг може да е пред етикета на етикета, след това да се използва първия пример за оформяне на бутоните:

.my-class {
 позиция: абсолютна;
z-индекс: -1;
непрозрачност: 0;
марж: 10px 0020px; 
}
.my-class + label {
 позиция: относителна;
подложка: 000 60 пиксела;
курсор: показалец;
позиция: абсолютна;
отгоре: -4px;
вляво: 0;
ширина:
височина: 26px;
граница радиус: 13px;
фон: # CDD1DA;
box-shadow: вмъкване 0 2px 3px rgba (000.2);
преход: 1.2 s; 
}
.my-class + етикет: след {
 съдържание: ";
позиция: абсолютна;
отгоре: -2px;
наляво: 2px;
ширина: 22px;
височина: 22px;
радиус на границата: 10px;
фон: #FFF;
box-shadow: 2px 0 5px rgba (000.3);
преход: .2s; 
}
.my-class: check + label: преди {
 фон: # 87CEFA;
-webkit-animation: blackblur 2s 015 s 1 заместник;

}
.my-class: check + label: след {
 ляво: 26px;

}
.my-class: focus + label: преди {
 box-shadow: вмъкване 0 2px 3px rgba (000.2), 000 3px rgba (206250135.7); 
}


@ -debkit-keyframes blackblur {
 от {box-shadow: 0072px black; цвят: прозрачен;}
до {box-shadow: 0; цвят: черен;} 
}

Ако входът е вътре в етикета на етикета, напишете текста на квадратчето за отметка в div с класа "текст". Стиловете се подават от входа: проверяват се към div с класа "text" във втория пример:

.label input {
 position: absolute;
z-индекс: -1;
непрозрачност: 0;
марж: 10px 0020px; 
}
.text {
 позиция: относителна;
подложка: 000 60 пиксела;
курсор: показалец;
наляво: 0;
ширина: 50px;


граница радиус: 13px;
фон: # CDD1DA;
box-shadow: вмъкване 0 2px 3px rgba (000.2);
преход: .2s; 
}
.текст: след {
 съдържание: ";
позиция: абсолютна;
отгоре: -2px;
наляво: 2px;
ширина: 22px;
височина: 22px;
граничен радиус: 10px;
фон: #FFF;
box-shadow: 2px 0 5px rgba (000.3);
преход: .2s; 
}
.label input: checked + .text: преди {
 фон: # 87CEFA;
-bibkit-animation: blackblur 2s 015 s 1 заместник; 
}
 .Вход на етикет: с чек + .text: след {
 вляво: 26px; 
}
.label input: focus + .text: преди {
 box-shadow: вмъкване 0 2px 3px rgba (000.2), 000 3px rgba (206250135.7); 
}
@ -webkit-keyframes blackblur {
 от {box-shadow: 0072px black; цвят: прозрачен;}
до {box-shadow: 0;

 


Избери всички 






HTML

Checkbox html: примери на красиви бутони на чист CSS, създаване на "акордеон", получаване на данни за формуляри с помощта на PHP и jQuery

Обикновено чиста CSS акордеон

Получаване и обработване на стойности с помощта на PHP

Получаване на ключове и стойности на формуляри с помощта на jQuery

Декориране на бутони на чист CSS

Материали по темата:

Свързани публикации