Storage attribute for inputs

In a registration form for example, there are individual inputs like name and address. Where you have a list however, you need to add more input fields, one for each entry, which in IMO, is not very efficient, and it lengthens the webpage unnecessarily, depending on the length of the list. The inefficiency is that PHP get and post only read values from html inputs. If instead of adding perhaps a large number of inputs, a storage attribute for inputs

<input type="text" name="Object" storage="ObjectList">

Where an input requires a list, two or more, an array variable called ObjectList would be created in JavaScript or other, to store the list, which could then be read by PHP get and post. Just an idea.

If the values are separated by comma or new line, what are the down-sides of that?

Screenshot 2021-12-12 at 23.48.24832×236 17.9 KB

None. If the designer wants to use a textarea or a comma-separated list in a text input, that’s fine. The problem with the latter is the user cannot see every entry, nor spelling mistakes, unless entries are copy/paste as opposed to keyboard input. If the designer doesn’t want use a textarea, multiple inputs are the only other option. I think my suggestion is better than multiple inputs for long lists if the designer doesn’t want to use textarea.

Consider implementing your idea with JavaScript, so that people can try it out and get a better picture of how it would be useful.

Have not tested this, so not sure if the JavaScript is correct but hopefully you get the idea.

HTML

<table id="List">
   <tr>
      <td style="width: 5%;"><input type="button" id="Add" value="Add" style="width: 100%;"></td>
      <td style="width: 25%;">
         <input type="text" name="Department" id="Department" placeholder="Department" style="width: 100%;">
      </td>
      <td style="width: 30%;">
         <input type="text" name="Employee" id="Employee" placeholder="Employee Name" style="width: 100%;">
       </td>
       <td style="width: 35%;">
         <input type="email" name="Email" id="Email" placeholder="Email" style="width: 100%;">
       </td>
       <td style="width: 5%;"></td>
    </tr>
 </table>

JavaScript

var dept = [];
var employee = [];
var email = [];

var add = $("#Add");
add.addEventListener("Click", () => {
dept.push($("#Department").value);
employee.push($("#Employee").value);
email.push($("#Email").value);
$("#Department").value = "";
$("#Employee").value = "";
$("#Email;").value = "";
});

The other options are possibly lots of text inputs that would look cluttered and how many lines of code, or textarea’s, how many rows where number of inputs is unknown?

Aha, so the idea is to have a set of inputs, and when the user clicks the button, the values are stored and the inputs are emptied. But how does the user view the previous values? What if the user wants to edit the previous values?

That can be accommodated. Inputs can de displayed using labels with buttons, once clicked can give options to either delete or edit. If edit, display the value in the text input to allow editing, then update the value in the label. If delete, delete from the array and delete the label. I’m sure this can be implemented, I just don’t have enough know-how to do so. I still think this would be a better alternative to adding potentially lots of text inputs to a webpage.

POST reads the values of all non-empty inputs, visible to the user or not.

Where there is a requirement for a lot of text inputs such as I described previously, a single text input for each entity, name, email etc. Each entry would then be added to a scrolling table of labels with Edit and Delete buttons for each row, each text input would be cleared for the next entry. The Edit button would display a row of label values in their respective text inputs to allow editing. The delete button would delete the row of labels. When the user has finished entering all data, JavaScript could then create a hidden table of inputs which POST can read from. This would allow the user to see all entries clearly without clogging up the webpage with text inputs, yet also allow the user to edit/delete entries as needed. No storing data in arrays the user cannot see.

If you can’t implement it yourself, try finding a website that already does something like this.

Hi all! what do you guys think of this idea?

<input type="char" name="case1">
<input type="list" name="case2">
<input type="tuple" name="case3">
<input type="array" name="case4">
<input type="object" name="case5">