Imagem e cor em formulário, botão, área, texto

Vou postar sobre como personalizar esses botões(INPUT type=submit) também a área onde o usuário digita textos, dando opções de usar imagens, cores e estilos(style) de fontes(FONT) e bordas(BORDER).

Um aviso para os desavisados, isso só vai mostrar como melhorar a aparência de formulário ele não tem ação tanto que pode ser digitado testo ou ser clicado no botão(dentro desse post).

Um exemplo desses elementos crus ou sem estilo estão abaixo, as mudanças eu fiz na lateral desse blog, Newsleter e Busca(Ir).

<FORM>
<INPUT size=16><INPUT type=submit value=" Newsleter ">

<INPUT size=13><INPUT type=submit value=" Ir ">


</FORM>

Da pra perceber pelos números que SIZE=16 e no outro 13 irão regular o tamanho da área de texto(para preenchimento) mas

isso não significa que caberá esse número de caracteres, também não muda nada se for colocado SIZE=2, mas nesses casos

como eu não especifiquei mas tem uma forma de impor limite de caracteres, não vou detalhar muito por que minha intenção é cor,

imagem e estilo.
type=submit vai criar um botão e value=" Ir " irá dar um nome a ele no caso ir ou Newsleter...

Formulário: área de texto colorida

Tem um pequeno script para apagar o texto ao clicar nesse post Selecionar ou deletar texto em textarea e formulário

<FORM>

<INPUT color: rgb(0, 102, 0);">32" MAXLENGTH="90" value="VAI ESTAR AQUI ATÉ VOCÊ DELETAR" title="VAI APARECER QUANDO PASSAR O MOUSE" style="BACKGROUND: url(http://img293.imageshack.us/img293/9828/newsleterla3.gif) #e4eff1 no-repeat left top; FONT-FAMILY: Verdana, Arial, Helvetica; FONT-SIZE: 14px; COLOR: RED; padding-left: 17px;">

</FORM>


INPUT Não precisa ser /fechado/ <entendeu></entendeu>?


size="22" Limita tamanho(largura)


MAXLENGTH="90" Limita o número de caracteres à 90


value="VAI ESTAR AQUI ATÉ VOCÊ DELETAR"


title="VAI APARECER QUANDO PASSAR O MOUSE"


style= Estilo css que poderia ser usado entre as tags head


BACKGROUND: imagem e cor de fundo, se por acaso não carregar a imagem a cor aparecerá. Vai especificado também como

a imagem deve se comportar; não repetir(no-repeat)


url(http://img293.imageshack.us/img293/9828/newsleterla3.gif) Endereço da imagem


#e4eff1 Cor azul-claro


no-repeat Para que a imagem não se repita(caso tiver espaço para isso)


left top Depois seu alinhamento top(topo) left(lado direito) bottom(embaixo) right(esquerdo).


FONT-FAMILY: estilo de fonte, primeira opção Verdana, segunda Arial, terçeira Helvetica; caso o navegador não tiver suporte

para a primeira a segunda será usada...


FONT-SIZE: 14px; Tamanho da fonte


COLOR: RED; Isso é interessante, solto e sozinho esse código indica a cor da fonte vermelha que poderia ser COLOR:

#000000; preta. Veja Tabela de cores html

padding-left: 17px; Afasta qualquer coisa, (menos background) inclusive o texto do canto, borda do lado esquerdo.

Tente observar os sinais # "" ; : = () </> cada um desses tem uma função se você intender ou respeitar sua localização não terá problemas.(tive problema com espaços)


Melhore ainda mais fazendo uma busca na web por esse código FONT-WEIGHT:


Ou insira e faça um teste FONT-WEIGHT: bold;

Formulário: botão submit colorido

Infelizmente os botões ficam quadrados.

ou

<FORM>

<INPUT title="VAI APARECER QUANDO PASSAR O MOUSE" style="FONT-SIZE: 19px; BACKGROUND:

url(http://img253.imageshack.us/img253/4354/searchve6.gif) #e4eff1 no-repeat left top; FONT-FAMILY: Verdana, Arial,

Helvetica" type=submit value=" VAI SER TEXTE DO BOTÃO ">

</FORM>



Se der uma olhada é praticamente a mesma coisa que o a área de texto, porém sai algumas coisinhas(códigos não usados)
e entra o:

type=submit Que "faz" o botão.


É bom usar uma imagem no tamanho do botão.



Post relacionados:



Hospedar imagem grátis


Problema ao usar imagem do blogspot usar imagem do blogspot