input type="checkbox"

Índice

Ejemplos

La etiqueta <input> de HTML tiene como valor "checkbox" en su atributo type, input type="checkbox", esto simboliza aún control de dos o más estados que permite a los usuarios finales seleccionar o deseleccionar de uno a mas opciones. Este campo puede ser de gran utilidad para recolectar informaciones cómo a los valores booleanos (verdad o falso), como también responder a las preguntas, ¿usted aceptar condiciones?, ¿usted rechazar las condiciones?.
A la hora de seleccionar un estado por la presencia del atributo booleano checked, cuando el formulario es enviado a la gente procesador, el envío de esta selección es su valor del atributo value, es decir del opción seleccionada a la hora de enviar el formulario al gente procesador es enviado su valor del atributo value.

indice del tema

Ejemplos

En este presente ejemplo mostramos una lista para dar respuesta a nuestra pregunta, usted podrá marcar de uno a más casillas, dependiendo de tu respuesta que tú tengas, para ello usaremos el atributo value, para ser enviado su valor la gente procesador.

<form style="background-color: #3f6a9e;">
<fieldset>

<legend><b>¿Que lenguajes de programacion conoce usted?</b></legend>
 <input type="checkbox" value="1"> Php<br>
 <input type="checkbox" value="2"> c#<br>
 <input type="checkbox" value="3"> JavaScript<br>
 <input type="checkbox" value="3"> C++<br>
 <input type="submit">
</fieldset>
 </form>

La mayoría de de las casillas una vez echa clic en el nombre debería de seleccionarse, este problema tuvimos en el ejemplo anterior para ello para la solución de este problema haremos el uso de la etiqueta <label>. De esta manera estaremos asociando la casilla de verificación como los demás que esté dentro de la etiqueta <label>.

<form style="background-color: #3f6a9e;">
      <fieldset>

          <legend><b>¿Que lenguajes de programacion conoce usted?</b></legend>
          <label><input type="checkbox" value="1"> Php </label><br>
          <label><input type="checkbox" value="2"> c#</label><br>
          <label><input type="checkbox" value="3"> JavaScript</label><br>
          <label><input type="checkbox" value="3"> C++<br>
              <input type="submit"></label>
      </fieldset>
  </form>

Para este ejemplo haremos el uso del atributo checked, esto indicará a navegador a la hora de cargar que la casilla debe estar marcada.

<form style="background-color: #3f6a9e;">
    <fieldset>

        <legend><b>¿Que lenguajes de programación conoce usted?</b></legend>
        <label><input type="checkbox" value="1" checked> Php </label><br>
        <label><input type="checkbox" value="2" checked> c#</label><br>
        <label><input type="checkbox" value="3"> JavaScript</label><br>
        <label><input type="checkbox" value="3"> C++<br>
            <input type="submit"></label>
    </fieldset>
</form>

Por último tenemos un ejemplo de input type="checkbox", haremos uso del atributo required. Cuando una vez aplicamos este atributo booleano, el navegador no permitirá el envío de formulario hasta que esta casilla sea seleccionada, esto podría ser útil para requerimientos de conformidad.

<form style="background-color: #3f6a9e;">
       <fieldset>

           <legend><b>¿aceptas nuestras condiciones de servicio?</b></legend>
           <label><input type="checkbox" value="1" required> Si aceptos </label><br>
           <input type="submit">
       </fieldset>
   </form>