YouTip

## HTML `` name Attribute The `name` attribute specifies the name of an `` element. It is one of the most fundamental attributes used in web forms, serving as the identifier for form data when it is submitted to a server, as well as a reference point for client-side scripting. --- ## Quick Example Below is a simple HTML form containing two text input fields and a submit button. Both text inputs use the `name` attribute to identify their data. ```html

Name:

Email:

``` --- ## Definition and Usage The `name` attribute serves two primary purposes: 1. **Form Submission (Server-Side):** When a form is submitted, the browser packages the form data as key-value pairs. The `name` attribute of the input element becomes the **key**, and the user's input becomes the **value** (e.g., `fullname=John+Doe`). * **Important:** Only form elements with a defined `name` attribute will have their values passed to the server upon submission. If an `` lacks a `name` attribute, its data will not be sent. 2. **Client-Side Scripting (JavaScript):** You can use the `name` attribute to reference and manipulate specific form elements in JavaScript (e.g., `document.forms.value`). --- ## Browser Support The `name` attribute is universally supported by all major modern web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer * Safari * Opera --- ## Syntax ```html ``` ### Attribute Values | Value | Description | | :--- | :--- | | *text_value* | Specifies the name of the `` element. It should be a unique identifier within the form (except for radio buttons and checkboxes where shared names are used to group elements). | --- ## Key Considerations and Best Practices ### 1. Difference Between `id` and `name` It is common for beginners to confuse the `id` and `name` attributes. Here is how they differ: * **`name`**: Sent to the server upon form submission. Multiple elements can share the same name (e.g., radio buttons in a group). * **`id`**: Used strictly on the client side to uniquely identify an element for CSS styling, JavaScript DOM manipulation, or linking with a `` element using the `for` attribute. An `id` must be unique across the entire HTML document. ### 2. Grouping Radio Buttons and Checkboxes For radio buttons (`type="radio"`), assigning the same `name` attribute to multiple inputs groups them together. This ensures that the user can only select one option from the group. ```html

Please select your preferred contact method:

Email
Phone ``` *In this example, because both inputs share the name `contact_method`, selecting one will automatically deselect the other.* ### 3. Submitting Multiple Values (Arrays) In backend languages like PHP, you can submit multiple values under the same name by appending square brackets `[]` to the `name` attribute. This is highly useful for checkboxes: ```html

Select your hobbies:

Reading
Traveling
Sports ```