<div class="cc-selector" style="position: relative; left: 0; top: 20px;" "="">
<input id="visa" type="radio" name="credit-card" value="s_231c7b75b98a4efa8342733f36799cdf" onchange="this.form.submit();">
<label class="drinkcard-cc visa" for="visa"></label>
<input id="mastercard" type="radio" name="credit-card" value="ns_231c7b75b98a4efa8342733f36799cdf" onchange="this.form.submit();">
<label class="drinkcard-cc mastercard" for="mastercard"></label>
</div>
Red part for "Scary"
Blue part for "Not Scary"
=> hidden radio buttons for the choice
In the CSS :
.cc-selector input {
margin: 0;
padding: 0;
-webkit-appearance: none; => hide
}
=> Labels : images
.visa {
background-image: url(scary2.png);
width: 140px;
height: 60px;
}
.mastercard {
background-image: url(notscary2.png);
width: 140px;
height: 60px;
}
=>
onchange="this.form.submit()
231c7b75b98a4efa8342733f36799cdf => is to know what picture is concerned
s_ or
ns_ at the begining =>
scary or
not
scary
Example :
POST request to Location to http ://nightmare.mit.edu/submit_face_results
credit-card: s_231c7b75b98a4efa8342733f36799cdf
but : redirection : HTTP 302
Location : http ://nightmare.mit.edu/faces