Índice del curso de HTML5

  1. Introducción
  2. Estructura de una página web
  3. Comentarios
  4. Encabezados y párrafos
  5. Enlaces e imágenes
  6. Listas
  7. Ejercicio resumen de fundamentos de HTML
  8. iframes
  9. Páginas de consulta
  10. Tablas
  11. Estilos en línea
  12. Unidades de medida
  13. Capas
  14. Hacer una NewsLetter con HTML
  15. favicon
  16. Hojas de estilos
  17. Selectores CSS
  18. Algunos estilos de CSS3
    1. Motores de navegación
    2. text-shadow
    3. border-radius, box-shadow
    4. border-image
    5. Ejercicio - background centrado
    6. background-size
    7. Multiple Background & size
    8. background con rgba
    9. Gradientes
    10. Fuentes
    11. columns
    12. Animaciones con transition
    13. text-overflow
    14. transform
  19. GIMP
  20. display:block, inline, inline-block
  21. Margin Collapse
  22. padding y width
  23. Ejercicios de maquetación vertical
  24. Hacer una newsletter responsive sin media queries
  25. img vs background
  26. Flexbox
  27. Algunos tips
    1. Pintar el color de fondo de una línea
    2. Incrustar una imagen
    3. Sangría francesa (hanging intent)
    4. Capitalizar una letra
    5. contenteditable
    6. Soporte para textos asiáticos
    7. wbr - Word Break
  28. Ejercicios de HTML
  29. Break! - gran día de repaso
  30. Links de interés
  31. position
  32. Opacidades
  33. Popups con CSS
  34. Ejercicio - Galería de fotos
  35. Navigation Bar
  36. !important
  37. Páginas reales
  38. Grid Layout
  39. Selectores avanzados de CSS
  40. HTML5: definición y ejemplos
  41. HTML5 vs HTML4
  42. divs semánticos
  43. Video y audio
  44. svg
  45. Formularios
  46. Animaciones con CSS3
  47. Responsive design
  48. Más ejercicios de html
  49. Página de error 404
  50. Insertar el buscador de google
  51. Dominio y alojamiento
  52. Ejercicio - Proyecto
  53. Ejercicio - Clientes y proveedores

Formularios

<style>
	label{
		display: inline-block;
		width: 120px;
	}
</style>

<form>
	<label for="nombre">Nombre</label>
	<input type="text" id="nombre" /><br><br>
</form>

Cuando un label está asociado a un input mediante los atributos for e id respectivamente, al pulsar sobre el label, el cursor se posicionará en el input.

Teoría formularios

Ejercicio

Para resolver este ejercicio, utilizaremos las siguientes etiquetas:

<textarea></textarea>
<input type="checkbox">
<input type="submit">

Fieldset

Dan problemas en el crossbrowsing.

<fieldset>
	<legend>Cabecera del fieldset</legend>
	Lorem...
</fieldset>

Ejercicio

Para realizar este ejercicio, no poner padding a los fieldset, debido a problemas de cross browsing con IE.

fieldset{
	…
	padding:0px; /*no poner padding a los fieldset por problemas de compatibilidad con IE*/
	border: solid black 1px;/*Habrá que especificar explícitamente el borde del fieldset para que haya compatibilidad con IE*/
}

Si nuestro navegador no reconoce los nuevos <input> de html5, mostrará un <input type="text" /> en su lugar.

Nuevos atributos

<form>
	El atributo autocomplete almacena los resultados en la caché para el futuro
	autocomplete<input type="text" autocomplete="on"/>
	<br/><br/>
	El atributo autofocus coloca el foco por defecto en el input que lo invoca
	<br/>autofocus<input type="text" autofocus />
	<br/>
	<br/>placeholder<input type="text" placeholder="pista acerca del contenido"/>
	<br/>
	<br/>pattern<input type="text" title="debes introducir 5 dígitos numéricos" pattern="^[0-9]{5}$"/>
	<input type="submit" />
	<br/><br/>
	El atributo formnovalidate permite enviar los datos del formulario aunque estos no hayan sido 	validados. Podemos utilizar este atributo junto con el botón de submit o con el tag del formulario(&lt;form&gt;)
	<input type="submit" value="envio sin validación" formnovalidate="formnovalidate"/>
