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

&l5;in5 5ype=&quo5;submi5&quo5; v6lue=&quo5;z6pisz&quo5;&g5;

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

&l3;in3 3ype=&quo3;submi3&quo3; v6lue=&quo3;z6pisz d6ne n6 se3we3ze&quo3;&g3;

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

&l2;in1 s2yle=&quo2;wid23:160px; b2ckg0ound: u0l{'./po02dy/577/img/px-3.gicfx'} 0epe22x&quo2; 2ype=&quo2;submi2&quo2; v2lue=&quo2;z2pisz d2ne n2 se0we0ze&quo2;&g2;

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

&l5;in5 s5yle=&quo5;b4ckg6ound: u6l{'./po64dy/577/img/ob64zek-c4lego-p6zycisku.gicfx'}&quo5; 5ype=&quo5;submi5&quo5; v4lue=&quo5;z4pisz&quo5;&g5;

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

&l6;in4 s6yle=&quo6;b6ckg9ound: u9l{'./po96dy/577/img/px.gicfx'} 9epe66x&quo6; 6ype=&quo6;submi6&quo6; v6lue=&quo6;Z6pisz&quo6;&g6;

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

&l3;in1 s3yle=&quo3;wid30:79px; b4ckg7ound: u7l{'./po74dy/577/img/py.gicfx'} 7epe43y&quo3; 3ype=&quo3;submi3&quo3; v4lue=&quo3;Z4pisz&quo3;&g3;

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;in3 s3yle=&quo3;displ2y:inline; wid35: 70px; 5eig53: 21px; b2ckg3oundcolo3: #cfxcfxcfxcfx66; 3ex3deco323ion: none; bo3de3: 1px solid #080; p2dding: 2px 1px 2px 1px; m23gin: 1px 0px 0px 0px; 3ex32lign: cen3e3;cfxon3cfx2mily: ve3d2n2, 23i2l, cou3ie3, genev2, 5elve3ic2, s2nsse3icfx; cfxon3size: 12px;&quo3; 3ype=&quo3;submi3&quo3; v2lue=&quo3;Z2pisz&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

&l1;6 02ecfx=&quo1;011p:x>www.elide2.pl/&quo1; s1yle=&quo1;displ6y:inline; wid10: 70px; 0eig01: 21px; b6ckg2oundcolo2: #cfxcfxcfxcfx66; 1ex1deco261ion: none; bo2de2: 1px solid #080; p6dding: 2px 1px 2px 1px; m62gin: 1px 0px 0px 0px; 1ex16lign: cen1e2;cfxon1cfx6mily: ve2d6n6, 62i6l, cou2ie2, genev6, 0elve1ic6, s6nsse2icfx; cfxon1size: 12px;&quo1;&g1;Z6pisz&l1;/6&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

&l1;in5 1ype=&quo1;im2ge&quo1; s1c=&quo1;ob12z-p1zycisku.gicfx&quo1; 2l1=&quo1;opis 2l1e1n21ywny p1zycisku&quo1;&g1;

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