Guia Del Formulario

Formulario
Doc. Oyarbe María

Septiembre 2022
Formulario
Es un conjunto de controles (botones, cajas de texto,
casillas de verificación, botones radio, etc) que permiten al
usuario introducir datos y enviarlos al servidor web para su
procesamiento.
Elementos de un Formulario
 Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas: <form> y
<input>.
 La etiqueta que delimita un formulario es la etiqueta <form> ...</form>. Los atributos más
importantes de la etiqueta <form> son:
 action: contiene el nombre del agente que procesará los datos remitidos al servidor (por
ejemplo, un script de PHP)
action=mailto:direccion@correo.com
action="http://www.datos/maneja_formulario.php"
 method: define la manera de enviar los datos al servidor. Los valores posibles son:
 get: los valores enviados se añaden a la dirección indicada en el atributo action
 post: los valores se envían de forma separada
method = "POST o GET"
 Si el atributo method no está establecido, el formulario se comporta como si el valor

fuera get.
Etiqueta form
Esta etiqueta es la que define el inicio de un formulario y está compuesta por:
id: indica un nombre del formulario para que pueda ser personalizado
mediante CSS.
Etiqueta fieldset.
Esta etiqueta es de uso opcional y se utiliza para agrupar elementos en común
dentro de un mismo formulario en HTML. Se suele utilizar junto a la etiqueta
legend que le da un título al conjuntos de elementos definidos en el fieldset.
Etiqueta label.
Esta etiqueta se utiliza para definir el nombre visible de cada uno de los
campos del formulario en HTML.
Etiqueta input.
Esta etiqueta corresponde a los campos del formulario que necesitamos para su funcionamiento. Esta
está definida por atributos propios como:
id: indica un nombre único del campo para que pueda ser personalizado mediante CSS
name: indica el nombre único del campo en el formulario en HTML y este nombre es el que nos
permitirá realizar el envío de los datos de cada campo.
type: indica el tipo de campo y la acción que tendrá dentro del formulario en HTML. Existen varios tipos
de campos input en un formulario:
text: para agregar una cadena de caracteres ya sean letras o números.
hidden: indica que será un campo oculto para el envío de datos que no será visible para el usuario.
password: se utiliza para los formularios de registro y los caracteres escritos serán mostrados en
forma de asteriscos o puntos.
checkbox: casillas de verificación.
radio: botones de opción.
submit: este type se le asigna a un campo input para realizar el envío del formulario en HTML.
También existe el type reset que es para borrar todos los campos del formulario si no se desea realizar
el envío.
Otras etiquetas. Además de las etiquetas anteriormente mencionadas para nuestro ejemplo
existen otras etiquetas que se usan frecuentemente en los formularios. Los más comunes son:
select: este campo se configura con varias opciones para ser seleccionadas de una lista.
textarea: este campo es utilizado para escribir comentarios largos.
Ejemplo de formulario
<html>
<head>
<title>Ejemplo de formulario sencillo</title>
</head>
<body>
<h3>Formulario muy sencillo</h3
<form action="formulario.php" method="post">
<legend> Escribe tu nombre: </legend>
<input type="text" name="nombre" value="" /> <br/>
<input type="submit" value="Enviar" />
</form>
</body>
</html> -
Atributos comunes
HTML 5 algunos de los atributos tiene funcionalidad de validación como Fechas,
meses, semanas, horas, …
En versiones anteriores para guardar fechas, se ha tenido que recurrir a Javascript. Con HTML5 la
funcionalidad de fechas y tiempo viene integrada en el navegador en distintos tipos de campo:
fecha, fecha + hora, fecha + hora local, mes, semana, y hora.
 Selección de fecha
El tipo date sería el más común, nos ofrece una forma directa de mostrar un calendario y
seleccionar una fecha con su día, mes y año. Los tipos datetime y datetime-local son parecidos y
te muestran un selector para elegir fecha y hora.
Selección de fecha y hora
La fecha se pueden limitar mínimo y máximo de fechas con las propiedades min y max. Que tiene
el formato AAAA-MM-DD.
<input max="2014-09-30" min="2014-09-15" name="date" type="date" />
<input name="datetime" type="datetime" />
<input name="datetime-local" type="datetime-local" />
<input name="month" type="month" />
<input name="week" type="week" />
<input name="time" type="time" />
Atributos comunes
 Mes y semana
