Hola Amigos.
Eh creado un diseño para nuestro Extra Formulario, no es da lo mejor, pero bueno, espero que les Guste.
VISTA PREVIA
Codigo Html
1/1- Para empezar, vamos a colocar este Codigo que usaremos para crear nuestro Formulario:
Cita: <div class=" Formulario">
<form method="POST" action=" adquirir.htm">
<table>
<tbody>
<tr>
<td>
<div><span style="font-family: 'Pompiere', cursive;"><strong> Nombre de Usuario:</strong> </span></div>
</td>
<td><input type=" Text" style="width: 150px;" name="modulenter[extrabox1text]" /></td>
</tr>
<tr>
<td>
<div><span style="font-family: 'Pompiere', cursive;"><strong> Contraseña:</strong></span></div>
</td>
<td><input type=" Text" style="width: 150px;" name="modulenter[extrabox2text]" /></td>
</tr>
<tr>
<td>
<div><span style="font-family: 'Pompiere', cursive;"><strong> Tu mensaje:</strong></span></div>
</td>
<td>< Textarea style="width: 180px; height: 150px;" name="modulenter[text]"></ Textarea></td>
</tr>
</tbody>
</table>
<input type=" Submit" value=" Enviar mensaje" />
</form>
</div>
</center>
Eh marcado con Colores los sectores donde se le colocaron los estilos.
Explicasion de sectores coloreados:
adquirir.htm: Tenemos que colocar la url de nuestro registro. En mi caso mi url es esta:
Cita: www.brianpwg.es.tl/adquirir.htm
Desde la parte / copiaremos toda la url hasta llegar al .htm, y la remplazamos por el /adquirir.htm que nos sale en el codigo.
Textos parcados en negrita: En el codigo anterior, con saldra esto EJEMPLO, veremos que esta marcado en negro, nosotros lo editaremos a nuestro gusto, entre ellos podremos editar los Pixeles ( PX; ) elejimos los numeros que deceamos segun el tamaño y el ancho y los cambiamos.
Para agregar mas campos de Textos ( TEXT ): Si vemos en el codigo anterior, veremos textos marcados como TEXT, esos son los campos te textos, si queremos agregar mas, debemos colocar este codigo:
Cita: <td>
<div><span style="font-family: 'Pompiere', cursive;"><strong> TEXTO:</strong> </span></div>
</td>
<td><input type=" [color=orange]Text" style="width: 150px;" name="modulenter[extrabox1text]" /></td>
</tr>
<tr>
Lo modificamos a nuestro gusto y los colocamos antes del </tbody> y el <tr>
Submit: En el atributo marcado en color verde, al costado de ello se muestra un texto Enviar mensaje, si nosotros lo cambiamos, el texto que sale en el boton que sale en la imagen de Enviar mensaje se cambiara por el que emos seleccionado.
Codigo CSS
Cita: .Formulario
margin:0 auto;
padding:14px;
}
.Formulario{
border:solid 1px #f2efb7;
background:#fbf7eb;
width:400px;
height:350px;
border-radius:20px;
}
Textarea{
resize: none;
}
input, Textarea {
/*Bordes y fondo de text y textarea*/
border-radius: 20px;
-webkit-border-radius: 6px;
border: 1px solid #ffc000;
background: #f9fdd1;
/*Estilos de Fuentes*/
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #884b10;
font-size: 16px;
font-style: italic;
/*Espacios*/
margin-top: 5px;
height: 24px;
line-height: 24px;
padding: 5px;
width: 300px;
}
Textarea {
width: 480px;
padding: 10px;
color: #000000;
font-size: 12px;
background-color: #FFFFBB;
border: 1px solid #ffc000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease; }
Textarea:hover {
background-color: #FFCC66;
border: 1px solid #454545; }
}
input[type="Text"]{
background: #F9F9F9 url(http://cdn2.iconfinder.com/data/icons/diagona/icon/16/018.png) no-repeat;
background-position: 10px;
padding-left: 35px;
}
input[type="Text"]{
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
input[type="Submit"]{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #e4d7aa;
width:200px;
margin:2px 0 20px 10px;
}
input[type="Submit"]{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(http://wtheme.webme.com/img/menu_bg.gif) repeat;
text-align:center;
line-height:31px;
color:#884b10;
font-size:11px;
font-weight:bold;
}
input[type="Submit"]:hover {
color: #000000;
text-decoration: none;
filter: alpha(opacity=70);
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
opacity: 0.4;
}
input[type="Submit"]:active {
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}
Si vemos en el codigo HTML y en el CSS, veremos que contienen textos o atributos marcados del mismo color, si nosotros editamos el css, segun queramos el estilo cambiara.
Los textos marcados en negro ( Colores-Px ) pueden ser cambiados.
COLORES:
Vamosa poner un ejemplo de color en el codigo css :
Veremos que en el css hay un codigo de color marcado como en el codigo de ejemplo, estos son los colores que podemos editar. Si no sabes donde encontrar colores entra aqui y busca colores:
http://www.cuervoblanco.com/colores_hexadecimales.html
PIXELES O TAMAÑOS:
Vamosa poner un ejemplo de color en el codigo css :
Veremos que en el css hay un codigo de color marcado como en el codigo de ejemplo, estos son los pixeles que podemos editar.
Se puede elejir desde 1PX hasta 100PX
No permitir el crecimiento de Textareas:
Eh utilizado un codigo para no permitir la redimension de las Textareas.
.Formulario
margin:0 auto;
padding:[b]14px;[/b]
ERRORES EN EL FORMULARIO
 Es posible que nuestro Diseño CSS tenga algunos estilos para form, text, submit, etc. Por eso es posible que el formulario no se vea como en la Imagen.
Luego del Test de compatibilidad, se ah comprobado que Funciona Exelente en Mozilla Firefox. Pero en Google Chrome y IE no funcionaron como lo planee.
BENEFICIOS DEL FORMULARIO
 Envio de texto via Casilla de Mensajeria de PWG.
Formulario con estilo Profesional.
Estilos Hover y Accion en botom de Envio.
Imagen en los campos de texto.
Buen estilo en Textarea.
Maquetasion en todo el formulario.
Buen texto en campos de texto y sobre el lado izquierdo de los campos.
FIN DEL TUTORIAL!
Dudas o problemas planterarlas aqui.
Pronto diseño para Iniciar Secion
------
 ¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui______________ Es una reina, es una reina, fiesta fiesta. Tito el bambino
Ultima edición por brianpwg el Mie Dic 05, 2012 9:06 pm; editado 6 veces
|
