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:
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">
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:
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:
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:
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:
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:
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>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias