How to make a checkbox field mandatory. How to design checkboxes in CSS. Checking if a particular option is selected

💖 Do you like it? Share the link with your friends

This guide will introduce you to HTML checkboxes and teach you how to handle them in PHP.

Single checkbox form

Let's create a simple form with one checkbox.

Do you need internet access?

In a PHP script (checkbox-form.php file) it is possible to read the field value using the $_POST array. If $_POST["formWheelchair"] is set to YES, then the checkbox in was selected. If the checkbox is not selected, then the $_POST["formWheelchair"] variable is not set.

Here is an example of form processing in PHP:

The $_POST["formWheelchair"] variable is set to YES because the input tag's value attribute is set to "YES" .

The value attribute can be set to 1 instead of YES. Don't forget to update your PHP code according to the set values.

Checkbox group

There are often situations when you need to insert several checkboxes into a form. Especially when the user needs to be given the right to choose from several options. This is important because, for example, you can only select one switch (radio).

Let's create a form that gives the user several options to choose from.

Select the buildings to visit.
Acorn Building
Brown Hall
Carnegie Complex
Drake Commons
Elliot House

Please note that all checkboxes have the same name (formDoor). One name indicates that all the checkboxes are interconnected. Square brackets indicate that all values ​​will be available from one array. That is, $_POST["formDoor"] will not return a string, as in the example above, but will instead return an array containing the values ​​of the checkboxes that were selected by the user.

For example, if I check all the boxes, $_POST["formDoor"] will return an array of (A,B,C,D,E) . In the example below, we get and display all the values ​​in an array.

The empty function is useful in case the user has not selected anything. If the array is not empty, we count the number of selected checkboxes using the count function and display all values ​​using for loop.

If the "Acorn Building" checkbox is selected, the array will contain the value "A".

Checking whether a specific checkbox is selected

Often you need to check whether a specific checkbox is selected. To do this you can use the following function:

Function IsChecked($chkname,$value) ( ​​if(!empty($_POST[$chkname])) ( foreach($_POST[$chkname] as $chkval) ( if($chkval == $value) ( ​​return true; ) ) ) return false; )

Now you just need to call the IsChecked(chkboxname,value) function. For example:

