Diseno de Interfaces de Programacion-Actividad 1

DISEÑO DE INTERFACES DE PROGRAMACION
INTEGRANTES:
RICARDO GUERRERO
RODRIGO GOMEZ
LEANDRO GIRALDO
FORMULARIOS:
Actividad 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="widht=device-widht, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>formulario</title>
</head>
<body>
<h1>Formularios</h1>
<form action="">
<label for="nombre">Ingresar el nombre</label><br>
<input name="usarname"id="nombre"><br>

<label>
ingrese su nombre <br>
<input type="text">
</label>
<buttom>Enviar</buttom>
</form>
</body>
</html>
Actividad 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="widht=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Formularios de Ingreso</h1>
<form action="">
<div>
<label>
Ingrese su nombre de usuario:
<input name="username">
</label>
</div>
<div>
<label>
Ingrese su contraseña :
<input name="userpassword" type="password">
</label>
</div>
<input type="submit" value="Iniciar Sesion">
</form>
</body>
</html>
Actividad 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta http-equiv="X-UA-compatible" content="ie=edge">
</head>
<body>
<form action="">
<div>
<label>
Ingrese su nombre de Usuario:
<input id="username" type="text" name="username" val
ue="Ricardo">
</label>
</div>
<div>
<label>
Ingrese su contraseña :
<input type="password" name="username">
</label>
</div>
<input type="submit" value="Iniciar seción">
</form>
<script>
document.getElementById('username').addEventlistener('keyup',e =
> {
console.log(e.target.value)})
</script>
</body>
</html>
Activated 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-compatible" content="ie=edge">
</head>
<body>
<form action="">
<div>
<label>Ingrese su Nombre de Usuario :<input id="username" va
lue="Juan"></label>
</div>
<div>
<label>Ingrese su contraseña : <input name="userpassword" ty
pe="password"></label>
</div>
<div>
<label>Ingrese su Email : <input type="Email" name="" id
=""></label>
</div>
<div>
<label>Ingresar la fecha de Nacimiento : <input type="da
te"></label>
</div>
<div>
<label>Ingresar la cantidad : <input type="number"></lab
el>
</div>
<div>
<label>Placeholder: <input type="next" placeholder="Nomb
re"></label>
</div>
<input type="submit" value="Iniciar Sesion">
</form>
</body>
</html>
Actividad 5 y 6:
<fieldset>
<div>
<label>
Ingrese su Nombre de Usuario:
<input type=" text" name="username" id="username" value="Ric
ardo">
</label>
</div>
<div>
<label>
Ingrese su contraseña:
<input type="password" name="userpassword" >
</label>
</div>
</fieldset>
<fieldset>
<div>
<label>
Ingrese su Nombre de Usuario:
<input type=" text" name="username" id="username" value="Ric
ardo">
</label>
</div>
<div>
<label>
Ingrese su contraseña:
<input type="password" name="userpassword" >
</label>
</div>
</fieldset>
<fieldset>
<legend>Pasatiempos</legend>
<label><input type="checkbox">Deportes</label>
<label><input type="checkbox">Cine</label>
</fieldset>
<fieldset>
<legend>Tu genero</legend>
<label><input type="radio" name="demo01">Hombre</label>
<label><input type="radio" name="demo01">Mujer</label>
</fieldset>
<fieldset>
<legend>selecionar una opcion</legend>
<label for="country">Selecciona tu Pais</label>
<select name="country" id="country">
<optgroup label="America">
<option value="Peru">Peru</option>
<option value="Colombia">Colombia</option>
<option value="España">España</option>
</optgroup>
</select>
</fieldset>
<fieldset>
<textarea name="mensaje" id="" cols="30" rows="10">

