Hello Dear friends. I have an idea I want to ask your advice. Idea html:
<select name="index" id="index">
<option value="one">First</option>
<option value="two">Second</option>
</select>
<label for="index" value="one">First</label>
<label for="index" value="two">Second</label>
or
<input type="text" name="myname" id="myname">
<label for="myname" value="Tom">Tom Cat</label>
<label for="myname" value="Bred Pit">Bred Pit</label>
<label for="myname" value="Madonna">Madonna Chekone</label>
<label for="myname" value=""> Clear field </label>
That is, when you click on the Label, the Label data will be entered in the field.
.
I will describe a problem that I personally encountered. And I know that every developer faces it without exception.
I have a table on the page (<table>) with fields. I will not write the table itself, but I will write its fields for an example.
<input name="name[]" type='text'><input name="on[]" type='radio' value='on'><input name="on[]" type='radio' value='off'>
<input name="name[]" type='text'><input name="on[]" type='radio' value='on'><input name="on[]" type='radio' value='off'>
<input name="name[]" type='text'><input name="on[]" type='radio' value='on'><input name="on[]" type='radio' value='off'>
For example, I simplified the number of simple text fields. But as is usually the case,there are the fields phone, email, and the rest.
As you can see, if you send the form to the server, you will get a multidimensional array of data with names, phone numbers, and emails. But with the radio button field, everything is completely different. You cannot create a group of radio buttons for a single row in a table. All radio buttons are linked together with each other. To solve this problem, you have to resort to JS for placing indexes in the attribute of the name of radio buttons. And it’s very hard. At the same time, for other types of fields, everything works without JS out of the box. I would like everything to work out of the box with radio buttons as well. There was an idea to group the radio buttons of each line in a specific tag. But it also requires HTML refinement. But I came up with the idea of LABEL, on the one hand it works like a radio button, on the other hand it has all the advantages of a regular field. And it does not require putting indexes using JS. . And also. . Do you remember Bootstrap 2? There’s a lot of glamour but no accessibility. But Bootstrap 4 (5) has the same glamour but still has accessibility.
My syntax suggestion does not violate any accessibility at all. But at the same time, it gives a great scope for Bootstrap, for the development of controls, even those that we can’t even imagine right now. In general, to create sites for customers, there will be a place to turn around. For example, product order forms with built-in design parameters. For example, for a LABEL, you can put the background of a red shirt, and in another LABEL, you can put the background of a blue shirt. The client pokes at the Label and the field is filled in by default without JS.
Do you think this is a good idea? Label is not an active element, but for example, in the value setting mode, it could behave as an active element.
This behavior is similar options to the control select . But at the same time, each option of such control is not limited to a small rectangle of the field, but can be located anywhere on the site, having any shape according to the design. Order forms will become even more interactive. . For example, you need to make a diagram of a theater or circus hall with a choice of seats, for 5000 seats of the audience.
Previously, before you would have need to create 5000 <input >, with specify for each one .
But now it will be much easier we create one field.
.
<select multiple>...</select> with 5000 options. and for each option, we write <label>
We will get 20% less code, and this is a good saving.
But previously, there was a need to monitor the separate allocation of each label on JS. With the pseudo-class :checked/:selected, you don’t need to do this now.
And it will be easier for us to handle such an array in JS.
.
.
Or this version of the execution.
<input type="text" name="myname" id="myname">
<a href="#myname=Tom">Tom Cat</a>
<a href="#myname=Bred Pit">Bred Pit</a>
<input type="text" name="myname" id="myname">
<a href="#myname" value="Tom">Tom Cat</a>
<a href="#myname" value="Bred Pit">Bred Pit</a>
. Here another difficulty arises. The array of fields turns out to be correct, but then the problem is to associate the active labels with a specific field from the array of fields. . I suggest that the binding should be done according to the neighborhood principle. For example, if the active label is located immediately behind a field, then the label value will only belong to that field. .
<div>
<input type="text" name="myname[]" >
<label value="Tom">Tom Cat</label>
<label value="Bred Pit">Bred Pit</label>
</div>
<div>
<input type="text" name="myname[]" >
<label value="Tom">Tom Cat</label>
<label value="Bred Pit">Bred Pit</label>
</div>
Or
<div>
<input type="text" name="myname[]" >
<label value="Tom">Tom Cat</label>
<label value="Bred Pit">Bred Pit</label>
<input type="text" name="myname[]" >
<label value="Tom">Tom Cat</label>
<label value="Bred Pit">Bred Pit</label>
</div>
