Javascript – Input Form Selectable Images

formsimageinputjavascript

I am looking to create an option within a form to choose a theme for the page. The options need to be displayed as images so the user can see what the theme looks like. What is my best way to implement this?

Best Solution

I'd suggest something like:

<fieldset>
<legend>Theme</legend>

<input type="radio" name="theme" id="theme_sunset" value="sunset">
<label for="theme_sunset">
    <img alt="Sunset" src="themes/sunset/preview.png">
</label>

<input type="radio" name="theme" id="theme_moonlight" value="moonlight">
<label for="theme_moonlight">
    <img alt="Moonlight" src="themes/moonlight/preview.png">
</label>

...