Formularios: 'checkbox', 'radio', 'hidden', 'submit', 'button', 'reset'

En esta entrada del blog seguimos con los campos de entrada de formularios en los que el usuario puede escoger entre una o varias opciones:

• type="checkbox": es para crear casillas de activación, de las que se pueden escoger, en principio, de ninguna a varias opciones:
  <form method="post" action="http://..../validar.php">
  Escoge los equipos que te gustan:<br />
  <input type="checkbox" name="f-madrid" value="f-madrid" />R Madrid<br />
  <input type="checkbox" name="f-barcelona" value="f-barcelona" />FC Barcelona<br />
  <input type="checkbox" name="f-bilbao" value="f-bilbao" />ATH Bilbao<br />
  </form>

  Y el código se mostrará así:

  Escoge los equipos que te gustan:
  R Madrid
  FC Barcelona
  ATH Bilbao
  
  • El atributo: 'checked="checked"' se emplea para marcar algunas de las opciones por defecto, el usuario puede desmarcar cualquiera de esas opciones y/o marcar otras:
    <form method="post" action="http://..../validar.php">
    Escoge los equipos que te gustan:<br />
    <input type="checkbox" name="f-madrid" value="f-madrid" checked="checked" />R Madrid<br />
    <input type="checkbox" name="f-barcelona" value="f-barcelona" />FC Barcelona<br />
    <input type="checkbox" name="f-bilbao" value="f-bilbao" checked="checked" />ATH Bilbao<br />
    </form>

    Y el código se mostrará así:

    Escoge los equipos que te gustan:
    R Madrid
    FC Barcelona
    ATH Bilbao
    
• type="radio": casillas de activación discriminatorias, el código se mostrará así:
  Aquí también se puede usar el atributo checked="checked", pero solo en una de las opciones.
  <form method="post" action="http://..../validar.php">
  Escoge los equipos que te gustan:<br />
  <input type="radio" name="equipo" value="madrid" />R Madrid<br />
  <input type="radio" name="equipo" value="barcelona" />FC Barcelona<br />
  <input type="radio" name="equipo" value="bilbao" checked="checked"/>ATH Bilbao<br />
  </form>

  Y se mostrará así:

  Escoge los equipos que te gustan:
  R Madrid
  FC Barcelona
  ATH Vilbao
  
• type="hidden": campos ocultos, para enviar datos de control, guardar información que el usuario rellenó antes, etc... tiene muchas utilidades para el webmaster:
  <form method="post" action="http://..../validar.php">
  <input type="hidden" name="nombre_de_variable" value="cualquiera" />
  </form>

  Y se mostrará así:

  No muestra nada, es un campo oculto
• type="submit": para el tipico botón ENVIAR:
  <form method="post" action="http://..../validar.php">
  <input type="submit" name="enviar" value="Enviar" />
  </form>

  Se mostrará así:
• type="button": como submit, pero con el atributo ONCLICK, con el que se especifica la acción a tomar cuando se pulse el botón:
  <form method="post" action="http://..../validar.php">
  <input type="button" name="nombre2" value="Elección" onclick="ejemplo(ejemplo)" />
  </form>

  Se mostrará así:
• type="reset": otro botón, este borra todos los datos del formulario y lo pone como estaba al principio... casi no se usa actualmente:
  <form method="post" action="http://..../validar.php">
  <input type="reset" name="nombre-variable" value="Borrar todo" />
  </form>

  Se mostrará así:
• type="image": es para que el navegador muestre una imagen en lugar del típico botón, como se muestra en el ejemplo siguiente, se comporta igual que 'type="submit"':
  <form method="post" action="http://..../validar.php">
  <input type="image" src="url-imagen.gif" name="enviar" />
  </form>

  Se mostrará así:

Ejemplo de formulario con varios de los campos vistos

Primero el código HTML

<form method="post" action="http://..../validar.php">
<label for="v-nombre">Nombre: </label>
<input type="text" name="v-nombre" /><br />

<label for="v-apellidos">Apellidos: </label>
<input type="text" name="v-apellidos" /><br />

<label for="v-email">Email: </label>
<input type="text" name="v-email" /><br />

<label for="pass">Contraseña: </label>
<input type="password" name="pass" /><br />

<hr />
Escoge los equipos que conoces de la lista:<br />
<input type="checkbox" name="f-madrid" value="f-madrid" />R Madrid<br />
<input type="checkbox" name="f-barcelona" value="f-barcelona" />FC Barcelona<br />
<input type="checkbox" name="f-bilbao" value="f-bilbao" />ATH Bilbao<br />
<hr />
Escoge tu favorito de la lista:<br />
<input type="radio" name="equipo" value="madrid" />R Madrid<br />
<input type="radio" name="equipo" value="barcelona" />FC Barcelona<br />
<input type="radio" name="equipo" value="bilbao" />ATH Bilbao<br />
<input type="submit" name="enviar" value="Enviar" /> <input type="reset" name="borrar" value="Borrar todo" /><br /> </form>

Y se visualizará así:

Puedes probar sin miedo, ya que los datos no se envían a ninguna parte...

Nombre:
Apellidos:
Email:
Contraseña:

---

Escoge los equipos que conoces de la lista:
R Madrid
FC Barcelona
ATH Bilbao

---

Escoge tu favorito de la lista:
R Madrid
FC Barcelona
ATH Vilbao

se pueden aplicar reglas CSS para personalizar el estilo en el que se mostrarán nuestros formularios, así como capas 'div' con un ancho definido (width: 55px;) para alinear los campos del formulario a rellenar...