52-Elementos semanticos en HTML

---

Elementos Semánticos en HTML

• Botón
• Checkbox
• Color
• Fecha
• Fecha y Hora
• Email
• Archivo
• Oculto
• Imagen
• Mes
• Número
• Contraseña
• Radio
• Rango
• Reiniciar
• Buscar
• Enviar
• Teléfono
• Texto
• Hora
• URL
• Semana

---

Botón

Un botón es un elemento que se puede clicar para realizar una acción. En HTML, se puede crear un botón usando el elemento <button> o el elemento <input> con el tipo "button". Los botones son utilizados en formularios y aplicaciones web para enviar información o ejecutar comandos.

Ejemplo Visual

A continuación, se muestra un botón simple:

Código del ejemplo

  <button type="button" class="btn btn-success">Haz clic aquí</button>
        

---

...

Checkbox

Un checkbox es un elemento que permite al usuario seleccionar una o más opciones de un conjunto. Se representa en HTML con el elemento <input type="checkbox">. Los checkboxes son útiles en formularios para permitir múltiples selecciones, como en listas de preferencias o en opciones de configuración.

Ejemplo Visual

A continuación, se muestra un ejemplo de checkboxes:

Opción 1

Opción 2

Código del ejemplo

  <input type="checkbox" id="option1" class="form-check-input">
  <label for="option1" class="form-check-label">Opción 1</label>
  
  <input type="checkbox" id="option2" class="form-check-input">
  <label for="option2" class="form-check-label">Opción 2</label>
        

---

Color

Un selector de color permite al usuario elegir un color visualmente. En HTML, se puede crear un selector de color utilizando el elemento <input type="color">. Este tipo de entrada es útil para permitir a los usuarios personalizar elementos de una aplicación o sitio web.

Ejemplo Visual

A continuación, se muestra un ejemplo de un selector de color:

Código del ejemplo

  <input type="color" id="colorPicker" class="form-control" value="#ff0000">
        

---

Fecha

Un selector de fecha permite al usuario seleccionar una fecha específica. En HTML, se puede crear un selector de fecha utilizando el elemento <input type="date">. Este tipo de entrada facilita la selección de fechas en formularios.

Ejemplo Visual

A continuación, se muestra un ejemplo de un selector de fecha:

Código del ejemplo

  <input type="date" id="datePicker" class="form-control">
        

---

Fecha y Hora

Un selector de fecha y hora permite al usuario seleccionar tanto una fecha como una hora. En HTML, se puede crear un selector de fecha y hora utilizando el elemento <input type="datetime-local">. Esto es útil en aplicaciones donde es necesario seleccionar un momento específico.

Ejemplo Visual

A continuación, se muestra un ejemplo de un selector de fecha y hora:

Código del ejemplo

  <input type="datetime-local" id="datetimePicker" class="form-control">
        

---

Email

Un campo de email permite al usuario ingresar una dirección de correo electrónico. En HTML, se puede crear un campo de email utilizando el elemento <input type="email">. Este tipo de entrada valida que el formato de la dirección de correo electrónico sea correcto.

Ejemplo Visual

A continuación, se muestra un ejemplo de un campo de email:

Código del ejemplo

  <input type="email" id="emailInput" class="form-control" placeholder="tuemail@ejemplo.com">
        

---

Archivo

Un campo de archivo permite al usuario seleccionar y cargar un archivo desde su dispositivo. En HTML, se puede crear un campo de archivo utilizando el elemento <input type="file">. Este tipo de entrada es útil en formularios donde se necesita recibir documentos, imágenes, o cualquier otro tipo de archivo.

Ejemplo Visual

A continuación, se muestra un ejemplo de un campo de archivo:

Código del ejemplo

  <input type="file" id="fileInput" class="form-control">
        

---

Oculto

Un campo oculto se utiliza para almacenar datos que no deben ser visibles para el usuario. En HTML, se puede crear un campo oculto utilizando el elemento <input type="hidden">. Este tipo de entrada es útil para enviar información adicional al servidor sin que el usuario la vea o interactúe con ella.

Ejemplo Visual

A continuación, se muestra un ejemplo de un campo oculto:

Valor oculto establecido: valorOculto

Código del ejemplo

  <input type="hidden" id="hiddenInput" value="valorOculto">
        

---

Imagen

