Understanding HTML Form Elements: Selection, Hidden Inputs, Dropdowns, and Image Maps

The author, a well‑known JavaScript expert, introduces the next part of a series on form elements, focusing on the selection group, hidden‑input group, dropdown group, and graphic group.

Selection group refers to input[type=radio] and input[type=checkbox] . Their state is determined by the checked attribute. In modern MVVM frameworks, a selected radio is a boolean (often sent as 0/1), while a checkbox submits an array of strings. Listening to the change event works in most browsers, but older IE versions require handling defaultChecked and asynchronous updates.

IE also has a bug where clicking a checked radio again does not uncheck it; developers must toggle el.checked = !el.checked and use defaultChecked for IE6.

Hidden‑input group ("搭车系") includes input[type=hidden] , input[type=submit] , and input[type=image] . These elements allow submitting data without user interaction, such as tokens or data carried over from previous pages. The submit button sends its own name and value ; the image button also sends click coordinates (e.g., name.x and name.y ).

Dropdown group deals with the select element and its option and optgroup children. Selecting an option sets its selected attribute, updates selectedIndex , and populates the selectedOptions array. Compatibility issues arise with innerHTML assignment in older IE versions, which strip certain characters. The value of an option is taken from its value attribute or its text content if value is absent.

Three ways to add options dynamically are demonstrated:

Directly setting select.innerHTML = '<option value="1">1</option>' .

Using new Option(label, value) and select.options.add(...) . The add method has different signatures across browsers; IE6/7 require the version without a null second argument, Firefox prefers the version with null , and IE8 accepts both.

Using the standard DOM API: document.createElement('option') followed by appendChild . This works in all modern browsers, though early IE versions only supported creating a limited set of elements.

Additional option properties such as index and label are mentioned, with notes on their compatibility.

Graphic group clarifies that input[type=image] is a submit button, not a true graphic element. Real graphic form elements are area and map , which enable image maps. The article lists shape attributes ( circle , polygon , rectangle ) and their coordinate formats, and points to MDN for further details.

The article concludes with links for further reading and an invitation for comments and support.