Scribd
Cargar
4 vistas18 páginas

CHTML B Ejercicio FormularioFinal

Cargado por

aye.trigo

Copyright:

© All Rights Reserved
Descargue como PDF, TXT o lea en línea desde Scribd
Descargar como pdf o txt

CHTML B Ejercicio FormularioFinal

Cargado por

aye.trigo
4 vistas18 páginas

Derechos de autor

© © All Rights Reserved

Formatos disponibles

PDF, TXT o lea en línea desde Scribd

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

© All Rights Reserved
Descargue como PDF, TXT o lea en línea desde Scribd
Descargar como pdf o txt
4 vistas18 páginas

CHTML B Ejercicio FormularioFinal

Cargado por

aye.trigo

Copyright:

© All Rights Reserved
Descargue como PDF, TXT o lea en línea desde Scribd
Descargar como pdf o txt
Está en la página 1/ 18

Por el experto: Ing.

Ubaldo Acosta

www.gl obal mentoring.com .mx


Crear un proyecto con HTML, CSS y JavaScript para realizar
un formulario que incluya validaciones. Al finalizar veremos:

www.gl obal mentoring.com .mx


Creamos un nuevo proyecto:

www.gl obal mentoring.com .mx


Creamos un nuevo archivo estilos.css:

www.gl obal mentoring.com .mx


Creamos un nuevo archivo validaciones.js:

www.gl obal mentoring.com .mx


Archivo index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejercicio Formulario</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<script type="text/javascript" src="validaciones.js"></script>
</head>
<body>
<form name="form1" action="/recursoEnServidor"
method="post" onsubmit="return validarForma(this);">

<input type="hidden" name="oculto" value="valorOculto">

<table width="200" id="one-column-emphasis">


<caption>
Formulario Registro de Datos
</caption>
<tr>
<td class="oce-first">
Usuario: (*)
</td>
<td>
<input class="default" type="text"
name="usuario" value="Escribir usuario"
onfocus="this.select();"/>
</td>
</tr>
www.gl obal mentoring.com .mx
( )
Archivo index.html:
<tr>
<td class="oce-first">
Password: (*)
</td>
<td>
<input class="default" type="password"
name="password" onfocus="this.select();">
</td>
</tr>
<tr>
<td class="oce-first">
Tecnolog&iacute;as de Inter&eacute;s: (*)
</td>
<td>
Java <input type="checkbox" name="tecnologia" value="java">
&nbsp;&nbsp;&nbsp;
.Net <input type="checkbox" name="tecnologia" value="net">
&nbsp;&nbsp;&nbsp;
Php <input type="checkbox" name="tecnologia" value="php">
</td>
</tr>
<tr>
<td class="oce-first">
G&eacute;nero: (*)
</td>
<td>
Hombre<input type="radio" name="genero" value="H">
&nbsp;&nbsp;&nbsp;<!--genera espacios entre los elementos de manera horizontal -->
www.glname="genero"
Mujer <input type="radio" obal mentoring.com
value="M"> .mx
</td>
( )
Archivo index.html:
</tr>
<tr>
<td class="oce-first">
Ocupaci&oacute;n: (*)
</td>
<td>
<select name="ocupacion" class="default">
<option value="">Seleccionar</option>
<option value="1">Profesor</option>
<option value="2">Ingeniero</option>
<option value="3">Jubilado</option>
<option value="4">Otro</option>
</select>
</td>
</tr>
<tr>
<td class="oce-first">
M&uacute;sica Favorita:
</td>
<td>
<select name="musica" multiple class="default">
<option value="rock">Rock</option>
<option value="pop">Pop</option>
<option value="salsa">Salsa</option>
</select>
</td>
</tr>
www.gl obal mentoring.com .mx
( )
Archivo index.html:
<tr>
<td class="oce-first">
Comentarios:
</td>
<td>
<textarea name="comentarios" cols="30" rows="2"
class="default" onfocus="this.select();">
Escribir un texto</textarea>
</td>
</tr>
<tr style="text-align:center;">
<td>
<input type="reset" value="Limpiar" class="default">
</td>
<td>
<input type="submit" value="Enviar" class="default">
</td>
</tr>
</table>
</form>
</body>
</html>

www.gl obal mentoring.com .mx


( )
Archivo validaciones.js:
/**
* Funcion para validar los elementos requeridos (*)
* @param {Object} forma
*/
function validarForma(forma) {
//Validamos el usuario
var usuario = forma.usuario;
if (usuario.value == "" || usuario.value == "Escribir usuario") {
alert("Debe proporcionar un nombre de usuario");
usuario.focus();
usuario.select();
return false;
}

//Validamos el password
var password = forma.password;
if (password.value == "" || password.value.length < 3) {
alert("Debe proporcionar un password al menos de 3 caracteres");
password.focus();
password.select();
return false;
}

//Validamos las tecnologias de interes


var tecnologias = forma.tecnologia;
var checkSeleccionado = false;

www.gl obal mentoring.com .mx


( )
Archivo validaciones.js:
//revisamos si se selecciono algun checkbox
for (i = 0; i < tecnologias.length; i++) {
if (tecnologias[i].checked) {
checkSeleccionado = true;
}
}
if (!checkSeleccionado) {
alert("Debe proporcionar una Tecnologia");
return false;
}

//Validamos el Genero
var generos = forma.genero;
var radioSeleccionado = false;

//revisamos si se selecciono algun radiobutton


for (i = 0; i < generos.length; i++) {
if (generos[i].checked) {
radioSeleccionado = true;
}
}
if (!radioSeleccionado) {
alert("Debe seleccionar el Genero");
return false;
}

www.gl obal mentoring.com .mx


( )
Archivo validaciones.js:
//Validamos la ocupacion
var ocupacion = forma.ocupacion;
if (ocupacion.value == "") {
alert("Debe seleccionar una ocupacion");
return false;
}

//Formulario validado
alert("Formulario valido, enviando datos...");
return true;
}

www.gl obal mentoring.com .mx


Archivo estilos.css:
body, .default {
line-height: 1.6em;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
color:#669;
}

#one-column-emphasis
{
margin: 45px;
width: 480px;/*Especificamos el ancho de la tabla*/
text-align: left;
border-collapse: collapse;/*No deja espacio entre los renglones y columnas de la tabla*/
}
#one-column-emphasis caption
{
font-size: 20px;
}

#one-column-emphasis th
{
font-size: 14px;
font-weight: normal;
padding: 12px 15px;
color: #039;
}

www.gl obal mentoring.com .mx


( )
Archivo estilos.css:
#one-column-emphasis td
{
padding: 10px 15px;
color: #669;
border-top: 1px solid #e8edff;
}

.oce-first
{
background: #d0dafd;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
#one-column-emphasis tr:hover td
{
color: #339;
background: #eff2ff;
}

www.gl obal mentoring.com .mx


www.gl obal mentoring.com .mx
( )
El recurso en el servidor es el que realizaremos en el curso de Servlets y
JSPs, ya que es la tecnología que utilizaremos del lado del servidor:

www.gl obal mentoring.com .mx


Con este ejercicio hemos puesto en práctica las tres
tecnologías que estudiamos en este curso.

HTML, CSS y JavaScript combinados nos permiten crear


páginas Web mucho más completas y robustas, y así aportar
mejores sistemas Web a nuestros usuarios finales.

www.gl obal mentoring.com .mx


Por: Ing. Ubaldo Acosta

www.gl obal mentoring.com .mx

También podría gustarte