Dia 18
This commit is contained in:
Marcos Lopez
parent
f30099e963
commit
85e8122aa3
144
Practicas/Practicas HTML/Formularios/Campos formulario.html
Normal file
144
Practicas/Practicas HTML/Formularios/Campos formulario.html
Normal 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>
|
||||||
|
|
@ -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
BIN
Practicas/Practicas HTML/Formularios/enviar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
10
Practicas/Practicas HTML/Formularios/gracias.html
Normal file
10
Practicas/Practicas HTML/Formularios/gracias.html
Normal 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
39
Practicas/Practicas HTML/Formularios/practica1.html
Normal 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
BIN
Practicas/Practicas HTML/examen/examen_resuelto_UF1841.zip
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user