-
Notifications
You must be signed in to change notification settings - Fork 0
/
formulario.html
156 lines (148 loc) · 5.21 KB
/
formulario.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="assets/css/estilos.css" />
<link rel="stylesheet" href="assets/css/normalize.css" />
<title>fomulario</title>
</head>
<body>
<div class="formContainer">
<form action="" class="formulario" id="formulario">
<div class="formItemImageContainer">
<h2>Subir imagen de perfil (100 X 100px)</h2>
<input
class="formItemImage"
type="file"
name="archivo"
value="image/*"
/>
</div>
<!-- Grupo Nombre -->
<div class="formulario__grupo fullName" id="grupo__nombre">
<div class="formulario__grupo-input">
<input
type="text"
class="formulario__input"
name="nombre"
id="nombre"
placeholder="Nombre completo"
/>
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">
El nombre tiene solo acepta lestras, sin números ni caracteres
especiales.
</p>
</div>
<!-- grupo email -->
<div class="formulario__grupo email" id="grupo__email">
<div class="formulario__grupo-input">
<input
type="email"
class="formulario__input"
name="email"
id="correo"
placeholder="Correo Electronico"
/>
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">Coloque un correo valido</p>
</div>
<!-- grupo cedula -->
<div class="formulario__grupo cI" id="grupo__ci">
<div class="formulario__grupo-input">
<input
type="text"
class="formulario__input"
name="ci"
id="ci"
placeholder="Cédula de identidad"
/>
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">
Este campo solo acepta números y debe esta compuesto de 6 a 8
digitos.
</p>
</div>
<!-- grupo telefono -->
<div class="formulario__grupo tlf" id="grupo__telefono">
<div class="formulario__grupo-input">
<input
type="text"
class="formulario__input"
name="telefono"
id="telefono"
placeholder="Número telefónico"
/>
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">
Este campo debe contener 14 digitos.
</p>
</div>
<!-- grupo fecha de nacimiento -->
<div class="formulario__grupo birthday" id="grupo__birthday">
<div class="formulario__grupo-input">
<input
type="date"
class="formulario__input"
name="birthday"
id="birthday"
/>
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">
Por favor escoja su fecha de nacimiento.
</p>
</div>
<!-- grupo ciudad -->
<div class="formulario__grupo city" id="grupo__ciudad">
<div class="formulario__grupo-input">
<input
type="text"
class="formulario__input"
name="ciudad"
id="ciudad"
placeholder="Ciudad"
/>
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">Ciudad de habitación.</p>
</div>
<!-- grupo departamento -->
<div class="formulario__grupo dep" id="grupo__departamento">
<div class="formulario__grupo-input">
<input
type="text"
class="formulario__input"
name="departamento"
id="departamento"
placeholder="Departamento"
/>
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">
coloque el departamento donde esta ubicado.
</p>
</div>
<div class="formulario__mensaje" id="formulario__mensaje">
<p>
<i class="fas fa-exclamation-triangle"></i><b>Error:</b> Por favor
rellene el formulario correctamente.
</p>
</div>
<div class="formulario__grupo formulario__grupo-btn-enviar btnSend">
<button type="submit" class="formulario__btn">Enviar</button>
<p class="formulario__mensaje-exito" id="formulario__mensaje-exito">
El formulario se envió exitosamente!
</p>
</div>
</form>
</div>
<script src="assets/js/logica.js"></script>
<script src="https://kit.fontawesome.com/2c36e9b7b1.js"></script>
</body>
</html>