New idea for relative link < a > as Control element and as template for form

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

Re 1., I think you should be able to implement this via hidden radio buttons and labels.

@simevidas I’ve been doing layout for more than 15 years. Either you haven’t read the idea itself, you’ve only read the first paragraph. Or show me how it’s done here. But my proposal has broader possibilities.

Something like this?

<form>
  <label>
    <input type="radio" name="color" value="red" class="sr-only">
    <span>Red</span>
  </label>
  <label>
    <input type="radio" name="color" value="blue" class="sr-only">
    <span>Blue</span>
  </label>
</form>

(where sr-only is a “visually hidden” class)

[type=radio] + span {
  display: inline-block;
  border: 1px solid gray;
  padding: .5em;
}

[type=radio]:checked + span {
  border-color: blue;
  background: lightblue;  
}

Live demo: https://output.jsbin.com/fadahoy/quiet

@simevidas Your example is not available. And SPAN is not active elements. We will have to dance with a tambourine to ensure accessibility similar to the active element.

But my idea doesn’t stop there. I propose a multifunctional application.

Suppose we have a table in the form. There are many rows and columns in the table. Each column of the table has the same fields.

For example, the first column has text fields. When sending, we will receive an array of strings. But if we place several radio buttons in each cell in the column. Then how, in this case, do we group the radio buttons without using JS?

<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>

Live demo: https://output.jsbin.com/nariwoqivu/1

What do you mean, my example is not available?

Notice that the <span> elements are nested in <label> elements. I’ve tested with VoiceOver, and the choices are correctly announced, so I’m not sure where the problem is.

@simevidas Excuse me for being picky. Accessibility can be viewed as an outline style. But maybe I was wrong in terms of accessibility. You’re right about accessibility. But my idea is in a different plane. How to implement radio buttons in the table?

It looks like some HTML tags were removed from your post. You need to escape them with backticks (`).

`<example>`

I’m writing HTML code in the browser here. I can clearly see the code that I insert into the message after sending. . What I wanted to write, I see it completely. I have specially shortened the HTML code of the table. But my code is also valid. The specification allows only the opening tags, TR, TD. They do not need to be closed. I shortened the tags for brevity of description and focus on the essence. Do you see this code that I wrote in the previous message? This screenshot:

What does ”the and tags” in your original post mean? It looks like you wrote some tags there (e.g., “the <foo> and <bar> tags”), but it got stripped out.

I can’t view the text in the editor anymore. But I didn’t seem to write anything there. I apologize for my poor English. I have to translate the speech through a translator, and then translate it back to check the correctness of the translation. Please tell me what idea you would come up with that would allow you to use radio buttons in the table, while they would be grouped in cells, by analogy with

<input name=user[] type=text>

So that you can place a radio button in each cell of the column and so as to get an array of variables from the radio buttons.

I suggest creating a page that demonstrates the functionality that you’re proposing implemented in JavaScript.

@simevidas OK