Ejemplo de Formularios en HTML
EJEMPLO-04 - Hojas de Estilo Mejorado
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8″ />
<title>Formulario de contacto | John W. Martinez</title>
<STYLE TYPE="text/css">
<!--
Reglas de estilo aquí...
...
...
-->
*{
font-family: sans-serif;
font-size: 12px;
color: #798e94;
}
body{
width: 400px;
margin: auto;
background-color: #E2ECEE;
}
.contacto{
border: 1px solid #CED5D7;
border-radius: 6px;
padding: 45px 45px 20px;
margin-top: 50px;
background-color: white;
box-shadow: 0px 5px 10px #B5C1C5, 0 0 0 10px #EEF5F7 inset;
}
.contacto label{
display: block;
font-weight: bold;
}
.contacto div{
margin-bottom: 15px;
}
.contacto input[type='text'], .contacto textarea{
padding: 7px 6px;
width: 294px;
border: 1px solid #CED5D7;
resize: none;
box-shadow:0 0 0 3px #EEF5F7;
margin: 5px 0;
}
.contacto input[type='text']:focus, .contacto textarea:focus{
outline: none;
box-shadow:0 0 0 3px #dde9ec;
}
.contacto input[type='submit']{
border: 1px solid #CED5D7;
box-shadow:0 0 0 3px #EEF5F7;
padding: 8px 16px;
border-radius: 20px;
font-weight: bold;
text-shadow: 1px 1px 0px white;
background: #e4f1f6;
background: -moz-linear-gradient(top, #e4f1f6 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #e4f1f6 0%,#cfe6ef 100%);
}
.contacto input[type='submit']:hover{
background: #edfcff;
background: -moz-linear-gradient(top, #edfcff 0%, #cfe6ef 100%);
background: -webkit-linear-gradient(top, #edfcff 0%,#cfe6ef 100%);
}
.contacto input[type='submit']:active{
background: #cfe6ef;
background: -moz-linear-gradient(top, #cfe6ef 0%, #edfcff 100%);
background: -webkit-linear-gradient(top, #cfe6ef 0%,#edfcff 100%);
}
</STYLE>
</head>
<body>
<H1 style="text-align:center">Recoger Sugerencias</H1>
<form class='contacto'>
<div><label>Tu Nombre:</label><input type='text' value=''></div>
<div><label>Tu Email:</label><input type='text' value=''></div>
<div><label>Asunto:</label><input type='text' value=''></div>
<div><label>Mensaje:</label><textarea rows='6'></textarea></div>
<div><input type='submit' value='Envia Mensaje'></div>
</form>
</body>
</html>
</body>
</html>
EJEMPLO-03 - Hojas de Estilo
<!DOCTYPE html>
<!-- El encabezado !DOCTYPE html especifica que se trata de un documento HTML5 -->
<html>
<head>
<link type="text/css" rel="stylesheet" href="estilo.css">
<!-- La linea de arriba es para importar estilos CSS a nuestro formulario -->
<title>Formulario de contacto</title>
<STYLE TYPE="text/css">
<!--
Reglas de estilo aquí...
...
...
-->
label {
display:block;
margin-top:20px;
letter-spacing:1px;
}
.formulario {
display:block;
margin:0 auto;
width:510px;
color: #666666;
font-family:Arial;
}
form {
margin:0 auto;
width:400px;
}
input, textarea {
width:380px;
height:27px;
background:#666666;
border:2px solid #f6f6f6;
padding:10px;
margin-top:5px;
font-size:10px;
color:#ffffff;
}
textarea {
height:150px;
}
#submit {
width:85px;
height:35px;
border:none;
margin-top:20px;
cursor:pointer;
}
</STYLE>
</head>
<body>
<section class="formulario">
<!-- Aqui va el codigo del formulario -->
<H1 style="text-align:center;">FORMULARIO CON HOJA DE ESTILO</H1>
<form action="contacto.php" method="post">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" name="nombre" placeholder="Nombre y Apellido" required="" />
<label for="email">Email:</label>
<input id="email" type="email" name="email" placeholder="ejemplo@correo.com" required="" />
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" placeholder="Mensaje" required=""></textarea>
<input id="submit" type="submit" name="submit" value="Enviar" />
</form>
</section>
</body>
</html>
EJEMPLO-02
<FORM method=post action="cgi-bin/script.pl"> Registro de un usuario <TABLE BORDER=0> <TR> <TD>Apellido</TD> <TD> <INPUT type=text name="apellido"> </TD> </TR> <TR> <TD>Nombre</TD> <TD> <INPUT type=text name="nombre"> </TD> </TR> <TR> <TD>Género</TD> <TD> Hombre: Mujer: <INPUT type=radio name="género" value="M"> <br>Mujer: <INPUT type=radio name="género" value="F"> </TD> </TR> <TR> <TD>Ocupación</TD> <TD> <SELECT name="ocupación"> <OPTION VALUE="profesor">Profesor</OPTION> <OPTION VALUE="estudiante">Estudiante</OPTION> <OPTION VALUE="ingeniero">Ingeniero</OPTION> <OPTION VALUE="jubilado">Jubilado</OPTION> <OPTION VALUE="otro">Otro</OPTION> </SELECT> </TD> </TR> <TR> <TD>Comentarios</TD> <TD> <TEXTAREA rows="3" name="comentarios"> Escriba aquí sus comentarios</TEXTAREA> Enviar </TD> </TR> <TR> <TD COLSPAN=2> <INPUT type="submit" value="Enviar"> </TD> </TR> </TABLE> </FORM>
EJEMPLO-01
<h1>ENCUESTA DE OPINION SOBRE PORTAL WEB</H1>
<form action="mailto:emaildelaempresaquehaceelformulario@email.com" method="post" enctype="text/plain">
Nombre: <input type="text" name="nombre" size="25" maxlength="50"><br><br>
Apellidos: <input type="text" name="apellidos" size="35" maxlength="100">
<br><br>
Correo electrónico: <input type="text" value="@" name="correo" size="40" maxlength="100">
<br><br>
Población: <input type="text" name="poblacion" size="15" maxlength="50">
<br><br>
Provincia: <input type="text" name="provincia" size="15" maxlength="50">
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td>Edad:
<br>
<input type="radio" name="edad" value="020"> 0-20
<br>
<input type="radio" name="edad" value="2040" checked> 20-40
<br>
<input type="radio" name="edad" value="4060"> 40-60
<br>
<input type="radio" name="edad" value="60100"> 60-100</td>
<td>¿Cómo nos conociste?<br>
<input type="checkbox" name="conocer">
A través de un amigo.<br>
<input type="checkbox" name="conocer">
A través de un buscador.<br>
<input type="checkbox" name="conocer">
Navegando por la red.<br>
<input type="checkbox" name="conocer">
Otros</td>
</tr>
</table>
Opinión sobre nuestra página web<br>
<textarea cols="40" rows="5" name="opinion">Escriba aquí su opinión...</textarea>
<br><br>
Tiene alguna sugerencia...
<br>
<textarea cols="40" rows="5" name="sugerencias">Escriba aquí sus sugerencias...</textarea>
<br><br>
¿Cúanto navegas por intenet? (Señala la opción que
más se acerque)<br>
<select name="frecuencia" size="2">
<option value="1">2 horas al día.
<option value="2">4 horas al día.
<option value="3">10 horas a la semana.
<option value="4">20 horas al mes.
</select>
<br>
<br>
<table width="50%" border="0" align="center" cellpadding="10" cellspacing="0">
<tr>
<td><div align="center">
<input type="submit" value="Enviar formulario">
</div></td>
<td><div align="center">
<input type="Reset" value="Borrar formulario">
</div></td>
</tr>
</table>
</form>
No hay comentarios:
Publicar un comentario