Una de las partes más importante de una página web, son los formulario de contacto, que nos permite obtener datos de las personas que
visitan la página para usos diversos.
En esta entrada muestro un ejemplo de
formulario en HTML y CSS, y está realizado en una tabla.
Espero que les guste.
El formulario tiene que quedar de la
siguiente forma.
Código HTML.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Formulario Datos Personales</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div>
<h1>DATOS PERSONALES</h1>
<table>
<form action="mailto:pepe@pepe.es" method="post" enctype="text/plain" name="datospersonales">
<tr>
<td>
<label for="apellidos">Apellidos:</label>
<input type="text" name="apellidos" id="apellidos">
</td>
<td>
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre">
</td>
<td>
<label for="dni">DNI:</label>
<input type="text" name="dni" id="dni" maxlength="10">
</td>
</tr>
<tr>
<td>
<label for="nacido">Nacido en:</label>
<input type="text" name="nacido" id="nacido">
</td>
<td>
<label for="provnacimiento">Provincia:</label>
<select id="provnacimiento" name="provnacimiento">
<option value="alava">Álava</option>
<option value="albacete">Albacete</option>
<option value="alicante">Alicante</option>
<option value="almeria">Almería</option>
<option value="asturias">Asturias</option>
<option value="avila">Ávila</option>
<option value="badajoz">Badajoz</option>
<option value="barcelona">Barcelona</option>
<option value="burgos">Burgos</option>
<option value="caceres">Cáceres</option>
<option value="cadiz">Cádiz</option>
<option value="cantabria">Cantabria</option>
<option value="castellon">Castellón</option>
<option value="ciudadreal">Ciudad Real</option>
<option value="cordoba">Córdoba</option>
<option value="cuenca">Cuenca</option>
<option value="gerona">Gerona</option>
<option value="granada">Granada</option>
<option value="guadalajara">Guadalajara</option>
<option value="guipuzcoa">Guipúzcoa</option>
<option value="huelva">Huelva</option>
<option value="huesca">Huesca</option>
<option value="islasbareales">Islas Bareales</option>
<option value="jaen">Jaén</option>
<option value="lacoruna">La Coruña</option>
<option value="larioja">La Rioja</option>
<option value="laspalmas">Las Palmas</option>
<option value="leon">León</option>
<option value="lerida">Lérida</option>
<option value="lugo">Lugo</option>
<option value="madrid">Madrid</option>
<option value="malaga">Málaga</option>
<option value="murcia">Murcia</option>
<option value="navarra">Navarra</option>
<option value="orense">Orense</option>
<option value="palencia">Palencia</option>
<option value="pontevedra">Pontevedra</option>
<option value="salamanca">Salamanca</option>
<option value="segovia">Segovia</option>
<option value="sevilla">Sevilla</option>
<option value="soria">Soria</option>
<option value="tarragona">Tarragona</option>
<option value="tenerife">Tenerife</option>
<option value="teruel">Teruel</option>
<option value="toledo">Toledo</option>
<option value="valencia">Valencia</option>
<option value="valladolid">Valladolid</option>
<option value="vizcaya">Vizcaya</option>
<option value="zamora">Zamora</option>
<option value="zaragoza">Zaragoza</option>
</select>
</td>
<td>
<label for="nacimiento">Fecha de nacimiento (dd/mm/aaaa):</label>
<input type="text" name="nacimiento" id="nacimiento" maxlength="10">
</td>
</tr>
<tr>
<td colspan="2">
<label for="domicilio">Domicilio:</label>
<select id="domicilio" name="domicilio">
<option value="avenida">Avenida</option>
<option value="calle">Calle</option>
<option value="camino">Camino</option>
<option value="plaza">Plaza</option>
</select>
<input type="text" name="domicilio1" id="domicilio1">
</td>
<td>
<label for="cp">Codigo Postal:</label>
<input type="text" name="cp" id="cp" maxlength="5">
</td>
</tr>
<tr>
<td>
<label for="localidad">Localidad:</label>
<input type="text" name="localidad" id="localidad">
</td>
<td>
<label for="provdomicilio">Provincia:</label>
<select id="provdomicilio" name="provdomicilio">
<option value="alava">Álava</option>
<option value="albacete">Albacete</option>
<option value="alicante">Alicante</option>
<option value="almeria">Almería</option>
<option value="asturias">Asturias</option>
<option value="avila">Ávila</option>
<option value="badajoz">Badajoz</option>
<option value="barcelona">Barcelona</option>
<option value="burgos">Burgos</option>
<option value="caceres">Cáceres</option>
<option value="cadiz">Cádiz</option>
<option value="cantabria">Cantabria</option>
<option value="castellon">Castellón</option>
<option value="ciudadreal">Ciudad Real</option>
<option value="cordoba">Córdoba</option>
<option value="cuenca">Cuenca</option>
<option value="gerona">Gerona</option>
<option value="granada">Granada</option>
<option value="guadalajara">Guadalajara</option>
<option value="guipuzcoa">Guipúzcoa</option>
<option value="huelva">Huelva</option>
<option value="huesca">Huesca</option>
<option value="islasbareales">Islas Bareales</option>
<option value="jaen">Jaén</option>
<option value="lacoruna">La Coruña</option>
<option value="larioja">La Rioja</option>
<option value="laspalmas">Las Palmas</option>
<option value="leon">León</option>
<option value="lerida">Lérida</option>
<option value="lugo">Lugo</option>
<option value="madrid">Madrid</option>
<option value="malaga">Málaga</option>
<option value="murcia">Murcia</option>
<option value="navarra">Navarra</option>
<option value="orense">Orense</option>
<option value="palencia">Palencia</option>
<option value="pontevedra">Pontevedra</option>
<option value="salamanca">Salamanca</option>
<option value="segovia">Segovia</option>
<option value="sevilla">Sevilla</option>
<option value="soria">Soria</option>
<option value="tarragona">Tarragona</option>
<option value="tenerife">Tenerife</option>
<option value="teruel">Teruel</option>
<option value="toledo">Toledo</option>
<option value="valencia">Valencia</option>
<option value="valladolid">Valladolid</option>
<option value="vizcaya">Vizcaya</option>
<option value="zamora">Zamora</option>
<option value="zaragoza">Zaragoza</option>
</select>
</td>
<td>
<label for="telf">Teléfono:</label>
<input type="text" name="telf" id="telf" maxlength="13">
</td>
</tr>
<tr>
<td colspan="3">
<input type="submit" name="enviar" id="enviar" value="Enviar">
<input type="reset" name="borrar" id="borrar" value="Borrar todo">
</td>
</tr>
</form>
</table>
</div>
</body>
</html>
Código CSS.
@charset "utf-8";
/* CSS Document */
label { display: block;}
table { background-color: #E7E7E7;
border: 1px solid #92938D;
width: 700px;}
input { border: 2px solid #8CA8C0;}
select { border: 2px solid #8CA8C0;}
div { margin:auto;
width: 710px;
padding-left: 10px;
padding-bottom: 10px;
background-color: #F6F6F6;}
input[name="apellidos"] { width: 300px;}
input[name="dni"] { width: 90px;}
input[name="nombre"] { width: 110px;}
input[name="nacimiento"] { width: 90px;}
input[name="domicilio1"] { width: 365px;}
input[name="cp"] { width: 55px;}
input[name="telf"] { width: 95px;}
input[name="enviar"] { float:right;}
input[name="borrar"] { float:right;
margin-right: 5px;}
h1 { background-color: #E2E2E4;
margin-left: -10px;
padding-left: 10px;}
No hay comentarios:
Publicar un comentario