Campos de entrada HTML: tipos, validación y ejemplos listos para el backend

The <input> element handles most short form values: names, emails, phone numbers, URLs, dates, files, checkboxes, radio buttons, and hidden metadata.

Los formularios sólidos se crean a partir de los tipos de entrada correctos. El tipo que elija afecta la validación, los teclados móviles, la accesibilidad, el autocompletado del navegador y la forma de los datos que recibe su backend.

Campo de entrada básico

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3

4
  <label for="email">Email</label>
5
  <input type="email" id="email" name="email" autocomplete="email" required />
6

7
  <button type="submit">Subscribe</button>
8
</form>

Every useful input needs a name. Without it, the browser does not include the field in the submission.

Tipos de entrada comunes

Prefer semantic types over type="text" everywhere. They make the form easier to complete and easier to validate.

Utilice la función de autocompletar para datos de usuarios conocidos

La función Autocompletar ayuda a los navegadores a completar con precisión los datos personales comunes.

1
<label for="name">Full name</label>
2
<input type="text" id="name" name="name" autocomplete="name" required />
3

4
<label for="email">Email</label>
5
<input type="email" id="email" name="email" autocomplete="email" required />
6

7
<label for="phone">Phone</label>
8
<input type="tel" id="phone" name="phone" autocomplete="tel" />

No desactive la función de autocompletar a menos que exista una razón de seguridad real. Para formularios de contacto y clientes potenciales, la función de autocompletar generalmente aumenta las tasas de finalización.

Valida campos de texto breves

La validación HTML es útil para una respuesta rápida:

1
<label for="work_email">Work email</label>
2
<input type="email" id="work_email" name="work_email" autocomplete="email" required />
3

4
<label for="company_size">Company size</label>
5
<input type="number" id="company_size" name="company_size" min="1" max="100000" />
6

7
<label for="website">Website</label>
8
<input type="url" id="website" name="website" placeholder="https://example.com" />

Utilice la validación HTML para guiar a los visitantes. Utilice la validación de backend para hacer cumplir las reglas.

Entradas ocultas para metadatos de formulario

Las entradas ocultas son útiles para los metadatos que deben viajar con cada envío.

1
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
2
<input type="hidden" name="subject" value="New demo request" />
3
<input type="hidden" name="source" value="pricing-page" />

Las entradas ocultas no son secretas. Los visitantes pueden verlos y cambiarlos en el navegador. Úselos para enrutamiento y contexto, no para credenciales privadas o decisiones de autorización confiables.

Entradas completas del formulario de contacto

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <input type="hidden" name="subject" value="New website lead" />
4

5
  <label for="name">Name</label>
6
  <input type="text" id="name" name="name" autocomplete="name" required />
7

8
  <label for="email">Email</label>
9
  <input type="email" id="email" name="email" autocomplete="email" required />
10

11
  <label for="company">Company</label>
12
  <input type="text" id="company" name="company" autocomplete="organization" />
13

14
  <label for="website">Website</label>
15
  <input type="url" id="website" name="website" placeholder="https://example.com" />
16

17
  <label for="message">Message</label>
18
  <textarea id="message" name="message" rows="5" required></textarea>
19

20
  <input type="checkbox" name="botcheck" style="display:none" />
21
  <button type="submit">Send</button>
22
</form>

Este formulario proporciona al backend nombres de campos limpios y proporciona al navegador suficiente información para ayudar al visitante a terminar rápidamente.

Entrada errores que se deben evitar

Evitar entradas sin etiquetas. Los marcadores de posición no sustituyen a las etiquetas.

Avoid generic names like field1, input2, or data. Use names that make sense in email notifications and exports.

Avoid using number for values that can start with zero, such as ZIP codes, account numbers, or phone numbers. Use text or tel instead.

Evite confiar en entradas ocultas. Son enviados por el navegador y pueden ser editados por el visitante.

Guías relacionadas

Leer Guía del área de texto HTML para campos de texto largos, guía de botones de opción para grupos de opción única, y guía de carga de archivos para archivos adjuntos.