-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
524 lines (450 loc) · 23.9 KB
/
index.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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--icono-->
<link rel="icon" href="image/logo.png">
<!--fontawesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />
<!--remixicon-->
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<!--fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@400;500;600&family=Lora:ital,wght@1,500&family=Montserrat:wght@400;700;900&family=Roboto+Mono:wght@300;400&display=swap"
rel="stylesheet">
<!--css-->
<link rel="stylesheet" href="css/style.css">
<title>Formularios</title>
</head>
<body>
<header>
<p>Todo lo que tenés que saber sobre</p>
<h1>FORMULARIOS en HTML</h1>
<a href="https://github.com/elianadenise/formularios/blob/main/index.html" class="btn" target="_blank"><i class="fa-solid fa-eye fa-sm"></i> Ver código</a>
<a href="#main" class="flecha"><i class="fa-solid fa-chevron-down fa-xl"></i></a>
</header>
<main id="main">
<h2>Sintaxis</h2>
<section class="sintaxis">
<article class="codigo">
<p>
<span><</span><span>form <span class="action">action="ejemplo.htm"</span> <span class="method">method="get/post"</span> <span class="enctype">enctype="multipart/form-data"</span>></span><br>
<span> <span><</span><span>label <span class="for">for="nombre"</span>>Ingresá tu nombre<span><</span>/label></span> <br>
<span> <</span><span>input <span class="type">type="text"</span> <span class="id">id="nombre"</span> <span class="name">name="nombre"</span>></span> <br>
<span> <</span><span>input <span class="type">type="submit"</span> value="Enviar"></span> <br>
<span><</span><span>/form></span><br>
</p>
</article>
<article class="glosario">
<h3>Atributos de form</h3>
<p><span class="action">action:</span> Define la acción que se realiza cuando se envía un formulario. Establece
una dirección URL dentro del servidor donde enviar el formulario.</p>
<p><span class="method">method:</span> Define de qué manera se van a transmitir los datos hacia el archivo que
se define en el action. <br>
Existen dos métodos: <br>
- <span>get (por defecto):</span> cuando la información a enviar no es sensible; los datos del formulario
son visibles en la dirección URL de la página. Recomendado para poca cantidad de texto.<br>
- <span>post:</span> cuando la información es sensible; ofrece mayor seguridad dado que los datos no están
visibles en la dirección URL de la página.</p>
<p><span class="enctype">enctype:</span> Especifica cómo los datos serán codificados al enviarlos al servidor.
Sólo se puede aplicar si el método utilizado es post. <br>
Las opciones son: application/x-www-form.urlencoded (por defecto), multipart/form-data y text/plain.</p>
<h3>Atributos de label</h3>
<p><span class="for">for: </span> este atributo debe coincidir con el atributo <span class="id">id</span> del elemento del
formulario, para establecer una relación entre ellos.
</p>
<h3>Atributos de input</h3>
<p><span class="type">type:</span> es el tipo de input. Sus variantes son: button, checkbox, color, date, datetime-local,
email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week.
</p>
<p><span class="id">id: </span>es el identificador único del campo del formulario.</p>
<p><span class="name">name:</span> atributo obligatorio para que el valor del campo se envíe al enviar un formulario.
Los campos sin el atributo name no son
enviados.</p>
</article>
</section>
<h2>Tipos de inputs</h2>
<section>
<!--INPUT TEXT-->
<article>
<h3>Text</h3>
<p>Este input permite el ingreso de datos alfanuméricos. Incluye caracteres especiales.</p>
<form action="#">
<label for="nombre">Ingresá tu nombre</label>
<input id="nombre" type="text" name="nombre" placeholder="Ingresá tu nombre" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT NUMBER-->
<article>
<h3>Number</h3>
<p>Sirve para el ingreso de datos numéricos. Puede establecerse un mínimo y un máximo; además, permite
la validación de datos. En versión mobile, el teclado es numérico.</p>
<form action="#">
<label for="edad">Ingresá tu edad</label>
<input id="edad" type="number" name="edad" placeholder="Ingrese su edad" min="0" max="200"
class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT RADIO-->
<article>
<h3>Radio</h3>
<p>El usuario podrá seleccionar una sola opción del grupo de radios. Para identificarse como grupo de
radios, deben tener el mismo name pero distinto value. <br>
El atributo <span>checked</span> permite establecer una opción predefinida.
</p>
<form action="#">
<div>
<p class="label">Acepto las condiciones</p>
<input id="si" type="radio" name="aceptar" value="si" checked>
<label for="si" class="p">Si</label>
<input id="no" type="radio" name="aceptar" value="no">
<label for="no" class="p">No</label>
</div>
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT CHECKBOX-->
<article>
<h3>Checkbox</h3>
<p>El usuario podrá seleccionar varias opciones del grupo de checkboxes. Para identificarse como grupo de
checkboxes, deben tener el mismo name pero distinto value.<br>
El atributo <span>checked</span> permite establecer una opción predefinida.
</p>
<form action="#">
<div>
<p class="label">¿Qué lenguajes sabés?</p>
<input id="php" type="checkbox" name="php" value="php">
<label for="php" class="p"> Java </label>
<!-- Tiene el atributo checked asignado por eso, aparece seleccionado cuando carga la pagina -->
<input id="javascript" type="checkbox" name="javascript" value="javascript" checked>
<label for="javascript" class="p"> Python </label>
<input id="css" type="checkbox" name="css" value="css">
<label for="css" class="p"> Javascript </label>
</div>
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT PASSWORD-->
<article>
<h3>Password</h3>
<p>Ideado para el ingreso de contraseñas ya que no pueden visualizarse los caracteres ingresados.</p>
<form action="#">
<label for="pass">Ingresá tu contraseña</label>
<input id="pass" type="password" name="pass" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT EMAIL-->
<article>
<h3>Email</h3>
<p>Ideado para el ingreso de correos electrónicos. Este input posee una validación para identificar si el
ingreso es un correo electrónico o no.
</p>
<form action="#">
<label for="mail">Ingresá tu email</label>
<input id="mail" type="email" name="emails" placeholder="Ingrese su email" required class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT TEL-->
<article>
<h3>Tel</h3>
<p>Ideado para el ingreso de números telefónicos. En versión mobile, el teclado es numérico.
</p>
<form action="#"">
<label for=" tel">Ingresá tu teléfono</label>
<input id="tel" type="tel" name="tel" placeholder="Ingrese su Telefono" pattern="[0-9]{8,}" required
class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT COLOR-->
<article>
<h3>Color</h3>
<p>El usuario puede seleccionar un color o ingresarlo manualmente en valor rgb.</p>
<form action="#">
<label for="color">Ingresá tu color favorito</label>
<input id="color" type="color" name="color" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<article>
<h3>URL</h3>
<p>Este input valida las url ingresadas.</p>
<form action="#">
<label for="url">Ingrese una url</label>
<input id="url" type="url" name="url" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT DATE-->
<article>
<h3>Date</h3>
<p>Ideado para el ingreso de fechas. Al tocar el ícono a la derecha del input, se despliega un
calendario. Puede agregarse en atributos la posibilidad de validar valores mínimos y máximos.
<br>Variantes de este input son: time, datetime-local, month, week.
</p>
<form action="#">
<label for="fecha">Ingresá una fecha</label>
<input id="fecha" type="date" name="fecha" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT TIME-->
<article>
<h3>Time</h3>
<p>Ideado para seleccionar una hora sin especificar zona horaria.</p>
<form action="#">
<label for="hora">Ingresá una hora</label>
<input type="time" name="hora" id="hora" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT DATETIME-LOCAL-->
<article>
<h3>Datetime-local</h3>
<p>El usuario podrá elegir una fecha y una hora, sin zona horaria.
</p>
<form action="#">
<label for="datatimelocal">Ingresá fecha de nacimiento y hora</label>
<input type="datetime-local" name="datatimelocal" id="datatimelocal" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT MONTH-->
<article>
<h3>Month</h3>
<p>Permite al usuario elegir un mes de un año específico.
</p>
<form action="#">
<label for="mes">Ingresá un mes</label>
<input type="month" id="mes" name="mes" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT WEEK-->
<article>
<h3>Week</h3>
<p>Permite al usuario elegir una semana de un año específico.
</p>
<form action="#">
<label for="fecha">Ingresá una semana</label>
<input type="week" id="fecha" name="fecha" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT SEARCH-->
<article>
<h3>Search</h3>
<p>Sirve como entrada para realizar una búsqueda dentro de la página.</p>
<form action="#">
<label for="archivo">Buscá algo</label>
<input type="search" id="busqueda" name="q" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT FILE-->
<article>
<h3>File</h3>
<p>Ideado para seleccionar y subir archivos.</p>
<form action="#">
<label for="archivo">Seleccioná una imagen</label>
<input type="file" name="archivo" id="archivo" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT RANGE-->
<article>
<h3>Range</h3>
<p>Permite al usuario elegir un valor dentro de un rango,
cuyo valor exacto no tiene importancia. Por defecto, los valores de este input son de 0 a 100.
<br>Los valores predeterminados pueden modificarse a partir de los atributos min y max.
</p>
<form action="#">
<label for="rango">Rango de satisfacción</label>
<input type="range" id="rango" name="rango" min="0" max="50" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT HIDDEN-->
<article>
<h3>Hidden</h3>
<p>Este campo se encuentra oculto para el usuario. <br>
Un input de este tipo permite a los desarrolladores agregar campos con valores que los
usuarios no podrán modificar. Sirve, por ejemplo, para actualizar bases de datos al enviar el formulario.
</p>
<form action="#">
<label for="escondido">El input está oculto</label>
<input type="hidden" id="escondido" name="escandido" value="soyunvalor" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<!--INPUT RESET-->
<article>
<h3>Reset</h3>
<p>Al clickear este botón, se reestablecen los valores predeterminados del formulario.
</p>
<form action="#">
<label for="nombre3">Ingresá el nombre de tu mascota</label>
<input id="nombre3" type="text" name="nombre3" placeholder="Ingresá tu nombre" class="ingreso">
<input type="reset" value="Limpiar" class="btn">
</form>
</article>
<!--INPUT SUBMIT-->
<article>
<h3>Submit</h3>
<p>Se trata de un botón específico para enviar el formulario.
</p>
<form action="#">
<input type="submit" value="¡Soy un submit!" class="btn">
</form>
</article>
<!--INPUT BUTTON-->
<article>
<h3>Button</h3>
<p>Define un botón sin una función predeterminada.
</p>
<form action="#">
<input type="button" value="¡Soy un botón!" class="btn">
</form>
</article>
</section>
<h2>Otros campos útiles</h2>
<section>
<article>
<h3>Textarea</h3>
<p>El elemento textarea define un campo de entrada de varias líneas. Los atributos rows y cols
especifican el número de líneas y ancho respectivamente. </p>
<form action="#">
<textarea name="mensaje" id="" cols="50" rows="5" placeholder="Escribí tu mensaje..."></textarea>
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<article>
<h3>Select y Option</h3>
<p>La etiqueta padre será <span>select</span>, la cual tendrá un name declarado.
Mientras que las etiquetas hijo serán <span>option</span>, las cuales serán utilizadas para
establecer las opciones a desplegar y deberán tener un atributo value definido
cada una para identificar la elección al enviar el formulario.<br>
El atributo <span>selected</span> permite establecer una opción predefinida.</p>
<form action="#">
<label for="provincias">Provincias</label>
<select id="provincias" name="provincias" class="ingreso">
<option value="">Seleccione una provincia</option><!--sin value-->
<option value="1">Buenos Aires</option>
<option value="2">Córdoba</option>
<option value="3">Salta</option>
<option value="4">Tierra del Fuego</option>
</select>
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<article>
<h3>Datalist</h3>
<p>Se establece una lista predefinida de opciones, la cual no condiciona al usuario; ya que este puede
ingresar datos que no se encuentran en la misma. Al ingresar datos, el usuario podrá ver un predictivo ejecutado a partir de la lista predefinida. <br>
La etiqueta padre será<span>datalist</span>, mientras que las etiquetas hijo serán <span>option</span>.</p>
<form action="#">
<datalist id="informacion" class="ingreso">
<option value="Ciudad Madero">
<option value="Ciudad Evita">
<option value="Tapiales">
</datalist>
<label for="ciudad">Ciudad</label>
<input type="text" name="postal" list="informacion" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
</section>
<h2>Atributos de los campos</h2>
<section>
<article>
<h3>Autofocus</h3>
<p>El atributo autofocus permite que una vez cargada la página, el campo al que se le asigna sea el
que tenga el cursor.</p>
<form action="#">
<label for="nombre2">Nombre</label>
<input id="nombre2" type="text" name="nombre" placeholder="Nombre" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<article>
<h3>Placeholder</h3>
<p>Este atributo será el texto alternativo dentro del input. Al ingresar el dato, éste desaparece.</p>
<form action="#">
<label for="nombre1">Nombre</label>
<input id="nombre1" type="text" name="nombre1" placeholder="Ingrese su Nombre" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<article>
<h3>Required</h3>
<p>Incluir el atributo required genera que ese campo sea obligatorio.</p>
<form action="#">
<label for="apellido">Apellido</label>
<input id="apellido" type="text" name="apellido" placeholder="Apellido" required class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<article>
<h3>Value</h3>
<p>Lo que se establece en el atributo value, será el contenido por defecto.</p>
<form action="#">
<label for="nombre2">Nombre:</label>
<input id="nombre2" type="text" name="nombre2" value="Eliana Navarro" class="ingreso">
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<article>
<h3>Checked</h3>
<p>
El atributo checked permite establecer una opción predefinida. Se puede utilizar en inputs radio y
checkbox.
</p>
<form action="#">
<div>
<p class="label">Acepto las condiciones</p>
<input id="si" type="radio" name="aceptar" value="si" checked>
<label for="si" class="p">Si</label>
<input id="no" type="radio" name="aceptar" value="no">
<label for="no" class="p">No</label>
</div>
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
<article>
<h3>Selected</h3>
<p>
Este atributo permite establecer una opción predefinida. Se puede utilizar en campo datalist.</p>
<form action="#">
<label for="provincias">Provincias</label>
<select id="provincias" name="provincias" class="ingreso">
<option value="">Seleccione una provincia</option><!--sin value-->
<option value="1">Buenos Aires</option>
<option value="2">Córdoba</option>
<option value="3">Salta</option>
<option value="4" selected>Tierra del Fuego</option>
</select>
<input type="submit" value="¡Enviar!" class="btn">
</form>
</article>
</section>
</main>
<footer>
<p>Codeado con <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 1.5s;"></i> por
Eliana</p>
<div>
<a href="https://github.com/elianadenise" target="_blank" rel="noopener noreferrer"><i
class="ri-github-line"></i></a>
<a href="https://www.linkedin.com/in/elianadnavarro/" target="_blank" rel="noopener noreferrer"><i
class="ri-linkedin-box-line"></i></a>
</div>
</footer>
</body>
</html>