Categorías: código HTML

input type="checkbox"

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.

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>

admin

Entradas recientes

Online HTML compiler: Qué es, cómo funciona y mejores herramientas en la nube

¿Qué es un online HTML compiler? En el desarrollo de software actual, el término online…

6 días hace

Formato HTML: Qué es, características, extensiones y usos en la web

¿Qué es el Formato HTML? El formato HTML es un estándar digital de estructuración de…

6 días hace

Caracteristicas de HTML: Qué es, propiedades clave y estándares web

En el ecosistema del desarrollo web y la ingeniería de software para internet, el lenguaje…

6 días hace

HTML editable: Qué es, el atributo contenteditable y cómo modificar contenido en vivo

¿Qué es un HTML Editable? En el desarrollo web tradicional, la mayoría de los elementos…

6 días hace

Compilador HTML: Qué es, cómo funciona y mejores herramientas online

En la jerga del desarrollo web y la búsqueda habitual de herramientas en internet, el…

6 días hace

Ejemplos de etiquetas HTML: Guía práctica con código y explicación

En el desarrollo web moderno, comprender la teoría del lenguaje de marcado resulta mucho más…

1 semana hace