Formularios con CSS

mikalorena5 · 17/04/2015, 13:49

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

lauser · 17/04/2015, 14:16

Curioso diagrama....ajja

mikalorena5 · 17/04/2015, 14:24

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

AngelKrak · 17/04/2015, 15:23

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<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

aqui puedes ver todos los forms y demas...
http://getbootstrap.com/css/?#forms

lauser · 17/04/2015, 15:40

Angel y si no usa las librerías de Bootstrap?

gerrycrush · 17/04/2015, 17:19

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

AngelKrak · 17/04/2015, 18:29

@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<form id="MyFormAK">
  Nombre: <input type="text" name="nombre" placeholder="Escribe tu Nombre"><br>
  Apellido: <input type="text" name="apellido" placeholder="Escribe tu Apellido"><br>
</form>

Código CSS:

Ver original#MyFormAK {
  max-width: 100%;
  height: 100px;
  border: 1px solid;
  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
  border-radius: 3px;
  padding: 10px;
}
input {
  padding: 13px 5px;
}

demo:
http://codepen.io/AngelKrak/pen/gpYgqL

ariki · 17/04/2015, 18:33

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"[/COLOR] name="form2" method="post" action="">

      <label for="nombre"></label>

      <div align="right">

        <input type="text" name="nombre" [COLOR="red"]id="nombre"[/COLOR] size="50"/>

      </div>

    </form></td>

  </tr>

  <tr>

    <td height="33">Apellido:</td>

    <td><form [COLOR="Red"]id="form1"[/COLOR] name="form1" method="post" action="">

      <label for="apellido"></label>

      <div align="right">

        <input type="text" name="apellido"[COLOR="red"] id="apellido"[/COLOR] size="50" />

      </div>

    </form></td>

  </tr>

  <tr>

    <td height="23" colspan="2"><form [COLOR="red"]id="form3"[/COLOR] name="form3" method="post" action="">

      <div align="right">

        <input type="submit" name="submit"[COLOR="red"] id="submit"[/COLOR] value="aqui va el nombre de el submit" />

      </div>

    </form></td>

  </tr>

  <tr>

    <td height="115" colspan="2">&nbsp;</td>

  </tr>

</table>

fede5426 · 17/04/2015, 20:56

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<fieldset id="contacto">
  <form action="form.php" method="post">
    <label for="nombre">Nombre</label>
    <input type="text" class="texto" name="nombre" required>
 
 
    <label for="apellido">Apellido</label>
    <input type="text" class="texto" name="apellido"required>
 
    <label for="email">Email</label>
    <input type="email" class="texto" name="email" required placeholder="[email protected]">
 
    <label for="pais">Pa&iacute;s</label>
    <select id="selector">
      <option name="pais" value="Arg" selected>Argentina</option>
      <option name="pais" value="Vza">Venezuela</option>
      <option name="pais" value="Bra">Brasil</option>
      <option name="pais" value="Chi">Chile</option>
      <option name="pais" value="Uru">Uruguay</option>
    </select>
 
    <label for="mensaje">Mensaje</label>
    <textarea id="mensaje" name="mensaje" required placeholder=" Escriba aqui su mensaje..."></textarea>
 
    <input type="submit" class="submit" name="enviar" value="Enviar">
  </form>
</fieldset>

Código CSS:

Ver original#contacto{
    width:300px;
    min-height:550px;
    border:0;
    border-radius:10px;
    background: linear-gradient(#262626, #161616);
    padding: 20px;
    text-align:center;
    }
    
#contacto label{
    display:block;
    color:#fff;
    font-family:Calibri;
    font-size:1.5em;
    padding:15px 0 5px 5px;
    text-align:left;
    }
    
#contacto input.texto{
    width:280px;
    height:30px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;
    background: linear-gradient(#FFF,#f5f5f5);
    color:#161616;
    font-family:Trebuchet MS;
    font-size:0.8em;
    padding:0 5px 0 5px;
    }
 
#contacto #selector{
    width:291px;
    height:33px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;
    background: linear-gradient(#FFF,#f5f5f5);
    color:#161616;
    font-family:Trebuchet MS;
    font-size:0.8em;
    padding:0 5px;
    }
    
#contacto #mensaje{
    width:280px;
    height:115px;
    border: 1px solid #d5d5d5;
    border-radius: 5px;
    background: linear-gradient(#FFF,#f5f5f5);
    color:#161616;
    font-family:Trebuchet MS;
    font-size:0.8em;
    padding:5px;
    }
    
#contacto .submit{
    width:100px;
    height:30px;
    border: 1px solid #d5d5d5;
    border-radius: 5px; 
    color:#616161;
    font-family:Calibri;
    font-size:1.1em;
    margin-top:15px;
    margin-right:5px;
    float:right;
  cursor:pointer;
    }
 
#contacto .submit:hover{
  background:linear-gradient(#2989D8,#1E5799);
  color:#fff;
}

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

Saludos

lauser · 18/04/2015, 03:39

El compañero @Caricatos, tiene un manual excelente sobre el tema. Aquí.

baccxus · 18/04/2015, 11:12

A mi modo, tu ejemplo: [

Código CSS:

Ver original* {
            font-family: helvetica, sans-serif;
        }
        fieldset {
            border: #CCC 1px solid;
            border-radius: 0.5em;
            width: 20em;
            position: relative;
 
        }
        legend {
            font-weight: bold;
            color: #CCC;
        }
        label {
            float: left;
            width: 5em;
            margin-right: 1em;
            text-align: right;
        }
        input[type="text"]{
            width: 15em;
            padding: 0.5em;
        }

Código HTML:

Ver original<form>
        <fieldset>
            <legend>formulario</legend>
            <p>
                <label for="nombre">Nombre</label>
                <input type="text" name="nombre" placeholder="Nombre" required />
            </p>
            <p>
                <label for="apellido">Apellido</label>
                <input type="text" name="apellido" placeholder="Apellido" required/>
            </p>
            <p>
                ...
            </p>
        </fieldset>
    </form>

Por favor no uses tablas

mikalorena5 · 19/04/2015, 12:02

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