CODEWITHSUNDEEP
html
Ninja Warrior 11
Ninja Warrior 11

Reputation: 372

HTML: Display key in an input field

is it possible to view the key in an input field but when submitted the value must be in abcde? Its like <option value="abcde">Apple</option> but I don't want to use option in this case. The key-value is {'Apple': 'abcde'}.

When submitted:

<input id=section name=section value=abcde>

When viewed (inside the input box):

Apple

Upvotes: 0

Views: 400

Answers (1)

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146500

In plain static HTML5, the closest fit is probably using a list attribute in the <input> element to link the control to a <datalist> element. That way you basically get auto-complete for free:

<label>First choice:  <input name="fruit1" value="" list="fruits"></label>
<label>Second choice: <input name="fruit2" value="" list="fruits"></label>

<datalist id="fruits">
  <option value="abcde">Apple</option>
  <option value="fghij">Orange</option>
  <option value="klmno">Strawberry</option>
</datalist>

However, there's no mechanism to display a value and submit a different one. The above snippet will face users with your internal keys.

(Needless to say, this could be easily solved with JavaScript.)

Upvotes: 1

Related Questions