fieldset
Las etiquetas <fieldset> y <legend> se utilizan para agrupar elementos de formulario relacionados y proporcionar un título o leyenda descriptiva para el grupo.
La etiqueta <fieldset> actúa como un contenedor que agrupa campos del formulario. Ejemplo:
<fieldset>
<legend>Información de contacto</legend>
<label for="name">Nombre:</label>
<input type="text" id="name"><br>
<label for="email">Email:</label>
<input type="email" id="email"><br>
<label for="message">Mensaje:</label>
<textarea id="message"></textarea>
</fieldset>
En este ejemplo, la etiqueta <fieldset> envuelve el grupo de elementos de formulario relacionados con la información de contacto. La etiqueta <legend> se utiliza como una leyenda o título para el fieldset, proporcionando una descripción del grupo.
El uso de las etiquetas <fieldset> y <legend> ayuda a mejorar la accesibilidad y usabilidad de los formularios al proporcionar una estructura clara y agrupación visual de campos relacionados. También mejora el estilo general y la organización del formulario.
label
La etiqueta <label> ayuda a asociar una descripción de texto con un campo de entrada de formulario, lo que lo hace más accesible y fácil de usar. Ejemplo:
<label for="username">Nombre de usuario:</label>
<input type="text" id="username">
En este ejemplo, la etiqueta <label> se utiliza para crear una etiqueta para el campo de entrada de nombre de usuario. El atributo for de la etiqueta <label> especifica con qué elemento de entrada está asociado. En este caso, el valor del atributo for coincide con el atributo id del campo de entrada.
Cuando un usuario hace clic en la etiqueta, el campo de entrada correspondiente se enfoca o activa. Esto mejora la usabilidad y accesibilidad, ya que los usuarios pueden hacer clic en el texto de la etiqueta en lugar de hacer clic directamente en el campo de entrada.
input
La etiqueta <input> en HTML se utiliza para crear campos de entrada en un formulario que permiten a los usuarios ingresar datos. El tipo de dato que se ingresa depende del valor del atributo type de la etiqueta <input>. Veamos algunos ejemplos comunes de cómo se utiliza la etiqueta <input> en un formulario:
Campo de Texto: Permite a los usuarios ingresar texto, como su nombre o dirección de correo electrónico.
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre">
Campo de Contraseña: Similar al campo de texto, pero los caracteres ingresados se ocultan por asteriscos o puntos para proteger la privacidad de la contraseña.
<input type="password" id="contrasena" name="contrasena" placeholder="Contraseña">
Casilla de Verificación (Checkbox): Permite a los usuarios seleccionar o deseleccionar una opción.
<input type="checkbox" id="suscripcion" name="suscripcion" value="aceptar">
<label for="suscripcion">Acepto los términos y condiciones</label>
Botón de Radio (Radio Button): Permite a los usuarios seleccionar una opción de un conjunto de opciones mutuamente excluyentes.
<input type="radio" id="opcion1" name="opcion" value="opcion1">
<label for="opcion1">Opción 1</label><br>
<input type="radio" id="opcion2" name="opcion" value="opcion2">
<label for="opcion2">Opción 2</label>
Botón (Button): Crea un botón que puede utilizarse para enviar un formulario o realizar otras acciones mediante JavaScript.
<input type="button" value="Enviar" onclick="enviarFormulario()">
Campo de Correo Electrónico: Ayuda a validar que se ingrese una dirección de correo electrónico válida.
<input type="email" id="correo" name="correo" placeholder="Correo electrónico">
Campo de Número: Permite ingresar valores numéricos y puede incluir restricciones como mínimo y máximo.
<input type="number" id="edad" name="edad" min="18" max="99" placeholder="Edad">
Estos son solo algunos ejemplos de cómo se puede utilizar la etiqueta <input> en un formulario HTML.
button
La etiqueta <button> en HTML se utiliza para crear un botón. Puede ser utilizado para activar una acción o comportamiento específico al ser pulsado.
<button>Haz clic</button>
También puedes utilizar el atributo type para definir el tipo de botón. Algunos valores comunes para el atributo type son:
- submit: Un botón que envía un formulario.
- reset: Un botón que reinicia los valores iniciales de los campos de un formulario.
<button type="submit">Enviar</button>
select
La etiqueta <select> en HTML se utiliza para crear un menú desplegable o una lista de opciones seleccionables. Permite al usuario elegir una opción de entre varias disponibles.
Ejemplo básico de cómo utilizar la etiqueta <select> junto con la etiqueta <option> para crear un menú desplegable:
<select>
<option value="option1">Opción 1</option>
<option value="option2">Opción 2</option>
<option value="option3">Opción 3</option>
</select>
Cada <option> dentro de la etiqueta <select> representa una opción en el menú desplegable. El atributo value se utiliza para especificar el valor asociado a cada opción, que se enviará al servidor cuando se envíe el formulario.
También puedes agregar el atributo selected a una opción específica para que se seleccione automáticamente cuando se muestre el menú desplegable:
<select>
<option value="option1">Opción 1</option>
<option value="option2" selected>Opción 2</option>
<option value="option3">Opción 3</option>
</select>
En este ejemplo, la opción «Opción 2» estará seleccionada de forma predeterminada cuando se muestre el menú desplegable.
La etiqueta <select> en HTML también admite el atributo multiple, que permite al usuario seleccionar múltiples opciones del menú desplegable.
Al agregar el atributo multiple a la etiqueta <select>, se permite la selección de varias opciones manteniendo presionada la tecla Ctrl (en Windows) o Cmd (en Mac) mientras se hacen clic en las opciones deseadas. Ejemplo:
<select multiple>
<option value="option1">Opción 1</option>
<option value="option2">Opción 2</option>
<option value="option3">Opción 3</option>
</select>
La etiqueta <optgroup> se utiliza dentro de un elemento <select> para agrupar varias opciones relacionadas en una categoría o conjunto. Esto proporciona una organización visual a las opciones dentro de la lista desplegable. La etiqueta <optgroup> debe contener una o más etiquetas <option> que representan las opciones dentro de ese grupo.
<select>
<optgroup label="Frutas">
<option value="manzana">Manzana</option>
<option value="naranja">Naranja</option>
<option value="platano">Plátano</option>
</optgroup>
<optgroup label="Verduras">
<option value="zanahoria">Zanahoria</option>
<option value="brocoli">Brócoli</option>
<option value="espinaca">Espinaca</option>
</optgroup>
</select>
En este ejemplo, hemos creado una lista desplegable con dos grupos: «Frutas» y «Verduras». Cada grupo está definido por la etiqueta <optgroup>, que tiene un atributo label que especifica el nombre del grupo. Dentro de cada grupo, hemos incluido etiquetas <option> que representan las opciones individuales, como «Manzana», «Naranja», «Zanahoria», etc.
Cuando se renderiza en un navegador, esto creará una lista desplegable con las opciones agrupadas visualmente bajo las etiquetas de grupo. Esto facilita que los usuarios encuentren y seleccionen las opciones que desean de manera más organizada.
datalist
La etiqueta <datalist> se utiliza junto con la etiqueta <input> para proporcionar una lista de opciones predefinidas que ayudan a los usuarios a seleccionar un valor mientras escriben en un campo de entrada <input>. Esta etiqueta crea una lista desplegable de sugerencias basadas en las opciones que defines, lo que facilita la entrada de datos y mejora la experiencia del usuario.
A continuación se puede ver un ejemplo de cómo se utiliza la etiqueta <datalist>:
<label for="frutas">Selecciona una fruta:</label>
<input list="frutas" id="fruta" name="fruta" />
<datalist id="frutas">
<option value="Manzana"></option>
<option value="Banana"></option>
<option value="Naranja"></option>
<option value="Uva"></option>
<option value="Pera"></option>
</datalist>
En este ejemplo, hemos creado un campo de entrada de texto con la etiqueta <input> y le hemos asignado un atributo list que corresponde al id de la etiqueta <datalist>. El <datalist> contiene opciones (<option>) que representan las sugerencias disponibles para el campo de entrada.
Cuando un usuario comienza a escribir en el campo de entrada, verá una lista desplegable con las opciones del <datalist>. Puede seleccionar una de las opciones o seguir escribiendo. Esto es especialmente útil para formularios en los que los usuarios deben elegir una opción de una lista predefinida, como una lista de países o productos.
El uso de <datalist> mejora la usabilidad y facilita a los usuarios la entrada de datos, especialmente en dispositivos móviles y pantallas táctiles.
textarea
La etiqueta <textarea> en HTML se utiliza para crear un área de entrada de texto de varias líneas. Permite a los usuarios ingresar y editar texto más largo que un solo campo de entrada de texto.
Ejemplo básico de cómo utilizar la etiqueta <textarea>:
<textarea rows="4" cols="40">
Esto es un textarea con 4 fulas y 40 columnas.
</textarea>
En este ejemplo, el atributo rows define el número de filas visibles del área de texto, mientras que el atributo cols establece el número de columnas visibles.
El texto dentro de la etiqueta <textarea> se mostrará inicialmente dentro del área de texto y los usuarios podrán editarlo y seleccionarlo.
