Foros del Web » Creando para Internet » CSS »

Formularios con CSS

Estas en el tema de Formularios con CSS en el foro de CSS en Foros del Web. Hola chicos, soy nueva en la programacion, PHP y CSS, tengo algo de conocimiento, pero cuesta, lo primero que quisiera hacer es un formulario con ...
  #1 (permalink)  
Antiguo 17/04/2015, 13:49
 
Fecha de Ingreso: abril-2015
Ubicación: Mendoza
Mensajes: 4
Antigüedad: 4 años, 4 meses
Puntos: 2
Pregunta Formularios con CSS

Hola chicos, soy nueva en la programacion, PHP y CSS, tengo algo de conocimiento, pero cuesta, lo primero que quisiera hacer es un formulario con html, css,

Prolijo vertical y horizontal, se que se usan li, ul, div, ect.. yo uso un div para los label otro para los input,, y he visto que esta mal y lleva mucho trabajo alinear todo.. en fin

Si alguien me explica el tema de los formularios se lo agradeceria mucho.. dejo una pequeña imagen a mano..

saludos a todos

  #2 (permalink)  
Antiguo 17/04/2015, 14:16
Avatar de lauser
Moderator Unix/Linux
 
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.254
Antigüedad: 6 años, 1 mes
Puntos: 393
Respuesta: Formularios con CSS

Curioso diagrama....ajja
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-
  #3 (permalink)  
Antiguo 17/04/2015, 14:24
 
Fecha de Ingreso: abril-2015
Ubicación: Mendoza
Mensajes: 4
Antigüedad: 4 años, 4 meses
Puntos: 2
Pregunta Respuesta: Formularios con CSS

Holi, si medio flojo, lo que pasa es que estoy enojada ya que hay muchas maneras de hacerlo y quiero la más sencilla y eficaz,, he buscado en google y me cansa de ver códigos distintos con iguales resultados, sé que ustedes tiene más experiencia, por eso les pido ayuda
Gracias
Saludos
Mika…
Estaba apurada cuando hice el bosquejo. Jajaja
  #4 (permalink)  
Antiguo 17/04/2015, 15:23
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 4 años, 9 meses
Puntos: 91
Respuesta: Formularios con CSS

pues exactamente nose como decirlo pero para mas facil te recomiendo que uses uno de los de Bootstrap, "mejores" y bonito diseño *o*



Codigo:
Código HTML:
Ver original
  1. <form class="form-horizontal">
  2.   <div class="form-group">
  3.     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
  4.     <div class="col-sm-10">
  5.       <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
  6.     </div>
  7.   </div>
  8.   <div class="form-group">
  9.     <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
  10.     <div class="col-sm-10">
  11.       <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
  12.     </div>
  13.   </div>
  14.   <div class="form-group">
  15.     <div class="col-sm-offset-2 col-sm-10">
  16.       <div class="checkbox">
  17.         <label>
  18.           <input type="checkbox"> Remember me
  19.         </label>
  20.       </div>
  21.     </div>
  22.   </div>
  23.   <div class="form-group">
  24.     <div class="col-sm-offset-2 col-sm-10">
  25.       <button type="submit" class="btn btn-default">Sign in</button>
  26.     </div>
  27.   </div>
  28. </form>

aqui puedes ver todos los forms y demas...
http://getbootstrap.com/css/?#forms
  #5 (permalink)  
Antiguo 17/04/2015, 15:40
Avatar de lauser
Moderator Unix/Linux
 
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.254
Antigüedad: 6 años, 1 mes
Puntos: 393
Respuesta: Formularios con CSS

Angel y si no usa las librerías de Bootstrap?
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-
  #6 (permalink)  
Antiguo 17/04/2015, 17:19
Avatar de gerrycrush  
Fecha de Ingreso: abril-2015
Ubicación: Mexico
Mensajes: 9
Antigüedad: 4 años, 4 meses
Puntos: 0
Respuesta: Formularios con CSS

si apenas empiezas y requieres entregar eso con esas especificaciones te recomiendo Adobe muse puedes hacer eso en 2 minutos
https://helpx.adobe.com/es/muse/using/form-widgets.html
  #7 (permalink)  
Antiguo 17/04/2015, 18:29
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 4 años, 9 meses
Puntos: 91
Respuesta: Formularios con CSS

@lauser pues si no las usa que haga ella misma su Form, pero si no que agregue las Librerias no es tan Dificil ni le afectaria en nada >_<

de todos modos aqui dejo el Codigo Sencillo de un Form >_<

