marklogo/IFCD0210
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dia 18

Browse Source
This commit is contained in:
Marcos Lopez 2023-12-18 13:56:38 +01:00
parent f30099e963
commit 85e8122aa3
6 changed files with 250 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
Practicas/Practicas HTML/Formularios/Campos formulario.html Normal file
View File

@ -0,0 +1,144 @@
<body>
<!-- Campos formularios -->
<form method="get" action="gracias.html">
<fieldset>
<legend>Inicio</legend>
<!-- Checkbox -->
Seleccione las opciones:
<br>
<input type="checkbox" name="check1"><label for="check1">A</label><br>
<input type="checkbox" name="check2"><label for="check2">B</label><br>
<input type="checkbox" name="check3" checked><label for="check3">Acepto</label><br>
<br>
<!-- Radiobutton -->
Escoja una opción:
<br>
<input type="radio" value="verde" name="color">VERDE<br>
<label><input type="radio" value="azul" name="color">AZUL</label><br>
<input type="radio" value="red" name="color">ROJO<br>
<br>
<!-- Enviar -->
<input type="submit" name="enviar" value="Enviar POR CORREO" /><br>
<!-- Limpiar -->
<br>
<input type="reset" name="limpiar" value="Limpiar el
formulario" />
<br>
<br>
</fieldset>
<!-- Adjuntar -->
<label>Mandanos tu archivo <input type="file" name="Adjuntar" accept=".txt,.jpg" /></label>
<br>
<br>
<!-- Campos ocultos -->
<input type="hidden" name="activo" value="true" />
<br>
<br>
<!-- Boton de imagen -->
<input type="image" src="enviar.png" />
<br>
<br>
<!-- Boton genérico -->
<input type="button" name="buscar" value="Buscar" onclick="javascript:alert('Se ha dado clic al botón!');" />
<br>
<br>
<!-- Campo de texto -->
<input type="text" name="comentario" size="20" maxlength="15" placeholder="Contesta aquí ...">
<br>
<br>
<!-- Campo de contraseña -->
<input type="password" name="contraseña" value="12345" />
<br>
<br>
<!-- Área de texto -->
<textarea name="opinion" rows="10" cols="60">Escriba aqui el valor por defecto</textarea>
<br>
<br>
<!-- Lista de selección -->
<select name="colores">
<option value="azul" label="Azul"></option>
<option value="verde" selected>Verde</option>
<option value="rojo">Rojo</option>
</select>
<br>
<br>
<!-- Lista de selección HTML5 -->
Lista de datos
<input list="listacolores">
<datalist id="listacolores">
<option value="Azul">
<option value="Rojo">
<option value="Amarillo">
<option value="Negro">
<option value="Blanco">
</datalist>
<br>
<br>
<!-- Email -->
Correo electrónico
<input type="email" name="email" id="email" />
<br>
<br>
<!-- Busqueda -->
Busqueda
<input type="search" name="buscar" id="buscar" autocomplete="off" />
<br>
<br>
<!-- Url -->
Url
<input type="url" name="url" id="url" />
<br>
<br>
<!-- Teléfono -->
Teléfono
<input type="tel" name="telefono" id="telefono" required />
<br>
<br>
<!-- Número -->
Número
<input type="number" name="numero" id="numero" min="0" max="10" step="2" />
<br>
<br>
<!-- Rango -->
Rango
<input type="range" name="rango" min="0" max="10" step="1" />
<br>
<br>
<!-- Fecha -->
Fecha
<input type="date" name="fecha" id="fecha" value="2024-02-25" min="2024-02-25" max="2024-12-25" step="2" />
<br>
<br>
<!-- Semana -->
Semana
<input type="week" name="semana" id="semana" value="2024-W19" />
<br>
<br>
<!-- Mes -->
Mes
<input type="month" name="mes" id="mes" />
<br>
<br>
<!-- Tiempo -->
Tiempo
<input type="time" name="tiempo" id="tiempo" min="09:00" max="22:00" step="60" />
<br>
<br>
<!-- Fecha y hora -->
<p>
Fecha y hora: <input type="datetime-local" name="datetime_control" />
</p>
<!-- Color -->
Color
<input type="color" name="color" id="color" value="#1BF4FF" />
<br>
<br>
</form>
</body>

57
Practicas/Practicas HTML/Formularios/Introducción Formularios.txt Normal file
View File

@ -0,0 +1,57 @@
QUE ES ?
Mecanismo para enviar información por parte del usuario(interactividad).
OBJETIVOS:
Lo más sencillo.
Experiencia de usuario cómoda.
Formato predecible y esperado.
Reducir los errores del usuario.
Comunicar errores.
ATRIBUTOS
action Dirección URL a donde se enviará la información obtenida en el formulario.
method Método HTTP de envío. GET a través de URL, POST no visible en la URL.
name Nombre del formulario.
target donde se abrirá el formulario.
enctype Codificación para el envío del formulario. Importante para envío de archivos.
accept-charset Fuerza a utilizar una codificación.
autocomplete Activa on o desactiva off el autocompletado para todos los campos del formulario.
novalidate Desactiva la validación HTML5 del formulario.
Ejemplo:
<form method="get" action="/search/" target="_blank" accept-charset="utf-8"></form>
CAMPOS
Texto corto <input type="text">
Texto largo <textarea>
Números <input type="number"> ó <input type="range">
Fechas u horas <input type="date">
Verdadero/falso <input type="checkbox">
Opción única <input type="radio"> ó <select>
Varias opciones <select multiple> ó <input type="checkbox">
Opción única <datalist> (pero abierta al usuario)
Color <input type="color">
Enviar archivo <input type="file">
Oculto <input type="hidden">
Botón de envío <input type="submit">
Botón de borrado <input type="reset">
ATRIBUTOS DE LOS IMPUTS
name nombre del campo(obligatorio)
type tipo de dato
value valor inicial y valor que recibo
form por si sacamos un campo del formulario
list personalizar
placeholder sugerencia de valor
size Tamaño visual (aprox: número de carácteres)
autocomplete autocompletado del navegador
autofocus establece el foco al cargar la página
spellcheck comprobar ortografía

BIN
Practicas/Practicas HTML/Formularios/enviar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

10
Practicas/Practicas HTML/Formularios/gracias.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gracias por contactar</title>
</head>
<body>
<p>Gracias por contactar</p>
</body>
</html>

39
Practicas/Practicas HTML/Formularios/practica1.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formularios 1</title>
</head>
<body>
<form action="">
<fieldset>
<legend>Datos Personales</legend>
<label>Nombre
<input type="text" placeholder="Escribe tu nombre...">
</label> <br>
<label>Apellidos
<input type="text" placeholder="Escribe tus apellidos...">
</label> <br>
<label>DNI
<input type="text" placeholder="NIF">
</label> <br>
<br>
<input type="radio" name="radio1"><label for="radio1">Masculino</label>
<input type="radio" name="radio2"><label for="radio2">Femenino</label>
<input type="radio" name="radio3"><label for="radio3">Otros</label>
<input type="radio" name="radio3"><label for="radio3">Prefiero no contestar</label>
<br>
<label> Estoy de acuerdo con los terminos y condiciones
<input type="checkbox">
</label> <br>
<input type="submit" name="enviar" value="Enviar POR CORREO" />
<input type="reset" name="limpiar" value="Limpiar el
formulario" />
</fieldset>
</form>
</body>
</html>

BIN
Practicas/Practicas HTML/examen/examen_resuelto_UF1841.zip Normal file
View File

Binary file not shown.