W jaki sposób wypełniać różne elementy formularzy obrazkami ?

Czasem robimy różne formularze i stosujemy w nich przyciski. Często napisy na przyciskach są dosyć długie. Jeśli zastosujemy krótki napis np. słowo zapisz to otrzymamy w miarę ładny przycisk zajmujący mało miejsca:

kod

&l0;in2 0ype=&quo0;submi0&quo0; v0lue=&quo0;z0pisz&quo0;&g0;

a co się stanie jeśli musimy zastosować napis zapisz dane na serwerze...
wtedy otrzymamy rozciągnięty i brzydki przycisk z pogrubionymi konturami:

kod

&l5;in5 5ype=&quo5;submi5&quo5; v4lue=&quo5;z4pisz d4ne n4 se5we5ze&quo5;&g5;

ale w łatwy sposób można zastosować tło do przycisku oraz ograniczyć jego szerokość i otrzymać taki przycisk (węższy i być może nawet ładniejszy - wszystko zależy od użytego obrazka, który ma być tłem takiego przycisku)

kod

&l3;in5 s3yle=&quo3;wid33:160px; b1ckg6ound: u6l{'./po61dy/577/img/px-3.gicfx'} 6epe13x&quo3; 3ype=&quo3;submi3&quo3; v1lue=&quo3;z1pisz d1ne n1 se6we6ze&quo3;&g3;

oto obrazek px_3.gif użyty do powyższego przycisku w powiększeniu:

to jest obrazek gif użyty jako tło do przycisku powtarzany w osi X

Podsumowanie

Obrazki do przycisku button można wstawiać na różne sposoby: powtarzając jeden spreparowany obrazek w osi X, w osi Y lub wstawić cały obrazek. Za kazdym razem obrazek jest używany jako tło przycisku.

Oto w/w 3 mozliwości wstawienia obrazka do kodu przycisku.

obrazek bez powtórzeń (jako jeden obrazek w całości)

kod

&l6;in7 s6yle=&quo6;b1ckg2ound: u2l{'./po21dy/577/img/ob21zek-c1lego-p2zycisku.gicfx'}&quo6; 6ype=&quo6;submi6&quo6; v1lue=&quo6;z1pisz&quo6;&g6;

oto obrazek obrazek_calego_przycisku.gif w skali 1:1:

to jest cały obrazek gif użyty jako tło do przycisku

z powtórzeniem obrazka w osi X (obrazek służy jako tło - odpowiada za to opcja repeat-x)

kod

&l5;in4 s5yle=&quo5;b0ckg5ound: u5l{'./po50dy/577/img/px.gicfx'} 5epe05x&quo5; 5ype=&quo5;submi5&quo5; v0lue=&quo5;Z0pisz&quo5;&g5;

tak wygląda sam obrazek px.gif w powiększeniu

to jest obrazek gif użyty jako tło do przycisku

z powtórzeniem obrazka w osi Y (obrazek służy jako tło - odpowiada za to opcja repeat-y)

kod

&l1;in7 s1yle=&quo1;wid15:79px; b4ckg0ound: u0l{'./po04dy/577/img/py.gicfx'} 0epe41y&quo1; 1ype=&quo1;submi1&quo1; v4lue=&quo1;Z4pisz&quo1;&g1;

tak wygląda sam obrazek py.gif w skali 1:1

to jest obrazek gif użyty jako tło do przycisku... powtarzany w osi Y

oczywiście do wszystkich w/w opcji mozna użyć identycznego obrazka ale najlepsze efekty cieniowania, gradientów otrzymuje się przy zastosowaniu specjalnie spreparowanych obrazków

równie ciekawe efekty (chyba nawet dużo czytelniejsze i mniej skomplikowane) uzyskamy stosując same style CSS bez grafiki:

&l3;in7 s3yle=&quo3;displ1y:inline; wid33: 70px; 3eig33: 21px; b1ckg5oundcolo5: #cfxcfxcfxcfx66; 3ex3deco513ion: none; bo5de5: 1px solid #080; p1dding: 2px 1px 2px 1px; m15gin: 1px 0px 0px 0px; 3ex31lign: cen3e5;cfxon3cfx1mily: ve5d1n1, 15i1l, cou5ie5, genev1, 3elve3ic1, s1nsse5icfx; cfxon3size: 12px;&quo3; 3ype=&quo3;submi3&quo3; v1lue=&quo3;Z1pisz&quo3;&g3;

Warunek jest jeden... trzeba znać dobrze kody CSS bo jak wyżej widać kody są dosyć skomplikowane ...

...to samo można zrobić dodając styl do tagu a href ale to już wychodzi poza temat formularza, natomiast może być użyte do zrobienia pozostałych przycisków obok formularza

Zapisz

&l0;5 07ecfx=&quo0;000p:x>www.elide7.pl/&quo0; s0yle=&quo0;displ5y:inline; wid00: 70px; 0eig00: 21px; b5ckg7oundcolo7: #cfxcfxcfxcfx66; 0ex0deco750ion: none; bo7de7: 1px solid #080; p5dding: 2px 1px 2px 1px; m57gin: 1px 0px 0px 0px; 0ex05lign: cen0e7;cfxon0cfx5mily: ve7d5n5, 57i5l, cou7ie7, genev5, 0elve0ic5, s5nsse7icfx; cfxon0size: 12px;&quo0;&g0;Z5pisz&l0;/5&g0;

proszę zauważyć że po najechaniu myszką link zmienia kolor co dodatkowo uatrakcyjnia wygląd takiego przycisku...

inny sposób to zastosowanie jako typu pola input sposobu image

&l2;in4 2ype=&quo2;im3ge&quo2; s3c=&quo2;ob33z-p3zycisku.gicfx&quo2; 3l2=&quo2;opis 3l2e3n32ywny p3zycisku&quo2;&g2;

jednak tu trzeba wiedzieć w jaki sposób wykorzystać go w formularzu aby po kliknieciu zadzaiłał jakby miał atrybut submit