Con la finalidad de mostrar una guía para el
ingreso correcto de datos, aplicaremos atributos a formularios web en un documento HTML, según las
reglas oficiales de este lenguaje de marcado. A
veces por desconocimiento de validaciones de campos, tenemos en la base de
datos información incorrecta, debido a ello, implementaremos diferentes
etiquetas de HTML para validarlos.
Al momento de agregar formularios
a un proyecto web es importante
asegurar el ingreso correcto de los datos. Para ello, existen diferentes etiquetas
de HTML, las cuales guian al usuario al momento de ingresar los datos
solicitados. El propósito de las validaciones de un formulario es cerciorarse
del llenado correcto de los campos por parte del usuario, antes de ser enviado
al servidor.
La etiqueta button permite mostrar un botón para hacer clic y enviar los datos al servidor, si todo estuvo correctamente
ingresado, muestra un mensaje de éxito, el cual agregamos previamente al código.
Se debe crear con su inicio y cierre correspondiente y, dentro de ambas
etiquetas, se escribe el texto a mostrar dentro del botón, éste dependerá de la
funcionalidad a cumplir.
061-01_1008_ilu01. Creación de la etiqueta button
La etiqueta button realiza la función deseada en un formulario cuando agregamos
el atributo type, el cual tiene dos
valores posibles:
- Submit para indicarle al navegador web el envío de toda la información incluida por el usuario en el
formulario, al servidor.
- Reset para indicarle al navegador web el reinicio del formulario, es decir, los campos quedan en
blanco nuevamente.
061-01_1008_ilu02. Código de tipos de etiqueta button
Para mostrar un mensaje cuando el
campo deba ser llenado por el usuario, es necesario agregar la etiqueta type con el atributo required, en español requerido. De esta
forma, cuando el usuario haga clic en
el botón enviar, el navegador web desplegará
un mensaje con la solicitud de llenar el campo. Por lo tanto, el formulario se
mantiene sin enviar mientras se encuentre vacío el campo requerido.
0611-01_1008_ilu03. Adición del atributo required
Otro tipo de validación de
formularios importante de aprender es el atributo pattern, en español patrón, utilizado para indicar cómo debe ser
llenado el campo marcado con este atributo. Para ello se hace uso del atributo placeholder, con el objetivo de exponer un
ejemplo de llenado, de lo contrario, el navegador web mostrará un mensaje de error.
061-01_1008_ilu04. Especificación del atributo pattern
En el ejemplo de la imagen anterior
el modelo de patrón para llenar el campo name,
son cuatro letras de la “a” hasta la “z”, posteriormente agregar el piso y
cuatro números del cero al nueve.
Keynotes
- Al momento de agregar formularios a un
proyecto web es importante asegurar
el ingreso correcto de los datos. Para ello, existen diferentes etiquetas de
HTML, las cuales guian al usuario al momento de ingresar los datos solicitados.
- El propósito de las validaciones de un
formulario es cerciorarse del llenado correcto de los campos por parte del
usuario, antes de ser enviado al servidor.
- La etiqueta button permite mostrar un botón para hacer clic y enviar los datos al servidor, si todo estuvo correctamente
ingresado, muestra un mensaje de éxito, el cual agregamos previamente al
código.
- Para mostrar un mensaje cuando el campo deba
ser llenado por el usuario, es necesario agregar la etiqueta type con el atributo required, en español requerido. De esta
forma, cuando el usuario haga clic en
el botón enviar, el navegador desplegará un mensaje con la solicitud de llenar
el campo.
- Otro tipo de validación de formularios importante
de aprender sucede mediante el atributo pattern,
en español patrón, utilizado para indicar cómo debe ser llenado el campo
marcado con este atributo. Para ello se hace uso del atributo placeholder, con el objetivo de exponer un
ejemplo de llenado.
RetoAgrega los atributos aprendidos en un formulario
previamente marcado en un documento HTML, según las reglas oficiales de este
lenguaje.
¡Comparte el resultado final del reto en tu vPages y pide a tres compañeros un
comentario con sus pasos al utilizar los mismos atributos, a fin de debatir y
llegar a la forma más efectiva!
Tiempo disponible: entre 15 y 30 minutos.
CierreA través de la aplicación de atributos a formularios
web en un documento HTML, según las
reglas oficiales de este lenguaje, validamos los campos y obtenemos bases de
datos con información correcta. Asimismo, mostramos una guía para el ingreso
correcto de información por parte del usuario. Con disciplina y precisión
solicitaremos datos eficientemente en un formulario.
