Campos de Texto
Los campos de texto permiten a los usuarios ingresar texto en una interfaz de usuario.
Los campos de texto son una parte fundamental de las interfaces de usuario y se utilizan
ampliamente en formularios, búsquedas, chatbots y otras interacciones donde se requiere
la entrada y manipulación de texto.
La funcionalidad de un campo de texto es permitir a los usuarios ingresar y editar texto
para recibir información, postular, hacer preguntas, entre otras cosas.
Por otro lado para AIEP esto le permite ingresar datos y responder a necesidades de
usuario para comenzar un proceso.
Los campos de texto son elementos de la interfaz del usuario que tienen las siguientes
funcionalidades:
- Edición: La principal función de un campo de texto es permitir a los usuarios ingresar y editar texto. Los usuarios pueden escribir, copiar, pegar y eliminar texto dentro del campo de texto, ya sea utilizando un teclado físico o virtual.
- Datos: Los campos de texto se utilizan para captar diversos tipos de datos, como nombres, direcciones, números de teléfono, correos electrónicos, contraseñas y otros datos relevantes para una aplicación o formulario específico.
- Validación: Los campos de texto a menudo incluyen validaciones para asegurarse de que los datos ingresados sean correctos y cumplan con ciertos criterios. Esto puede incluir la validación de formatos de correo electrónico, números de teléfono, contraseñas seguras o cualquier otro requisito específico.
- Accesibilidad: Los campos de texto son compatibles con la interacción táctil, lo que significa que los usuarios pueden tocar o hacer clic en ellos para activar el teclado virtual en dispositivos móviles o táctiles. Además, los campos de texto suelen ser accesibles para usuarios con discapacidades visuales o de movilidad, ya que los navegadores y las tecnologías de asistencia pueden interpretar y comunicar su contenido correctamente.
- Etiquetas: Los campos de texto pueden incluir etiquetas descriptivas para indicar qué tipo de información se debe ingresar en el campo.
- Placeholders: Los textos de ejemplo dentro del campo para proporcionan instrucciones adicionales a los usuarios para dejar en evidencia la información que debe ingresarse y la forma de escribirlo.
- Autocompletado: En algunos casos, los campos de texto pueden ofrecer funcionalidades de autocompletado o sugerencias para facilitar y agilizar la entrada de datos. Esto puede ser útil para direcciones, nombres de usuarios, búsquedas y otros casos en los que los datos se pueden predecir o recuperar de fuentes externas.
Campo de texto
HTML
<div class="form-column">
<label for="">Nombre(s) *</label>
<div id="div-nombre" class="form-input">
<input id="input-nombre" type="text" placeholder="Claudia Andrea"
oninput="mostrarIconoBorrar()">
<img id="icono-nombre-borrar" class="icono-borrar-clase"
src="iconos/cancelar_lineal.svg" alt="" width="32" height="32"
onclick="borrarContenido()">
<img id="icono-verificar" class="icono-verificar-clase"
src="iconos/verificar-circulo-verde.svg" alt="" width="32" height="32">
</div>
<p class="form-error" id="mensajeError" style="color: red; display:
none;">
Ingresa tu(s) nombre(s)
</p>
</div>
</div>
CSS
.form-column {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 10px;
width: 100%;
}
.form-column .form-input {
display: flex;
justify-content: flex-start;
position: relative;
}
.form-column label {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #024588;
}
.form-column label.disabled {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #B6AFAF;
}
.form-column input {
box-sizing: border-box;
padding: 15px 40px 15px 20px;
height: 50px;
background: #FAF9F9;
mix-blend-mode: normal;
border: 1px solid #024588;
border-radius: 10px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
box-shadow: unset;
outline: unset;
}
.form-column input.disabled {
border: 1px solid #B6AFAF;
color: #B6AFAF;
cursor: not-allowed;
}
.form-column input::placeholder {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: #B6AFAF;
}
.form-column input:hover {
border: 2px solid #024588;
}
.form-column input.disabled:hover {
border: 1px solid #B6AFAF;
}
.form-column input:focus,
.form-column input:active,
.form-column input:focus-visible,
.form-column input:target {
border: 3px solid #3D8DDD;
}
.form-column .icono-borrar-clase {
display: none;
position: absolute;
right: 8px;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 10;
}
.icono-verificar-clase {
z-index: 1;
display: none;
position: absolute;
right: 8px;
transition: 0.3s ease-in-out;
}
.form-error {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #E33535;
}
JS
var input = document.getElementById("input-nombre");
var div = document.getElementById("div-nombre");
var iconoBorrar = document.getElementById("icono-nombre-borrar");
var iconoVerificar = document.getElementById("icono-verificar");
var mensajeError = document.getElementById("mensajeError");
function mostrarIconoBorrar() {
if (input.value.length > 0) {
iconoVerificar.style.display = "none";
iconoBorrar.style.display = "block";
} else {
iconoBorrar.style.display = "none";
iconoVerificar.style.display = "none";
}
}
function borrarContenido() {
iconoVerificar.style.display = "none";
iconoBorrar.style.display = "none";
input.value = "";
}
input.addEventListener("input", function () {
var valor = input.value;
if (/^\d+$/.test(valor)) {
mensajeError.style.display = "block";
} else {
mensajeError.style.display = "none";
}
});
div.addEventListener("mouseleave", function () {
var valor = input.value;
if (input.value.length > 0) {
if (/^\d+$/.test(valor)) {
mensajeError.style.display = "block";
} else {
iconoBorrar.style.display = "none";
iconoVerificar.style.display = "block";
}
}
});
Campo de texto contraseña
HTML
<div style="max-width: 350px;">
<div class="form-column">
<label for="">Clave *</label>
<div id="div-clave" class="form-input">
<input id="input-clave" type="password" placeholder="Ingresa tu clave"
oninput="mostrarIconoBorrar2()">
<img id="icono-nombre-borrar2" class="icono-borrar-clase"
src="iconos/cancelar_lineal.svg" alt="" width="32" height="32"
onclick="borrarContenido2()" style="right: 78px;">
<button class="btn-icono" style="margin-left: 10px;"
onclick="mostrarContrasena()">
<img src="iconos/ver_lineal.svg" alt="" width="32" height="32">
</button>
</div>
<p class="form-error" id="mensajeError2" style="color: red; display:
none;">
Ingresa clave, mínimo 4 máximo 8 caracteres
</p>
</div>
</div>
CSS
.form-column {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 10px;
width: 100%;
}
.form-column .form-input {
display: flex;
justify-content: flex-start;
position: relative;
}
.form-column label {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #024588;
}
.form-column label.disabled {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #B6AFAF;
}
.form-column input {
box-sizing: border-box;
padding: 15px 40px 15px 20px;
height: 50px;
background: #FAF9F9;
mix-blend-mode: normal;
border: 1px solid #024588;
border-radius: 10px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
box-shadow: unset;
outline: unset;
}
.form-column input.disabled {
border: 1px solid #B6AFAF;
color: #B6AFAF;
cursor: not-allowed;
}
.form-column input::placeholder {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: #B6AFAF;
}
.form-column input:hover {
border: 2px solid #024588;
}
.form-column input.disabled:hover {
border: 1px solid #B6AFAF;
}
.form-column input:focus,
.form-column input:active,
.form-column input:focus-visible,
.form-column input:target {
border: 3px solid #3D8DDD;
}
.form-column .icono-borrar-clase {
display: none;
position: absolute;
right: 8px;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 10;
}
.icono-verificar-clase {
z-index: 1;
display: none;
position: absolute;
right: 8px;
transition: 0.3s ease-in-out;
}
.form-error {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #E33535;
}
JS
var input2 = document.getElementById("input-clave");
var div2 = document.getElementById("div-clave");
var iconoBorrar2 = document.getElementById("icono-nombre-borrar2");
var mensajeError2 = document.getElementById("mensajeError2");
var botonVer = document.querySelector(".btn-icono");
function mostrarIconoBorrar2() {
if (input2.value.length > 0) {
iconoBorrar2.style.display = "block";
} else {
iconoBorrar2.style.display = "none";
}
}
function borrarContenido2() {
iconoBorrar2.style.display = "none";
input2.value = "";
}
function mostrarContrasena() {
if (input2.type === "password") {
input2.type = "text";
botonVer.classList.toggle("activo");
} else {
botonVer.classList.toggle("activo");
input2.type = "password";
}
}
input2.addEventListener("input", function () {
var valor = input2.value;
if (valor.length < 4 || valor.length> 8) {
mensajeError2.style.display = "block";
} else {
mensajeError2.style.display = "none";
}
});
