Este documento describe los principales elementos para crear formularios en HTML5, incluyendo nuevas etiquetas como <form>, <input>, <textarea>, <button>, <select>, <option> y <datalist>. Explica atributos como type, name, required, pattern y otros para validar los campos del formulario.

1. El formulario es una interfaz fundamental en las páginas web para interactuar con el
usuario. Esta interacción se genera a través de variados elementos, como cajas para
introducir texto, botones sencillos o del tipo check o radio, controles de rangos, cajas para
selección de colores y otros.
Una de las grandes novedades de HTML5 es la creación de nuevas etiquetas que nos
asisten en la creación de estos formularios. HTML5 también incluye validaciones nativas
para el navegador sin necesidad de usar javascript.
Etiqueta <form>
- Encierra todos los contenidos del formulario (botones, cuadros de texto, listas
desplegables, etc.)
- Los formularios no pueden anidarse unos a otros como sucede con las listas y las tablas.
Sintaxis y atributos de <form>
id. Representa el identificador o nombre del formulario para hacer referencia a éste desde
CSS o
scripts.
action. Indica el URL del recurso donde se procesarán los datos del formulario cuando el
usuario lo envíe.
method. Especifica el método HTTP que se empleará para enviar los datos del usuario
que ha introducido en el formulario. Los valores posibles son: get (por defecto) y post.
• method=”get” : Los datos del formulario se concatenan al URI o la URL especificada
por el atributo action con un signo de interrogación (?) como separador y esta nueva URL
se envía al navegador. Los datos forman el QueryString (Cadena de consulta).
Limitaciones de “get”:
- Como máximo admite 500 bytes de información
- No permite el envío de archivos adjuntos al formulario.
- Los datos al enviarse a través del URL se ven fácilmente.
method=”post” : Los datos del formulario se incluyen en el cuerpo del mensaje y se
envían al navegador.
Como regla general, se dice que el método GET se debe utilizar en los formularios que no
Objetivo.
Analizar, Diseñar y Desarrollar Formularios
Unidad III
Desarrollo
Universidad Politécnica Territorial Andrés Eloy Blanco
Programa Nacional de Formación en Informática

2. modifican la información (ejemplo en un formulario de búsqueda).
Mientras que cuando se modifica la información original (inserción, modificación o
borrado) se debe usar el método POST.
Campos/controles de formulario que pueden incluir <form>
<form ....>
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
<datalist> new HTML 5
<keygen> new HTML 5
<output> new HTML 5
</form>
La etiqueta <input ... >
La mayoría de los controles que presentan los formularios se crean con la etiqueta <input
type=.....>, por lo su definición formal y su lista de atributos es muy extensa:
Atributos de la etiqueta input
El principal atributo de la etiqueta input es type ya que es el que le indica el tipo de datos
que debe recibir.
• type: indica el tipo de control de datos que se ha elegido. Valores que puede incluir: text,
password, button, checkbox, reset, radio, hidden, file, image, submit nuevas en html5:
color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url,
week.
• src: Para el control que permite crear botones con imágenes, indica el URL del archivo.
• step: (html5) permite establecer la cantidad de valores posibles dentro de un rango.
• value:indica el valor inicial del control.
• autofocus: (html5) fuerza el foco (la posición del cursor) dentro de un campo, una vez
que se carga la página. en javascript conseguimos lo mismo con la función focus().
• required: (html5) atributo que se aplica a un campo de entrada y obliga al usuario a
escribir un valor en dicho campo.
• placeholder: (html5) muestra un texto por defecto en el input hasta que éste tiene el foco,
en ese momento el texto desaparece para que el usuario introduzca el texto que desea.
• autocomplete: (html5) activa (on) o desactiva (off) el auto completado de la entrada de

