SSesion 4 Formulario I3

Taller de Programación Web HTML5 / PHP / MYSQL
MÓDULO DE APRENDIZAJE
INDICADOR 03
Integra Código del lenguaje de PHP en los formularios
html5
SESIÓN 4
Los Formularios HTML5.
 La etiqueta FORM.
 Controles para el manejo de datos en los formularios.
 Aplicación en el desarrollo web.
Ejercicio - practico
ING. JOHN HILMER VÉLIZ CRUZ 1

dsofperu.com | jovel20977@gmail.com | jvelizc@istpcsr.edu.pe
SESIÓN 4
Los Formularios HTML5.i
Un formulario es un documento, físico o digital, elaborado para que un usuario introduzca datos
estructurados en las zonas correspondientes, para ser almacenados y procesados posteriormente.
Los formularios digitales te permite optimizar los procesos laborales. Esto significa que, tanto la empresa
como los clientes, obtendrán beneficios y se logrará una mayor organización del trabajo.
La digitalización de tus formularios te permite almacenar todos los datos recogidos de forma rápida y
eficaz. Además, podrás vincular bases de datos a tus formularios, para no perder tiempo buscando los
datos que necesitas al rellenar el informe, e integrar tus formularios con otros softwares.
¿Qué son los formularios web?
Los formularios web son uno de los principales puntos de interacción entre un usuario y un sitio web o
aplicación. Los formularios permiten a los usuarios la introducción de datos, que generalmente se envían
a un servidor web para su procesamiento y almacenamiento (consulta Enviar los datos de un
formulario más adelante en el módulo), o se usan en el lado del cliente para provocar de alguna manera
una actualización inmediata de la interfaz (por ejemplo, se añade otro elemento a una lista, o se muestra
u oculta una función de interfaz de usuario).
CONTROLES O ETIQUETAS DEL FORMULARIO

Los controles de formulario también se pueden programar para forzar la introducción de formatos o
valores específicos (validación de formulario), y se combinan con etiquetas de texto que describen su
propósito para los usuarios con y sin discapacidad visual.
siguientes: <form>, <label>, <input>, <textarea> y <button>.
El elemento <form>
Todos los formularios comienzan con un elemento <form>, como este:
Un formulario es un elemento contenedor, como un elemento <section> o <footer>, pero específico para
contener formularios; también admite algunos atributos específicos para la configuración de la forma en
que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer
siempre al menos los atributos action y method:
EL ATRIBUTO ACTION define la ubicación (URL) donde se envían los datos que el formulario ha
recopilado cuando se validan.
EL ATRIBUTO METHOD define con qué método HTTP se envían los datos (generalmente get o post).

DIFERENCIAS PRINCIPALES DEL MÉTODO GET Y POST

 El método GET coloca los parámetros dentro de la URI mientras que el método POST los agrega
al cuerpo.
 GET se utiliza esencialmente para obtener la información. En cambio, el objetivo del método
POST es actualizar los datos.
 Los resultados de la consulta POST no pueden marcarse, mientras que los resultados de la
consulta GET pueden marcarse porque existen en forma de URL.
 En el método GET la información es visible en la URL lo que aumenta las vulnerabilidades
y el riesgo de hacking. Por el contrario, el método POST no muestra variables en la URL y
también se pueden utilizar múltiples técnicas de codificación, lo que lo hace resistente.
 Cuando se utiliza el método GET en el formulario, sólo se aceptan caracteres ASCII en los tipos
de datos. Por el contrario, el método POST no enlaza tipos de datos de formulario y permite
caracteres binarios y ASCII.
 El tamaño variable en el método GET es de aproximadamente 2000 caracteres. A la inversa, el
método POST permite hasta 8 Mb de tamaño variable.
 Los datos del método GET se pueden almacenar en caché, mientras que los datos del método
POST no.
En Resumen
Los métodos GET y POST se utilizan para enviar los datos al servidor, y la principal diferencia entre ellos
es que el método GET añade los datos a la URI definida en el atributo de acción del formulario. Por el
contrario, el método POST adjunta datos al organismo solicitado. El uso del método GET es
inapropiado cuando la información sensible necesita ser llenada en el formulario. El método POST es útil
cuando el usuario requiere rellenar las contraseñas u otra información confidencial.
ETIQUETAS PARA LA CREACION DE FORMULARIOS

El principio y final de un formulario se define con las etiquetas <form> y </form>. Dentro de las etiquetas
de apertura y cierre de form se pueden incluir diferentes elementos que son enviados para ser procesados
por el servidor web. HTML5 dispone de un gran número de elementos de formulario como puedes ver en
la siguiente.

