Código de CSS - Formulario con estilos

<<>>
Imágen de perfil

Formulario con estilosgráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 26 de Julio del 2007 por Administrador
28.892 visualizaciones desde el 26 de Julio del 2007. Una media de 63 por semana
Ejemplo de un formulario con el contenido alineado y centrado utilizando únicamente estilos.

Versión 1
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 26 de Julio del 2007gráfica de visualizaciones de la versión: Versión 1
28.893 visualizaciones desde el 26 de Julio del 2007. Una media de 63 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- http://www.lawebdelprogramador.com -->
<html>
<head>
<title>Ejemplo de formulario con estilos</title>
 
<style type="text/css">
BODY {
	font-family: Arial;
	font-size: 0.8em;
}
 
/* Estable el formato para todos los div's */
div {
	clear: both;
}
 
/* Determina los div's que el contenido es centrado. Hereda "clear: both;" */
.form_center {
	text-align:center;
}
 
/* Para los input's alineados */
.form_input_align {
	float:left;
	border:1px solid;
	margin-left:0.2em;
}
 
/* Para los input's centrados */
.form_input_center {
	border:1px solid;
}
 
/* Para los label's alineados */
.form_label_align {
	float:left;
	width:50%;
	text-align:right;
}
 
/* indicamos una pequeña separación en cada label, input, select y textarea */
label, input, select, textarea {
	margin-bottom:0.3em;
}
 
/* Unicamente funciona con Firefox
   Determina el formato cuando se selecciona un cuadro de texto */
input:focus, select:focus, textarea:focus {
	background-color: #c6d3ff;
}
 
/* Determina el formato de los comentarios */
.form_comment {
	color: #808080;
}
 
/* Determina el formato de los comentarios centrados */
.form_comment_center {
	text-align:center;
	color: #808080;
}
 
/* Determina el formato de los botones */
.button {
	padding: 0em 0.5em 0em 0.5em;
}
 
/* Determina el formato del marco */
fieldset {
	border: 1px solid #808080;
	padding: 0.5em 0.5em 0.5em 0.5em;
}
 
/* Determina el formato del titulo del marco */
legend {
	color: #808080;
}
</style>
 
</head>
<body>
<h1 style="font-size:1em">Ejemplo de formulario con estilos</h1>
<form action="" method="post">
	<!-- generamos un recuadro -->
	<fieldset>
		<!-- titulo del recuadro -->
		<legend>Title</legend>
 
<!-- desde aqui se muestra el contenido alineado -->
 
		<!-- Mostremos un comentario o descripción -->
		<div class='form_comment'>Contenido alineado</div>
 
		<!-- Mostramos un cuadro de texto para soliciar el nombre -->
		<div><label for='idname' class='form_label_align'>Name :</label> <input type="text" id='idname' name='name' class='form_input_align' title="Introduce tu nombre aqui" /></div>
 
		<!-- Mostramos un cuadro de texto para soliciar el email -->
		<div><label for='idmail' class='form_label_align'>Mail :</label> <input type="text" id='idmail' name='mail' class='form_input_align' size='30' title="Introduce tu direccion de email" /></div>
 
		<!-- Mostramos un cuadro de texto desplegable -->
		<div><label for='iddesplegable' class='form_label_align'>Desplegable :</label>
			<select id='iddesplegable' name='desplegable' class='form_input_align' title='Selecciona una opción'>
				<option value=''>Seleccionar ...</option>
				<optgroup label="Primera selección">
					<option value='A'>Desplegable A</option>
					<option value='B'>Desplegable B</option>
				</optgroup>
				<optgroup label="Segunda selección">
					<option value='C'>Desplegable C</option>
				</optgroup>
			</select>
		</div>
 
		<!-- Mostramos un check -->
		<div><label class='form_label_align'>Check :</label><input type='checkbox' id='idcheck1' name='check' title="Selecciona" /></div>
 
		<!-- Mostramos un radio siguiendo la linea de posicion -->
		<div><label class='form_label_align'>Radio :</label><input type='radio' name='radio1' Value='1' checked />Si <input type='radio' name='radio1' Value='2' />No</div>
 
<!-- desde aqui se muestra el contenido centrado -->
 
		<!-- Mostremos un comentario o descripción -->
		<br /><div class='form_comment_center'>Contenido centrado</div>
 
		<!-- Mostramos un cuadro de texto para soliciar el nombre -->
		<div class='form_center'><label for='idname2'>Name :</label> <input type="text" id='idname2' name='name2' class='form_input_center' title="Introduce tu nombre aqui" /></div>
 
		<!-- Mostramos un cuadro de texto para soliciar el email -->
		<div class='form_center'><label for='idmail2'>Mail :</label> <input type="text" id='idmail2' name='mail2' class='form_input_center' size='30' title="Introduce tu direccion de email" /></div>
 
		<!-- Mostramos un cuadro de texto desplegable -->
		<div class='form_center'><label for='iddesplegable2'>Desplegable :</label>
			<select id='iddesplegable2' name='desplegable2' class='form_input_center' title='Selecciona una opción'>
				<option value=''>Seleccionar ...</option>
				<optgroup label="Primera selección">
					<option value='A'>Desplegable A</option>
					<option value='B'>Desplegable B</option>
				</optgroup>
				<optgroup label="Segunda selección">
					<option value='C'>Desplegable C</option>
				</optgroup>
			</select>
		</div>
 
		<!-- Mostramos un check -->
		<div class='form_center'><label>Check :</label><input type='checkbox' name='check2' title="Selecciona" /></div>
 
		<!-- Mostramos un radio siguiendo la linea de posicion -->
		<div class='form_center'><label>Radio :</label><input type='radio' name='radio2' Value='1' checked />Si <input type='radio' name='radio2' Value='2' />No</div>
 
		<!-- textarea -->
		<div class='form_center'><span>Comentarios...</span><br /><textarea name='text2' rows='10' cols='50' class='form_input_center'></textarea></div>
 
		<!-- boton de enviar los datos -->
		<div class='form_center'><input type="submit" value="enviar" class='button' title="Pulsa aqui para enviar" /> <input type="reset" value="restaurar" class='button' title="Pulsa aqui para restaurar" /></div>
	</fieldset>
</form>
 
<br /><p style='clear:both;text-align:center'><a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a></p>
</body>
</html>



Comentarios sobre la versión: Versión 1 (3)

SPACECAT
10 de Julio del 2008
estrellaestrellaestrellaestrellaestrella
Esta muy bien que a los desarroladores web novatos nos den una idea de como colocar estilos para mejorar y no solo ser programadores si no tener un toque de diseñador que al final del dia es lo que se hace
Gracias conozco html y empiezo a manipular CSS tu ejemplo me sirvio de mucho
Responder
Ariel
16 de Agosto del 2008
estrellaestrellaestrellaestrellaestrella
Muy buen post!! solamente tengo una duda.
si yo este formulario me quiciera enviar las respuestas a una direccion de mail y que me llegue en formato de texto.

como seria el codigo para ingresar la direccion a la que quiero que se envie??

espero su respuesta muchas gracias!
Responder
paola
11 de Mayo del 2015
estrellaestrellaestrellaestrellaestrella
*_*
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s1520