3. datos en base a los textos introducidos anteriormente por el usuario. puede usarse como
atributo de un campo de entrada o del formulario completo.
• alt:se utiliza cuando el tipo es una imagen y no se puede cargar en la interfaz del
usuario, se muestra este texto alternativo.
• checked: para indicar si el elemento está seleccionado por defecto en los controles
checkbox y radiobutton.
• disabled: es un valor booleano que indica que el elemento está desactivado, con lo cual
no admite entrada de datos. Y su valor no se envía al Servidor junto al resto de datos.
• height: (html5) altura del elemento tipo image.
• width: (html5) anchura del elemento tipo image.
• size: Tamaño inicial del control. En text/password indica la cantidad de caracteres que se
pueden introducir en el campo, para el resto significa su tamaño en pixels.
• max: (html5) valor máximo que se puede entrar en el elemento de datos.
• min: (html5) valor mínimo que se puede entrar en el elemento de datos.
• maxlength:longitud máxima de caracteres para los campos text/password.
• list: (html5) es un identificador de una lista que se define con datalist
multiple: (html5) valor booleano que indica que se permite la selección de valores
múltiples.
name: Nombre que identifica al campo de datos. Importante para su identificación por el
Servidor.
pattern: (html5) Expresión regular que se utiliza para validar entradas de datos. Este
atributo permite hacer validaciones muy complejas y utilizado correctamente puede
ahorrarse muchas líneas de código.
Validaciones HTML5
Al crear un formulario en HTML, debemos ser conscientes de un detalle ineludible: los
usuarios se equivocan al rellenar un formulario. Ya sea por equivocación del usuario,
ambigüedad del formulario, o error del creador del formulario, el caso es que debemos
estar preparados y anticiparnos a estos errores, para intentar que los datos lleguen
correctamente a su destino y evitar cualquier tipo de moderación o revisión posterior.
Para evitar estos casos, se suele recurrir a un tipo de proceso automático llamado
validación, en el cuál, establecemos unas pautas para que si el usuario introduce alguna
información incorrecta, deba modificarla o en caso contrario no podrá continuar ni enviar
el formulario correctamente.
Atributos Básicos de validación en HTML5
Minlength:Puede actuar en Campos de texto y establece la longitud mínima del texto
requerida.
Maxlength: Puede actuar en Campos de texto y establece la longitud máxima del texto
requerida.
Min: Puede actuar en Campos de número, fecha y hora establece el mínimo numero,
mínima fecha o mínima hora a permitir

4. Max: Puede actuar en Campos de número, fecha y hora establece el máximo número,
máxima fecha o máxima hora a permitir.
Required:Campo obligatorio a llenar
Disabled: Puede actuar en campos en general, Campo desactivado. No se puede
modificar. No se envía.
Readonly: Puede actuar en campos en general. Campo de sólo lectura. No se puede
modificar. Se envía.
Con estos atributos, podemos crear validaciones básicas en nuestros campos de entrada
de datos, obligando al usuario a rellenar un campo obligatorio, forzando a indicar valores
entre un rango numérico o permitiendo sólo textos con un tamaño específico, entre otros.
Patrones de validación HTML5
No obstante, aunque los atributos de validación básicos son muy interesantes y pueden
facilitarnos la tarea de validación, en muchos casos son insuficientes. Para ello tenemos
los patrones de validación HTML5, mucho más potentes y flexibles, que nos permitirán ser
mucho más específicos utilizando expresiones regulares para validar datos. Una
expresión regular es una cadena de texto que representa un posible patrón de
coincidencias, que aplicaremos mediante el atributo pattern en los campos que queramos
validar.
Ejemplo:
pattern="[A-Za-z0-9]+". Sólo se permiten letras (mayúsculas y minúsculas) y números:
pattern="[0-9]{3}” . Solo se permite solo caracteres numéricos del 0 al 9 cifra de 3 dígitos.
pattern="[0-9]{2,4}”, Solo se permite dígitos del 0 al 9 de 2 a 4 dígitos
pattern="[A-Za-z0-9]{5,40}", Solo permite 5 a 40 caracteres entre letras mayúsculas y
minúscula de a la z números y dígitos del 0 al 9
Actividad a Realizar
Practica a generar en el computador
Archivo misestilo.css/// selectores por etiqueta y por id
body {
text-align: center;
}
header {
border: solid thin blue;
border-radius: 15px;
margin-bottom: 10px;
min-height: 180px;
text-align: center;
width: 100%;
}
header, section, footer, aside, nav, article, figure, figcaption,

5. hgroup{
display: block;
}
header,
#principal,
#contenido,
#sidebarDerecho,
#menu,
#piespag
{
border-radius: 15px;
}
#menu{
border: solid thin orange;
padding: 5px 15px;
text-align: center;
background:#48D1CC;
}
#menu li {
display: inline-block;
list-style:none;
padding: 5px;
font: bold 14px verdana, sans-serif;
color:blue;}
#principal {
width: 100%;
padding: 5px 15px;
}
#contenido {
display: inline-block;
border: solid thin black;
border-radius: 15px;
min-height: 383px;
vertical-align: top;

6. width: 100%;
margin-bottom: 5px;}
.formulario {
margin: 0 auto;
padding: 30px;
width: 50%; }
input[type=text],
input[type=email],
input[type=password],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer; }
input[type=submit]:hover {
background-color: #45a049;
}
input:invalid {
border: 1px solid red;
}
input:valid {
border: 1px solid green;

7. }
#piespag {
border: solid thin red;
border-radius: 15px;
min-height: 80px;
width: 100%;
}
Archivo formulario.html plantear la estructura básica de la pagina web
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta nombre="viewport" content="width=device-width, initial-scale=1.0">
<title>Programación II - Formulario - Uptaeb</title>
<link rel="stylesheet" href="miestilos.css">
</head>
<body>
<header>
IMAGEN CORPORATIVA MANEJOS DE FORMULARIOS EN HTML5
</header>
<nav id="menu">
<ul>
<li>Principal</li>
<li>OPCION 1 </li>
<li>OPCION 2</li>
<li>SALIR</li>
</ul>
</nav>
<section id="principal">
<div id="contenido">
</div>
</section>
<footer id="piespag">
<p>Derechos Reservados &copy; 2019 Lissette Torrealba</p>