ETIQUETAS DESCRIPCIÓN
<form> Define un formulario.
<fieldset> Permite organizar en grupos los campos de un formulario.
<legend> Representa el título de un <fieldset>.
<label> Representa el título de un elemento de control de un formulario.
Se usa para crear controles interactivos que reciben datos del usuario. Ver
<input>
atributos
<button> Representa un botón.
<option> Representa una opción en un elemento <select> o <datalist>.
Representa un elemento de control que permite la selección entre un
<select>
conjunto de opciones <option>.
<optgroup> Representa un conjunto de opciones, agrupadas lógicamente.
Representa un elemento de control que permite la selección entre un
<datalist>
conjunto de opciones <option>.
<textarea> Representa un elemento de control de edición de texto multilínea.
<output> Representa el resultado de un cálculo.
ATRIBUTOS
Este elemento incluye los atributos globales, y los indicados a continuación.
TYPE
El tipo de control a mostrar. Su valor predeterminado es text, si no se especifica este atributo. Los posibles
valores son:
 button: Botón sin un comportamiento específico.
 checkbox: Casilla de selección. Se debe usar el atributo value para definir el valor que se enviará
por este elemento. Se usa el atributo checked para indicar si el elemento está seleccionado.
También se puede usar el atributo indeterminate (el cual solo se puede establecer
programaticamente) para indicar que la casilla está en un estado indeterminado (en la mayoría de
las plataformas, se dibuja una línea horizontal a través de la casilla).
 color: HTML5 Control para espicificar un color. Una interfaz de selección de color no requiere
más funcionalidad que la de aceptar colores simples como texto
 date: HTML5 Control para introducir una fecha (año, mes y día, sin tiempo).
 datetime: HTML5 Control para introducir una fecha y hora (horas, minutos, segundos y
fracción de segundo), basado en la zona horaria UTC. Esta característica ha sido removida de
WHATWG HTML.
 datetime-local: HTML5 Control para introducir fecha y hora, sin zona horaria específica.

 email: HTML5 Campo para introducir una dirección de correo electrónico. El valor introducido
se valida para que contenga una cadena vacía o una dirección de correo válida antes de
enviarse. Las pseudo-clases :valid y :invalid son aplicadas segun corresponda.
 file: Control que permite al usuario seleccionar un archivo. Se puede usar el atributo accept para
definir los tipos de archivo que el control podrá seleccionar.
 hidden: Control que no es mostrado en pantalla, pero cuyo valor es enviado al servidor.
 image: Botón de envío de formulario con gráfico. Se debe usar el atributo src para definir el
origen de la imagen y el atributo alt para definir un texto alternativo. Se puede usar los
atributos height y width para definir el tamaño de la imagen en píxeles.
 month: HTML5 Control para introducir un mes y año, sin zona horaria específica.
 number: HTML5 Control para introducir un número de punto flotante.
 password: Control de línea simple cuyo valor permanece oculto. Se puede usar el
atributo maxlength para especificar la longitud máxima del valor que se puede introducir.
 radio: Botón radio. Se debe usar el atributo value para definir el valor que se enviará por este
elemento. Se usa el atributo checked para indicar si el elemento está seleccionado de forma
predeterminada. Los botones radio que tengan el mismo valor para su atributo name están dentro
del mismo "grupo de botones radio". Solo un botón radio dentro de un grupo puede ser
seleccionado a la vez.
 range: HTML5 Control para introducir un número cuyo valor exacto no es importante. Este
control usa los siguientes valores predeterminados si no se especifica cada atributo:
 min: 0
 max: 100
 value: min + (max - min) / 2, o min si max es menor que min
 step: 1
 reset: Botón que restaura los contenidos de un formulario a sus valores predeterminados.
 search: HTML5 Cuadro de texto de línea simple para introducir textos de búsqueda. Los saltos
de línea son eliminados automáticamente del valor introducido.
 submit: Botón que envía el formulario.
 tel: HTML5 Control para introducir un número telefónico. Los saltos de línea son eliminados
automáticamente del valor introducido, pero no hay otra sintaxis forzada. Se pueden usar atributos
como pattern y maxlength para restringir los valores introducidos en este control. Las pseudo-
clases CSS :valid y :invalid son aplicadas según corresponda.
 text: Campo de texto de línea simple. Los saltos de línea son eliminados automáticamente del
valor introducido.
 time: HTML5 Control para introducir un valor de tiempo sin zona horaria específica.

 url: HTML5 Campo para editar una URL. El valor introducido se valida para que contenga una
cadena vacía o una ruta URL absoluta antes de enviarse. Los saltos de línea y espacios en blanco
al principio o al final del valor son eliminados automáticamente. Se pueden usar atributos
como pattern y maxlength para restringir los valores introducidos en el control. Las pseudo-
clases :valid y :invalid son aplicadas según corresponda.
 week: HTML5 Control para introducir una fecha que consiste en número de semana del año y
número de semana sin zona horaria específica.
FORMA DE UTILISAR LAS ETIQUETAS
Etiquetas
<fieldset>
</ fieldset>
Esta etiqueta sirve para
que agrupemos controles
relacionados en
formularios extensos.
ATRIBUTO Type
Varios controles comparten la etiqueta input. En estos casos, el valor atributo type distingue si se trata de
un formulario de texto, de opción, etc.
EL ATRIBUTO NAME.
Con este atributo asignamos un nombre al control. Es importante, porque al recoger los datos, podremos
hacerlo a través del nombre. Además, los controles sin nombre no envían sus datos.

