Today you will find out how to make a checkbox in HTML and add to him CSS styles for better compatibility with website design.
Demonstration
Checkbox in HTML
Let's create a block with four checkboxes, the first one will be marked with a tick. Each checkbox will be enclosed in a tag label, inside which there is an input field, text and an element span to be styled.
Tag label serves as a container for each checkbox; for clarity, I temporarily set a red frame to the tag label. When there is little experience, this good way, see the boundaries of any tag so as not to act blindly.
CSS for checkbox
Line tag label, replace it with block (display: block) so that the checkboxes stand one under the other, user-select: none– prevents the user from selecting an element.
Container (
display: block;
user-select: none;
}
This code hides the default browser styles for the checkbox. We make the element completely transparent by opacity, width And height with a zero value and in their place, set custom styles for the checkbox.
Container input (
opacity: 0;
height: 0;
width: 0;
}
We create custom checkboxes. Change the size and color of the background.
Checkmark (
height: 23px;
width: 22px;
background-color: #eec321;
}
When you hover the cursor, make the background color a little darker.
Container:hover input ~ .checkmark (
background-color: #ccc678;
}
For a checked checkbox, set a different color for the background.
Container input:checked ~ .checkmark (
background-color: #2196f3;
}
Hiding the checkbox for unchecked checkboxes using a pseudo-element after.
Checkmark:after (
content: "";
position: absolute;
display: none;
}
We make the checkmark visible only for checked checkboxes.
Container input:checked ~ .checkmark:after (
display: block;
}
Draw and stylize the checkmark. We draw a checkmark on a blank CSS. Let's draw a rectangle with a white frame, the two sides of the rectangle have no frame (zero width), we get a rectangular corner, we rotate it 45 degrees and we get a check mark.
In this article we will talk about the input type checkbox HTML, and how they are handled in PHP.
Single checkbox
Let's create simple form with one checkbox:
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 in a form related PHP input type checkbox . 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:
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
Tick in HTML form, or "checkbox" is specified by the 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 professional environment the field is called a "checkbox".
Hello, dear readers of the site site. The next element that we will have time to sort out today is radio buttons and checkboxes in html. They are usually used to ask a question inside a form (we talked about creating forms) and, accordingly, through them we can offer a person answer options. However, he can choose only one of these options.
Radio buttons - radio type
Let's start implementing radio buttons. Let's go into the code and select a separate paragraph for the radio buttons. We will create our radio button in it. A button is created using a tag input.
We will indicate the type radio. Let's give the button a name and indicate the value, i.e. what value will be sent to the handler if this button is active. For this button we will specify the value “ yes", because this button will be responsible for a positive answer.
Let's add a label label with the answer “ Yes» in order for a person to click on the label, and the button will be activated automatically.
Now let’s create the opposite button with the answer “ No" To do this, let's copy label and insert after the first label. Let's change "Yes" to "No" and change the value of "yes" to "no". Please note that we must leave the name the same. This will tell the browser that these radio buttons belong to the same group and that they are mutually exclusive. That is, if you activate one button, the other is deactivated. If you give the buttons different names, you can activate both buttons at the same time.
This is how you can pass the value = choice of one or another answer to the handler.
Let's add the question itself after the opening paragraph. Let's ask a person if he likes to save time?
Do you like to save time?
And one more point that may be useful to you is automatic activation buttons initially. There is a special attribute for this that can be added to the desired button. This button will be activated initially. The attribute is called checked- can be translated as marked. This attribute does not need to be specified with any value.
Do you like to save time?
And here is the final result.
Checkboxes - checkbox type
An alternative to radio buttons in HTML is checkboxes, only in this case it is possible to select several elements. Let's create a new paragraph as an example and ask, what time-saving tools do you like to use?
After the question, we will indicate a new paragraph to create these same checkboxes. The first checkbox will be for the diary.
If you check our code in the browser, it will look like this:
Now, in the same way, we will create two more checkboxes: timing and our own achievements.
What time saving tools do you use?
Be sure to name each checkbox with its own unique name.
If you save the file and check, you will see the following.
Welcome to my blog, dear readers interested in website building. Today I will show you a cool trick that will allow you to create cool checkboxes, much more beautiful than those that HTML offers by default. I'll show you how to do it in css design checkbox -s. In other words, I'll show you how to do css beautiful checkboxes, that is, checkmarks.
Initial marking
So, you need to start by adding to html code, which will display our checkboxes, as well as their captions (label), these fields need to be linked together so that when you click on the label you can check the box.
So, I'll comment a little. We have three pairs: the checkbox field and the caption for it. Each field receives its own identifier; linking with a label occurs using the for attribute, where the name of the identifier to be associated is written. So far everything on the page looks like this, that is, it’s normal appearance checkboxes. Now we will change it.
Remove input, design spans
So, now we need to hide the usual checkboxes from the page.
Input (
display:none;
}
Now we need to somehow design the new fields. We will decorate the span elements, since they are inside the label .
Input + label span(
display:inline-block;
width:40px;
margin-right: 10px;
height:40px;
vertical-align:middle;
border: 5px solid green;
cursor:pointer;
border-radius: 5px;
}
With this selector we selected all the spans in the labels, which are located in the code immediately after the inputs with the checkbox type. This way the design will be applied to our spans. We give them a block-line type, a specific width and height, and a margin to the right so that the text doesn't fit flush against each other.
Let's make it work
Now we need to make sure that when you click inside the span, that is, when you select an option, a check mark is automatically placed in it. To do this, I first found on the Internet the corresponding icon with a check mark (it should be in png format), reduced it to the size of our field. Now all that remains is to insert the following code:
Input:checked + label span(
background:url(btn.png) no-repeat;
}
That's it, it works now! Try clicking and you will see that a nice check mark appears when you select it. My picture was in the same folder as the css file and was called btn.png, hence the entry.
So what does our magic input:checked + label span selector do? Essentially, it tells the browser to do the following: when any of the checkboxes are checked, apply spans in the labels background picture. Everything is so simple, we did without scripts, making beautiful checkboxes on pure css. Write in the comments if anything is unclear.
A moment of your attention: We all want to host our websites on reliable hosting. I analyzed hundreds of hostings and found the best - HostIQ There are hundreds online positive feedback about him, average rating users - 4.8 out of 5. May your sites be happy.
Loading...
