Punta de Choros

27 декември 2009

На 2009г й оставаха 120ч съществуване. От календара падна поредния лист с дата 27 декември и към 10.30ч сутринта ме събуди звън от телефона.

Инсталация на Microsoft шрифтове в Ubuntu 16.04

14 януари 2017

нсталация на Microsoft шрифтове в Ubuntu се поражда от идеята браузърите в различните системи, да показват еднакво текстовото съдържанието на интернет страниците.

Ubuntu 16.04 инсталация на USB disk on Key

19 ноември 2016

Арсеналът ми от мобилни компютри съдържа Fujitsu Lifebook AH530. Това е бюджетна машина от 2011г на Intel Core i5-480M процесор и 4GB DDR3 RAM памет.

gparted

Paragon ExtFS for Windows

30 юли 2016

ExtFS for Windows е утилита на Paragon Software разработена през 2013г. Тя представлява решение, предоставящо пълен достъп на четене и на запис до раздели ...

msvcr100.dll is missing Windows 10

04 октомври 2016

Майк Патерсън от Plixer, компания по компютърната сигурност, публикува доклад , че Windows 10 изпраща данни в криптиран вид от вашата машина на всеки пет минути. Той е направил максимума, за да спре изтичането, но системата продължавала да изпраща информация.



Нека се запознаем с елемент checkbox. Той се явява флаг и с негова помощ потребителят може да избере определено положение, като постави "лястовичка" (V). Checkbox се специализира в пределите на формата за прости булеви атрибути (истина или лъжа) или за атрибути, които могат да приемат множество значения. Всяко запълнено поле генерира отделна двойка име/значение. Елементът няма затварящ таг. Незадължителен атрибут (псевдоелемент) checked служи за инициализация/активизация на полето по подразбиране.
Според HTML синтаксиса му е
<input type="checkbox" name="somename" value="1" checked>

Според XHTML синтаксиса му е
<input атрибути />

На www.w3.org по въпроса се чете следното:

Checkboxes (and radio buttons) are on/off switches that may be toggled by the user. A switch is "on" when the control element's checked attribute is set. When a form is submitted, only "on" checkbox controls can become successful.

Как да проверим checkbox на PHP


Съгласно тенденцията за преход към HTML5 синтаксисът на checkbox би следвало да бъде такъв
<input type="checkbox" name="checkbox" checked="checked" />

