Proposal: Introduce <field-array> and <field-object> for Native Array/Object Handling in HTML Forms.

[ShoaibShokat03]

What problem are you trying to solve?

Proposal: Introduce <field-array> and <field-object> for Native Array and Object Handling in HTML Forms

Abstract

HTML forms currently lack a native mechanism for handling complex data structures such as arrays and objects. Developers are forced to rely on workarounds like naming conventions (e.g., name="person[0][name]") or JavaScript-based solutions to collect and submit such data. This proposal introduces two new elements, <field-array> and <field-object>, to allow for intuitive and declarative handling of arrays and objects within forms, making complex data collection seamless and standardized.

---

Problem Statement

HTML forms are designed for simple key-value pair submissions. When developers need to submit arrays or nested objects, they must:

1. Use naming conventions like name="object[array][key]", which can be error-prone and verbose.
2. Implement client-side JavaScript to dynamically manage data structures, adding unnecessary complexity.

This lack of native support leads to inconsistencies in implementation, increased development effort, and barriers to accessibility and standardization.

---

What solutions exist today?

Proposed Solution

Introduce two new HTML elements:

1. <field-array>: Defines a group of elements representing an array.
2. <field-object>: Encapsulates a set of key-value pairs within an array.

These elements would automatically group and structure form data into arrays and objects, serialized appropriately during form submission.

---

How would you solve it?

Example Usage

Simple Array Submission:

<form action="/submit" method="POST">
  <field-array name="tags">
    <input type="text" value="HTML" />
    <input type="text" value="CSS" />
    <input type="text" value="JavaScript" />
  </field-array>
  <button type="submit">Submit</button>
</form>

Submitted Data:

{
  "tags": ["HTML", "CSS", "JavaScript"]
}

Array of Objects:

<form action="/submit" method="POST">
  <field-array name="person">
    <field-object>
      <input type="text" name="name" value="John" />
      <input type="number" name="age" value="30" />
    </field-object>
    <field-object>
      <input type="text" name="name" value="Jane" />
      <input type="number" name="age" value="25" />
    </field-object>
  </field-array>
  <button type="submit">Submit</button>
</form>

Submitted Data:

[
  { "name": "John", "age": 30 },
  { "name": "Jane", "age": 25 }
]

---

Benefits

1. Declarative Syntax: Simplifies HTML for developers by removing the need for complex naming conventions or JavaScript.
2. Standardization: Creates a universal approach to handling arrays and objects in HTML forms.
3. Improved Developer Experience: Reduces boilerplate code and eliminates common sources of errors.
4. Backward Compatibility: Non-supporting browsers would simply ignore the new elements, ensuring graceful degradation.

---

Implementation Details

• Serialization:
  • Browsers would serialize <field-array> and <field-object> elements into structured JSON-like data.
• Validation:
  • <field-array> can include required and maxlength attributes to validate array length.
  • <field-object> inherits validation rules from its child inputs.

---

Anything else?

Conclusion

The introduction of <field-array> and <field-object> has the potential to revolutionize how complex data is collected and submitted via HTML forms. By addressing a long-standing limitation, this proposal would greatly enhance the power and usability of web forms, reducing the reliance on JavaScript and workarounds while improving developer productivity and user experience.

---