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