Do select and checkboxes values, in HTML forms, support non latin characters?

Question

I have the following code in a web form:

<select name=“selectyourpreference“>
  <!--first option-->
  <option value="audiobook">Audiobook for listening</option>
  <!--second option-->
  <option value="option_select_001">Deluxe Book First Edition</option>
  <!--third option-->
  <option value="Canción en español">Canción en español</option>
</select>

when the user is going to see in the form results is the VALUE and not the rendered string text. For this reason, is recommendable to have same string for the VALUE and for the string to show, right?

For the first option, no problem because, as many tutorials aimed to english speakers, the used letters are ok, but unfortunately, in programming, many times only latin characters are allowed.

However, if the user selects the SECOND OPTION, he will see: “option_select_001 is your selected option” but that means nothing for the the user. In the form, he might have read “Deluxe Book First Edition”. The value should have the same string, right?

And for the third option, I made the “correct use”, value and shown string have the “same string” = “Canción en español” and it works; however this has NON LATIN characters like the attachment in /ó/ and the /ñ/ (sounds like /gn/).

So, in my tests the third option worked, so does it mean that the VALUE attribute in HTML admits all kind of characters? or only extended latin characters? My inquire extends also to the values in checkboxes.

I prefered to use this long explanation in order to avoid general answers like yes, no, without knowing the real context of my inquire.

Answer 1

It all depends on selected charset (coding). If you save your file as UTF-8, set html meta charset to utf-8, it will work in javascript. If you need to post the form using php or save it into a databae you might need to set charset for it as well. When using MySQL you might need to specify the coding in your db connection and you also need to set correct coding of the table/column. And for the question of same value as string - it higly depends on the use case. If you plan to use javascript to show what user selected, it does not need to be the same, since you can get the displayed string using method innerHTML(). You can also add a custom attribute to your html, for example data-value"Supēr optíon" and then get it the value of this attribute (this is useful if you want to add an icon to your string or something similar). If you plan to use database to store options for each selectbox and also store answers of users I would recommend creating a mapping table.