Detailed explanation of checkbox and radio event selection usage in html

After radio registers the click event, the magic is that when you use the up, down, left, and right keys on the keyboard to select, the mouse event will actually be triggered, and the scroll wheel will also be triggered. This magical thing will not happen under mousedown. (Webkit cannot use up, down, left, and right selections)

After the checkbox registered the click event, the miracle happened again. When we selected the checkbox with a space, the magical click event was triggered again, and the mousedown missed the miracle again. Pass. (Webkit still cannot use spaces to select)

Let us all use click to reduce the burden on these two guys. Don't bind a bunch of events to them because of their inherent shortcomings. For these two guys, click is the best powerful. Worship~~~

When designing a questionnaire using a form, in order to reduce user operations, it is a good idea to use a select box. There are two select boxes in the d5fd7aea971a85678ba271703566ebfd tag of HTML, namely single The difference between a marquee and a checkbox is that users can only select one option in a radio button, while users can select multiple options in a checkbox, or even all of them. Please look at the following example:

The source code of this example is given below. Combined with the code, the settings of each parameter are discussed:
d73df2bf3afc4a5bf2700693946ac088
Do you like traveling? ? Please select:

<input type="radio" name="radiobutton" value="radiobutton" checked> 喜欢 
<input type="radio" name="radiobutton" value="radiobutton"> 不喜欢 
<input type="radio" name="radiobutton" value="radiobutton"> 无所谓<br>

Which sports are you interested in, please select:

<input type="checkbox" name="checkbox1" value="checkbox"> 跑步 
<input type="checkbox" name="checkbox2" value="checkbox"> 打球 
<input type="checkbox" name="checkbox3" value="checkbox"> 登山 
<input type="checkbox" name="checkbox4" value="checkbox"> 健美<br>

As can be seen from the source code above, to make a radio button, just change the type of d5fd7aea971a85678ba271703566ebfd Just set the parameter to type="radio"; to make a check box, just set the type parameter of the d5fd7aea971a85678ba271703566ebfd tag to type="checkbox". As for the type of selection box used in actual applications, it must be determined according to actual needs. If the user only needs to have one choice, use a radio button box. For example, in this example, the question "Do you like traveling?" requires the user to only have one choice, so a radio button box is used; if the user is allowed to have multiple choices, For the selected content, check boxes are used. For example, in this example, the question "What sports are you interested in?" is used because a person's interests may be multi-faceted, so check boxes are used.

Set the checked parameter in the d5fd7aea971a85678ba271703566ebfd tag, and the box will be selected by default. For example, the first radio button box in this example (the radio button box under "Like") is set to be selected by default, so that if the user wants to select "Like", they do not need to select it again. Of course, if the user wants to select If you "dislike", just click the radio button under "dislike", and the default value will be automatically cancelled. You can also set a checkbox to be selected by default using the same method. However, the default selection of the check box cannot be abused, otherwise it will cause user resentment.

In radio, be sure to remember to set the name attributes of all 27164efae8eba2511582b16ab474e84b objects to the same, for example, name="radiobutton" in the above example, remember It is not an ID attribute. Only in this way can the single-select effect be achieved. Otherwise, the 'like', 'dislike' and 'indifferent' in the above example can be selected at the same time. Remember!

The above is the detailed content of Detailed explanation of checkbox and radio event selection usage in html. For more information, please follow other related articles on the PHP Chinese website!