Leonardo Yáñez Control2 HTMLII

Formularios operativos
Leonardo Esteban Yáñez Melo
Programación HTML II
Instituto Profesional IACC
28 de junio de 2020
Desarrollo
 Incorporar los botones de envío que serán utilizados para indicarle al formulario que los
datos recibidos del usuario deben ser enviados al servidor. Se debe considerar que el
mismo ya posee los siguientes campos:
 Además, deberá incluirse un campo donde posteriormente se pueda agregar la fecha y
hora en la que se está realizando la encuesta. Dicho campo no debe ser modificable ni
visible por el usuario, pero debe ser incluido entre los datos que serán enviados al
servidor.
 Para ello, se le solicita que defina los elementos que deben ser agregados al formulario
para realizar el envío de la información y el método más apropiado para realizarlo. A
fin de poder realizar dichas pruebas sobre el formulario, este deberá enviar los datos en
un e-mail usando el cliente de correos del usuario.
 Además, se requiere que se verifique el diseño realizado y se agreguen, de ser
necesarios, ayudas y atajos de teclado de manera de adaptar la página web para ser
utilizada con mayor sencillez. Esto implica la inclusión de atajos de teclado, orden de
tabulación y mensajes informativos para los usuarios.
 El documento resultante que deberá generar como entrega de la actividad de la
semana 2 estará integrado por el código del formulario con las adiciones que sean
necesarias para cumplir con los requerimientos establecidos, y un documento
descriptivo que explique y detalle los elementos que fueron agregados y las
consideraciones que se tomaron en cuenta para colocar dichos elementos y no otros .
A continuación, se muestra el código con las modificaciones correspondientes a esta semana con
respecto a la semana anterior.
html>
<head>
<meta charset="UTF-8">
</head>
<h2 style="text-align:center";> Formulario de Contacto</h2>
<body style="background-color:#ED3642;">
<form action="contacto.php" method="post" action="mailto:correoactivo@mipagina.com?

subject=mensaje interno">
<p style="text-align:center";><label for="_photo">Foto</label> <input type="file"
name="photo" id="_photo" accept="image/*" tabindex=1 autofocus/></p>
<p style="text-align:center";><b>NOMBRE:</b><input type="text" name="nombre" max="50"

tabindex=2></p>
<p style="text-align:center";><label for="_rut"><b>RUT</b></label>

<input type="text" name="rut" id="_rut"
title="Favor type the RUT like 11.111.111-1"
placeholder="11.111.111-1"
pattern="[0-9]{2}.[0-9]{3}.[0-9]{3}-[0-9kK]" tabindex=3/></p>
<p style="text-align:center";><b>EDAD:</b>
<input type="number" name="edad" min="10" max="120" tabindex=4></p>
<p style="text-align:center";><b>Género</b><br>
<input type="radio" name="hombre" value="h" tabindex=5> Masculino

<input type="radio" name="mujer" value="m" tabindex=6> Femenino
</p>
<p style="text-align:center";><b>Frecuencia uso del servicio de Metro</b><br>
<input type="radio" name="1" value="h" tabindex=7> Todo el tiempo

<input type="radio" name="2" value="m" tabindex=8> Regularmentemente
<input type="radio" name="3" value="h" tabindex=9> Poca Frecuencia
<input type="radio" name="4" value="m" tabindex=10> Nunca
</p>
<p style="text-align:center";><b>Horario que utiliza el metro</b><br>
<input type="radio" name="1" value="h" tabindex=11> Horario Punta

<input type="radio" name="2" value="m" tabindex=12> Horario Medio
<input type="radio" name="3" value="h" tabindex=13> Horario Valle
</p>
<p style="text-align:center";><label><b>Líneas de Metro que utiliza:</b></label></p>

<p style="text-align:center";><input type="checkbox" id="Línea 1" value="Línea 1"
name="metro" tabindex=14>

