Forum

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:

Forum

Idee formular de pe un site, cu grupuri si imagini

Idee formular de pe un site, cu grupuri si imagini

Idee formular de pe un site, cu grupuri si imagini

Idee formular de pe un site, cu grupuri si imagini

Categoria 1 (alege optiunea)

Categoria 2 (alege optiunea)