Tema: Me ayudan hacer un formulario!!
Ver Mensaje Individual
  #14 (permalink)  
Antiguo 28/04/2011, 14:28
nedyer
 
Fecha de Ingreso: enero-2011
Mensajes: 94
Antigüedad: 14 años, 1 mes
Puntos: 7
Respuesta: Me ayudan hacer un formulario!!
aqui esta lo que quieres igual al de la imagen



el codigo

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>formulario</title>
  6. <style type="text/css">
  7. .Contenedor {
  8.     padding: 0px;
  9.     height: 500px;
  10.     width: 700px;
  11.     margin-top: 0px;
  12.     margin-right: auto;
  13.     margin-bottom: 0px;
  14.     margin-left: auto;
  15.     background-color: #FBFBFB;
  16. }
  17. .Bloque_1 {
  18.     padding: 0px;
  19.     height: 50px;
  20.     width: 700px;
  21.     margin-top: 0px;
  22.     margin-right: auto;
  23.     margin-bottom: 0px;
  24.     margin-left: auto;
  25.     
  26. }
  27. .Franja {
  28.     padding: 0px;
  29.     height: 50px;
  30.     width: 698px;
  31.     background-color: #F4F4F4;
  32.     border-top-right-radius: 10px;
  33.     -moz-border-top-right-radius: 10px;
  34.     -o-border-top-right-radius: 10px;
  35.     -webkit-border-top-right-radius: 10px;
  36.     border-top-left-radius: 10px;
  37.     -moz-border-top-left-radius: 10px;
  38.     -o-border-top-left-radius: 10px;
  39.     -webkit-border-top-left-radius: 10px;
  40.     border: 1px solid #CCC;
  41. }
  42. .Titulo {
  43.     float: left;
  44.     height: 30px;
  45.     width: 300px;
  46.     padding-top: 20px;
  47.     font-family: Verdana, Geneva, sans-serif;
  48.     font-size: 14px;
  49.     text-transform: capitalize;
  50.     color: #FC3;
  51.     font-weight: bold;
  52.     text-align: center;
  53. }
  54. .Bloque_2 {
  55.     padding: 0px;
  56.     height: 448px;
  57.     width: 698px;
  58.     margin-top: 0px;
  59.     margin-right: auto;
  60.     margin-bottom: 0px;
  61.     margin-left: auto;
  62.     border-right-width: 1px;
  63.     border-bottom-width: 1px;
  64.     border-left-width: 1px;
  65.     border-right-style: solid;
  66.     border-bottom-style: solid;
  67.     border-left-style: solid;
  68.     border-right-color: #CCC;
  69.     border-bottom-color: #CCC;
  70.     border-left-color: #CCC;
  71. }
  72. .Contenedor_Formulario {
  73.     padding: 0px;
  74.     height: 400px;
  75.     width: 500px;
  76.     margin-top: 0px;
  77.     margin-right: auto;
  78.     margin-bottom: 0px;
  79.     margin-left: auto;
  80. }
  81. .Campos {
  82.     padding: 0px;
  83.     float: left;
  84.     height: 30px;
  85.     width: 500px;
  86.     font-family: Verdana, Geneva, sans-serif;
  87.     font-size: 14px;
  88.     text-transform: capitalize;
  89.     font-weight: bold;
  90. }
  91. #Obligatorio {
  92.     margin-top: 39px;
  93.     margin-bottom: 10px;
  94.     font-family: Verdana, Geneva, sans-serif;
  95.     text-transform: capitalize;
  96.     text-align: left;
  97.     font-weight: bold;
  98. }
  99. .Etiquetas {
  100.     float: left;
  101.     height: 20px;
  102.     width: 150px;
  103.     text-align: justify;
  104.     padding-top: 10px;
  105.     padding-right: 0px;
  106.     padding-bottom: 0px;
  107.     padding-left: 0px;
  108. }
  109. .Campos_De_Textos {
  110.     float: left;
  111.     height: 25px;
  112.     width: 350px;
  113.     padding-top: 5px;
  114.     padding-right: 0px;
  115.     padding-bottom: 0px;
  116.     padding-left: 0px;
  117. }
  118. .Box {
  119.     float: left;
  120.     height: 20px;
  121.     width: 110px;
  122.     font-family: Verdana, Geneva, sans-serif;
  123.     font-size: 12px;
  124.     text-transform: capitalize;
  125.     padding: 0px;
  126.     margin-top: 5px;
  127. }
  128. #Boton_Enviar {
  129.     margin-top: 10px;
  130. }
  131. #Enviar {
  132.     background-color: #CCC;
  133.     width: 70px;
  134. }
  135. .Box_Text {
  136.     background-color: #CCC;
  137.     border-top-width: 0px;
  138.     border-right-width: 0px;
  139.     border-bottom-width: 0px;
  140.     border-left-width: 0px;
  141. }
  142. .check {
  143.     background-color: #CCC;
  144.     border: 1px solid #CCC;
  145. }
  146. </style>
  147. </head>
  148.  
  149. <body>
  150. <div class="Contenedor" id="Contenedor">
  151.   <div class="Bloque_1" id="Bloque_1">
  152.     <div class="Franja" id="Franja">
  153.       <div class="Titulo" id="Titulo">formulario de inscripcion</div>
  154.     </div>
  155.   </div>
  156.   <div class="Bloque_2" id="Bloque_2">
  157.     <div class="Contenedor_Formulario" id="Contenedor_Formulario">
  158.       <form id="form1" name="form1" method="post" action="">
  159.       <div class="Campos" id="Obligatorio">
  160.         <div class="Campos_De_Textos">todos los campos son obligatorios</div>
  161.       </div>
  162.         <div class="Campos">
  163.         <div class="Etiquetas">
  164.           <label for="nombre">nombre:</label>
  165.           
  166.         </div>
  167.         <div class="Campos_De_Textos"><input class="Box_Text" name="nombre" type="text" id="nombre" size="45" /></div>
  168.       </div>
  169.       <div class="Campos">
  170.         <div class="Etiquetas">
  171.           <label for="apellido">apellido:</label>
  172.           
  173.         </div>
  174.         <div class="Campos_De_Textos"><input class="Box_Text" name="apellido" type="text" id="apellido" size="45" /></div>
  175.       </div>
  176.       <div class="Campos">
  177.         <div class="Etiquetas">
  178.           <label for="institucion">institucion:</label>
  179.           
  180.         </div>
  181.         <div class="Campos_De_Textos"><input class="Box_Text" name="institucion" type="text" id="institucion" size="45" /></div>
  182.       </div>
  183.       <div class="Campos">
  184.         <div class="Etiquetas">
  185.           <label for="profesor">profesor:</label>
  186.           
  187.         </div>
  188.         <div class="Campos_De_Textos"><input class="Box_Text" name="profesor" type="text" id="profesor" size="45" /></div>
  189.       </div>
  190.       <div class="Campos">
  191.         <div class="Etiquetas">
  192.           <label for="investigador">investigador:</label>
  193.           
  194.         </div>
  195.         <div class="Campos_De_Textos"><input class="Box_Text" name="investigador" type="text" id="investigador" size="45" /></div>
  196.       </div>
  197.       <div class="Campos">
  198.         <div class="Etiquetas">alumno de:</div>
  199.         <div class="Campos_De_Textos">
  200.           <div class="Box">
  201.             <input class="check" type="checkbox" name="maestria" id="maestria" />
  202.             <label for="maestria">maestria</label>
  203.           </div>
  204.           <div class="Box">
  205.             <input class="check" type="checkbox" name="doctorado" id="doctorado" />
  206.             <label for="doctorado">doctorado</label>
  207.           </div>
  208.           <div class="Box">
  209.             <input class="check" type="checkbox" name="pregrado" id="pregrado" />
  210.             <label for="pregrado">pregrado</label>
  211.           </div>
  212.         </div>
  213.       </div>
  214.       <div class="Campos">
  215.         <div class="Etiquetas">
  216.           <label for="email">email:</label>
  217.           
  218.         </div>
  219.         <div class="Campos_De_Textos"><input class="Box_Text" name="email" type="text" id="email" size="45" />
  220.         </div>
  221.       </div>
  222.       <div class="Campos" id="Boton_Enviar">
  223.         <div class="Etiquetas"></div>
  224.         <div class="Campos_De_Textos">
  225.           <input type="submit" name="Enviar" id="Enviar" value="Enviar" />
  226.         </div>
  227.       </div>
  228.       
  229.       </form>
  230.   </div>
  231.   </div>
  232. </div>
  233. </body>
  234. </html>