Formatação de campos de texto

[vini_loock]

Olá.

hoje estou fazendo a meu primeiro tutorial XD. espero que gostem!

eu vou tar ensinando a mudar a cor de fundo, da borda, da letra de campos de texto e mais algumas coisas relacionadas a campo de texto, eu acho esses efeitos muito legais, como sou iniciante nessa coisa de sites, acava que era feito em flash.

pode ser uma coisa simples para alguns, mas para muitos é uma coisa complicada como era a alguns dias para mim.

então vamos parar de falação, e vamos para o que interessa.

(Obs: não copie os códigos, digite você mesmo, assim você vai aprender melhor.)

um campo de texto é obrigatoriamente formado pelo código "<input type="text" name="nome">", mas podemos encrementa-lo colocando valor inicial, definindo um tamanho, colocando bordas, trocando o fundo entre outras opções.

muita coisa que você vai definir em um campo de texto fica style="aqui dentro". tudo o que eu vou ensinar hoje, vai ser colocado aqui.

então inicialmente seu campo de texto vai ficar assim:

<input type="text" name="nome" style="">

Todas alterações que eu for fazendo eu vou colocando o código abaixo para que vocês não se percamDefinindo a cor de fundo

Para definir a cor de fundo de um campo de texto você acrecentará isso:

background-color:#000000;

aqui como exemplo eu usei o preto, mas vocÊ pode colocar qualquer outra cor. e o seu código ficará assim:

<input type="text" name="nome" style="backgroun-color:#000000;">

Definindo bordas

Para definir bordas de um campo de texto você tem que acrescentar:

border-size:2px;

e você também pode mudar a cor da borda acressentando:

border-color:#33ff66;

, ou definir o tipo que você quer de borda acressentando:

border-style:solid;

para bordas sólidas, ou

border-style:dashed;

para bordas traçasdas. E o seu código deve estar mais ou menos assim:

<input type="text" name="nome" style="background-color:#000000; border-size:2px; border-color:#33ff66;"

Definindo tamanhao da font

Para definir a font de um campo de texto vocÊ tem que acressentar no seu código:

fot-size:3px;

para o tamanho das letras, e

color:#ffffff;

para a cor das letras, e

letter-spacing:3px;

para o espaço entre uma letra e outra. o seu código deve estar mais ou menos como isso:

<input type="text" name="nome" style="background-color:#000000; border-size:2px; border-color:#33ff66; font-size:3px; color:#ffffff; letter-spacing:3px;">

Definindo barra de rolagem

Você pode escolher se você que que apareça a barra de rolagem

sempre(yes), nunca(no) ou só quando for preciso(auto)

para isso é necessário você acressentar:

overflow:valor;.

o seu código deve estar mais ou menos assim:

<input type="text" name="nome" style="background-color:#000000; border-size:2px; border-color:#33ff66; font-size:3px; color:#ffffff; letter-spacing:3px; overflow:auto;">

Ah... eu já ia me esquecendo.

você pode fazer isso em textarea, você apenas em ves de escrever: "<input type="text" name"nome" style="alterações">", você vai escrever assim: "<textarea name="nome" style="alterações"></textarea>"

É isso. espero que tenham gostado, e que seja o primero de muitos tutoriais.

Editado Novembro 2, 2009 por vini_loock