<label for="Línea 1">Línea 1</label>

<input type="checkbox" id="Línea 2" value="Línea 2"
<label for="Línea 4">Línea 4</label><br>
<label for="Línea 6">Línea 6</label></p>
<p style="text-align:center";><label><b>Calidad de Servicio:</b></label></p>
<p style="text-align:center";><select tabindex=20>Evalúe la calidad del servicio de metro:

<option selected="">--</option>
<option>Malo</option>
<option>Deficiente</option>
<option>Regular</option>
<option>Bueno</option>
<option>Excelente</option>
</p></select><br>
<p style="text-align:center";><b>Contacto</b><br><br>
<form method="post" action="mailto:pperez@mydom.com?subject=mensaje interno">
<label for="_name">Nombre</label><br>
<input type="text" name="name" id="_name"/><br><br>
<label for="_phone">Telefono</label><br>
<input type="text" name="phone" id="_phone"/><br><br>
<label for="_message">Mensaje</label><br>
<textarea name="desc" id="_desc" maxlength="200" cols="40" placeholder="Escriba
aquí sus comentarios." style="resize: both;"
rows="6" tabindex=21></textarea><br><br>
<label for="_email">Correo Electrónico</label> <input type="text" name="email"
id="_email" tabindex=22/> <button type="submit" tabindex=23>Enviar</button><button
type="reset" tabindex=24>Reiniciar</button>
</form></p>
<label for="_fecha" hidden>Fecha: </label>
<input type="date" id="fecha" name="fecha" disabled value="29/06/2020"
hidden="29/06/2020"/>
<label for="_hora" hidden>Hora: </label>
<input type="time" id="hora" name="hora" disabled value="17:00" hidden="17:00"/>
</form>
</body>
</html>
Se agrega TABINDEX para utilizar el tabulador y siga el orden establecido, además de la fecha
oculta mostrando la fecha actual, se agrega además el apartado para subir una foto o imagen.
Se agrega un INPUT que permite introducir el correo electrónico del usuario.
Se agrega además LABEL ocultos y/ desactivados a través de los atributos HIDDEN y
DISABLED
Bibliografía
Instituto Profesional IACC 2020. Formularios II. Programación HTML. Semana 2

Leonardo Yáñez Control2 HTMLII

Cargado por

Información del documento

Título original

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

Leonardo Yáñez Control2 HTMLII

Cargado por

Copyright:

Formatos disponibles

Formularios operativos

Leonardo Esteban Yáñez Melo

Instituto Profesional IACC

respecto a la semana anterior.

<body style="background-color:#ED3642;"><!--las alineaciones se harán para todo el

<form action="contacto.php" method="post" action="mailto:correoactivo@mipagina.com?

<p style="text-align:center";><b>NOMBRE:</b><input type="text" name="nombre" max="50"

<p style="text-align:center";><label for="_rut"><b>RUT</b></label>

<p style="text-align:center";><b>Género</b><br><!--se utiliza tipo radio para darle la fotma

<input type="radio" name="hombre" value="h" tabindex=5> Masculino

<p style="text-align:center";><b>Frecuencia uso del servicio de Metro</b><br><!--se utiliza

<input type="radio" name="1" value="h" tabindex=7> Todo el tiempo

<input type="radio" name="1" value="h" tabindex=11> Horario Punta

<p style="text-align:center";><label><b>Líneas de Metro que utiliza:</b></label></p>

<label for="Línea 1">Línea 1</label>

<p style="text-align:center";><label><b>Calidad de Servicio:</b></label></p><!--para este

<p style="text-align:center";><select tabindex=20>Evalúe la calidad del servicio de metro:

Se agrega un INPUT que permite introducir el correo electrónico del usuario.

Se agrega además LABEL ocultos y/ desactivados a través de los atributos HIDDEN y

Instituto Profesional IACC 2020. Formularios II. Programación HTML. Semana 2

También podría gustarte