Un campo de imagen permite al usuario cargar una imagen desde su dispositivo. En HTML, se puede crear un campo de imagen utilizando el elemento <input type="image">. Este tipo de entrada se comporta como un botón de envío, pero muestra una imagen en lugar de un texto.

Ejemplo Visual

A continuación, se muestra un ejemplo de un botón de imagen:

Código del ejemplo

  <input type="image" src="ruta/a/tu-imagen.png" alt="Enviar" class="img-fluid" width="100">
        

---

Mes

Un campo de mes permite al usuario seleccionar un mes específico. En HTML, se puede crear un campo de mes utilizando el elemento <input type="month">. Este tipo de entrada es útil para recoger información de fechas en formularios, como el mes de nacimiento o el mes de un evento.

Ejemplo Visual

A continuación, se muestra un ejemplo de un campo de mes:

Código del ejemplo

  <input type="month" id="monthInput" class="form-control">
        

---

Número

Un campo numérico permite al usuario ingresar solo valores numéricos. En HTML, se puede crear un campo numérico utilizando el elemento <input type="number">. Este tipo de entrada es útil en formularios donde se necesitan cantidades o valores numéricos, como edades, precios, etc.

Ejemplo Visual

A continuación, se muestra un ejemplo de un campo numérico:

Código del ejemplo

  <input type="number" id="numberInput" class="form-control" placeholder="Ingrese un número">
        

---

Contraseña

Un campo de contraseña permite al usuario ingresar una contraseña oculta. En HTML, se puede crear un campo de contraseña utilizando el elemento <input type="password">. Este tipo de entrada es esencial para proteger información sensible, ya que oculta los caracteres que el usuario escribe.

Ejemplo Visual

A continuación, se muestra un ejemplo de un campo de contraseña:

Código del ejemplo

  <input type="password" id="passwordInput" class="form-control" placeholder="Ingrese su contraseña">
        

---

Radio

Un botón de opción (radio) permite al usuario seleccionar una opción de un conjunto limitado. En HTML, se puede crear un botón de opción utilizando el elemento <input type="radio">. Este tipo de entrada es útil en formularios donde se necesita que el usuario elija solo una opción entre varias, como el género, tipo de pago, etc.

Ejemplo Visual

A continuación, se muestra un ejemplo de botones de opción:

Masculino
Femenino
Otro

Código del ejemplo

  <label><input type="radio" name="gender" value="male"> Masculino</label><br>
  <label><input type="radio" name="gender" value="female"> Femenino</label><br>
  <label><input type="radio" name="gender" value="other"> Otro</label>
        

---

Rango

Un control deslizante (rango) permite al usuario seleccionar un valor dentro de un rango especificado. En HTML, se puede crear un control deslizante utilizando el elemento <input type="range">. Este tipo de entrada es útil para ajustar valores de manera visual, como el volumen, brillo, o cualquier otra propiedad que pueda ser representada en un rango.

Ejemplo Visual

A continuación, se muestra un ejemplo de un control deslizante:

Valor seleccionado: 50

Código del ejemplo

<input type="range" id="rangeInput" min="0" max="100" class="form-control" oninput="updateValue(this.value)">
<p>Valor seleccionado: <span id="rangeValue">50</span></p>
            

---

Reiniciar

Un botón de reinicio permite al usuario restablecer todos los campos de un formulario a sus valores predeterminados. En HTML, se puede crear un botón de reinicio utilizando el elemento <input type="reset">. Este tipo de botón es útil en formularios donde el usuario puede querer limpiar rápidamente todas las entradas realizadas.

Ejemplo Visual

A continuación, se muestra un ejemplo de un botón de reinicio en un formulario:

Nombre:

Email:

Código del ejemplo

  <form id="exampleForm">
    <div class="mb-3">
      <label for="name" class="form-label">Nombre:</label>
      <input type="text" id="name" class="form-control" placeholder="Ingrese su nombre">
    </div>
    <div class="mb-3">
      <label for="email" class="form-label">Email:</label>
      <input type="email" id="email" class="form-control" placeholder="Ingrese su email">
    </div>
    <button type="reset" class="btn btn-secondary">Reiniciar</button>
  </form>
        

---

Buscar

Ejemplo Visual

A continuación, se muestra un ejemplo de un campo de búsqueda que filtra una lista de frutas:

• Manzanas
• Bananas
• Naranjas
• Fresas
• Kiwi
• Mango
• Papaya
• Uvas

