Este código es realmente sencillo y eta pensado para evitar el uso de tablas para sustituirlas con CSS y darle mejor desempeño a nuestro form

PLAIN TEXT
CSS:
  1. <style type="text/css" media="screen"> .formu {padding:0; width:300px;overflow:hidden;} .formu label {float:left; margin-right:10px; height:3em} .formu input, .formu select, .formu textarea {border:2px solid gray; width:99%;} .ancho1 {width:90px;} .ancho2 {width:190px;} .ancho3 {width:290px;} .formu button {float:left; margin-top:1.5em;}  body {     background-color: #CCCCCC; } .Estilo1 {font-family: "Trebuchet MS"} </style>

PLAIN TEXT
HTML:
  2. <h2 class="Estilo1">Ejemplo de Formulario basado en CSS</h2>
  3. <span class="Estilo1">Este es un ejemplo senecillo de como montar un Form basandonos en Css, ojala les sea util</span>
  4. <center> <form class="formu" action="#"> <label class="ancho1">
  5. Ejemplo:</label> <select name="tratamiento"> <option value="1">Ejemplo 1</option> <option value="2">Ejemplo 2</option> <option value="3">Ejemplo 3</option>   </select><input name="nombre" type="text" /> <label class="ancho3">Otro Tipo:
  6. <input name="nombre" type="text" /> </label><label class="ancho1">Lenguaje:</label> <select name="edad"> <option value="niño">CSS</option> <option value="joven">Php</option> <option value="maduro">AS 3</option> <option value="viejo">C#</option> </select>
  7. <button type="submit">Enviar</button>
  8. </form></center>

Ver el código en funcionamiento

Related Posts with Thumbnails