Idee formular de pe un site, cu grupuri si imagini

[mluci]

Salut Marplo! Cum pot sa fac si eu un formular de comanda asemanator cu cel de pe mready.net.Pentru a vedea formularul apasa te rog pe butonul "Vreau o aplicatie" din footer.

Cu html, css si javascrpt. Nu e ceva standard, simplu de aratat. Poti sa cauti in Sursa Paginii, sau cu Inspect Element sa vezi cum e fact si sa incerci; daca stii javascript.
Ca idee:
1. La fiecare grupa din formular creezi un input "hidden" si div-uri cu imagini pt. fiecare optiune.
2. Cu javascript programezi ca atunci cand se face clic pe o imagine, sa ii seteze un "class" pt. stil css de evidentiere, si sa adauge in input-ul "hidden" asociat acelei categorii valoarea /optiunea reprezentata de acea imagine (poate fi adaugata in <img> in atributul "alt" ca sa o citesti in JS).
3. Cand se trimite formularul, vei putea prelua datele din input-urile "hidden".

Se poate face ceva asemanator si doar folosind css si html, cu: <input type="radio" /> care sa fie ascunse cu display:none;, cu <label> si imagine adaugata la fiecare. Cand se apasa clic pe imagine, butonul radio asociat e bifat (fiindca sunt in acelasi <label>), chiar daca e ascuns; si cand se trimite formularul, se trimit si valorile bifate.

- Un exemplu pe care sa-l studiezi, si din care sa te inspiri.
HTML:

Cod: Selectaţi tot

<form action="#" id="idf" method="post">
<div class="fctg">
<h4>Categoria 1 (alege optiunea)</h4>
<label for="c1op1"><input type="radio" name="fc1" id="c1op1" value="v1o1" /><img src="img_c1o1.jpg" width="50" height="50" alt="img c1-o1" /></label>
<label for="c1op2"><input type="radio" name="fc1" id="c1op2" value="v1o2" /><img src="img_c1o2.jpg" width="50" height="50" alt="img c1-o2" /></label>
<label for="c1op3"><input type="radio" name="fc1" id="c1op3" value="v1o3" /><img src="img_c1o3.jpg" width="50" height="50" alt="img c1-o3" /></label>
</div>
<div class="fctg">
<h4>Categoria 2 (alege optiunea)</h4>
<label for="c2op1"><input type="radio" name="fc2" id="c2op1" value="v1o1" /><img src="img_c2o1.jpg" width="50" height="50" alt="img c2-o1" /></label>
<label for="c2op2"><input type="radio" name="fc2" id="c2op2" value="v1o2" /><img src="img_c2o2.jpg" width="50" height="50" alt="img c2-o2" /></label>
<label for="c2op3"><input type="radio" name="fc2" id="c2op3"l value="v1o3" /><img src="img_c2o3.jpg" width="50" height="50" alt="img c2-o3" /></label>
</div>
<input type="submit" value="Submit" />
</form>

CSS:

Cod: Selectaţi tot

<style>
.fctg {
border:1px solid #333;
margin:5px;
}
.fctg label input {
display:none;
}
.fctg img {
background:#fbfbee;
cursor:pointer;
display:inline-block;
height:50px;
margin:5px;
width:50px;
}

/*Evidentiaza imaginea cand butonul asociat e bifat */
.fctg label input:checked + img {
background:#bcefbc;
border:2px dotted #11f;
}
</style>

Demo:

Categoria 1 (alege optiunea)

img c1-o1img c1-o2img c1-o3

Categoria 2 (alege optiunea)

img c2-o1img c2-o2img c2-o3