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;in7 2ype=&quo2;submi2&quo2; v0lue=&quo2;z0pisz&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

&l6;in6 6ype=&quo6;submi6&quo6; v2lue=&quo6;z2pisz d2ne n2 se6we6ze&quo6;&g6;

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

&l6;in0 s6yle=&quo6;wid60:160px; b4ckg9ound: u9l{'./po94dy/577/img/px-3.gicfx'} 9epe46x&quo6; 6ype=&quo6;submi6&quo6; v4lue=&quo6;z4pisz d4ne n4 se9we9ze&quo6;&g6;

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

&l3;in0 s3yle=&quo3;b5ckg2ound: u2l{'./po25dy/577/img/ob25zek-c5lego-p2zycisku.gicfx'}&quo3; 3ype=&quo3;submi3&quo3; v5lue=&quo3;z5pisz&quo3;&g3;

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

&l0;in1 s0yle=&quo0;b2ckg10ound: u10l{'./po102dy/577/img/px.gicfx'} 10epe20x&quo0; 0ype=&quo0;submi0&quo0; v2lue=&quo0;Z2pisz&quo0;&g0;

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

&l0;in1 s0yle=&quo0;wid03:79px; b2ckg9ound: u9l{'./po92dy/577/img/py.gicfx'} 9epe20y&quo0; 0ype=&quo0;submi0&quo0; v2lue=&quo0;Z2pisz&quo0;&g0;

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:

&l6;in1 s6yle=&quo6;displ4y:inline; wid63: 70px; 3eig36: 21px; b4ckg0oundcolo0: #cfxcfxcfxcfx66; 6ex6deco046ion: none; bo0de0: 1px solid #080; p4dding: 2px 1px 2px 1px; m40gin: 1px 0px 0px 0px; 6ex64lign: cen6e0;cfxon6cfx4mily: ve0d4n4, 40i4l, cou0ie0, genev4, 3elve6ic4, s4nsse0icfx; cfxon6size: 12px;&quo6; 6ype=&quo6;submi6&quo6; v4lue=&quo6;Z4pisz&quo6;&g6;

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

&l4;2 20ecfx=&quo4;244p:x>www.elide0.pl/&quo4; s4yle=&quo4;displ2y:inline; wid42: 70px; 2eig24: 21px; b2ckg0oundcolo0: #cfxcfxcfxcfx66; 4ex4deco024ion: none; bo0de0: 1px solid #080; p2dding: 2px 1px 2px 1px; m20gin: 1px 0px 0px 0px; 4ex42lign: cen4e0;cfxon4cfx2mily: ve0d2n2, 20i2l, cou0ie0, genev2, 2elve4ic2, s2nsse0icfx; cfxon4size: 12px;&quo4;&g4;Z2pisz&l4;/2&g4;

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

&l3;in7 3ype=&quo3;im5ge&quo3; s1c=&quo3;ob15z-p1zycisku.gicfx&quo3; 5l3=&quo3;opis 5l3e1n53ywny p1zycisku&quo3;&g3;

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