Cómo colocar una imágen o color a un formulario?

Quisiera saber cómo puedo hacer para dejar detrás de cada campo de un formulario una imágen detras e ir acomando el espacio de tipeado según la forma del gráfico que esté como background. Es decir que lo que deseo es armar un formulario de contacto tal cual posee este foro que me parece espectacular. La idea es armar uno desde cero para mi página web y en algún otro momento realizar otro en Flash pero como en esa materia aún son un ignorante, prefiero hacer algo lindo en Photoshop y luego adecuarlo a HTML.
Mucho agradeceré me podais indicar cómo hago. Estuve chequeando las propiedades de un formulario en HTML y por ningún lado encuentro la forma de colocar una imágen con fondo de un campo de texto. Peor aún no sé como dejarle tampoco, un color distinto a un campo SELECT.
MGS.Un abrazo

 

Hola, lo puedes hacer con estilos CSS.

Campo de texto :

Con un color de fondo :

<textarea name="comentario" cols="20" rows="5" style="width:200px;height:100px;font-size:12px;font-family:Helvetica;<!--coloro:white--><span style="color:white"><!--/coloro-->background-color:<!--colorc--></span><!--/colorc-->green;color:yellow;">
</textarea>

Con una imagen :

<textarea name="comentario" cols="20" rows="5" style="width:200px;height:100px;font-size:12px;font-family:Comic Sans MS;<!--coloro:white--><span style="color:white"><!--/coloro-->background-image:url(rutadelaimagen/imagen.jpg)<!--colorc--></span><!--/colorc-->;color:red;asdas">
</textarea>

Lo puedes aplicar a los demas campos del formulario, siempre de la misma manera, ves probando..., algunos campos no admiten todos los atributos.
Ejemplo para botones :

Los botones (type button, submit y reset) admiten los siguientes atributos CSS de estilo:

<!--coloro:white--><span style="color:white"><!--/coloro-->width <!--colorc--></span><!--/colorc-->, que fija la anchura del botón.


<!--coloro:white--><span style="color:white"><!--/coloro-->height <!--colorc--></span><!--/colorc-->, que fija la altura del botón.


<!--coloro:white--><span style="color:white"><!--/coloro-->background-color <!--colorc--></span><!--/colorc-->, que determina el color de fondo, y cuyo valor puede venir dado en su nombre web en inglés o como formato hexadecimal.


<!--coloro:white--><span style="color:white"><!--/coloro-->background-image <!--colorc--></span><!--/colorc-->, que determina una imagen de fondo.


<!--coloro:white--><span style="color:white"><!--/coloro-->color <!--colorc--></span><!--/colorc-->, que define el color de la fuente, y cuyo valor puede venir dado en su nombre web en inglés o como formato hexadecimal.


<!--coloro:white--><span style="color:white"><!--/coloro-->font-family <!--colorc--></span><!--/colorc-->, que fija el tipo de la fuente del texto del botón.


<!--coloro:white--><span style="color:white"><!--/coloro-->font-size <!--colorc--></span><!--/colorc-->, que define el tamaño del texto del botón.


<!--coloro:white--><span style="color:white"><!--/coloro-->font-weight <!--colorc--></span><!--/colorc-->, que fija el peso de la fuente (cantidad de negrita).


<!--coloro:white--><span style="color:white"><!--/coloro-->text-align <!--colorc--></span><!--/colorc-->, que define la alineación del texto en el botón.


<!--coloro:white--><span style="color:white"><!--/coloro-->padding-right (left / top/ bottom) <!--colorc--></span><!--/colorc-->, que fija el margen entre el extremo derecho (izquierdo / superior /inferior) del botón y el texto que contiene.


<!--coloro:white--><span style="color:white"><!--/coloro-->border-width (thin / medium / thick / none) <!--colorc--></span><!--/colorc-->, que define el ancho del borde.


<!--coloro:white--><span style="color:white"><!--/coloro-->border-style (none / solid / double / groove / ridge / inset / outset) <!--colorc--></span><!--/colorc-->, que fija el estilo del borde.


<!--coloro:white--><span style="color:white"><!--/coloro-->border-color <!--colorc--></span><!--/colorc-->, que define el color del borde.

NOTA. Todo lo comentado sobre los estilos en elementos de formualrio es totalmente valido para Internet Explorer y para Nestcape 6x, pero no así para Nestcape 4x, en algunos casos Netstcape 4 no aplica bien los estilos.

<!--coloro:white--><span style="color:white"><!--/coloro-->Un Saludo<!--colorc--></span><!--/colorc-->

 

Clarito, clarito... ¡Hasta yo lo he entendido!

 

Querido yokese:
Mil gracias por la respuesta, realmente muy pero muy útil. Aprovechando vuestros conocimientos y si no es mucha molestia os quiero preguntar lo siguiente:
1) Cómo logro que el texto tipeado dentro del campo de un formulario con una imágen como fondo, comience a tipearse en determinadas coordenadas? No hablo de centrados ni alineados sino exactamente de una ubicación determinada dentro del campo del formulario.
2) Cómo logro que algunos campos del formulario queden como transparentes. Puede hacerse ésto directamente con todo el formulario?
Por ahí creo haber visto la función transparent pero ahora no la encuentro.
Gs.

 

<!--QuoteBegin-Anonymous+--><div class='quotetop'>CITA(Anonymous)</div><div class='quotemain'><!--QuoteEBegin-->1) Cómo logro que el texto tipeado dentro del campo de un formulario con una imágen como fondo, comience a tipearse en determinadas coordenadas? &nbsp;No hablo de centrados ni alineados sino exactamente de una ubicación determinada dentro del campo del formulario.<!--QuoteEnd--></div><!--QuoteEEnd-->
Añadele Padding-left:20px (o los pixels que quieras), quedaría asi
<textarea name="comentario" cols="20" rows="5" style="width:200px;height:100px;font-size:12px;font-family:Helvetica;background-color:green;color:yellow;<!--coloro:white--><span style="color:white"><!--/coloro-->Padding-left:20px;"> <!--colorc--></span><!--/colorc-->
</textarea>

Puedes poner tambien:
Padding-right
Padding-top
Padding-bottom

Saludos

 

el modo fácil es ponerle un style="" a cada elemento

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><form>

<input type="text" style="filter: alpha(opacity='60');"><br>

<textarea style="filter: alpha(opacity='60');">

</textarea><br>

<input type="button" value="aaa" style="filter: alpha(opacity='60');">

</form><!--c2--></div><!--ec2-->

 

Ke explicación jejejej muy buena 8) 8)

 

que exelente explicacion...

yoquese usted si sabe.,.,jjeje
y soto tambien...
le aconsejo ..pongase de acuerdo con el compañero Soto y compile esto en un mini tutorial... y lo pone en la seccionde tutoriales.. que va muy bien ..
felicidades..

Otherme

PD.. donde se consigue una lista de todos los atributos HTML que se pueden cambiar con CSS??

 

Otherme pueda que esta pagina te sirva un poco, <a href="http://www.talleresdelweb.com/index.php?tdw=tll_manuales&id=5&acc=47" target="_blank">http://www.talleresdelweb.com/index.php?td...les&id=5&acc=47</a> de lo que buscas en css.

abrazos. :wink:

PD: Si me encuentro otra la posteare. :roll: