path: root/files/es/learn/forms/your_first_form/index.html

---
title: Mi primer formulario HTML
slug: Learn/Forms/Your_first_form
tags:
  - Ejemplo
  - Guía
  - HTML
  - Principiante
  - Web
  - formulários
translation_of: Learn/Forms/Your_first_form
original_slug: Learn/HTML/Forms/Your_first_HTML_form
---
<div>{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</div>

<p class="summary">El primer artículo de nuestra serie te proporciona una primera experiencia de creación de un formulario web, que incluye diseñar un formulario sencillo con controles de formulario adecuados y otros elementos HTML, añadir un poco de estilo muy simple con CSS y describir cómo se envían los datos a un servidor. Ampliaremos cada uno de estos subtemas más adelante.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerrequisitos:</th>
   <td>Conocimientos básicos de informática y de <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">lenguaje HTML</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Familiarizarse con los formularios web, para qué se usan, cómo diseñarlos y qué elementos HTML básicos vas a necesitar para casos sencillos.</td>
  </tr>
 </tbody>
</table>

<h2 id="¿Qué_son_los_formularios_web">¿Qué son los formularios web?</h2>

<p>Los <strong>formularios web</strong> son uno de los principales puntos de interacción entre un usuario y un sitio web o aplicación. Los formularios permiten a los usuarios la introducción de datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento (consulta <a href="/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Enviar los datos de un formulario</a> más adelante en el módulo), o se usan en el lado del cliente para provocar de alguna manera una actualización inmediata de la interfaz (por ejemplo, se añade otro elemento a una lista, o se muestra u oculta una función de interfaz de usuario).</p>

<p>El HTML de un <strong>formulario web</strong> está compuesto por uno o más <strong>controles de formulario</strong> (a veces llamados <strong>widgets</strong>), además de algunos elementos adicionales que ayudan a estructurar el formulario general; a menudo se los conoce como <strong>formularios HTML</strong>. Los controles pueden ser campos de texto de una o varias líneas, cajas desplegables, botones, casillas de verificación o botones de opción, y se crean principalmente con el elemento {{htmlelement("input")}}, aunque hay algunos otros elementos que también hay que conocer.</p>

<p>Los controles de formulario también se pueden programar para forzar la introducción de formatos o valores específicos (<strong>validación de formulario</strong>), y se combinan con etiquetas de texto que describen su propósito para los usuarios con y sin discapacidad visual.</p>

<h2 id="Diseñar_tu_formulario">Diseñar tu formulario</h2>

<p>Antes de comenzar a escribir código, siempre es mejor dar un paso atrás y tomarte el tiempo necesario para pensar en tu formulario. Diseñar una maqueta rápida te ayudará a definir el conjunto de datos adecuado que deseas pedirle al usuario que introduzca. Desde el punto de vista de la experiencia del usuario (UX), es importante recordar que cuanto más grande es tu formulario, más te arriesgas a frustrar a las personas y perder usuarios. Tiene que ser simple y conciso: solicita solo los datos que necesitas.</p>

<p>Diseñar formularios es un paso importante cuando creas un sitio web o una aplicación. Va más allá del alcance de este artículo exponer la experiencia de usuario de los formularios, pero si deseas profundizar en ese tema, puedes leer los artículos siguientes:</p>

<ul>
 <li>Smashing Magazine tiene algunos <a href="https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/" rel="external">artículos muy buenos sobre formularios UX</a>, incluido el artículo —antiguo pero relevante— <a href="https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/" rel="external">An Extensive Guide To Web Form Usability</a> [Amplia guía de usabilidad para formularios web].</li>
 <li>UXMatters también es un recurso que da buenos consejos, desde <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external"> buenas prácticas básicas</a> hasta cuestiones complejas como los <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php"> formularios de varias páginas</a>.</li>
</ul>

<p>En este artículo, vamos a crear un formulario de contacto sencillo. Hagamos un esbozo.</p>

<p><img alt="Esbozo aproximado del formulario que vamos a construir" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; display: block; height: 352px; margin: 0px auto; width: 400px;"></p>

<p>Nuestro formulario va a tener tres campos de texto y un botón. Le pedimos al usuario su nombre, su correo electrónico y el mensaje que desea enviar. Al pulsar el botón sus datos se enviarán a un servidor web.</p>

<h2 id="Aprendizaje_activo_La_implementación_de_nuestro_formulario_HTML">Aprendizaje activo: La implementación de nuestro formulario HTML</h2>

<p>De acuerdo, intentemos crear el HTML para nuestro formulario. Vamos a utilizar los elementos HTML siguientes: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}} y {{HTMLelement("button")}}.</p>

<p>Antes de continuar, haz una copia local de nuestra <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">plantilla HTML simple</a>: introduce aquí tu formulario HTML.</p>

<h3 id="El_elemento_HTMLelementform">El elemento {{HTMLelement("form")}}</h3>

<p>Todos los formularios comienzan con un elemento {{HTMLelement("form")}}, como este:</p>

<pre class="brush:html; notranslate">&lt;form action="/my-handling-form-page" method="post"&gt;

&lt;/form&gt;</pre>

<p>Este elemento define formalmente un formulario. Es un elemento contenedor, como un elemento {{HTMLelement("section")}} o {{HTMLelement("footer")}}, pero específico para contener formularios; también admite algunos atributos específicos para la configuración de la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos los atributos <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> y <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a>:</p>

<ul>
 <li>El atributo <code>action</code> define la ubicación (URL) donde se envían los datos que el formulario ha recopilado cuando se validan.</li>
 <li>El atributo <code>method</code> define con qué método HTTP se envían los datos (generalmente <code>get</code> o <code>post</code>).</li>
</ul>

<div class="note">
<p><strong>Nota</strong>: Veremos cómo funcionan esos atributos en nuestro artículo <a href="/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Enviar los datos de un formulario</a> que encontrarás más adelante.</p>
</div>

<p>Por ahora, añade el elemento {{htmlelement("form")}} anterior a tu elemento HTML {{htmlelement("body")}}.</p>

<h3 id="Los_elementos_HTMLelementlabel_HTMLelementinput_y_HTMLelementtextarea">Los elementos {{HTMLelement("label")}}, {{HTMLelement("input")}} y {{HTMLelement("textarea")}}</h3>

<p>Nuestro formulario de contacto no es complejo: la parte para la entrada de datos contiene tres campos de texto, cada uno con su elemento {{HTMLelement("label")}} correspondiente:</p>

<ul>
 <li>El campo de entrada para el nombre es un {{HTMLelement("input/text", "campo de texto de una sola línea")}}.</li>
 <li>El campo de entrada para el correo electrónico es una {{HTMLelement ("input/email", "entrada de datos de tipo correo electrónico")}}: un campo de texto de una sola línea que acepta solo direcciones de correo electrónico.</li>
 <li>El campo de entrada para el mensaje es {{HTMLelement("textarea")}}; un campo de texto multilínea.</li>
</ul>

<p>En términos de código HTML, para implementar estos controles de formulario necesitamos algo como lo siguiente:</p>

<pre class="brush:html; notranslate" dir="rtl">&lt;form action="/my-handling-form-page" method="post"&gt;
 &lt;ul&gt;
  &lt;li&gt;
    &lt;label for="name"&gt;Nombre:&lt;/label&gt;
    &lt;input type="text" id="name" name="user_name"&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;label for="mail"&gt;Correo electrónico:&lt;/label&gt;
    &lt;input type="email" id="mail" name="user_mail"&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;label for="msg"&gt;Mensaje:&lt;/label&gt;
    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
  &lt;/li&gt;
 &lt;/ul&gt;
&lt;/form&gt;</pre>

<p>Actualiza el código de tu formulario para que se vea como el anterior.</p>

<p>Los elementos {{HTMLelement("li")}} están ahí para estructurar nuestro código convenientemente y facilitar la aplicación de estilo (ver más adelante en el artículo). Por motivos de usabilidad y accesibilidad incluimos una etiqueta explícita para cada control de formulario. Ten en cuenta el uso del atributo <a href="/en-US/docs/Web/HTML/Attributes/for"> <code>for</code> </a> en todos los elementos {{HTMLelement("label")}}, que toma como valor el <a href="/en-US/docs/Web/HTML/Attributes/id"><code>id</code></a> del control de formulario con el que está asociado; así es como asocias un formulario con su etiqueta.</p>

<p>Hacer esto presenta muchas ventajas porque la etiqueta está asociada al control del formulario y permite que los usuarios con ratón, panel táctil y dispositivos táctiles hagan clic en la etiqueta para activar el control correspondiente, y también proporciona accesibilidad con un nombre que los lectores de pantalla leen a sus usuarios. Encontrarás más detalles sobre las etiquetas de los formularios en <a href="/es/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Cómo estructurar un formulario web</a>.</p>

<p>En el elemento {{HTMLelement("input")}}, el atributo más importante es <code>type</code>. Este atributo es muy importante porque define la forma en que el elemento {{HTMLelement("input")}} aparece y se comporta. Encontrarás más información sobre esto en el artículo sobre <a href="/es/docs/Learn/HTML/Forms/The_native_form_widgets">Controles de formularios nativos básicos</a> más adelante.</p>

<ul>
 <li>En nuestro ejemplo sencillo, usamos el valor {{HTMLelement("input/text")}} para la primera entrada, el valor predeterminado para este atributo. Representa un campo de texto básico de una sola línea que acepta cualquier tipo de entrada de texto.</li>
 <li>Para la segunda entrada, usamos el valor {{HTMLelement("input/email")}}, que define un campo de texto de una sola línea que solo acepta una dirección de correo electrónico. Esto convierte un campo de texto básico en una especie de campo «inteligente» que efectúa algunas comprobaciones de validación de los datos que el usuario escribe. También hace que aparezca un diseño de teclado más apropiado para introducir direcciones de correo electrónico (por ejemplo, con un símbolo @ por defecto) en dispositivos con teclados dinámicos, como teléfonos inteligentes. Encontrarás más información sobre la validación de formularios en el artículo de <a href="/es/docs/Learn/HTML/Forms/Validacion_formulario_datos">Validación de formularios por parte del cliente</a> más adelante.</li>
</ul>

<p>Por último, pero no por ello menos importante, ten en cuenta la sintaxis de <code>&lt;input&gt;</code> en contraposición con la de <code>&lt;textarea&gt;&lt;/textarea&gt;</code>. Esta es una de las rarezas del HTML. La etiqueta <code>&lt;input&gt;</code> es un elemento vacío, lo que significa que no necesita una etiqueta de cierre. El elemento {{HTMLElement("textarea")}} no es un elemento vacío, lo que significa que debe cerrarse con la etiqueta de cierre adecuada. Esto tiene un impacto en una característica específica de los formularios: el modo en que defines el valor predeterminado. Para definir el valor predeterminado de un elemento {{HTMLElement("input")}}, debes usar el atributo <a href="/en-US/docs/Web/HTML/Attributes/value"><code>value</code></a> de esta manera:</p>

<pre class="brush:html; notranslate">&lt;input type="text" value="por defecto este elemento se llena con este texto"&gt;</pre>

<p>Por otro lado, si deseas definir un valor predeterminado para un elemento {{HTMLElement("textarea")}}, lo colocas entre las etiquetas de apertura y cierre del elemento {{HTMLElement("textarea")}}, así:</p>

<pre class="brush:html; notranslate">&lt;textarea&gt;
Por defecto, este elemento contiene este texto
&lt;/textarea&gt;</pre>

<h3 id="El_elemento_HTMLelementbutton">El elemento {{HTMLelement("button")}}</h3>

<p>El marcado de nuestro formulario está casi completo; solo necesitamos añadir un botón para permitir que el usuario envíe sus datos una vez que haya completado el formulario. Esto se hace con el elemento {{HTMLelement("button")}}; añade lo siguiente justo encima de la etiqueta de cierre <code>&lt;/form&gt;</code>:</p>

<pre class="brush:html; notranslate">&lt;li class="button"&gt;
  &lt;button type="submit"&gt;Envíe su mensaje&lt;/button&gt;
&lt;/li&gt;</pre>

<p>El elemento {{htmlelement("button")}} también acepta un atributo de <code>type</code>, que a su vez acepta uno de estos tres valores: <code>submit</code>, <code>reset</code> o <code>button</code>.</p>

<ul>
 <li>Un clic en un botón <code>submit</code> (el valor predeterminado) envía los datos del formulario a la página web definida por el atributo <code>action</code> del elemento {{HTMLelement("form")}}.</li>
 <li>Un clic en un botón <code>reset</code> restablece de inmediato todos los controles de formulario a su valor predeterminado. Desde el punto de vista de UX, esto se considera una mala práctica, por lo que debes evitar usar este tipo de botones a menos que realmente tengas una buena razón para incluirlos.</li>
 <li>Un clic en un botón <code>button</code> no hace... ¡nada! Eso suena tonto, pero es muy útil para crear botones personalizados: puedes definir su función con JavaScript.</li>
</ul>

<div class="note">
<p><strong>Nota</strong>: También puedes usar el elemento {{HTMLElement("input")}} con el atributo <code>type</code> correspondiente para generar un botón, por ejemplo <code>&lt;input type="submit"&gt;</code>. La ventaja principal del elemento {{HTMLelement("button")}} es que el elemento {{HTMLelement("input")}} solo permite texto sin formato en su etiqueta, mientras que el elemento {{HTMLelement("button")}} permite contenido HTML completo, lo que permite generar botones creativos más complejos.</p>
</div>

<h2 id="Aplicar_estilo_básico_a_un_formulario">Aplicar estilo básico a un formulario</h2>

<p>Ahora que has terminado de escribir el código HTML de tu formulario, guárdalo y observa lo que ocurre en un navegador. Por ahora, se verá bastante feo.</p>

<div class="note">
<p><strong>Nota</strong>: Si crees que no has escrito bien el código HTML, compáralo con nuestro ejemplo final: véase <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html">ver en vivo</a>).</p>
</div>

<p>Resulta notablemente difícil aplicar estilo a los formularios. Está más allá del alcance de este artículo enseñarte cómo aplicar estilo a los formularios en detalle, por lo que por el momento solo vamos a exponer cómo añadir un poco de CSS para que se vea un poco bien.</p>

<p>En primer lugar, añade un elemento {{htmlelement("style")}} a tu página, dentro de la cabecera del HTML. Debe quedar así:</p>

<pre class="brush: html notranslate">&lt;style&gt;

&lt;/style&gt;</pre>

<p>Dentro de las etiquetas <code>style</code>, añade el código CSS siguiente:</p>

<pre class="brush:css; notranslate">form {
  /* Centrar el formulario en la página */
  margin: 0 auto;
  width: 400px;
  /* Esquema del formulario */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1em;
}

label {
  /* Tamaño y alineación uniforme */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  /* Para asegurarse de que todos los campos de texto tienen la misma configuración de letra
     Por defecto, las áreas de texto tienen un tipo de letra monoespaciada */
  font: 1em sans-serif;

  /* Tamaño uniforme del campo de texto */
  width: 300px;
  box-sizing: border-box;

  /* Hacer coincidir los bordes del campo del formulario */
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  /* Destacado adicional para elementos que tienen el cursor */
  border-color: #000;
}

textarea {
  /* Alinear los campos de texto multilínea con sus etiquetas */
  vertical-align: top;

  /* Proporcionar espacio para escribir texto */
  height: 5em;
}

.button {
  /* Alinear los botones con los campos de texto */
  padding-left: 90px; /* mismo tamaño que los elementos de la etiqueta */
}

button {
  /* Este margen adicional representa aproximadamente el mismo espacio que el espacio
     entre las etiquetas y sus campos de texto */
  margin-left: .5em;
}</pre>

<p>Guarda y vuelve a cargar, y observa que tu formulario presenta un aspecto mucho menos feo.</p>

<div class="note">
<p><strong>Nota</strong>: Puedes encontrar nuestra versión en GitHub en <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">ver en vivo</a>).</p>
</div>

<h2 id="Enviar_los_datos_del_formulario_a_un_servidor_web">Enviar los datos del formulario a un servidor web</h2>

<p>La última parte, y quizás la más complicada, es manejar los datos del formulario en el lado del servidor. El elemento {{HTMLelement("form")}} define dónde y cómo enviar los datos gracias a los atributos <a href="/en-US/docs/Web/HTML/Attributes/action"><code>action</code></a> y <a href="/en-US/docs/Web/HTML/Attributes/method"><code>method</code></a>.</p>

<p>Proporcionamos un nombre (<a href="/en-US/docs/Web/HTML/Attributes/name"><code>name</code></a>) a cada control de formulario. Los nombres son importantes tanto en el lado del cliente como del servidor; le dicen al navegador qué nombre debe dar a cada dato y, en el lado del servidor, dejan que el servidor maneje cada dato por su nombre. Los datos del formulario se envían al servidor como pares de nombre/valor.</p>

<p>Para poner nombre a los diversos datos que se introducen en un formulario, debes usar el atributo <code>name</code> en cada control de formulario que recopila un dato específico. Veamos de nuevo algunos de nuestros códigos de formulario:</p>

<pre class="brush:html; notranslate">&lt;form action="/my-handling-form-page" method="post"&gt;
 &lt;ul&gt;
  &lt;li&gt;
    &lt;label for="name"&gt;Nombre:&lt;/label&gt;
    &lt;input type="text" id="name" name="user_name" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;label for="mail"&gt;Correo electrónico:&lt;/label&gt;
    &lt;input type="email" id="mail" name="user_email" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;label for="msg"&gt;Mensaje:&lt;/label&gt;
    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
  &lt;/li&gt;

  ...
</pre>

<p>En nuestro ejemplo, el formulario envía tres datos denominados «<code>user_name</code>», «<code>user_email</code>» y «<code>user_message</code>». Esos datos se envían a la URL «<code>/my-handling-form-page</code>» utilizando el método <a href="/en-US/docs/Web/HTTP/Methods/POST"><code>post</code> de HTTP</a>.</p>

<p>En el lado del servidor, la secuencia de comandos de la URL «<code>/my-handling-form-page</code>» recibe los datos como una lista de tres elementos clave/valor contenidos en la solicitud HTTP. La forma en que este script maneja esos datos depende de ti. Cada lenguaje de servidor (PHP, Python, Ruby, Java, C#, etc.) tiene su propio mecanismo de manipulación de datos de formulario. No profundizaremos sobre el tema en esta guía, pero si deseas obtener más información, proporcionamos algunos ejemplos en nuestro artículo <a href="/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviar los datos de un formulario</span></a> que encontrarás más adelante.</p>

<h2 id="Resumen">Resumen</h2>

<p>¡Enhorabuena!, has creado tu primer formulario web. Debería verse así:</p>

<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}</p>

<p>Pero esto es solo el comienzo: ahora ha llegado el momento de profundizar en el tema. Los formularios tienen mucho más potencial de lo que hemos visto aquí y los artículos siguientes de este módulo te ayudarán a dominarlo.</p>

<p>{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</p>

<h2 id="En_este_módulo">En este módulo</h2>

<ul>
 <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Tu primer formulario</a></li>
 <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">Cómo estructurar un formulario web</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Los controles de formulario básicos originales</a></li>
 <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">Los tipos de entrada en HTML5</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Otros controles de formulario</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Aplicación de estilo a formularios web</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Aplicación de estilo a formularios avanzada</a></li>
 <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">Pseudoclases UI</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Form_validation">Validación del formulario del lado del cliente</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Enviar los datos de un formulario</a></li>
</ul>

<h3 id="Temas_avanzados">Temas avanzados</h3>

<ul>
 <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">Cómo construir controles de formulario personalizados</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Enviar formularios a través de JavaScript</a></li>
 <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Tabla de compatibilidad para las propiedades de los controles de formulario</a></li>
</ul>