Código HTML:
Ver original
  1. <form id="MyFormAK">
  2.   Nombre: <input type="text" name="nombre" placeholder="Escribe tu Nombre"><br>
  3.   Apellido: <input type="text" name="apellido" placeholder="Escribe tu Apellido"><br>
  4. </form>

Código CSS:
Ver original
  1. #MyFormAK {
  2.   max-width: 100%;
  3.   height: 100px;
  4.   border: 1px solid;
  5.   border-color: #e5e6e9 #dfe0e4 #d0d1d5;
  6.   border-radius: 3px;
  7.   padding: 10px;
  8. }
  9. input {
  10.   padding: 13px 5px;
  11. }

demo:
http://codepen.io/AngelKrak/pen/gpYgqL
  #8 (permalink)  
Antiguo 17/04/2015, 18:33
 
Fecha de Ingreso: abril-2015
Mensajes: 27
Antigüedad: 4 años, 4 meses
Puntos: 1
Respuesta: Formularios con CSS

con una tabla, pega el codigo en un <div id="tabla"></div> o de lleno en el body pero si quieres poder modificarlo con CSS en div, luego buscas id los pones en tu hoja de CSS

eso es todo
Código PHP:
esta es tu hoja css


#form1{

}


#form2 {

}


#form3 {

}

#nombre {

}


#apellido {

}


#id del div si asi lo haces {


Código PHP:
esta es la tabla


<table width="492" height="269" border="1">
  <
tr>
    <
td height="42" colspan="2">&nbsp;</td>
  </
tr>
  <
tr>
    <
td width="140" height="37">Nombre:</td>
    <