El tipo month nos deja elegir directamente un año y su mes, mientras que week solo el número
de la semana del año elegido.
 Hora
Para elegir una hora ahora usaremos time que nos da la selección numérica de hora y minuto,
incluido la de segundos y fracciones de segundo en algunos navegadores.
Números, directo o sliders: number & range
Para el manejo de campos numéricos se han introducido dos nuevos tipos number y range. Estos
dos tipos comparten una serie de propiedades para fijar mínimo, máximo y número de pasos.
min=”1″ define el mínimo valor aceptado por el campo.
max=”15″ define el máximo valor.
step=”2″ en base al mínimo define el rango de valores que sube hasta el máximo.
El campo number aparece como uno de texto con la singularidad que tiene flechas para sumar o
restar a su valor. En cambio range se muestra como un slider o campo deslizante que va desde el
mínimo al máximo establecido por min y max y saltando de valor en valor según step.
Atributos comunes
 autofocus
El navegador fija el foco al campo que lo tenga indicado automáticamente al cargar la página, ideal
para sitios donde el campo de búsqueda es importante.
<input name="search" type="search" autofocus="" />
 required
El campo con este atributo será validado por el propio navegador, tanto si está vacío como si
incluye un tipo como puede ser email o url aparecerá un pequeño globo informativo indicando el
problema.
<input name="email" required="" type="email" />
 placeholder
Mostrará un texto por defecto mientras el campo este vacío y al escribir desaparecerá, una
mejora que ayuda a entender el propio campo.
<input name="search" type="search" placeholder="Buscar..." />
 pattern
Esta propiedad puede sernos muy útil ya que nos permite usar una expresión regular para que el
navegador valide el campo en base a patrón establecido. Debes especificar un title ya que al
validar si falla el navegador mostrará ese mismo.
<input title="Solo números" pattern="[0-9]*" type="text" />
Atributos comunes
 EJEMPLO
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de VALIDAR FECHA</title>
</head>
<body>
<form id="DATOS" name="formulario" method="post" action="envio.html">
FECHA VALIDA 30-09-2014 <input max="2014-09-30" min="2014-09-15" name="date"
type="date" /><bR> <bR>
SELECTOR FECHA <input name="datetime" type="datetime" /><bR> <bR>
SELECTOR FECHA <input name="datetime-local" type="datetime-local" /><bR> <bR>
MES <input name="month" type="month" /><bR> <bR>
SEMANA <input name="week" type="week" /><bR> <bR>
HORA <bR> <input name="time" type="time" /><bR>
</form>
</body>
</html>
Otros Atributos
 size permite establecer la longitud de los controles de texto (text, password, search, etc.). Por omisión, las
cajas suelen tener 20 caracteres de longitud.
<p>Apellidos: <input type="text" name="apellidos" size="40"></p>
 maxlength y minlength permiten establecer la longitud máxima y mínima, respectivamente, que puede
escribir el usuario en un control de texto (text, password, search, etc.).
<p>Usuario: <input type="text" name="usuario" maxlength="6"></p>
 disabled permite deshabilitar el control. Una vez deshabilitado, el control ni siquiera puede coger el foco.
<input type="submit" value="Enviar" disabled>
 readonly hace que el control no sea modificable, aunque el control puede coger el foco.
<input type="text" name="texto" value="¡A que no me cambias!" readonly>
 tabindex permite controlar el orden en que el foco pasa de un elemento a otro mediante el tabulador
(Tab para avanzar y Shift+Tab para retroceder). Los valores de tabindex pueden ser números naturales
(incluido el cero), no necesariamente consecutivos. Si no está presente, los controles se visitan en el orden
en que aparecen en el texto. Si está presente, los controles se visitan de menor a mayor.
<input type="text" name="texto1" placeholder="Texto 1" tabindex="5">
Investigar otros atributos de las etiquetas de formulario

Metadatos
Una de las partes más importantes de la metainformación de la

