Descarga
Anuncio
CODIGO DE FORMULARIO CON CSS ELEMENTOS PRINCIPALES
<!DOCTYPE html>
<html>
<head>
<title>hola</title>
<style type="text/css">
body {
background: red;
}
#titulo{
font-family:Impact;
font-size:80px;
text-decoration:underline;
background-color:none;
color:black;
}
#caja1{
border-style:double;
border-color:white;
border-radius:45px 45px 45px 45px;
width:500px;
height:150px;
border-width:7px;
}
#leyenda{
font-family:Arial;
font-size:30px;
color:blue;
background-color:yellow;
}
#nombre{
font-family:"Comic Sans MS", cursive;
font-size:25px;
color:green;
background-color:white;
}
#direccion{
font-family:"Comic Sans MS", cursive;
font-size:25px;
color:green;
background-color:white;
}
#contraseña{
font-family:"Comic Sans MS", cursive;
font-size:25px;
color:green;
background-color:white;
}
#caja2{
border-style:dotted;
border-color:white;
border-radius:45px 45px 45px 45px;
width:500px;
height:150px;
border-width:7px;
}
#leyenda2{
font-family:"Times New Roman", Times, serif;
font-size:30px;
color:white;
background:magenta;
}
#boton1{
font-family:Impact;
font-size:50px;
background:orange;
border-radius:55px 55px 55px 55px;
}
#boton2{
font-family:Impact;
font-size:50px;
background:gold;
border-radius:55px 55px 55px 55px;
}
#nom{
background:skyblue;
opacity:1;
border-radius:25px 25px 25px 25px;
border-style:dashed;
border-width:2.5px;
width:200px;
height:30px;
}
#dir{
background:green;
opacity:1;
border-radius:25px 25px 25px 25px;
border-style:dashed;
border-width:2.5px;
width:200px;
height:30px;
}
#con{
background:brown;
opacity:1;
border-radius:25px 25px 25px 25px;
border-style:dashed;
border-width:2.5px;
width:200px;
height:30px;
}
</style>
</head>
<body>
<div id="titulo">
MI FORMULARIO
</div>
<form>
<fieldset id="caja1">
<table>
<legend id="leyenda">Datos Personales</legend>
<tr>
<td><label id="nombre">Nombre</label></td>
<td><input type="text" id="nom" value="" />
</tr>
<tr>
<td><label id="direccion">Direccion </label></td>
<td><input type="text" id="dir" value="" /></td>
</tr>
<tr>
<td><label id="contraseña">Contraseña</label></td>
<td><input type="password" id="con" value="" /></td>
</tr>
</table>
</fieldset>
<fieldset id="caja2">
<table>
<legend id="leyenda2">Botones y Listas</legend>
<tr>
<td><input type="submit" id="boton1" value="Enviar" /></td>
<td><input type="reset" id="boton2" value="Borrar" 7></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
CODIGO DE FORMULARIO CON CSS DE OTROS ELEMENTOS
Textarea, checkbox, lista multiple, combobox
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background:red;
}
#caja{
width:300px;
height:615px;
border:double 7px yellow;
border-radius:9px;
font-family:Comic Sans Ms;
font-size:13px;
color:blue;
background:lime;
}
#leyenda{
font-family:Impact;
font-size:31px;
color:white;
background:green;
}
#nombre{
font-family:Arial black;
font-size:20px;
color:magenta;
background:white;
}
#nom{
border-radius:0px 40px 0px 40px;
border:dotted 4px red;
background:blueviolet;
}
#direccion{
font-family:Corbel black;
font-size:20px;
color:magenta;
background:gold;
}
#dir{
border-radius:0px 40px 0px 40px;
border:inset 6px black;
background:magenta;
}
#corea{
font-family:Georgia;
font-size:25px;
color:blue;
background:yellow;
}
#India{
font-family:Times New Roman;
font-size:26px;
color:magenta;
background:black;
}
#comenta{
border-radius:5px;
border:ridge 1px gray;
background:brown;
font-family:Calibri;
font-size:28px;
color:white;
}
#comentario{
border-radius:7px;
border:dotted 8px black;
background:blue;
opacity:0.9;
}
#texto{
font-family:Arial black;
font-size:25px;
color:purple;
}
#multiple{
border-radius:6px;
border:dotted 10px blue;
background:yellow;
font-family:Comic Sans Ms;
font-size:15px;
color:black;
}
#combobox{
border-radius:6px;
border:dashed 5px magenta;
background:violet;
font-family:Comic Sans Ms;
font-size:15px;
color:white;
}
</style>
</head>
<body>
<meta charset="UTF-8" />
<form>
<fieldset id="caja">
<h1>CHECKBOX, TEXTAREA, COMBOBOX, LISTA MULTIPLE </h1>
<legend id="leyenda">DATOS</legend>
<table>
<tr>
<td><label id="nombre">Nombre</label></td>
<td><input type="text" id="nom" value="enviar" /></td>
</tr>
<tr>
<td><label id="direccion">Direccion</label>
<td><input type="text" id="dir" value="enviar" /></td>
</tr>
<tr>
<td><input type="checkbox" id="p1" value="" /></td>
<td><label id="corea">Corea del Sur</label></td>
</tr>
<tr>
<td><input type="checkbox" id="p2" value="" /></td>
<td><label id="India">India</label></td>
</tr>
<tr>
<td><label id="comenta">Comenta en la Caja </label></td>
<td><textarea rows="4" cols="60" id="comentario">Escribe tu
comentario acá</textarea></td>
</tr>
<tr>
<td id="texto">Lista Multiple</td>
<td><select name="docentes" size="4" id="multiple" multiple>
<option>Aquino</option>
<option>Zavala</option>
<option>Acosta</option>
<option>Lucero</option>
</select>
</td>
</tr>
<tr>
<td id="texto">Lista Combobox</td>
<td><select name="ciudades" id="combobox">
<option>-Escoge una ciudad-</option>
<option>Seul</option>
<option>New York </option>
<option>Buenos Aires</option>
<option>Madrid</option>
</select>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
CODIGOS DE TABLAS CON CSS (MUESTRA)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background:none;
}
#tablita{
background:green; opacity:0.9;
border:double 6px magenta;
}
#titulo{
font-family:Comic Sans Ms;
font-size:14px;
color:blueviolet;
}
#c1{
width:100px;
height:115px;
border-radius:0px 45px 0px 45px;
border:inset 7px black;
background:green;
font-family:Impact;
color:white;
font-size:25px;
}
#c2{
width:100px;
height:115px;
border-radius:0px 45px 0px 45px;
border:dotted 7px blue;
background:yellow;
font-family:Impact;
color:black;
font-size:25px;
}
#c3{
width:100px;
height:115px;
border-radius:0px 45px 0px 45px;
border:inset 7px black;
background:violet;
font-family:Comic Sans Ms;
color:white;
font-size:25px;
}
#c4{
width:100px;
height:115px;
border-radius:0px 45px 0px 45px;
border:dotted 7px blue;
background:red;
font-family:Impact;
color:white;
font-size:25px;
}
#c5{
width:100px;
height:115px;
border-radius:0px 45px 0px 45px;
border:inset 7px black;
background:green;
font-family:Times New Roman;
color:white;
font-size:25px;
}
#c6{
width:100px;
height:115px;
border-radius:0px 45px 0px 45px;
border:dotted 7px blue;
background:black;
font-family:Calibri;
color:lime;
font-size:25px;
}
#c7{
width:100px;
height:115px;
border-radius:0px 45px 0px 45px;
border:inset 7px black;
background:gray;
font-family:Arial black;
color:black;
font-size:25px;
}
#c8{
width:100px;
height:115px;
border-radius:0px 45px 0px 45px;
border:dotted 7px blue;
background:lime;
font-family:Impact;
color:black;
font-size:25px;
}
</style>
</head>
<body>
<div id="titulo">
<h1>EJEMPLO OFICIAL DE TABLAS CON CSS EN DREAMWEAVER
</h1></div>
</div>
<meta charset="UTF-8" />
<table border="5" id="tablita">
<tr>
<td id="c1">Nombre del Catedratico</td>
<td id="c2">Materia/Funciones</td>
</tr>
<tr>
<td id="c3">Victor Aquino</td>
<td id="c4">Informatica/Asesor de Finanzas</td>
</tr>
<tr>
<td id="c5">Luis Orozco</td>
<td id="c6">Animador de Informática/Supervisor de Practicas</td>
</tr>
<tr>
<td id="c7">Alejandro Chavez</td>
<td id="c8">Contabilidad/Sub-Asesor Relaciones Públicas</td>
</tr>
</table>
</body>
</html>
