Recopilar Información del Cliente

Toda reserva necesita datos de contacto. El nombre y el email del cliente son esenciales — necesitamos saber quién está reservando y cómo contactarlos. Construyamos estos campos correctamente con etiquetas, marcadores de posición y validación básica del navegador.

Lo Que Aprenderás

Crear campos de formulario con etiquetas
Agregar texto de marcador de posición como guía
Usar atributos de validación de HTML5
Estructurar marcado de formulario accesible

Comienza con el Campo de Nombre

Un campo de formulario adecuado necesita más que solo una entrada. Necesita una etiqueta:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  let customerName = $state('');
</script>

<form>
  <div class="field">
    <label for="customer-name">Your Name</label>
    <input 
      type="text" 
      id="customer-name"
      bind:value={customerName}
      placeholder="Jane Smith"
      required
    />
  </div>
</form>

Elementos clave:

<label for="..."> se conecta a <input id="...">
placeholder muestra texto de ejemplo cuando está vacío
required evita el envío sin un valor

Agrega el Campo de Email

Las entradas de email reciben tratamiento especial en los navegadores:

<script>
  let customerName = $state('');
  let customerEmail = $state('');
</script>

<form>
  <div class="field">
    <label for="customer-name">Your Name</label>
    <input 
      type="text" 
      id="customer-name"
      bind:value={customerName}
      placeholder="Jane Smith"
      required
    />
  </div>
  
  <div class="field">
    <label for="customer-email">Email Address</label>
    <input 
      type="email" 
      id="customer-email"
      bind:value={customerEmail}
      placeholder="jane@example.com"
      required
    />
  </div>
</form>

Usar type="email" proporciona:

Teclados móviles optimizados para ingresar email
Validación de formato incorporada (debe contener @)
Autocompletado del navegador para direcciones de email

Agrega un Campo de Teléfono (Opcional)

Algunas reservas se benefician de un número de teléfono:

<script>
  let customerName = $state('');
  let customerEmail = $state('');
  let customerPhone = $state('');
</script>

<form>
  <!-- Name and Email fields... -->
  
  <div class="field">
    <label for="customer-phone">Phone Number (optional)</label>
    <input 
      type="tel" 
      id="customer-phone"
      bind:value={customerPhone}
      placeholder="(555) 123-4567"
    />
  </div>
</form>

Nota: sin atributo required. El texto "(opcional)" le indica a los usuarios que no es obligatorio.

La Sección de Contacto Completa

Aquí está la sección completa de información de contacto:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  let customerName = $state('');
  let customerEmail = $state('');
  let customerPhone = $state('');
</script>

<form>
  <fieldset>
    <legend>Contact Information</legend>
    
    <div class="field">
      <label for="customer-name">Your Name</label>
      <input 
        type="text" 
        id="customer-name"
        name="customerName"
        bind:value={customerName}
        placeholder="Jane Smith"
        required
        autocomplete="name"
      />
    </div>
    
    <div class="field">
      <label for="customer-email">Email Address</label>
      <input 
        type="email" 
        id="customer-email"
        name="customerEmail"
        bind:value={customerEmail}
        placeholder="jane@example.com"
        required
        autocomplete="email"
      />
    </div>
    
    <div class="field">
      <label for="customer-phone">Phone Number (optional)</label>
      <input 
        type="tel" 
        id="customer-phone"
        name="customerPhone"
        bind:value={customerPhone}
        placeholder="(555) 123-4567"
        autocomplete="tel"
      />
    </div>
  </fieldset>
</form>

<style>
  fieldset {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  legend {
    font-weight: 600;
    padding: 0 0.5rem;
  }
  
  .field {
    margin-bottom: 1rem;
  }
  
  .field:last-child {
    margin-bottom: 0;
  }
  
  label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
  }
  
  input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
  }
  
  input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  }
</style>

Nuevas incorporaciones:

<fieldset> y <legend> agrupan campos relacionados
Atributos name para el envío del formulario
Las sugerencias de autocomplete ayudan a los navegadores a completar formularios más rápido

Vista Previa de los Datos Ingresados

Muestra a los usuarios lo que han ingresado:

<script>
  let customerName = $state('');
  let customerEmail = $state('');
  let customerPhone = $state('');
  
  let hasContactInfo = $derived(customerName || customerEmail);
</script>

<!-- Form fields... -->

{#if hasContactInfo}
  <div class="preview">
    <h3>Contact Details</h3>
    {#if customerName}
      <p><strong>Name:</strong> {customerName}</p>
    {/if}
    {#if customerEmail}
      <p><strong>Email:</strong> {customerEmail}</p>
    {/if}
    {#if customerPhone}
      <p><strong>Phone:</strong> {customerPhone}</p>
    {/if}
  </div>
{/if}

La vista previa solo aparece una vez que el usuario comienza a ingresar datos.

La Accesibilidad Importa

Nuestro formulario es accesible porque:

Las etiquetas están conectadas a las entradas mediante for/id — hacer clic en la etiqueta enfoca la entrada
Los campos obligatorios están marcados — los lectores de pantalla anuncian "requerido"
El fieldset agrupa contenido relacionado — proporciona contexto para usuarios de lectores de pantalla
Los tipos de entrada son semánticos — email y tel transmiten significado

Errores Comunes

Conexión de Etiqueta Faltante

<!-- ❌ Label not connected to input -->
<label>Email</label>
<input type="email" bind:value={email} />

<!-- ✅ Connected via for/id -->
<label for="email">Email</label>
<input type="email" id="email" bind:value={email} />

<!-- ✅ Or wrap input in label -->
<label>
  Email
  <input type="email" bind:value={email} />
</label>

Marcador de Posición como Etiqueta

<!-- ❌ Placeholder disappears when typing -->
<input type="text" placeholder="Your Name" />

<!-- ✅ Always have a visible label -->
<label for="name">Your Name</label>
<input type="text" id="name" placeholder="Jane Smith" />

Los marcadores de posición son sugerencias, no etiquetas.

Resumen

Los campos de contacto del cliente necesitan etiquetas, tipos de entrada adecuados y atributos de accesibilidad. Usa bind:value para mantener el estado sincronizado, y agrupa los campos relacionados con <fieldset>.

Puntos clave:

Conecta las etiquetas a las entradas con for/id
Usa tipos de entrada semánticos (email, tel)
Agrega required para los campos obligatorios
Incluye autocomplete para una mejor experiencia de usuario

Próximos Pasos

Los datos de contacto están cubiertos. Continúa con Entrada de Selector de Fecha para permitir que los clientes elijan cuándo quieren su servicio.