</textarea>
</fieldset>
Imagen referencial:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div { background-color:rgb(56, 153, 218);
text-align: center;
margin: 10px;
padding: 15px;
}
body {margin: 40px ;}
h3 {color: rgb(56, 153, 218);}
#titulo{color: seashell;}
.di{padding-left: 5px;}
</style>
<title>Manejo de Formularios</title>
</head>
<body>
<div><h3 id="titulo">Travel Authorization Form</h3></div>
<h3>Sección A: Información del cliente</h3><hr size="2px">
<form action="#" method="POST">
<table cellpadding:5>
<tr>
<td><label for="nombre">Página:</label></td>
<td><input type="text" placeholder="Ingrese la página"r
equired size="30"></td>
<tr>
<td><label for="nombre">Cargo :</label></td>
<td><input type="text" style="text-
transform:uppercase;" minlenght="4" maxlenght="100"name="nombre" id="nombre"
size="40" maxlength="40" required placeholder="Ingrese Cargo" autofocus></td
>
</tr>
<tr>
<td><label for="">Nombre:</label></td>
<td><input type="text" style="text-
transform:uppercase;" minlenght="4" maxlenght="100" placeholder="Ingrese su
Nombre"required size="30"></td>
</tr>
<tr>
<td><label for="">Primer Apellido:</label></td>
<td><input type="text" style="text-transform:uppercase;"
minlenght="4" maxlenght="100" placeholder="Ingresa su Primer Apellido"requir
ed size="40"></td>
</tr>
<tr>
<td><label for="">Segundo Apellido:</label></td>
<td><input type="text"style="text-transform:uppercase;"
minlenght="4" maxlenght="100" placeholder="Ingrese su Segundo Apellido"requ
ired size="40"></td>
</tr>
<tr>
<td><label for="">Correo Electrónico:</label></td>
<td><input type="Email" placeholder="[email protected]" re
quired size="20"></td>
</tr>
<tr>
<td><label for="">Número de Teléfono:</label></td>
<td><input type="tel" placeholder="958_____"minlength="9
" maxlength="9" ></td>
</tr>
</table>
</form>
<h3>Sección B: Información del viaje</h3><hr>
<form action="" method="">
<table>
<tr>
<td><label for="">Nombre de la Aerolínea:</label></td>
<td><select name="country" id="country">
<optgroup label="Aerolineas disponibles">
<option value="">Selecione una aerolinea</option>
<option value="">Aerolinea Sky Dreams</option>
<option value="">Aerolinea privada del peru</option>
<option value="">Aerolinea mife</option>
</optgroup>
</select>></td>
<td class="di">Gastos adicionales</td>
</tr>
<tr>
<td><label for="">Destino:</label></td>
<td><input type="text" required size="40"></td>
<td><label for="">Alquiler de coche:</label></td>
<td class="di" ><input type="number" min="100" max="600" ste
p="2" required size="10px "></td>
</tr>
<tr>
<td><label for="">Fecha de salida:</label></td>
<td><input type="date" value="2018-01-01" min="2018-01-01" m
ax="2400-01-01" required size="40"></td>
<td><label for="">Hotel:</label></td>
<td class="di"><input type="text" required size="10px" ></td
>
</tr>
<tr>
<td><label for="">Fecha de Regreso:</label></td>
<td><input type="date" value="2018-01-01" min="2018-01-01" m
ax="2400-01-01" required size="40"></td>
<td><label for="">Comidas:</label></td>
<td class="di"><input type="number" required size="5px" ></t
d>
</tr>
<tr>
<td><label for="">Coste Estimado:</label></td>
<td><input type="number" min="100" max="1000" required size=
"40px"></td>
<td><label for="">Total estimado:</label></td>
<td class="di"><input type="number"required size="10px" plac
eholder="0.00€ "></td>
</tr>
<tr>
<td><label for="">¿Incluye la vista al cliente?:</label></td
>
<td><input type="text" required size="2px"></td>
<td class="di"><label for="">Método de pago utilizado:</labe
l></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="di">Metálico</td>
<td><input type="radio" checked="checked"></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="di">Tarjeta de Crédito</td>
<td><input type="radio"></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="di">Cheque</td>
<td><input type="radio"></td>
</tr>
</table>
<form>
<table>
<tr>
<td><label for="">Propósito del viaje:</label></td>
<td><textarea cols="90px" rows="5px"></textarea></td>
</tr>
<tr><br>
<td id="saca"><button>Enviar</button></td>
</tr>
</table>
</form>
</form>
</body>
</html>

Diseno de Interfaces de Programacion-Actividad 1

Cargado por

Copyright:

Formatos disponibles

Diseno de Interfaces de Programacion-Actividad 1

Cargado por

Información del documento

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

Diseno de Interfaces de Programacion-Actividad 1

Cargado por

Copyright:

Formatos disponibles

DISEÑO DE INTERFACES DE PROGRAMACION

También podría gustarte