Inputs should have `name` attributes

[Altair-Bueno]

Is your feature request related to a problem? Please describe.

The name attribute is essential for server first websites that leverage traditional form submission workflows. Consider the following React component and scheme:

function BasicForm (props){
   return <form action={props.action} method={props.method}>
      <JsonForms
        renderers={vanillaRenderers}
        cells={vanillaCells}
        {...props}
      />
      <input type="submit" />
    </form>
}

{
  "title": "Person",
  "required": ["name", "surname", "birthday"],
  "type": "object",
  "properties": {
    "name": { "title": "Name", "type": "string" },
    "surname": { "title": "Surname", "type": "string" },
    "birthday": { "title": "Birthday", "type": "string", "format": "date" }
  }
}

This renders successfully but name attributes are nowhere to be seen

<form action="/createPerson" method="POST">
  <div class="vertical-layout">
    <div class="vertical-layout-item">
      <div class="control root_properties_name" id="#/properties/name">
        <label for="#/properties/name-input" class="">Name*</label
        ><input
          type="text"
          class="validate valid input"
          id="#/properties/name-input"
          value=""
        />
        <div class="validation input-description"></div>
      </div>
    </div>
    <div class="vertical-layout-item">
      <div class="control root_properties_surname" id="#/properties/surname">
        <label for="#/properties/surname-input" class="">Surname*</label
        ><input
          type="text"
          class="validate valid input"
          id="#/properties/surname-input"
          value=""
        />
        <div class="validation input-description"></div>
      </div>
    </div>
    <div class="vertical-layout-item">
      <div class="control root_properties_birthday" id="#/properties/birthday">
        <label for="#/properties/birthday-input" class="">Birthday*</label
        ><input
          type="date"
          class="validate valid input"
          id="#/properties/birthday-input"
          value=""
        />
        <div class="validation input-description"></div>
      </div>
    </div>
  </div>
  <input type="submit" />
</form>

Without name attributes, submitting the form sends nothing.

Describe the solution you'd like

Include name attributes on each input field.

Describe alternatives you've considered

• Writing my own forms, which is exactly what I don't want to do.
• Manually handling forms on client side, which is a waste of client resources and time.

Framework

Core

RendererSet

Vanilla

Additional context

No response

[sdirix]

Hi @Altair-Bueno,

That's a good point. I don't see a downside to also set the name properties, so I would be fine to add this to the Vanilla renderer set. Do you want to contribute this feature?

[Altair-Bueno]

Hey @sdirix

Sure, I can give it a try. However, i'm not familiar with the codebase. Could you give me some guidance on what needs to be changed? My guess is the vanilla-renderers package, particularly each input cell. Is that so?

[sdirix]

Yes exactly, that is the correct place!

[Altair-Bueno]

Thanks for the followup @sdirix. Unfortunately I had some issues with the Dev container (see #2149). Hopefully is something with an easy fix.

In the meantime, I've reading the codebase a bit. I'm concerned that the cells do not receive their paths as props (something like ["foo",0,"bar"]). Ideally, we would want each input to have a meaningful name derived from said path, so it could be easily decoded from the backend. I suggest something like jQuery's param encoding, which is supported pretty much everywhere these days.