In the last lesson, we studied the concept of form. Its main task is to combine input forms of a certain type. For example, a form can combine data from a questionnaire, test, and so on. In this tutorial, we'll learn how to make the input fields themselves!
Responsible for completing the form tag , it has a type attribute that allows you to create certain fillable fields: text fields, radio buttons, checkboxes, lists, buttons. I repeat, all the elements listed above are available in only one tag - .
Tag in HTML
- this is a single tag with which you can create certain elements of the document (text fields, radio buttons, checkboxes, lists, buttons), which are intended to be filled directly on the html page.Below example work in HTML
Tag there are some very important attribute values.
name- an attribute that should always be set for an element so that the handler (script) understands what input name it processes.
So the processing script will understand that these are two different fields.
type- this attribute is responsible for specifying the field type. As mentioned earlier, with a certain type, input can become a radio button, checkbox, list, button, text field.
size- an attribute specifying the size for the text field when type is specified as text. The specified data is taken as the width of the field.
Tag
The type attribute for input
Now let's take a closer look type attribute and its meanings:text- the value of the attribute indicates that a regular text field will be displayed, initially available for editing.
value attribute not required, it can be omitted altogether. However, if you need to specify a default value that will initially be displayed in the field, then it must be filled in.
password- turns input into a password field. The difference from text is that the input data will be displayed as asterisks, and after filling out the entire form, the browser will understand that the password is in this field and will ask if it needs to be saved.
submit- a similar value of the type attribute defines input as a button, when pressed, a certain script will be processed (you will learn what a script is later, having studied PHP and JavaScript languages). The button is used to send data from forms to a handler written, for example, in the above languages. There are others, but I have listed the most popular ones.
reset- this is another kind of button that resets all values in the form. after pressing it, they will need to be filled again.
radio- This value creates a radio button, i.e. a radio button. It is used, as a rule, for values with a small number of options. For example, choose gender, interval with age, etc. as follows:
The type attribute is set to radio - this is a radio button. The value value is written to the phrase or word that you want to receive if someone selected a specific radio button and submitted data.
There are other cases where the user needs to select multiple answers. In this case, it is no longer a radio button (accepts only one option), but a checkbox or checkbox.
checkbox is a field that works in the same way as a radio button. The only difference is that you can select several checkboxes as answer options. As well as with a radio button, if several checkboxes belong to the question, then their name attribute must be filled accordingly. The value will accordingly indicate the value of the selected field.
Features of the input fields
Here I propose to analyze some of the issues that you may also encounter at the beginning when working with input.How to make the user immediately select the answer (checkbox or radio button)?
There is a single checked attribute for this. It must be specified at the end of the input tag. Since the attribute is single, it has no values. You just need to add it to the input element. For example, as in the entry below:
How can I make the text explaining this choice visible in front of the checkbox or radio button?
To do this, before and after the radio button or checkbox, write the tag
Accordingly, you specify in the label tag, which opens and closes, the checkbox itself and the necessary words. And attention! Even if the user clicks on the word, the checkbox will still be highlighted.
Let "s add a little bit of code to our example so we can examine the data generated by this form. The HTML is revised to add a element represents preformatted text which is to be presented exactly as written in the HTML file.">
block to output the form data into:
Using radio inputs
We already covered the fundamentals of radio buttons above. Let's now look at the other common radio-button-related features and techniques you may need to know about.
Selecting a radio button by default
To make a radio button selected by default, you simply include the checked attribute, as shown in this revised version of the previous example:
In this case, the first radio button is now selected by default.
note: If you put the checked attribute on more than one radio button, later instances will override earlier ones; that is, the last checked radio button will be the one that is selected. This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.
Providing a bigger hit area for your radio buttons
In the above examples, you may have noticed that you can select a radio button by clicking on its associated element represents a caption for an item in a user interface.">
Beyond accessibility, this is another good reason to properly set up
Validation
Radio buttons don't participate in constraint validation; they have no real value to be constrained.
Styling radio inputs
The following example shows a slightly more thorough version of the example we"ve seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:
There"s not much new to note here except for the addition of element is used to group several controls as well as labels (
The CSS involved is a bit more significant:
Html ( font-family: sans-serif; ) div:first-of-type ( display: flex; align-items: flex-start; margin-bottom: 5px; ) label ( margin-right: 15px; line-height: 32px; ) input ( -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 50%; width: 16px; height: 16px; border: 2px solid #999; transition: 0.2s all linear; outline: none; margin-right: 5px; position: relative; top: 4px; ) input:checked ( border: 6px solid black; ) button, legend ( color: white; background-color: black; padding: 5px 10px ; border-radius: 0; border: 0; font-size: 14px; ) button:hover, button:focus ( color: #999; ) button:active ( background-color: white; color: black; outline: 1px solid black;)
Most notable here is the use of the -moz-appearance property (with prefixes needed to support some browsers). By default, radio buttons (and checkboxes) are styled with the operating system"s native styles for those controls. By specifying appearance: none , you can remove the native styling altogether, and create your own styles for them. Here we"ve used a border along with border-radius and a transition to create a nice animating radio selection. Notice also how the ), checkbox ( ), or option (
Compatibility note: If you wish to use the appearance property, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword none does not have the same effect across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.
Notice that when clicking on a radio button, there"s a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you"d want in a real web application, but it definitely shows off the possibilities.
Specifications
| Specification | Status | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| HTML Living Standard The definition of" " in that specification. |
Living Standard | ||||||||||||
| Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | ||||||||
| type="radio" | Chrome Full support Yes | Edge Full support Yes | Firefox Full supportYes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android ? |
Legend
Full support Full support Compatibility unknown Compatibility unknownsee also
- element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent."> and the elements."> HTMLInputElement interface that implements it.
- or a
Thanks to CSS3, we can achieve almost any effect we need on the screen. In this tutorial, we'll look at how we can style checkboxes and radio buttons.
Input:checked + label:before ( content: "\2022"; color: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px; )
Now when we press the radio button, a small white circle should appear in the main gray circle.
Styling checkboxes
Now let's move on to styling the checkboxes. First, let's hide the element again:
Input ( display: none; )
Since we're removing the default checkbox display with the :before pseudo-element, we'll just add a border:
Checkbox label:before ( border-radius: 3px; )
Then we add the checkmark symbol that will appear when the checkbox is clicked. Let's do this by analogy with the radio circle. Do we need to convert the HTML character this time? ✓.
Input:checked + label:before ( content: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; color: #f3f3f3; text-align: center ; line-height: 15px; )
In the end, this is what we should get:
Results
In this tutorial, we looked at a method that you can use to display the radio buttons and checkboxes you need. Since we used CSS3, this technique will only work in browsers that support this technology. In order to achieve similar results in older browsers, you can use the appropriate
We continue the topic of the last lesson and in it we examined the process of creating regular text input fields. Today, in continuation, we will learn how to create one more form element - radio buttons. Such buttons are used when you need to specify one of the options for answering a choice, for example, "yes" or "no", and not as not both options. Let's create such radio buttons, take the end result of the last lesson and after the fields input create a new paragraph and write another tag and specify the following attributes in it.
The first is the field type type= radio- an attribute that specifies the button type. The second is an attribute that gives a name to our button. name="time". This value will be sent to our handler when the visitor clicks the submit button. That is, if this radio button is active, then this value will be sent to the handler value="yes". As a result, we got the following line. By inserting this line into the editor, and refreshing the browser, we get a simple radio button.
HTML
Of course, now the radio button does not look at all clear, there is no question and no answer option, that is, it is not clear what it is responsible for. Therefore, we will first create an answer option using the tag
HTML
Now our button already has a response option (its value). Now let's create another radio button with the opposite answer "no". This is done very simply, copy the already created button and change the word “yes” to “no” in it and in the attribute value set value no . It is important to be aware of the fact that the names of the radio buttons must remain the same, as this shows the browser that the two buttons belong to the same group and that they are mutually exclusive to each other.
HTML
Here we got the second radio button and if we click on one of the buttons, then the button that we select is highlighted. That is, they are mutually exclusive, and this happens because they have the same name. If you set two different names, then it will be possible to select two buttons at once, which becomes logically not entirely correct.
Well, now let's ask the question itself for our buttons, before our buttons we create another paragraph with our question.
HTML
Well, now another more interesting moment, it can come in handy when using radio buttons is the automatic activation of the button. If you refresh the page now, then not one button is active for you. Initially, we can specify which button will be active, for this we use a special attribute, adding it to the button, it will be activated by default. And this attribute is called checked , which means "marked" in English. This attribute is rather unusual and does not require a value.
That's all with radio buttons. In the sum of two lessons, we got the following code:
HTML
Customizing form elements is probably one of the most fun things to do in Web design. Whether this activity is justified is decided by everyone for himself, although it is obvious that in our time designers and layout designers still devote their time and energy to this.
Unfortunately, only one css often not enough to easily design a particular form element. That's probably why so many people use things like the Uniform for their uniforms. Personally, I always try to reduce the amount of Javascript used for such purposes, so I want to talk about completely native HTML+CSS customization method for radio buttons and checkboxes.
I am sure that most of the experts on Habré use similar methods, for those who use js libraries, like Uniform I hope this article is helpful.
Go!
So let's set a goal: design checkboxes and radio buttons so that they look like js magic Uniform, but make it as simple as possible, native in relation to HTML and css way, as well as avoiding the use of unnecessary tags, while maintaining semantics. Something like this.The main idea is based on the native "skill" of the HTML tag label link to a specific form element. Actually, that's all, then only the code.
markup
<ul >
<li >
<input id = "cfirst" type = "checkbox" name = "first" checked hidden / >
<label for="cfirst"> Checked checkbox</label>
</li>
<li >
<input id="csecond" type="checkbox" name="second" hidden / >
<label for="csecond"> unchecked checkbox</label>
</li>
<li >
<input id = "cthird" type = "checkbox" name = "third" hidden disabled / >
<label for="cthird"> Disabled checkbox</label>
</li>
<li >
<input id = "clast" type = "checkbox" name = "last" checked hidden disabled / >
<label for="clast"> Disabled checked checkbox</label>
</li>
</ul>
<ul >
<li >
<input id = "rfirst" type = "radio" name = "radio" checked hidden / >
<label for="rfirst"> Checked radio</label>
</li>
<li >
<input id="rsecond" type="radio" name="radio"
<label for="rsecond"> Unchecked radio</label>
</li>
<li >
<input id = "rthird" type = "radio" name = "radio" hidden disabled / >
<label for="rthird"> Disabled radio</label>
</li>
</ul>
Completely native markup. Usage label together with input just like from textbooks. The only important point is that you need to specify id for everybody input and for for label to link them.
I think everyone noticed the use of the attribute hidden who hides themselves input elements, but due to the connection with label, we can still manipulate them. As a result, we get something like:
It's quite boring, but everything works. Now it remains to arrange all this goodness as it should. To do this, use the sprite that is used on the site Uniform.
Registration
input[type="checkbox"] ,
input[type="radio"](
display : none ;
}
input[type="checkbox"] + label,
input[ type= "radio" ] + label (
font : 18px bold
color : #444 ;
cursor : pointer ;
}
input[ type= "checkbox" ] + label: :before ,
content : ""
display : inline-block ;
height : 18px ;
width : 18px
margin : 0 5px 0 0 ;
background-image : url ( uniformjs.com/images/sprite.png) ;
background-repeat : no-repeat ;
}
input[ type= "checkbox" ] + label: :before (
background-position : -38px -260px ;
}
input[ type= "radio" ] + label: :before (
background-position : 0px -279px ;
}
input[ type= "checkbox" ] :checked + label: :before (
background-position : -114px -260px ;
}
input[ type= "radio" ] :checked + label: :before (
background-position : -108px -279px ;
}
input[ type= "checkbox" ] :disabled + label: :before (
background-position : -152px -260px ;
}
input[ type= "checkbox" ] :checked :disabled + label: :before (
background-position : -171px -260px ;
}
input[ type= "radio" ] :disabled + label: :before (
background-position : -144px -279px ;
}
input[ type= "radio" ] :checked :disabled + label: :before (
background-position : -162px -279px ;
}
Here everything is as simple as possible. Using a Pseudo Element before in order to show our "virtual controls" and the user did not notice the substitution. Parts of the sprite, change depending on the state input"a.
As a result, we get something like:
