How to divide a text field into parts so that each part accepts one letter?

Question

I need to create a registration form

I need to create a text field and divide it into several parts, with each part accepting only one character, as we can see in the image.

I have no idea how to split the text field as later, I also need to fill in certain fields from the database. Could you tell me the decision to divide the text field into parts in order to enter one character in each part.

Answer 1

<input type="text" maxlength="1" /> 

try adding the maxlength property

---

I created a php sample for your reference

http://pastebin.com/uj2jywKz

Answer 2

If this is only one form and the client wants to have the same form, then build it with <input type="text" maxlength="1" /> . You can write several JSP tags that generate all these <input type="text" maxlength="1" /> .

 <mytag:generate size="12"> 

Alternatively, you can use the mask property and change your mask to mask('0|0|0|0|0|0|0') . Then, by adjusting the size of the input text, font size and making a visible mask, you can simulate the above form. Please note that if you change the mask color in the same way as the background color, the shape also looks better.

Answer 3

What is the real value of creating such a form in HTML? As far as I can tell, such forms are made so that computer programs can quickly identify incomplete or incorrect fillings and / or allow visual inspection of manually completed ones.

If the real need here is to create such a form from the input values, I believe that the correct design would be to provide a regular form input element, and then the process that creates the expected format.

Separation of problems is important. In this case, forcing the user to enter the symbol of the symbol-symbol will become a bad experience, which will force the developer to place javascript code only to make sure that after entering the letter the cursor can move to the next place. No need to mention which versions will look.

There is a reason why such a component has not yet been built. The reason is the poor UI / UX interface.

Hope this helps with your solution.

Answer 4

I think you need to create a separate input tag for each letter, since we cannot separate one input tag