Липсва атрибут value. Той не е задължителен, но от друга страна интерес представлява какво изпраща checkbox на сценария при събмит на формата. Изпраща отговора On, както пишат www.w3.org. За целта стартираме следния код и гледаме резултата.
<?php
 echo $_POST['checkbox'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form method="post">
 <p><label><input type="checkbox" name="checkbox" /> HTML</label></p>
 <p><input type="submit" value="Отговор" /></p>
</form>
</body>
</html>

on

Какво следва да очакваме при невдигнат флаг на checkbox? Резултатът е NULL. За целта стартираме следния код и се наслаждаваме.
<?php 
 $checkbox = $_POST['checkbox'];
 if(isset($checkbox) && $checkbox==="on")
 {
  echo 'checkbox checked<br />';
  var_dump($checkbox);
 }
 else
 {
  echo 'checkbox not checked<br />';
  var_dump($checkbox);
 }
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
 <form method="post">
  <p><label><input type="checkbox" name="checkbox" /> HTML</label></p>
  <p><input type="submit" value="Отговор" /></p>
 </form>
</body>
</html>

Как да проверим checkbox на PHP - вариант 2


Помните ли героите от Матрицата? Те по цял ден гледаха нули и единици. Съгласете се, че е тъпо да гледат по цял ден on или NULL. Тогава да матрицираме кода и да гледаме като хората нули и единици.Пред таг <input type="checkbox"> разполагаме скрито поле <input type="hidden"> с също значение на параметър «name» или както се досещате бъзикаме се с value.

<form …>
…
<input type="hidden" name="checkbox" value="0">
<input type="checkbox" name="checkbox" value="1">
…
</form>

По този начин, ако флага е вдигнат checkbox ще предаде на променлива $checkbox стойност 1, в противен случай скритото поле изпраща 0.
ACHTUNG! Ако формата е с 10 checkbox, то кода ще набъбне като гъба след дъжд, което тоже не е гуд.

Как да проверим checkbox на PHP - вариант 3


Нека се придържаме към изискванията на консорциума W3C и напишем правилно полето в формата.
<form method="post">
  <p><label><input type="checkbox" name="checkbox" checked="checked" />HTML</label></p>
  <p><input type="submit" value="Отговор" /></p>
 </form>

Като цяло кодът става такъв:
<?php
function checkbox($_var)
 {
  $res=0; //инициализация
  if (isset($_POST[$_var]))
  { 
   if ($_POST[$_var]==='on') 
   { 
    $res=1; 
   } 
   else
   { 
    $res=0; 
   }
  }
  return $res;
 }

echo checkbox('checkbox');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
 <form method="post">
  <p><label><input type="checkbox" name="checkbox" checked="checked" />HTML</label></p>
  <p><input type="submit" value="Отговор" /></p>
 </form>
</body>
</html>

Как Profruit проверява checkbox на PHP - вариант 4


HTML5 все още не е утвърден, а Profruit недолюбва потребителските функции. Главна роля играе функция (int), а още intval(). Тези функции служат за несъмнено преобразуване на значенията в цяло число. При вдигнат флаг сценарият получава 1, а (int) запазва резултата. При неактивен checkbox сценарият получава NULL (помним казаното горе). NULL прекарано през (int) става 0 и налице работещ тригер.

Кодът е този:
<?php
 $checkbox = (int)$_POST['checkbox'];
 if($checkbox==1)
 {
  echo 'checkbox = 1';
  //to do
 }
 else
 {
  echo 'checkbox = 0';
 }
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
 <form method="post">
  <p><label><input type="checkbox" name="checkbox" value="1" />HTML</label></p>
  <p><input type="submit" value="Отговор" /></p>
 </form>
</body>
</html>

Стилизация на checkbox


Елементи на формата се поддават на частична стилизация чрез CSS и тази идея трябва да се оценява като експериментална. По мое мнение това е подобие на минно поле, дори смело бих казал, че това не трябва да се прави, защото не опира до дизайн, а до потребителска нагласа. Видът на елементите съответстват на вида им от операционната система на потребителя. Позволява им бърза ориентация.

И все пак ако ви сърби, заигравка с height, width и padding дава непредсказуеми резултати в различните браузъри.

Интересни техники на стилизация на checkbox:
webdesign.maratz.com
demo.tutorialzine.com
www.filamentgroup.com
examples.wufoo.com
advancestyles.info

В общи линии посочените горе адреси ползват следния трик. Елемент checkbox се прави невидим не чрез присвояване на display:none, а се прибягва до свойство opacity:0. По този начин елементът остава на страницата, остава кликабелен, но напълно прозрачен, а на блока, където се намира checkbox се задава заден фон (background) с картинка. Картинката задава изглед на checkbox. При вдигнат флаг се сменя стила на блока, а това променя фона, съответно индикира изменението на checkbox. Елегантно е картинката да бъде спрайт, за да се избегне премигването при промяна състоянието (подмяната на една картинка с друга по време на зареждането й).

Реализацията на идеята.
/*---------- CSS -----------*/
input {
  margin:0;
  padding:0;
  opacity:0;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.checkboxOn {
  background:url(checkbox_on.png) no-repeat 0 3px;
}
.checkboxOff {
  background:url(checkbox_off.png) no-repeat 0 3px;
}

/*---------- JavaScript-----------*/

function checkboxCheck () {
  if (document.getElementById("mycheckbox").checked) {
 document.getElementById("checkboxDiv").className="checkboxOn";
   }
 else {
  document.getElementById("checkboxDiv").className="checkboxOff";
 }
}

/*---------- HTML-----------*/

<div id="checkboxDiv" class="checkboxOn">
 <p><input type="checkbox" id="mycheckbox" onclick="checkboxCheck();" class="checkboxOn" checked="checked"/> Запомни me</p>
</div>

Демо
запомни ме

Checkbox и JS


Учебниците по HTML описват таг INPUT с параметър type="checkbox" като "множествен избор на данните". И веднага проблем. Същите тези данни с еднакво име не се обединяват, а презаписват от последното влезнало значение. Помним вариант 2 - Как да проверим checkbox на PHP.

За да избегнем хемороидите предаваме имената от формата на сценария като списък, а PHP а свой ред ще сложи ключове. По този начин получаваме масив $_POST['numbers'] = array()

<input type="checkbox" name="numbers[]" />
<input type="checkbox" name="numbers[]" />
<input type="checkbox" name="numbers[]" />
<input type="checkbox" name="numbers[]" />
<input type="checkbox" name="numbers[]" />

Реверанс към потребителя на вашата страница е, ако има бутон за избор на всички checkbox-ве наведнъж. Това се постига от интерпретатора на javascript, вграден в всеки браузър.

Избор на всички чрез JavaScript

Какво ви интересува на profruit.blogspot.com?

WEB

Linux

Споделено

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

<script type="text/javascript">
function setChecked(obj)
   {
   var str = document.getElementById("text").innerHTML;
   str = (str == "избери" ? "отмени" : "избери");
   document.getElementById("text").innerHTML = str;
   
   var check = document.getElementsByName("id[]");
   for (var i=0; i<check.length; i++)
      {
      check[i].checked = obj.checked;
      }
   }
</script>

<form method="post">
   <fieldset><legend>Какво ви интересува на profruit.blogspot.com?</legend>
   <p><input type="checkbox" name="id[]" value="1" /> WEB</p>
   <p><input type="checkbox" name="id[]" value="2" /> Linux</p>
   <p><input type="checkbox" name="id[]" value="3" /> Споделено</p>
   <p>
      <input type="checkbox" name="set" onclick="setChecked(this)" />
      <span id="text">избери</span> всичко
   </p></fieldset>
</form>
Какъв програмен език владеете?

<script type="text/javascript">
    checked = false;
    function checkedAll () {
    if (checked == false){checked = true}else{checked = false}
    for (var i = 0; i < document.getElementById("proform").elements.length; i++) {
    document.getElementById("proform").elements[i].checked = checked;
    }
        }
</script>
    
<h3>Избор на всички чрез JavaScript</h3>
<form id="proform">
 <fieldset><legend>Какъв програмен език владеете?</legend>
    <p><label><input type="checkbox" name="html" value="1"> HTML</label></p>
    <p><label><input type="checkbox" name="css" value="2"> CSS</label></p>
    <p><label><input type="checkbox" name="php" value="3"> PHP</label></p>
    <p><label><input type="checkbox" name="sql" value="4"> SQL</label></p>
    <p><label><input type='checkbox' onclick='checkedAll();'> избери всички</label></p>
    <p><input type="submit" value="Отговор"></p>
 </fieldset>
</form>

Избор на всички чрез jQuery

Какъв програмен език владеете?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready( function() {
     $("#checkall").click( function() {
    if($("#checkall").attr("checked")){
     $(".procheck").attr("checked", true);
    } else {
     $(".procheck").attr("checked", false);
    }
     });
  });
</script>
 
<h3>Избор на всички чрез jQuery</h3>
<form>
 <fieldset><legend>Какъв програмен език владеете?</legend>
  <p><label><input type="checkbox" name="html" value="1" class="procheck"> HTML</label></p>
  <p><label><input type="checkbox" name="css" value="2" class="procheck"> CSS</label></p>
  <p><label><input type="checkbox" name="php" value="3" class="procheck"> PHP</label></p>
  <p><label><input type="checkbox" name="sql" value="4" class="procheck"> SQL</label></p>
  <p><label><input type="checkbox" id="checkall"/> избери всички</label></p>
  <p><input type="submit" value="Отговор"></p>
 </fieldset>
</form>



до нови срещи   ^.^

21.01.2012 profruit 

0 Response to "Елемент Checkbox"

Публикуване на коментар

Този блог е реинкарнация на първите ми опити за споделяне в нета. На времето започнах с къси разкази на преживяното. После се обезсмисли и превърнах блога си в системно радио. Пиша единствено неща, които карат душата ми да живее: Ubuntu, WEB, Photoshop, Фотография, Споделено и т.н. Това е моето системно радио, разбирате ли? Моята вълна и вие сте на нея сега.

Архив на блога