página son los metadatos, que permiten incluir cualquier
información relevante sobre la propia página. La etiqueta
empleada para la definición de los metadatos es <meta>.
Atributos propios
 name = "texto" - El nombre de la propiedad que se define (no
existe una lista oficial de propiedades)
 content = "texto" - El valor de la propiedad definida (no
existe una lista de valores permitidos)
 http-equiv = "texto" - En ocasiones, reemplaza al atributo
“name” y lo emplean los servidores para adaptar sus
respuestas al documento
Metadatos
Los metadatos habituales utilizan solamente los atributos name y content para definir el nombre y el valor del
metadato:
<meta name="autor" content="Juan Pérez" />
No obstante, algunas etiquetas <meta> muy utilizadas hacen uso del atributo http-equiv. Este atributo se utiliza
para indicar que el valor establecido por este metadato puede ser utilizado por el servidor al entregar la página
al navegador del usuario. El siguiente metadato indica al servidor que el contenido de la página es código HTML
y su codificación de caracteres es
UTF-8: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
RESUMEN
Definir el autor del documento:
<meta name="author" content="Juan Pérez" />
Definir el programa con el que se ha creado el documento:
<meta name="generator" content="WordPress" />
Definir la codificación de caracteres del documento:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Definir las palabras clave que definen el contenido del documento:
<meta name="keywords" content="diseño, css, hojas de estilos, web, html" />
Definir una breve descripción del sitio:
<meta name="description" content="Artículos sobre diseño web, usabilidad y accesibilidad" />
Javascript - Generalidades y primeros
scripts
 La programación de Javascript se realiza dentro del propio documento HTML. Es decir, el código
Javascript, en la mayoría de los casos, se mezcla con el propio código HTML para generar la página.
Se utiliza aplicando las etiquetas <script> y </script>. Todo el código Javascript que pongamos en la
página ha de ser introducido entre estas dos etiquetas.
Primer script sencillo: Documento HTML DialogoJS.html

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset= UTF-8" /> <title>Ejemplo de código JavaScript en el propio
documento</title>
</head>
<body>
<script type="text/javascript" src="codigo.js"></script>
<p>EL mensaje anterior se genero desde un archivo js.</p>
</body>
</html>
Definir JavaScript en un archivo externo: Archivo codigo.js

nombre = "rafael ";
document.write("Bienvenido ");
document.write(nombre);
alert("Hola Mundo!");
Evaluación IV:
Porcentaje 25%
Puntos: 5
Actividad practica IV:

Será evaluada el desarrollo de la pagina web el cual se evalúa de acuerdo a las
actividades asignadas, el avance de la pagina final y objetivo visto en clase. Una
vez culminada la actividad la entrega es vía correo electrónico (Subir archivo a
Classroom).
Fecha de entrega: será indicada por Classroom o Telegram
Sin prorroga. Sino entrega en fecha queda objetivo no alcanzado.
Actividad IV:
Realizar el siguiente formulario con validación HTML. El cual
requiere:
1. Al carga la pagina debe dar un mensaje de alerta para dar la bienvenida al Servicio.
2. Que el código sea validado como contraseña (Entre 5 y 8 caracteres, por lo menos un digito
y un alfanumérico, y no puede contener caracteres espaciales).
3. Fecha sea con formato de fecha validada (solo año 2015)
4. La cédula debe ser validada con el formato indicado en el formulario
5. Los campos requeridos el cual el cliente no debe dejar de rellenar son: código, nombre y
apellido, email, teléfono este debe mostrar el mensaje o pequeño globo informativo indicando el
problema.
6. Al dejar campo vacío debe resalta el campo en rojo

Guia Del Formulario

Cargado por

Copyright:

Formatos disponibles

Guia Del Formulario

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia Del Formulario

Cargado por

Copyright:

Formatos disponibles

Formulario

Doc. Oyarbe María

 Si el atributo method no está establecido, el formulario se comporta como si el valor

Investigar otros atributos de las etiquetas de formulario

Una de las partes más importantes de la metainformación de la

Primer script sencillo: Documento HTML DialogoJS.html

Definir JavaScript en un archivo externo: Archivo codigo.js

Actividad practica IV:

También podría gustarte