Change The Input's Field Width Based On The Name Attribute

I'm creating a question and answer input field. I'm storing the answer in the name attribute for easy checking later. How do I make the input field the same length as the string in

Solution 1:

You need JavaScript to accomplish this.

const fields = document.querySelectorAll('.field');
fields.forEach(field => {
  const name = field.getAttribute('name'); 
  field.setAttribute('size', name.length);
  field.value = name;
});

.field {
  font-family: monospace;
}

<inputclass="field"type="text"name="answer"><inputclass="field"type="text"name="another_answer">