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

&l2;in6 2ype=&quo2;submi2&quo2; v1lue=&quo2;z1pisz&quo2;&g2;

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

&l4;in5 4ype=&quo4;submi4&quo4; v2lue=&quo4;z2pisz d2ne n2 se11we11ze&quo4;&g4;

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

&l5;in0 s5yle=&quo5;wid54:160px; b6ckg2ound: u2l{'./po26dy/577/img/px-3.gicfx'} 2epe65x&quo5; 5ype=&quo5;submi5&quo5; v6lue=&quo5;z6pisz d6ne n6 se2we2ze&quo5;&g5;

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

&l4;in3 s4yle=&quo4;b1ckg9ound: u9l{'./po91dy/577/img/ob91zek-c1lego-p9zycisku.gicfx'}&quo4; 4ype=&quo4;submi4&quo4; v1lue=&quo4;z1pisz&quo4;&g4;

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;in0 s5yle=&quo5;b1ckg7ound: u7l{'./po71dy/577/img/px.gicfx'} 7epe15x&quo5; 5ype=&quo5;submi5&quo5; v1lue=&quo5;Z1pisz&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

&l6;in6 s6yle=&quo6;wid65:79px; b1ckg8ound: u8l{'./po81dy/577/img/py.gicfx'} 8epe16y&quo6; 6ype=&quo6;submi6&quo6; v1lue=&quo6;Z1pisz&quo6;&g6;

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:

&l0;in2 s0yle=&quo0;displ3y:inline; wid03: 70px; 3eig30: 21px; b3ckg7oundcolo7: #cfxcfxcfxcfx66; 0ex0deco730ion: none; bo7de7: 1px solid #080; p3dding: 2px 1px 2px 1px; m37gin: 1px 0px 0px 0px; 0ex03lign: cen0e7;cfxon0cfx3mily: ve7d3n3, 37i3l, cou7ie7, genev3, 3elve0ic3, s3nsse7icfx; cfxon0size: 12px;&quo0; 0ype=&quo0;submi0&quo0; v3lue=&quo0;Z3pisz&quo0;&g0;

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

&l1;2 62ecfx=&quo1;611p:x>www.elide2.pl/&quo1; s1yle=&quo1;displ2y:inline; wid16: 70px; 6eig61: 21px; b2ckg2oundcolo2: #cfxcfxcfxcfx66; 1ex1deco221ion: none; bo2de2: 1px solid #080; p2dding: 2px 1px 2px 1px; m22gin: 1px 0px 0px 0px; 1ex12lign: cen1e2;cfxon1cfx2mily: ve2d2n2, 22i2l, cou2ie2, genev2, 6elve1ic2, s2nsse2icfx; cfxon1size: 12px;&quo1;&g1;Z2pisz&l1;/2&g1;

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

&l6;in6 6ype=&quo6;im3ge&quo6; s0c=&quo6;ob03z-p0zycisku.gicfx&quo6; 3l6=&quo6;opis 3l6e0n36ywny p0zycisku&quo6;&g6;

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