8. </footer>
</body>
</html>
Ahora bien colocar el siguiente código para crear el contenedor formulario en el div de la
section con validaciones con html
<form action="respuesta.html" class="formulario" method="get">
<div>
<label for="nombreUsuario">Nombre del usuario:</label>
<input type="text" id="nombreUsuario" class="elementoForm nombreUsuario"
name="nombreUsuario" placeholder="Introduzca su Nombre de Usuario" required
pattern="[A-Za-z0-9]{5,40}" />
</div>
<div>
<label for="nombre">Nombre:</label>

9. <input type="text" id="nombre" class="elementoForm texto" name="nombre"
placeholder="Introduzca su Nombre" title="Introduzca su Nombre"
pattern="[A-Za-z]+s[A-Za-z]{5,40}" required />
</div>
<div>
<label for="email">E-mail:</label>
<input type="email" id="email" class="elementoForm email" name="email"
placeholder="Introduzca su Email" title="Introduzca su Email"
pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$" required
/>
</div>
<div>
<label for="clave">Clave:</label>
<input type="password" id="clave" class="elementoForm clave" name="clave"
placeholder="Introduzca su Clave" title="Introduzca su Clave" required pattern="[A-Za-z0-
9.!#$%&'*+/=?_-]{5,40}" />
</div>
<div class="button">
<input type="button" id="btnAccionRegistrar" value="Registrar Usuario" />
</div>
</form>
EFECTO DEL ATRIBUTO TITLE

10. AL PASAR EL TYPE DEL BUTTON A TYPE = “SUBMIT” SE VISUALIZA EL REQUIRED
<form action="respuesta.html" class="formulario" method="get">
<fieldset>
</fieldset>
</form>
<form action="respuesta.html" class="formulario" method="get">
<fieldset>
<legend> Lenguaje de Programción Favorito </legend>

11. </fieldset>
</form>
<form action="respuesta.html" class="formulario" method="get">
<fieldset>
<legend> Lenguaje de Programción Favorito </legend>
<input type="radio" name="so" /> Obuntu
<input type="radio" name="so" checked /> Canairma
<input type="radio" name="so"/> Windows
</fieldset>
</form>
<form action="respuesta.html" class="formulario" method="get">
<fieldset>
<legend> Selecciones un Municipios del Estado Lara </legend>
<input list="municipio" name="municipio">

12. <datalist id= "municipio">
<option value="Andrés Eloy Blanco"></option>
<option value="Jimenéz"></option>
<option value="Iribarren"></option>
<option value="Morán"></option>
<option value="Palavecino"></option>
<option value="Torres"></option>
</datalist>
</fieldset>
</form>
Actividad a Propuesta
Diseña y desarrolla formularios con diferentes tipos de entradas
Texto, password, números, fechas, horas, selección múltiple, selección simple, listas de
opciones datalist,
Autoevaluación
1. Selecciona el tipo de input válido
a) type=”boolean”
b) type=”textarea”
c) type=”alphanumeric”
e) type=”range”
2. ¿Cómo se definen un campo de búsqueda en HTML5?
a) < input type="find" / >
b) < input type="search" / >
c) < input type="text" search / >
3. Indica cuál es la afirmación incorrecta respecto a la definición de estilos CSS en
una página HTML
a) Se pueden definir dentro de la página con el código <style
type="text/css">...</style>
b) Se pueden definir dentro de la página con el código <p style="...">...</p>

13. c) Se puede vincular a un fichero externo con el código <script
language="css" type="text/css" href="hojaEstilo.css"></script>
d) Se puede vincular a un fichero externo con el código <link
rel="stylesheet" type="text/css" href="hojaEstilo.css" />
4. Cuál de los siguientes atributo indica si enviar los datos con post o el get
a) action
b) name
c) method
d) id
5.- Cuál de las siguientes permite al usuario seleccionar una opción de una lista
de opciones
a) List
b) Select
c) datalist
d) ul
6.- Cuál de las siguientes etiquetas de HTML permite dibujar una barra lateral
a) aside
b) section
c) nav
d) article
7.- Cuál de las siguientes etiquetas de HTML, permite crear un formulario
a) frm
b) forn
c) form
d) forml
8.- cual atributo permite realizar validaciones con expresiones regulares
a) required
b) height
c) pattern
d) placeholder