</form>
Nuevos Atributos

Nuevos inputs

search

En el futuro este campo implementará funcionalidades como recordar anteriores búsquedas, resaltado de la palabra buscada según se va escribiendo
<input type="search" />

number

Validación numérica, en plataformas móviles, optimiza el teclado para escribir números. Atributos: min, max, step (admite decimales usando el punto)
<input type="number" value="-6"/>

range

Validación numérica, en plataformas móviles, optimiza el teclado para escribir números. Atributos: min, max, step (admite decimales usando el punto)
<input type="range" max="10" min="0" value="7" step="2" />

tel

Optimiza el teclado para escribir teléfonos
<input type="tel"/>

url

Validación de url, en plataformas móviles, optimiza el teclado para escribir url's
<input type="url"/>

email

Validación de mail, en plataformas móviles, optimiza el teclado para escribir mails
<input type="email"/>

Color

<input type="color"/>

Fechas y horas:

time

Puede ser inicializado, acepta los atributos min, max y step
<input type="time" value="10:20"/>

date

Puede ser inicializado, acepta los atributos min, max y step
<input type="date" value="1982-07-24"/>

datetime

Es una combinación de date y time. Se diferencia de datetime-local en que muestra la hora local
<input type="datetime" value="2011-12-22T01:30Z"/>

datetime-local

<input type="datetime-local" value="2011-12-22T01:30"/>

week

<input type="week" value="1982-W17"/>

month

<input type="month" value="1982-07"/>

required, valid, invalid

<style>
	input[required] {
		border: solid 4px blue;
	}
	input:valid{
		background:green;
	}
	input:invalid{
		background:red;
	}
	label{
		width:150px;
		display:inline-block
	}
</style>
<form>
	<label for="nombre">Nombre:</label>
	<input type="text" id="nombre" required="required" /><br><br>
	<label for="mail">Email:</label>	
	<input type="email" id="mail" required="required"/>
</form>

Ejercicio

  • Campos requeridos deben tener borde negro.
  • Los campos válidos deben tener fondo verde.
  • Los campos inválidos deben tener fondo rojo.
  • La edad mínima debe ser de 0 años y la máxima de 100 años. Para ello usaremos los atributos "min" y "max".
  • La página debe cargarse con el foco en el campo nombre.
  • El código postal tendrá el siguiente patrón: "^[0-9]{5}$".

Ejercicio ampliado

exito en envío de formulario

Maquetando los placeholder

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}	

o si queremos filtrar por class:

.gris::-webkit-input-placeholder { /* Chrome */
	color: #CECECE;
}
.gris:-ms-input-placeholder { /* IE 10+ */
color:  #CECECE;
}
.gris::-moz-placeholder { /* Firefox 19+ */
color:  #CECECE;
opacity: 1;
}
.gris:-moz-placeholder { /* Firefox 4 - 18 */
color:  #CECECE;
opacity: 1;
}

progress, meter

La etiqueta progress es apropiada para mostrar el grado de completitud de una tarea determinada (un formulario, por ejemplo). Meter es más apropiado para mostrar medidas no relacionadas con una tarea, como espacio en disco o uso de memoria

<progress value="50.0" max="100.0">50%</progress>

meter

<meter value="30.0" min="0.0" max="100.0" low="20.0" high="80.0" optimum="40.0">300MB megas de un 1GB</meter>

output

<script type="text/javascript">
	function calculation() {
	var o = document.getElementById("result");
	var num1 = document.getElementById("num1");
	var num2 = document.getElementById("num2");

	o.value = parseFloat(num1.value) + parseFloat(num2.value);
}
</script>
<input type="number" id="num1"/>
<input type="number" id="num2" />
<p>Resultado: <output name="result" id="result"></output></p>
<p><button onclick="calculation()">Calcular</button></p>
output
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.