HTML - Dropdown, Checkbox, Radio - P.2

Pasted image 20260423093747.png

1. Atributo placeholder (Texto de ayuda):

Permite añadir un texto de ayuda dentro de una caja de entrada <input> para sugerirle al usuario qué ingresar

Pasted image 20260423093942.png

Se crea usando la etiqueta contenedor <select>
Las opciones se definen con la etiqueta <option> . Cada <option> debería tener un atributo value para asignar el valor que se recuperará (distinto del texto visible para el usuario)

3.Botones de Radio (Radio Buttons)

Se crean como elementos <input type="radio">.
Para que solo se pueda elegir uno de un grupo, deben usar el mismo atributo name (ej. name="answer" )

4. Casilla de Verificación (Checkbox)

Se crean usando <input type="checkbox">
Permite seleccionar o deseleccionar una opción

5. Etiquetas (Label)

Se usan para describir los botones de radio o casillas de verificación. Se pueden asociar a
un elemento de dos maneras: Usando el atributo for en <label> que coincida con el
id del <input> asociado. Colocando el elemento <input> directamente dentro de la etiqueta `

Pasted image 20260423094722.png

6.Área de Texto (Text Area)

Se usa la etiqueta contenedor <textarea> . A diferencia de los <input> regulares (línea
única), permite escribir múltiples líneas y párrafos

Pasted image 20260423094800.png

7.Interacción con JavaScript (JS Land)

A) Encontrar Elementos (Búsqueda)

Método de Búsqueda	Uso Típico
`document.getElementById('id')`	Para encontrar un elemento único (como un input con un ID específico o el contenedor `<select>`).
`document.getElementsByName('name')`	Específico para Botones de Radio: Utilizado para obtener una lista de todos los botones de radio que pertenecen al mismo grupo (`name`).
`document.querySelector('selector')`	Para encontrar el primer elemento que coincida con un selector CSS. Útil para encontrar el botón de radio que está marcado dentro de un grupo.
`document.querySelectorAll('selector')`	Para obtener una lista de todos los elementos que coincidan con un selector CSS.

Interacción con Elementos Contenedores (Texto y HTML)

Propiedad	Función
`.textContent`	Obtener: Recupera el texto que está dentro del contenedor. Establecer: Permite cambiar el texto dentro del contenedor (ej. cambiando el texto de un hipervínculo o un encabezado). No incluye etiquetas HTML.
`.innerHTML`	Obtener: Recupera todo el contenido dentro del elemento, incluidas todas las etiquetas HTML. Establecer: Permite reemplazar todo el contenido interno del contenedor con nuevo código HTML.