Professional Documents
Culture Documents
Programación HTML II
Instituto IACC
compañía de análisis de mercado denominada Merana, y en las últimas dos semanas fue
asignado a un nuevo proyecto donde requerían realizar una encuesta online para indagar respecto
las estructuras de validación, y como parte de la tarea de esta semana se debe haber completado
el diseño e implementación del código necesario para validar los datos suministrados por el
usuario.
El código resultante de la tarea de esta semana contempla el rediseño de la estructura del código
generado para que utilice programación orientada a objetos (POO) y funciones, a fin de ofrecer
una implementación eficiente y estructurada. Las funciones y objetos desarrollados deben poder
ser reusados con facilidad en otro proyecto, por lo que se debe tener cuidado de no generar una
@charset "utf-8";
body{
background-image: url(../images/fondo.jpg);
background-size: cover;
background-attachment: fixed;
font-size: 0.75em;
color: #000000;
<!—Se determina padding general para las etiquetas div, danlole los valores a margin y al
padding-->
div{
margin: auto;
h1, h3 {
text-align: center;
font-weight: bold;
<!—Se determina el aspecto general del formulario, color de fondo, espaciado y margen, etc,-->
form {
margin-top: 1.25em;
border-radius: 20px;
fieldset {
border-radius: 15px;
border-color: #FBFBEF;
margin-bottom: 0.625em;
border-top-width: 0.125em;
border-top-style: solid;
padding: 0.310em;
legend {
text-align: right;
font-weight: bold;
letter-spacing: 0.2em;
label{
color: #6AE955;
<!—Se determina input con sus características incluidas color, espaciado etc.-->
input{
background: #FFFFFF;
padding: 0.125em;
color: #000000;
border-radius: 10px;
input[type='text']{
width: 140px;
text-align: right;
color: #000000;
}
<!—Se determina los parámetros de las listas de selección, indicando sus características -->
select{
width: 160px;
background: #FFFFFF;
color: #000000;
padding: 5;
border-radius: 10px;
textarea{
background: #FFFFFF;
color: #000000;
resize: none;
height: 08em;
width: 94%;
border-radius: 10px;
a{
text-decoration: none;
}
<!—Se alinean los botones-->
.botones{
text-align: center;
.unalinea{
display: inline-block;
.textarea{
padding: 0.312em;
text-align: center;
.boton {
color: #FFFFFF;
background : #007700;
padding: 0.5em;
font-size: 0.937em;
font-weight: bolder;
}
<!—Se indica que cambie de color cuando el mouse este sobre el botón-->
.boton:hover {
cursor: pointer;
background : #58FA82;
<!— Se comienza a usar media queries, indicando los estilos css que debe cargar al contenedor
body{
font-size: 14px;
div{
padding: 0.625em;
max-width: 560px;
h1 {
letter-spacing: 0.3em;
form {
padding: 0.625em;
margin-top: 2.5em;
textarea{
width: 85%;
}
.boton {
padding: 0.937em;
body{
font-size: 16px;
div{
padding: 1.25em;
max-width: 640px;
h1 {
letter-spacing: 0.3em;
form {
padding: 1.875em;
margin-top: 2.5em;
fieldset {
margin-bottom: 2.5em;
border-top-width: 0.187em;
}
legend {
padding: 1.25em;
textarea{
margin-bottom: 1.25em;
width: 80%;
padding: 1.25em;
height: 7em;
.boton {
padding: 1.25em;
Código php
<?php
$rut=trim($_POST['rut']);
$edad=trim($_POST['edad']);
$genero=$_POST['genero'];
$frecuencia=$_POST['frecuencia'];
$horario=$_POST['horario'];
$lineas=implode(",",$_POST['lineas']);
$qos=$_POST['qos'];
$obs=trim($_POST['obs']);
$dbhost = "localhost";
$dbuser = "metroform";
$dbpass = "123456";
$dbname = "db_form_metro";
$dbtable = "respuestas";
if(!$link){
edad,
genero,
frecuencia,
horario,
linea,
valor,
observacion
) ";
$consulta = $consulta . "VALUES ('$rut','$edad,'$genero','$frecuencia','$horario','$lineas',
'$qos','$obs');";
// Para insertar datos recibidos a la BD, validar su correcta ejecución, además sedetiene en caso
$q = mysqli_query($link,$consulta);
if(!$q) {
mysqli_close($link);
}else{
// Para consultar los registros ingresados correctamente basados en el ultimo ingreso, se incluye
función if
$ultimo = mysqli_insert_id($link);
$consulta = "SELECT fecha, rut, edad, genero, frecuencia, horario, linea, valor, observacion
$q = mysqli_query($link,$consulta);
if(!$q) {
mysqli_close($link);
if(mysqli_num_rows($q)){
while($row=mysqli_fetch_array($q,MYSQLI_ASSOC)){
$rut=$row['rut'];
$edad=$row['edad'];
$genero=$row['genero'];
$frecuencia=$row['frecuencia'];
$horario=$row['horario'];
$lineas=$row['linea'];
$qos=$row['valor'];
$obs=$row['observacion'];
// Se usan método if, switch y str_replace, para el formatear los datos de lectura
if ($genero== "F"){
$genero="Femenino";
}elseif($genero== "M"){
$genero="Masculino";
switch ($frecuencia) {
case '1':
$frecuencia="Nunca";
break;
case '2':
$frecuencia="Poca frecuencia";
break;
case '3':
$frecuencia="Regularmente";
break;
case '4':
$frecuencia="Todo el tiempo";
break;
switch ($horario) {
case '1':
$horario="Horario Punta";
break;
case '2':
$horario="Horario Medio";
break;
case '3':
$horario="Horario Valle";
break;
switch ($qos) {
case '1':
$qos="Malo";
break;
case '2':
$qos="Deficiente";
break;
case '3':
$qos="Regular";
break;
case '4':
$qos="Bueno";
break;
case '5':
$qos="Excelente";
break;
?>
<html>
<head>
</head>
<body>
<div class="contenedor">
<div>
<p>
</p>
<p>
</p>
<p>
</p>
</form>
</div>
<div class="botones">
<a href="tarea6.html">
</a>
</div>
</body>
</html>
<?php
}
}
mysqli_close($link);
?>
Código JavaScript
function validar(){
var form=document.encuesta;
// Se crean las validaciones de campos vacios, para ello se enviara un mensaje de alerta si algún
campo queda vacío, en el caso del rut, además de validación, este compara la expresión , para
form.rut.focus();
return false;
}else if(!rut.value.match(RegExp(patronRut))){
alert("RUT incorrecto");
form.rut.focus();
return false;
if (edad.value==0){
form.edad.focus();
return false;
form.m.focus();
return false;
if (frecuencia.value=="Seleccione..."){
form.frecuencia.focus();
return false;
}
if (punta.checked==false && medio.checked==false && valle.checked==false){
form.hp.focus();
return false;
//Aquí se valida selección de al menos una línea, el ciclo recorre el array obtenido, y verifica si al
menos una esta activada, si validación es false mostrara un mensaje de alerta y activa focus en
primer checkbox
if (lineas[i].checked) {
validado = true;
if (validado == false) {
form.l1.focus();
return false;
if (qos.value=="Seleccione..."){
form.qos.focus();
return false;
}
// Para el envío de formulario
form.submit();
function normalizaRut(entrada){
if (permitidos.indexOf(entrada.charAt(i)) != -1){
return salida;
function normalizaEdad(entrada){
return salida;
}
function normalizaObs(entrada){
var permitidos =
"abcdefghijklmnñopqrstvwxyzáéíóúÁÉÍÓÚABCDEFGHIJKLMNÑOPQRSTVWXYZ12345678
90.-_";
if (permitidos.indexOf(entrada.charAt(i)) != -1){
return salida;
Código HTML
<!DOCTYPE html>
<!—Para realizar las validaciones con JavaScript, se eliminan los atributos "required" y "pattern"
-->
<html>
<head>
</head>
<body>
<noscript>
<p>
de JavaScript en su navegador.
</p>
</noscript>
<div class="contenedor">
<header>
<h1><font color="#4673D3">Encuesta Realizada por Merana " Calidad de Servicio del Metro
de Santiago "</font></h1>
</header>
<p>
<div class="unalinea">
<!—Se crea el campo rut con un ejemplo de cómo se debe ingresar -->
placeholder="12.345.678-9"
maxlength="12"
onkeyup="this.value=normalizaRut(this.value);"/>
</div>
<div class="unalinea">
<!—Se crea campo edad indicando un rango de edad mínima y máxima -->
placeholder="25"
maxlength="3"
onkeyup="this.value=normalizaEdad(this.value);"/>
</div>
<div>
Género:
<div class="unalinea">
<label for="m">Masculino</label>
</div>
<div class="unalinea">
</div>
</div>
</fieldset>
</p>
<p>
<div>
Frecuencia de uso:
<option value="1">Nunca</option>
<option value="3">Regularmente</option>
</select>
</div>
<div>
<!—Se crean botones para el campo horario, con separación de div para la resolución-->
<div class="unalinea">
</div>
<div class="unalinea">
</div>
<div class="unalinea">
</div>
</div>
<div>
<div class="unalinea">
</div>
<div class="unalinea">
</div>
<div class="unalinea">
</div>
<div class="unalinea">
</div>
<div class="unalinea">
</div>
<div class="unalinea">
</div>
<div class="unalinea">
<label for="l1v"></label>
</div>
</div>
<div>
<option value="1">Malo</option>
<option value="2">Deficiente</option>
<option value="3">Regular</option>
<option value="4">Bueno</option>
<option value="5">Excelente</option>
</select>
</div>
</fieldset>
</p>
<div class="textarea">
<fieldset><legend>Observaciones</legend>
</textarea>
</fieldset>
</div>
<div class="botones">
accesskey="K" onclick="validar();"/>
</div>
</form>
</div>
</body>
</html>