Here are two HTML snippets for allowing the user to choose a language:
- One uses
<select>and<option>s, - The other uses a
<div>with alternating<input>/<label>s.
I plan to select one of these methods (or find a better one) and use CSS to customize its appearance so that something like the following will appear at the top right of the page, displaying all options simultaneously throughout the page.
https://i.sstatic.net/e4zgH.png
Between the two options, is there an objective preference?
What are the pros and cons of each method?
<select name="language" id="language" value="ENG">
<option>ITA</option>
<option selected="selected">ENG</option>
<option>FRE</option>
</select><div class="language">
<input type="radio" id="italian" name="fav_language" value="ita">
<label for="italian">Italiano</label><br>
<input type="radio" id="english" name="fav_language" value="eng" checked="checked">
<label for="english">English</label><br>
<input type="radio" id="french" name="fav_language" value="fre">
<label for="french">Français</label><br>
<div>¹ The image was created using a <ul> containing 3 <svg> elements within individual <li> items. I may add an external shadow to indicate the selected language in the future.