PRÁCTICA NO.
4
DESARROLLO DE FORMULARIOS
Competencia
Hacer formularios HTML en relación al planteamiento de ¿Qué son? ¿Para qué se usan? ¿Cómo se
diseñan? Y los elementos necesarios para crearlos.
Introducción
Los formularios de HTML permiten recolectar información provista por los visitantes. Un formulario
se específica con la etiqueta <form> que sirve de contenedor para todos los elementos de entrada
Controles del formulario
• Input
text
email
password
hidden
number
url
date
time
range
tel
search
color
button
submit
reset
• Textarea
• select
Figura no. 20 Controles de formulario
Atributos
Los elementos del formulario además pueden poseer atributos para definir su comportamiento y
restricciones. Algunos atributos permiten establecer si un campo es obligatorio, required, si admite
varios valores, multiple, y así.
Correlación con temas y subtemas del programa de estudio vigente
Está práctica se relaciona con el tema 2, HTML, XML y CSS, y con el subtema 2.4 Formularios
Medidas de seguridad e higiene
Utilizar una computadora personal conectada a corriente regulada en un laboratorio de cómputo de la
institución.
Material y equipo necesario
• Computadora con sistema operativo Linux, distribución Ubuntu
• Software de servidor web y bases de datos
• Módulo de PHP instalado en el servidor
• Conexión a Internet
Metodología
4.1.-Buscar y revisar atributos de controles de formularios
Realiza una busqueda en Internet para conocer los controles de formularios de HTML y sus atributos,
se recomienda la información de [Link] que es concisa y breve, sin embargo,
es conveniente que consultes otras fuentes, no más de tres para que apliques de manera óptima el
tiempo de práctica.
[Link]ón de formularios
4.2.1.-Crea un nuevo proyecto en Netbeans con el nombre practica4_pweb_grupo, con las carpetas
css e images para guardar hojas de estilo e imágenes. Crea además una página web con un
formulario, aplica estilo eligiendo un tipo de letra. Vease figura no. 21.
Figura no. 21 Primer formulario
Descripción del formulario:
Elemento Atributos Descripción
form action Especifica el url a donde van a ser enviados los datos del
method formulario.
Especifica el método de envio, get o post.
input type text Caja de texto
name Nombre del control, similar a un parámetro
required Campo obligatorio
placeholder Leyenda del control
submit type submit Botón de envio
value Etiqueta a mostrar
[Link].-Modifica el formulario para que solicite:
a)Apellidos por separado, paterno y materno. Campos con nombre, obligatorios y con
[Link] que todos los elementos del formulario deben estar dentro de <form></form>.
Utiliza:
type="text"
b)Edad, campo con nombre, obligatorio y con leyenda. Utiliza:
type="number"
c)Correo electrónico,campo con nombre, obligatorio y con leyenda. Utiliza:
type="email"
d)Teléfono, campo con nombre, opcional y con leyenda. Utiliza:
type="tel"
e)Fecha de nacimiento, campo con nombre y [Link]:
type="date"
f)Número de hijos, campo con nombre y opcional. Utiliza:
type="number"
min="0"
max="20"
g)Sitio favorito entre tres opciones, campo con nombre y opcional. Se proporciona código
h)Sexo, femenino o masculino, campo con nombre y opcional. Utiliza datalist.
i)Contraseña, campo con nombre, obligatorio y con leyenda. Se repite 2 veces como se ilustra en la
figura no. 22. Utiliza:
type="password"
Figura no. 22 Solicitar contraseña
4.3.-Formulario Web.
Desarrolla una página web con un formulario de contacto como el que se muestra en la figura no. 23,
utiliza controles adecuados y sigue las sugerencias de la imagen.
Figura no. 23 Formulario Contactanos
Sugerencias didácticas
• Ejercicios extra a la prácticas de laboratorio
• Fomentar el trabajo en equipo.
• Propiciar las dinámicas grupales.
Reporte del alumno
• Resultados, el alumno muestra lo que realizó en la práctica
• Discusión de resultados, compara sus resultados con el resultado de otros compañeros
• Conclusiones, analiza y expresa ante el maestro o sus compañeros lo aprendido en la
práctica.
Bibliografía
• Nixon, R. (2012). Learning PHP, MySQL, JavaScript, and CSS. Sebastopol, USA: O'Reilly.
• Schafer, S y ebrary, I. (2010). HTML, XHTML, and CSS bible. USA:Wiley
• [Link]
• [Link]
