I want to offer an idea. Which will have 2 uses. The idea itself. Add a relative link format for the < A> tag.
<a href="@fieldName=Value">link</a>
Specifying the field name.
Now I will list the applications and usage scenarios.
1.Creating new controls using CSS:
Structurally it will look like a <SELECT> control. In this control, you can choose from the following options. But in my example, although it is similar, my solution has no restrictions on the design of the control. With the help of my idea, you can create controls without using JS and without using Web Components, but also with very wide capabilities.
We can set the A tags to any shape, round, triangular, it’s like the same thing to have a control with micro-adjustments by design. But now it can be done with my idea.
<input name="color" type="hidden">
<a href="@color=red">Red</a>
<a href="@color=blue">Blue</a>
or
<input name="superCallendar" type="hidden">
<a href="@superCallendar=Past">Past</a>
<a href="@superCallendar=Now">Now</a>
<a href="@superCallendar=Will">Will</a>
Now we don’t need to be able to program Web Components, we can create new controls using CSS and HTML. Before, we needed to forward data by calling in JS to implement complex controls.
2. We can make templates of filled fields in the link. having one form, we can create a link by clicking on which all fields for the form will be automatically filled in.
<a href="http://mySite.com/?@children=2&@education=hight&@work=full&@city=Berlin&@order=123&@product=Gloves12.">
Template of the completed form</a>
After working through this idea, it becomes obvious to me the advantage of this idea, it solves many problems that exist today. -Solves the problem by creating its own design for existing controls. -Solves the problem of filling in the form fields. You can create a link with filled in fields for your relative and send him this link via WhatsApp. Your relative (parent) will open the link and click the submit form button.
I suggest using this idea for all types of fields: text, radiobutton, checkbox, select, hidden, number, phone, data, time, and others. And also come up with an analog of the link in the form of a button.
<button type='value' target='targetFieldName' value='red'>Red</button>
or
<button type='value' name='targetFieldName' value='red'>Red</button>
II And I also want to talk about a new idea here, but it is very closely related to this one.
. The new idea is that a new magic value could be used for the and tags of the TARGET attribute. target="_after", target="_before"
<div>
<input type=text name=phone[]>
<label target=_before >You phone</label>
<label target=_before>You phone</label>
</dv><div>
<input type=text name=phone[]>
<label target=_before >You phone</label>
<label target=_before>You phone</label>
</dv>
(It might be convenient to have default values for the TARGET attribute. If the TARGET attribute is not specified, then by default it will be either _after or _before.)
The value of _after or _before should only work with the same nesting, i.e. be neighbors.
This benefit will be of great importance when we have many fields with the same names designed as an array. We won’t be able to know the exact name of the field, but we know for sure that there are many fields and each has its own description.
Suppose you have a form open in front of you in the likeness of an MS Excel spreadsheet. Suppose there are many radio button switches in one of the columns in each row.
If these switches are arranged as an array, then the radio buttons from each cell will be combined into a common control of the entire table. And our task is to combine radio buttons only for each cell.
If we use one hidden field instead of radio buttons and use several <a> tags with links, then we can create an analogue of radio buttons without combining all into one control, as does a radio button.
for brevity, I will shorten the table tags
<table>
<tr><td> <input type=radio value=1 name=pcs[]> <input type=radio value=2 name=pcs[]>
<tr><td> <input type=radio value=1 name=pcs[]> <input type=radio value=2 name=pcs[]>
<tr><td> <input type=radio value=1 name=pcs[]> <input type=radio value=2 name=pcs[]>
</table>
We can see how the radio buttons have merged into one control.
But
<table>
<tr><td> <input type=hidden value=0 name=pcs[]> <a href=@_after=1> </a> <a href=@_after=2> </a>
<tr><td> <input type=hidden value=0 name=pcs[]> <a href=@_after=1> </a> <a href=@_after=2> </a>
<tr><td> <input type=hidden value=0 name=pcs[]> <a href=@_after=1> </a> <a href=@_after=2> </a>
</table>
Or
<table>
<tr><td> <input type=hidden value=0 name=pcs[]> <button type=value taget=_after value=1> <button type=value taget=_after value=2>
<tr><td> <input type=hidden value=0 name=pcs[]> <button type=value taget=_after value=1> <button type=value taget=_after value=2>
<tr><td> <input type=hidden value=0 name=pcs[]> <button type=value taget=_after value=1> <button type=value taget=_after value=2>
</table>
As you can see, the functionality of links is similar to radio buttons, but you can create arrays of controls in the likeness of radio buttons and others, and these controls will have a special design. After that, Chrome developers don’t need to develop any fine-tuning controls for existing controls. I’m sorry, I may have described my idea in a crumpled way. I tried to put the idea briefly.
After thinking of this idea, it’s unclear how we didn’t think of it before. After all, it’s so simple and useful.
The evidence of the benefits is immediately visible.
PS in case of multiple forms on the page, we can specify the name of the field with the name of the form.
<a href="http://mySite.com/?@order.children=2&@order.education=hight&@order.product=Gloves12.">
Template of the completed form</a>
Let’s divide the idea into 2 parts.
- -The benefit of the implementation is to set values by clicking on the active element.
- -The method of implementation, perhaps something is incompatible or requires adjustments.
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 <a> , you can put the background of a red shirt, and in another <a> , 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.
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.
<input type=hidden value=0 name=pcs[]> <button type=value value=1> <button type=value value=2>
or
<input type=hidden value=0 name=pcs[]> <a href="@=1"></a> <a href="@=2"></a>
If you use the default values. You can write code very briefly. In 90% of cases, the default values will be justified.
Let’s divide the idea into 3 parts.
-
- The benefit of the implementation is to set values by clicking on the active element.
-
- The method of implementation, perhaps something is incompatible or requires adjustments.
-
- What will be the default value.
And it is also necessary to take into account the short syntax in case. 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. For example, writing controls about values to be applied, but at the same time when the target control is missing. But this is already a topic of additional discussion, but it can also be very useful.
PS yes, the @ is reserved as a character in the address bar. But the @ is used as a separator of the login and password before the host, if the @ is written after the host, it will simply have a different meaning.
You can also use style classes for controls that have added values to fields: :checked/:selected
