Different browsers set non-CDATA standard name attribute values for single-choice button groups of form elements to be parsed differently.

Standard Reference

According to the W3C html4.01 specification, the "name" attribute value must start with a letter ([A-Za-Z]), followed by any letter or number ([0-9])., hyphens ("-"), underscores ("_"), colons (":"), and periods ("..

For more details, refer to the HTML 4.01 standard 6.2 SGML basic types-ID and name tokens.

Multiple Single-choice buttons share the same control name (name). If the name value is valid, the single-choice buttons with the same value are grouped into a group, which are mutually exclusive, only one single-choice button is selected, and all other single-choice buttons with the same control name are not selected.

For details about the radio button (radio buttons), refer to the content in HTML 4.01 standard 17.2.1.

Problem description

The "name" attribute of a Single-choice button is used to group multiple single-choice buttons. buttons with the same property value of "name" are in the same group, only one button in the same group can be selected at the same time.

If the value in the "name" attribute does not conform to the CDATA standard range, different browsers use different processing methods for this illegal value.

Impact

When name = "" is set for multiple radio buttons:

• IE6 IE7 IE8 chrome safari considers that the "name" attribute is not set for multiple radio buttons. In this case, the specific processing policy of IE6 IE7 IE8 (q) is that the single-choice cannot be selected. The specific processing policy of IE8 (s) Chrome Safari is that any single-choice can be selected.
• Firefox opera considers Multiple Single-choice buttons to have the same "name" attribute value-an empty string. The single-choice buttons are normally grouped and the selection status is good.

Affected browsers

All browsers

Problem Analysis

According to the CDATA conventions of the name attribute in the Specification, we construct the following six groups of instances. The first group is the non-"name" attribute group, and the other five groups are the invalid "name" value code:

<Form> <input type = "radio"/> no name group <input type = "radio"/> no name group </form> <br/> <form> <input type = "radio" name = ""/> Empty character radio group <input type = "radio" name = ""/> Empty character radio group <input type = "radio" name = ""/> Empty character radio group <input type = "radio" name = ""/> Empty character radio group </form> <br/> <form> <input type = "radio" name = ": "/> Colon Character radio group <input type =" radio "name =": "/> Colon Character radio group <input type =" radio "name = ": "/> Colon Character single-choice group <input type =" radio "name = ": "/> Colon Character radio group </form> <br/> <form> <input type =" radio "name = ". "/> Single-choice group of dot characters <input type =" radio "name = ". "/> Single-choice group of dot characters <input type =" radio "name = ". "/> Single-choice group of dot characters <input type =" radio "name = ". "/> Single-choice group of dot characters </form> <br/> <form> <input type =" radio "name ="-"/> Single-choice group of minus characters <input type = "Radio" name = "-"/> minus character radio group <input type = "radio" name = "-"/> minus character radio group <input type = "radio" Name = "-"/> minus character radio group </form> <br/> <form> <input type = "radio" name = "regular"/> Chinese Character radio group <input type = "radio" name = "regular"/> Chinese Character radio group <input type = "radio" name = "regular"/> Chinese Character radio group <input type =" radio "name =" canonical "/> Chinese Character radio group </form>

The result of the code above clicking the single-choice button in each browser is summarized as follows:

	IE6 IE7 IE8 (q)	IE8 (s) Chrome Safari	Firefox Opera
No name Group	You cannot select any item.	You can select any item
Empty character Radio Group	You cannot select any item.	You can select any item	Single choice
Colon Character Radio Group	Single choice
Point character Radio Group	Single choice
Minus character Radio Group	Single choice
Chinese character Radio Group	Single choice

Each browser parses the "name" attribute value as follows:

	Chrome Safari	IE6 IE7 IE8 Firefox Opera
No name Group	<Input type = "radio"/>
Empty character Radio Group	<Input type = "radio" name/>	<Input type = "radio" name = ""/>
Colon Character Radio Group	<Input type = "radio" name = ":"/>
Point character Radio Group	<Input type = "radio" name = "."/>
Minus character Radio Group	<Input type = "radio" name = "-"/>
Chinese character Radio Group	<Input type = "radio" name = "inputs"/>

As shown in the preceding two tables:

• IE6 IE7 IE8 (q)When the "name" attribute is not set for Multiple Single-choice buttons and the attribute value is null, it means that the browser will process the two conditions like "name" attribute 1, you cannot click a single-choice button that does not set the "name" attribute.
• IE8 (s) Chrome SafariWhen the "name" attribute is not set for Multiple Single-choice buttons and the attribute value is null, it means that the browser will process the two conditions like "name" attribute 1, single-choice buttons with no "name" attribute set in specific processing policies can be clicked at will without group restrictions. In addition, we can see from the source code parsed by the browser,Chrome SafariAfter parsing, the Null String Value of the "name" attribute has been removed. At this time, the "name" attribute syntax does not comply with the specification. Therefore, the entire Single-choice button is equivalent to no "name" attribute setting.
• Firefox OperaWhen the "name" attribute is not set for Multiple Single-choice buttons, the browser can click the button if the processing policy is single-choice. However, if the "name" attribute of multiple radio buttons is an empty string, the browser recognizes it as a valid value "name" and groups the buttons based on this value.
• For other invalid "name" attribute values,All browsersCan be identified normally, and the implementation of this part of the client does not match the description of the HTML 4.01 standard.

[Note]: The HTML 4.01 specification does not explicitly describe how the single-choice button should be handled without the "name" attribute, which is implemented by the client.

Solution

Do not forget to write the "name" attribute of the single-choice button.

Although each browser is tolerant of handling non-empty string value "name" attributes, there are processing differences only when the "name" attribute value is null, however, it is recommended that you write the code correctly -- the "name" attribute value must start with a letter ([A-Za-Z]), followed by any letter or number ([0-9])., hyphens ("-"), underscores ("_"), colons (":"), and periods ("..