Forms: what happens if "input id" is not the same to "label for"?

Hello. In forms, they told us that the Input ID should be the same to Label For.



But what happen if "<label for=“animal-1”
and <input id=“animal-2”

Because the form is displayed good in both cases.
Or the data will not be send to server?

The data will be sent to the server regardless of any labeling concerns. The issue is more one of accessibility. Labels with for tell screen readers which control to focus upon for user input.

What you describe is an issue, to be sure, and bad practice. Labels need to be bound to their control in order to be effective, else why bother using them?

<label for="first-name">First Name</label><label for="last-name">Last Name</label><label for="age">Age</label>
<input id="first-name"><input id=last-name"><input id="age">

A screen reader would be able to tab between controls and tell the user which field they are focused on. The nice thing about the for attribute is that it takes the exact same text as the id we are binding it to.

Recall that labels are inline elements so the above will appear scrunched together on the screen. Giving them their own lines will cure this. They will still appear on one line, though, just with a space between. We can style the elements with display: inline-block and give them the same width as the control underneath them, as well as center alignment, and such.

A label can be used as a container not just for textual content, but the control itself. When implemented in this manner we do not need to use id and for. The control is a child of the label element so is included in the namespace of the label. It cannot belong to another label.

<label>First Name <input></label>
<label>Last Name <input></label>
<label>Age <input></label>

Likewise, we can style this to look pretty. The above will appear on one line, but we can make the labels into block level elements and they will take their own lines.