Tipos de Input en HTML y su Impacto en la Experiencia de Usuario

Clase 7 de 37 • Curso de Angular Forms: Creación y Optimización de Formularios Web

Resumen

¿Por qué es importante el tipo de input en HTML?

Comenzar a trabajar con inputs en HTML parece sencillo al inicio. Sin embargo, la importancia del tipo de input radica en la experiencia de usuario, especialmente en dispositivos móviles. Elegir entre un type de texto, email o teléfono puede transformar el teclado que se despliega al usuario, facilitando el proceso de ingresar datos. Vamos a adentrarnos en cómo estos pequeños cambios pueden mejorar significativamente la experiencia del usuario.

¿Cómo afecta el tipo de input la experiencia en dispositivos móviles?

Email (type="email"): Este tipo de input despliega un teclado que incluye el símbolo @ y opciones rápidas para la inserción de puntos y guiones, optimizando así la entrada de un correo electrónico.
Teléfono (type="tel"): Al seleccionar type="tel", el dispositivo muestra un teclado numérico adaptado para números telefónicos, con opciones adicionales como el símbolo + para códigos internacionales.
Número (type="number"): Este tipo presenta un teclado numérico estándar, sin extras, ideal para edades, cantidades o cualquier otro campo estrictamente numérico.

La selección adecuada del tipo de input facilita la vida al usuario, reduciendo la fricción al llenar formularios y aumentando potencialmente las conversiones en aplicaciones y procesos de registro.

¿Qué otros tipos de input existen y cómo funcionan?

HTML ofrece una amplia gama de tipos de inputs diseñados para mejorar la experiencia del usuario con interfaces nativas integradas:

Color (type="color"): Muestra un selector de colores que permite elegir fácilmente un valor hexadecimal o RGBA. Los navegadores como Chrome y Safari lo soportan nativamente.
```
<input type="color" id="colorPicker" name="head" value="#000000">
```
Fecha (type="date"): Incluye un calendario desplegable para que el usuario seleccione fechas con facilidad y precisión.
```
<input type="date" id="start" name="trip-start">
```
Rango (type="range"): Este input es ideal para seleccionar valores en un rango establecido, como volúmenes o preferencias de nivel.
```
<input type="range" id="vol" name="vol" min="0" max="50">
```

La incorporación de estos elementos no solo mejora la experiencia de usuario, sino que aprovecha al máximo las características nativas del navegador, asegurando un rendimiento óptimo.

¿Qué prácticas de código debemos seguir al usar inputs?

Al trabajar con inputs, hay algunas recomendaciones que debemos tener en cuenta para asegurar un código limpio y funcional:

Estructura clara: Defina qué tipo de dato espera y seleccione el input adecuado.
Valores por defecto: Use valores iniciales que sean esperados o comunes para mejorar la experiencia inicial del usuario.
Acceso para todos los navegadores: Asegúrese de que los inputs sean compatibles con los principales navegadores para evitar problemas de funcionalidad.
Pruebas en dispositivos reales: Aunque el navegador de escritorio es útil para el desarrollo inicial, asegúrese de probar en dispositivos móviles.

A medida que profundices en el mundo del desarrollo web, la correcta utilización de los tipos de input se convertirá en una habilidad indispensable para mejorar la interacción del usuario con tus aplicaciones. ¡Sigue investigando y experimentando con nuevos tipos de input y sigue aprendiendo!

malicia canteño victorio

student•

ahí pues.. sigamos con el curso que se ve bueno...

Cesar Elías Armendariz Ruano

student•

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-basic-form',
  templateUrl: './basic-form.component.html',
  styleUrls: ['./basic-form.component.scss']
})
export class BasicFormComponent implements OnInit {

  nameField = new FormControl('');
  emailField = new FormControl('');
  phoneField = new FormControl('');
  colorField = new FormControl('#000000');
  dateField = new FormControl('');
  monthField = new FormControl('');
  ageField = new FormControl(12);
  passwordField = new FormControl('');
  priceField = new FormControl('50');
  weekField = new FormControl('');
  timefield = new FormControl('');
  searchField = new FormControl('');
  descriptionField = new FormControl('');

  constructor() { }

  ngOnInit(): void {
    this.nameField.valueChanges
    .subscribe(value => {
      console.log(value);
    });
  }

  getNameValue() {
    console.log(this.nameField.value);
  }

}

<p>
    Name: {{ nameField.value }}
    <input type="text" [formControl]="nameField"/>

    <button (click)="getNameValue()">Get Value</button>
   
    <!-- <code>
        <pre>
            {{ nameField | json }}
        </pre>
    </code> -->
</p>

<p>
    Email: {{ emailField.value }}
    <input type="email" [formControl]="emailField"/>
</p>

<p>
    Phone: {{ phoneField.value }}
    <input type="tel" [formControl]="phoneField"/>
</p>

<p>
    Color: {{ colorField.value }}
    <input type="color" [formControl]="colorField"/>
</p>

<p>
    Date: {{ dateField.value }}
    <input type="date" [formControl]="dateField"/>
</p>

<p>
    Month: {{ monthField.value }}
    <input type="month" [formControl]="monthField"/>
</p>

<p>
    Age: {{ ageField.value }}
    <input type="number" [formControl]="ageField"/>
</p>

<p>
    Password: {{ passwordField.value }}
    <input type="password" [formControl]="passwordField"/>
</p>

<p>
    Range Price: {{ priceField.value }}
    <input type="range" [formControl]="priceField" min="0" max="100"/>
</p>

<p>
    Wekend: {{ weekField.value }}
    <input type="week" [formControl]="weekField"/>
</p>

<p>
    Date and time: {{ timefield.value }}
    <input type="datetime-local" [formControl]="timefield"/>
</p>

<p>
    
    Search: {{ searchField.value }}
    <input type="search" [formControl]="searchField"/>
</p>

<p>
    
    Description: {{ descriptionField.value }}
    <textarea type="text" [formControl]="descriptionField">
    </textarea>
</p>

Raúl López Hernando

student•

Muchas gracias por compartir

Byron Mesias Cueva Cabrera

student•

Listo ahi agregue unos cuantos controles.

Nicolas Molina

teacher•

Vas con toda genial también hay otros campos de text interesantes como typ:url, type:search etc

Johan Steward Galeano Torres

student•

se puede crear como un pipe para un separador de miles dentro del mismo input?

Nicolas Molina

teacher•

Hola, los pipes funcionan más desde un valor a renderizar como {{ value | pipe }} creo que mejor sería una directiva al input que haga está separación de miles.

Puedes crear tu propia forma o usar libs como https://nosir.github.io/cleave.js/

Johan Steward Galeano Torres

student•

sí usé pipe como un símil para hacerme entender lo que quería conseguir 😅

cuál sería la forma correcta de crear la directiva propia para el input?