Html input - name vs. id

Deep Dive into id and name

Understanding id

• Uniqueness: Each id should be one-of-a-kind within an HTML document.
• JavaScript and CSS Link: The id is used by JavaScript's getElementById() function and CSS's #idSelector for styling or DOM changes.
• Fragment: For internal page linking and bookmarking, use URL fragments (#).
• Assistive Hook: id values are used by assisted technologies to aid in form navigation, important for HTML accessibility.

Understanding name

• Server-End Functionality: When a form gets submitted, the server uses name to match values and variables. For PHP, this would be the $_POST or $_GET variable.
• Radio Button Groupings: If an input type="radio" shares the same name, only one can be submitted.
• Greying History: The name attribute was used in older HTML versions for anchors but has been replaced by id in modern HTML.

Essential Developer Practices

Ensuring id Uniqueness

• Prepare for Validation: Use HTML validators or linters to avoid duplicate ids.
• Start with a Letter: Make sure your id begins with a letter as an HTML specification requirement.

Using name Effectively

• Grouping Form Controls: Group related functional elements of a form, like checkboxes, sliders, with the same name attribute for data consistency.
• Data Binding: Modern frameworks like Vue, React, and Angular use name for their data binding mechanics.

Advanced Notes

Sensitivity to Case and Compatibility

• id Case Insensitivity: HTML id is case-insensitive, but maintain case consistency for JS and CSS selectors.
• name Case Sensitivity: This becomes crucial when the server-side logic interprets name and Name differently.

The Inclusion Factor (Accessibility)

• Programmatic Labels: Use id to link <label> elements directly to form inputs improving usability for screen-readers.
• Accessibility Testing Tools: Use tools like axe-core or WAVE to verify id usage in aligning with accessibility best practices.

Google Webmaster's Tip (SEO Considerations)

• Fragmentation: Use id for deep-linking to reach your users directly to desired content sections. This can positively influence both user experience and SEO.