Código del ejemplo

<input type="search" id="searchInput" placeholder="Buscar..." class="form-control" onkeyup="filterList()">
<ul id="fruitList" class="list-group mt-3">
    <li class="list-group-item">Manzanas</li>
    <li class="list-group-item">Bananas</li>
    <li class="list-group-item">Naranjas</li>
    <li class="list-group-item">Fresas</li>
    <li class="list-group-item">Kiwi</li>
    <li class="list-group-item">Mango</li>
    <li class="list-group-item">Papaya</li>
    <li class="list-group-item">Uvas</li>
</ul>

<script>
function filterList() {
    var input, filter, ul, li, i, txtValue;
    input = document.getElementById('searchInput');
    filter = input.value.toLowerCase();
    ul = document.getElementById("fruitList");
    li = ul.getElementsByTagName('li');

    for (i = 0; i < li.length; i++) {
        txtValue = li[i].textContent || li[i].innerText;
        if (txtValue.toLowerCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>
                

---

Enviar

Un botón de envío permite al usuario enviar información ingresada en un formulario. En HTML, se puede crear un botón de envío utilizando el elemento <input type="submit">. Este tipo de botón es esencial en formularios, ya que permite procesar la información ingresada por el usuario.

Ejemplo Visual

A continuación, se muestra un ejemplo de un botón de envío:

Código del ejemplo

<form>
    <input type="text" placeholder="Ingrese su nombre" class="form-control mb-2">
    <input type="submit" value="Enviar" class="btn btn-success">
</form>
            

---

Teléfono

Un campo de teléfono permite a los usuarios ingresar su número telefónico. En HTML, se puede crear un campo de teléfono utilizando el elemento <input type="tel">. Este tipo de entrada ayuda a validar el formato del número telefónico que el usuario introduce.

Ejemplo Visual

A continuación, se muestra un campo para ingresar un número telefónico:

Número de Teléfono: Nota: Este campo permite ingresar números telefónicos sin restricciones de longitud.

Código del ejemplo

<label for="telInput">Número de Teléfono:</label>
<input type="tel" id="telInput" class="form-control" placeholder="Ej: 123456789">
<small style="color: gray;">Nota: Este campo permite ingresar números telefónicos sin restricciones de longitud.</small>
            

---

Texto

Un campo de texto permite a los usuarios ingresar información textual. En HTML, se puede crear un campo de texto utilizando el elemento <input type="text">. Este tipo de entrada es común en formularios donde se requiere que el usuario ingrese datos como nombres, direcciones, etc.

Ejemplo Visual

A continuación, se muestra un ejemplo de un campo de texto:

Código del ejemplo

<input type="text" placeholder="Ingrese su texto aquí" class="form-control">
            

---

Hora

Un campo de hora permite a los usuarios seleccionar una hora específica. En HTML, se puede crear un campo de hora utilizando el elemento <input type="time">. Este tipo de entrada es útil para formularios donde se necesita especificar una hora exacta, como en citas o eventos.

Ejemplo Visual

A continuación, se muestra un ejemplo de un campo de hora:

Código del ejemplo

<input type="time" class="form-control">
            

---

URL

Un campo de URL permite a los usuarios ingresar una dirección web. En HTML, se puede crear un campo de URL utilizando el elemento <input type="url">. Este tipo de entrada valida que la dirección ingresada tenga el formato correcto de una URL.

Ejemplo Visual

A continuación, se muestra un ejemplo de un campo de URL:

Código del ejemplo

<input type="url" placeholder="https://ejemplo.com" class="form-control">
            

---

Semana

Un campo de semana permite a los usuarios seleccionar una semana específica de un año. En HTML, se puede crear un campo de semana utilizando el elemento . Este tipo de entrada es útil para formularios donde se necesita seleccionar un rango de fechas, como en la planificación de eventos.

Ejemplo Visual

A continuación, se muestra un ejemplo de un campo de semana. Puede seleccionar una semana del año utilizando el selector:

Seleccionar semana: Nota: Dependiendo del navegador, puede que se muestre un selector para elegir la semana.

Código del ejemplo

<label for="weekInput">Seleccionar semana:</label>
<input type="week" id="weekInput" class="form-control" value="2024-W43">
<small style="color: gray;">Nota: Dependiendo del navegador, puede que se muestre un selector para elegir la semana.</small>
            

---

Ir al índice

---

---