If(IsChecked("formDoor","A")) ( //do ... )

A checkmark in an HTML form, or "checkbox" is specified by a tag input, whose type is specified checkbox.

A checkmark indicates either agreement or disagreement. If the checkbox is checked, the browser sends a variable with the field name to the server. If it is missing, then, accordingly, the browser does not send anything. Therefore the attribute value cannot be considered mandatory.

If there is a need for the checkbox to be present by default, then you need to add the attribute to the tag checked. It will look like this:

This is how the checkbox looks in the browser:

The presence of a checkbox does not mean that any one element from those present should be selected. In this regard, if there are several checkboxes in one form, then they should be given different names.

The code for the form given at the beginning of the article will be as follows:



As for the name, in a professional environment the field is called a “checkbox”.

In this article we will talk about the input type checkbox HTML, and how they are handled in PHP.

Single checkbox

Let's create a simple form with one checkbox:

Do you need wheelchair access?

In a PHP script ( checkbox-form.php) we can get the selected option from the $_POST array. If $_POST['formWheelchair'] is " Yes", then the checkbox for the option is selected. If the checkbox was not checked, $_POST['formWheelchair'] will not be set.

Here is an example of form processing in PHP:

$_POST['formSubmit'] was set to " Yes”, since this value is specified in the checkbox’s value attribute:

Instead of " Yes" you can set the value " 1 " or " on". Make sure the validation code in your PHP script is also updated.

Che-box group

Sometimes you need to display a group of related PHP input type checkboxes in a form. The advantage of a group of checkboxes is that the user can select multiple options. Unlike a radio button, where only one option can be selected from a group.

Let's take the above example and based on it we will provide the user with a list of buildings:

Which buildings do you want access to?
Acorn Building
Brown Hall
Carnegie Complex
Drake Commons
Elliot House

Note that the input type checkboxes have the same name (formDoor ). And that every name ends in . By using one name, we indicate that the checkboxes are related. With this we indicate that the selected values ​​will be available to the PHP script as an array. That is, $_POST['formDoor'] does not return a single row, as in the example above; instead, an array is returned consisting of all the checkbox values ​​that were selected.

For example, if I selected all options, $_POST['formDoor'] will be an array consisting of: (A, B, C, D, E). Below is an example of how to output the value of an array:

If neither option is selected, $_POST['formDoor'] will not be set, so use the "empty" function to test for this case. If a value is given, then we loop through the array using the count() function, which returns the size of the array and prints the buildings that were selected.

If the checkbox is checked for the option " Acorn Building", then the array will contain the value 'A'. Likewise, if “ Carnegie Complex", the array will contain C.

Checking if a particular option is selected

Often you want to check if any particular option is selected from all the available elements in the HTML input type checkbox group. Here is a function that does this check:

function IsChecked($chkname,$value) ( ​​if(!empty($_POST[$chkname])) ( foreach($_POST[$chkname] as $chkval) ( if($chkval == $value) ( ​​return true; ) ) ) return false; )

To use it, just call IsChecked ( checkbox_name, value). For example:

if(IsChecked("formDoor","A")) ( //do something... ) //or use in calculation... $price += IsChecked("formDoor","A") ? 100; $price += IsChecked("formDoor","B") ? 20:0;

Download sample code

Download PHP code for an example form with PHP input type checkbox.

This publication is a translation of the article “ Handling checkbox in a PHP form processor", prepared by the friendly project team

All developers of websites, web applications and desktop programs know what checkboxes are. But those people who are far from programming, encountering such an incomprehensible foreign word, do not understand what they are talking about. In fact, everything is very simple. Checkboxes are one of the simplest controls when creating forms.

Regular checkmark

All people have encountered symbols such as the checkmark in their lives, starting from school. When testing, you need to mark the correct option with this sign. Then when filling out various questionnaires. Well, in the present time, when users perform many actions via the Internet, there is absolutely nowhere without ticks. Even the simplest registration on any site requires you to tick some boxes (hobbies, skills).

Internet commerce is also now developed. When creating an order, the user marks the items that interest him. And often during installation computer game you are prompted to select additional software. And here, too, you need to make a choice. So, checkboxes are the same checkmarks that are used on web pages.

In website creation

Website developers see this element somewhat more broadly. After all, creating is more difficult than just clicking on a square once and checking a box. Websites are developed using hypertext markup language, which in a professional environment is called just four letters - HTML. And in order to create a checkmark in it, you need to write some code.

How are checkboxes created? HTML has a specialized element (tag), which is a field endowed with a checkbox type, which is written as follows: .

Operating principles

This element works according to the simplest principle: either affirmation or negation. If a field is checked, the web browser sends a variable that will send the field name to the server for processing, but if the box is not checked, the server receives nothing. The element has an optional attribute with the value value, but it is optional.

Sometimes it happens that some boxes on the page are already checked. To do this, developers add a special attribute to the tag, which points to the checkbox that is already checked by default. This is the checked attribute, that is, “checked”.

Checkboxes are elements that imply not a single choice from several options, but the marking of all suitable ones. For a developer, this matters because if one form contains multiple checkboxes, their names must be different from each other.

Dependent checkboxes

In the case when you need to select only one option from a set, other elements are used - radio buttons, not checkboxes. But sometimes a type such as dependent checkboxes is used. HTML, together with the JavaScript programming language, allows you to make one main checkbox on which the others depend. When you click on it, several checkboxes can be checked at once. This is rarely used, since it somewhat contradicts the very rule of checking boxes.

Like all tags in HTML, checkboxes are elements that have their own characteristics. What are they? The attribute for pre-checking a checkbox has already been mentioned above - checked. Since checkboxes must have different names in one form, the name attribute is needed. It just identifies each individual checkbox. In order to set the value that will be sent to the server, use the value attribute.

It is worth noting that checkboxes are graphical controls that are used primarily in forms. And they work in three modes: not selected, selected and undefined.

Use in tables

Checkboxes are used not only in HTML when developing websites and web applications. Software such as 1C also uses this element. After all, an enterprise has many different components, and when working with documentation, all this must be noted. For example, using a checkbox, you can mark a list of warehouse stocks or customers to whom you need to send goods.

What other programs use this element? Excel - everyone knows this spreadsheet program from Microsoft, which is often the principle of how a checkbox works here: if the checkbox is checked, then the element returns a true value, if unchecked, it returns a false value. To insert a checkbox into a document, you need to enable a special tab for the developer. This is done through the parameters, which in each Excel versions a little different.

How to find required settings? There is always a certificate or search system. After the tab is enabled, you can insert an element through the “Insert” command of the “Controls” item. The thing to note here is that this menu also contains ActiveX controls located below the required form elements. There are also checkboxes there. What is the difference between them? For use ActiveX controls you need the built-in VBA programming language, which few people know. And ordinary checkboxes can be immediately linked to a specific cell in the document.

Once checkboxes are inserted into Excel, they become checked by default. Clicking anywhere in the document removes the mark. To reverse the selection, you need to click on the checkbox with the right mouse button, since the left button removes or checks the checkbox.

By hovering over a checkbox and holding down the left button, you can move the element to any location on the document. It is also convenient to do this using the keys on the keyboard. When you hover over the corners of an element, you can stretch it to a larger size or make it smaller. Special settings allow you to customize the checkbox by changing its color, background, and frame.

Conclusion

So, as can be seen from the above, checkboxes are not a complex element GUI, and what everyone encounters in everyday life is an ordinary tick. The concept is slightly different for a programmer and an ordinary user, but the essence is the same: this is a control element that allows you to make multiple selections when filling out a form. It is important not to confuse checkboxes with radio buttons, which allow you to select only one item from many.



tell friends