EL ATRIBUTO VALUE.
En controles como líneas de texto, establece el valor inicial, por lo que el usuario lo puede cambiar. En
otros, como botones, establece el texto que se muestra. En controles de opción, el atributo determina el
valor de cada opción.
EL ATRIBUTO DISABLED.
Permite deshabilitar un control, impidiendo que el usuario interactúe con él. Se utiliza con el
valor disabled (disabled="disabled").
<input type="text" disabled="disabled" value="Texto inicial" />

<input type ="checkbox" disabled="disabled" />
<input type="submit" disabled="disabled" value="Botón" />
Para introducir una línea de texto, podemos emplear el <input type="text" />.
Habrás observado que al introducir una contraseña, en vez del texto se muestran asteriscos.
Para conseguir esto, empleamos <input type="password" />.
También pueden contener los siguientes atributos:
value, con el valor inicial del texto.
size, con un valor numérico, que representa el ancho de la caja.
maxlength, con el máximo de caracteres que se pueden escribir.
1 <input type="password" /><br />

2 <input type="text" value="Escribe aquí" /><br />
3 <input type="text" value="Escribe aquí" size="10" /><br />
4 <input type="text" maxlength="5" />
Para escribir texto más largo, de varias líneas, utilizamos el control área de texto <textarea></textarea>.
Este control, debe de llevar siempre los siguientes atributos para indicar su tamaño:
rows, indicando el número de líneas de texto.
cols, indicando el número de columnas que se muestra.

Ejercicio
A. Diseña el siguiente formulario utilizando html y php para mostrar información en pantalla
Mostrar por lista: las formas de pago

Asignar el Botón de Solicitar Pedido

Practica calificada
Ejercicios 1
Crea una página web que contenga un formulario con los siguientes campos de información:
 El nombre, con un control de tipo texto.
 Los apellidos, con un control de tipo texto.
 El sexo, con dos opciones excluyentes hombre o mujer.
 El correo electrónico, con un control de tipo texto.
 Una casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas".
 Una casilla de verificación con el texto "Declaro haber leido y aceptar las condiciones
generales del programa y la normativa sobre protección de datos".
 Un botón de envío.
Además, tienes que tener en cuenta los siguientes requisitos:
 El título de la página debe ser Formulario de registro - Mi web.
 El método de envío del formulario debe ser GET.
 El destino del envío del formulario debe ser "".
 La longitud máxima de entrada de datos de los controles para el nombre y los apellidos debe
ser 50 caracteres.
 La casilla de verificación con el texto "Deseo recibir información sobre novedades y ofertas"
debe estar activada por defecto.
 Debes crear una página web que tenga el mismo aspecto que la siguiente imagen:
Ejercicio 2
Crea una página web que contenga un formulario con los siguientes campos de información:
 Nombre, con un control de tipo texto obligatorio y con autofoco.
 Correo electrónico, con un control de tipo email obligatorio.
 URL, con un control de tipo url que muestre la ayuda "Escribe la URL de tu página web
personal".
 Fecha, con un control de tipo date.
 Tiempo, con un control de tipo time.
 Fecha y hora, con un control de tipo datetime.
 Mes, con un control de tipo month.
 Semana, con un control de tipo week.
 Número, con un control de tipo number que limite la entrada a un valor entre -10 y 10.
 Teléfono, con un control de tipo tel.
 Término de búsqueda, con un control de tipo search.
 Color favorito, con un control de tipo color.
 Un botón de envío.
Además, tienes que tener en cuenta los siguientes requisitos:
 El título de la página debe ser Formulario de prueba de HTML5.
 El método de envío del formulario debe ser GET.
 El destino del envío del formulario debe ser "". al
Nota: por lo anterior, cuando realices esta actividad y compruebes cómo se visualiza tu página web en
distintos navegadores es muy probable que obtengas diferentes resultados.

i


SSesion 4 Formulario I3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SSesion 4 Formulario I3

Uploaded by

Copyright:

Available Formats

Taller de Programación Web HTML5 / PHP / MYSQL

ING. JOHN HILMER VÉLIZ CRUZ 1

CONTROLES O ETIQUETAS DEL FORMULARIO

Todos los formularios comienzan con un elemento <form>, como este:

ING. JOHN HILMER VÉLIZ CRUZ 2

DIFERENCIAS PRINCIPALES DEL MÉTODO GET Y POST

ETIQUETAS PARA LA CREACION DE FORMULARIOS

ING. JOHN HILMER VÉLIZ CRUZ 3

ING. JOHN HILMER VÉLIZ CRUZ 4

ING. JOHN HILMER VÉLIZ CRUZ 5

FORMA DE UTILISAR LAS ETIQUETAS

ING. JOHN HILMER VÉLIZ CRUZ 6

<input type="text" disabled="disabled" value="Texto inicial" />

1 <input type="password" /><br />

ING. JOHN HILMER VÉLIZ CRUZ 7

Mostrar por lista: las formas de pago

ING. JOHN HILMER VÉLIZ CRUZ 8

ING. JOHN HILMER VÉLIZ CRUZ 9

ING. JOHN HILMER VÉLIZ CRUZ 10

You might also like