td width="336"><f[COLOR="red"]orm id="form2"[/COLORname="form2" method="post" action="">
      <
label for="nombre"></label>
      <
div align="right">
        <
input type="text" name="nombre" [COLOR="red"]id="nombre"[/COLORsize="50"/>
      </
div>
    </
form></td>
  </
tr>
  <
tr>
    <
td height="33">Apellido:</td>
    <
td><form [COLOR="Red"]id="form1"[/COLORname="form1" method="post" action="">
      <
label for="apellido"></label>
      <
div align="right">
        <
input type="text" name="apellido"[COLOR="red"id="apellido"[/COLORsize="50" />
      </
div>
    </
form></td>
  </
tr>
  <
tr>
    <
td height="23" colspan="2"><form [COLOR="red"]id="form3"[/COLORname="form3" method="post" action="">
      <
div align="right">
        <
input type="submit" name="submit"[COLOR="red"id="submit"[/COLORvalue="aqui va el nombre de el submit" />
      </
div>
    </
form></td>
  </
tr>
  <
tr>
    <
td height="115" colspan="2">&nbsp;</td>
  </
tr>
</
table
  #9 (permalink)  
Antiguo 17/04/2015, 20:56
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 444
Antigüedad: 4 años, 8 meses
Puntos: 207
Respuesta: Formularios con CSS

Te dejo un formulario que hice aproximadamente un año cuando recién empezaba a investigar sobre HTML y CSS..

Código HTML:
Ver original
  1. <fieldset id="contacto">
  2.   <form action="form.php" method="post">
  3.     <label for="nombre">Nombre</label>
  4.     <input type="text" class="texto" name="nombre" required>
  5.  
  6.  
  7.     <label for="apellido">Apellido</label>
  8.     <input type="text" class="texto" name="apellido"required>
  9.  
  10.     <label for="email">Email</label>
  11.     <input type="email" class="texto" name="email" required placeholder="[email protected]">
  12.  
  13.     <label for="pais">Pa&iacute;s</label>
  14.     <select id="selector">
  15.       <option name="pais" value="Arg" selected>Argentina</option>
  16.       <option name="pais" value="Vza">Venezuela</option>
  17.       <option name="pais" value="Bra">Brasil</option>
  18.       <option name="pais" value="Chi">Chile</option>
  19.       <option name="pais" value="Uru">Uruguay</option>
  20.     </select>
  21.  
  22.     <label for="mensaje">Mensaje</label>
  23.     <textarea id="mensaje" name="mensaje" required placeholder=" Escriba aqui su mensaje..."></textarea>
  24.  
  25.     <input type="submit" class="submit" name="enviar" value="Enviar">
  26.   </form>

Código CSS:
Ver original
  1. #contacto{
  2.     width:300px;
  3.     min-height:550px;
  4.     border:0;
  5.     border-radius:10px;
  6.     background: linear-gradient(#262626, #161616);
  7.     padding: 20px;
  8.     text-align:center;
  9.     }
  10.    
  11. #contacto label{
  12.     display:block;
  13.     color:#fff;
  14.     font-family:Calibri;
  15.     font-size:1.5em;
  16.     padding:15px 0 5px 5px;
  17.     text-align:left;
  18.     }
  19.    
  20. #contacto input.texto{
  21.     width:280px;
  22.     height:30px;
  23.     border: 1px solid #d5d5d5;
  24.     border-radius: 5px;
  25.     background: linear-gradient(#FFF,#f5f5f5);
  26.     color:#161616;
  27.     font-family:Trebuchet MS;
  28.     font-size:0.8em;
  29.     padding:0 5px 0 5px;
  30.     }
  31.  
  32. #contacto #selector{
  33.     width:291px;
  34.     height:33px;
  35.     border: 1px solid #d5d5d5;
  36.     border-radius: 5px;
  37.     background: linear-gradient(#FFF,#f5f5f5);
  38.     color:#161616;
  39.     font-family:Trebuchet MS;
  40.     font-size:0.8em;
  41.     padding:0 5px;
  42.     }
  43.    
  44. #contacto #mensaje{
  45.     width:280px;
  46.     height:115px;
  47.     border: 1px solid #d5d5d5;
  48.     border-radius: 5px;
  49.     background: linear-gradient(#FFF,#f5f5f5);
  50.     color:#161616;
  51.     font-family:Trebuchet MS;
  52.     font-size:0.8em;
  53.     padding:5px;
  54.     }
  55.    
  56. #contacto .submit{
  57.     width:100px;
  58.     height:30px;
  59.     border: 1px solid #d5d5d5;
  60.     border-radius: 5px;
  61.     color:#616161;
  62.     font-family:Calibri;
  63.     font-size:1.1em;
  64.     margin-top:15px;
  65.     margin-right:5px;
  66.     float:right;
  67.   cursor:pointer;
  68.     }
  69.  
  70. #contacto .submit:hover{
  71.   background:linear-gradient(#2989D8,#1E5799);
  72.   color:#fff;
  73. }

http://codepen.io/anon/pen/pJzejO

Saludos
  #10 (permalink)  
Antiguo 18/04/2015, 03:39
Avatar de lauser
Moderator Unix/Linux
 
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.254
Antigüedad: 6 años, 1 mes
Puntos: 393
Respuesta: Formularios con CSS

El compañero @Caricatos, tiene un manual excelente sobre el tema. Aquí.
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-
  #11 (permalink)  
Antiguo 18/04/2015, 11:12
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 14 años, 2 meses
Puntos: 17
Respuesta: Formularios con CSS

A mi modo, tu ejemplo: [
Código CSS:
Ver original
  1. * {
  2.             font-family: helvetica, sans-serif;
  3.         }
  4.         fieldset {
  5.             border: #CCC 1px solid;
  6.             border-radius: 0.5em;
  7.             width: 20em;
  8.             position: relative;
  9.  
  10.         }
  11.         legend {
  12.             font-weight: bold;
  13.             color: #CCC;
  14.         }
  15.         label {
  16.             float: left;
  17.             width: 5em;
  18.             margin-right: 1em;
  19.             text-align: right;
  20.         }
  21.         input[type="text"]{
  22.             width: 15em;
  23.             padding: 0.5em;
  24.         }
Código HTML:
Ver original
  1.         <fieldset>
  2.             <legend>formulario</legend>
  3.             <p>
  4.                 <label for="nombre">Nombre</label>
  5.                 <input type="text" name="nombre" placeholder="Nombre" required />
  6.             </p>
  7.             <p>
  8.                 <label for="apellido">Apellido</label>
  9.                 <input type="text" name="apellido" placeholder="Apellido" required/>
  10.             </p>
  11.             <p>
  12.                 ...
  13.             </p>
  14.         </fieldset>
  15.     </form>
Por favor no uses tablas
__________________
Al final del día hablar es gratis, codificar no lo es

Última edición por baccxus; 18/04/2015 a las 14:12
  #12 (permalink)  
Antiguo 19/04/2015, 12:02
 
Fecha de Ingreso: abril-2015
Ubicación: Mendoza
Mensajes: 4
Antigüedad: 4 años, 4 meses
Puntos: 2
Respuesta: Formularios con CSS

Hola! muchísimas gracias por responder, estuve viendo el programa de Adobe, esta re lindo, pero genera mucho código.... creo que va hacer a mano nomas
Les agradezco a todos por su buena disposición

Saludos
Mika

Etiquetas: formularios, html, todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 09:06.