TEMAS IMPORTANTES:
- Propiedad de objetos web innerHTML
Se trata de la
propiedad innerHTML que fue introducida por Microsoft en Internet Explorer como un método
de acceso rápido al contenido completo de un contenedor en HTML.
Podemos usar
innerHTML para recuperar el contenido actual de un contenedor o insertar nuevo
contenido en ese contenedor.
Por contenedor entendemos
aquello que está entre las cláusulas < div > y < /div >.
El elemento
DIV define un contenedor genérico, el cual permite a los programadores definir estilos o bloques de contenido.
Como parámetros a DIV tenemos ID,
CLASS y ALIGN, aunque éste último cada vez se emplea menos en favor de las
CSS.
Ejemplos de uso de DIV.
<div id="primero">
<p>Algún texto.</p>
<p>Un poco más de texto.</p></div>
<div id="segundo"></div>
El primero de los ejemplos muestra 2
párrafos de texto en la página, mientras que el Segundo no muestra nada;
simplemente es un contenedor vacío en estos momentos.
Podemos recuperar el
contenido de DIV de la siguiente forma:
var contenido = document.getElementById('primero').innerHTML;
La variable contenido almacena ahora
todo el texto de los dos párrafos así como las marcas < p > y
< /p
>.
Podríamos reemplazar los dos párrafos
completamente asignándoles un nuevo valor.
document.getElementById('primero').innerHTML = '<p>Un parrafo de texto para reemplazar los dos anteriores.</p>’;
TOMADO DE:
Validación de
formularios con HTML5:
HTML5 nos permite definir patrones de validación para los
diferentes campos de un formulario, se realiza en el lado del cliente
(navegador web).
Métodos de validación de formularios con
HTML5
HTML5
ofrece diferentes métodos de validación de formularios client-side utilizando
diferentes atributos para el elemento <input>. Los más destacados son
type, pattern y required.
El atributo <type>:
Indicamos
al navegador el tipo de control que debe ejercer sobre el elemento
<input>. en HTML4 nos acostumbramos a
<input type="text" /> pero a partir de HTML5 podemos utilizar
una amplia gama:
- Color
- date
- datetime
- datetime-local
- email
- month
- number
- range
- search
- tel
- time
- url
- week
Si
los datos introducidos en el campo del formulario no coinciden con el tipo
especificado, el navegador lanzará un aviso al usuario y el formulario no se
enviará.
Ej:
<input type="email"
name="email">
El
atributo pattern:
Define
patrones de Validación.
Las
expresiones regulares, conocidas como regex (del inglés regular expression), permiten
validar una cadena de texto frente a palabras, caracteres y patrones de una forma
muy flexible a la vez que concisa. Al
poner un regex como valor del atributo
pattern en un <input> decimos al navegador cuál es el valor aceptable
para este campo del formulario.
<label
for="tel">Teléfono (9 dígitos comenzando por 9, 8, 7 o
6)</label>
<input type="text"
pattern="^[9|8|7|6]\d{8}$">
No
mezclar Las propiedades del HTML 5 con un pattern, mejor utilizar el HTML 4
<input
type=”text”>
Personalizar avisos con el atributo
title:
title
podemos personalizar estos avisos.
Por ejemplo:
<input type="text"
name="twitter_username"
pattern="^@?(\w){1,15}$"
title="Este no parece un usuario de
twitter válido">
El atributo required:
Se
utiliza para decir al navegador los campos del formulario que son requeridos de
forma obligatoria, es decir, que no pueden quedar vacíos.
Basta
con poner required o required="required".
Por ejemplo:
<input
type="text" name="twitter_username"
pattern="^@?(\w){1,15}$"
title="Este no parece un usuario de
twitter válido"
required>
No hay comentarios:
Publicar un comentario