Forms are one of the most important parts of any site. It is used to create registration forms, feedback. On sites such as mail.ru, Vkontakte, and others, you could see the registration fields in which you need to enter not only a username and password, but also personal information. This may be gender, age, personal preferences and views, and so on.
When choosing a gender, two options are given: male and female. They are presented as fields for selection. These fields are created using the HTML checkbox tag.
Fields in HTML do not always match the design of the site, so they need to be changed. In this article we will talk with you about how to style checkbox in CSS.
What is a checkbox?
This is the value of the attribute of the input tag that is contained in the form tag. Most often used to indicate personal information of a user, such as personal preferences.
Its difference from radio is that it allows the selection of several fields simultaneously.
Create a checkbox. HTML
To place checkboxes on the site, you must create a form. For this, the paired form tag is used. It contains 2 attributes - action and method. The first indicates a link to the form handler, and the second indicates a method for indexing and processing the values received.
So, we created the form, now you need to place the checkboxes themselves. To do this, use a single input tag. This is a universal tag that is used to create all form fields.
We only need checkboxes. To create them, set the type attribute on the input tag, with a checkbox value.
We have empty checkboxes, we need to add notation. They can be entered after the input tag.
For the checkbox to work correctly, specify the value and name attribute. Name - required for the handler; set it to a value equal to the name of the field. Value (checkbox value) is an optional attribute, but it is better to use it for convenience.
There is one more attribute - checked. It has no values, it is used to select a field at startup. That is, if you set this attribute to the checkbox, it will be selected by default.
Here is an example of creating checkboxes:
Clearance checkbox. CSS
Standard checkboxes may not be suitable for your design. Now we will talk about how to create a design for checkbox in CSS.
When using standard and simple methods, nothing can be changed except positioning and positioning.
To change the location of the checkbox in CSS, use the margin property. With it, we will make our checkboxes located in the center of the web page, a short distance from each other.
Before starting to change the properties of the checkbox in a CSS document, we need to adjust our HTML code. Add classes, identifiers, and label tags. All this is necessary for styling.
Create 3 label tags for 3 input tags. Each label must be in front of the input field. This is a paired tag that has a required for attribute. It is needed to bind this tag to the form field.
We create 3 identifiers for our fields: check1, check2, check3. The same values are specified in the for attribute. Now they are tied to checkboxes.
Next, for each input, we indicate one class - check. It will serve as a selector for CSS checkbox styling.
Now add your CSS code to look like this:
There are some styles that do not apply to the checkboxes themselves, but this is necessary for the overall design of the page.
If you did everything right, now your checkbox form will look normal.