Mi primer formulario: simple pero inútil

Crear un formulario completamente en HTML es bastante sencillo, aunque no es muy útil porque lo único que hace es enviar un mail con un formato plano, sólo si quien utiliza el formulario tiene configurado un cliente de correo, lo cual no es nada habitual en estos días.
Para empezar, se puede copiar el siguiente ejemplo y pegar en un editor de texto, guardando el archivo con extensión .html

<FORM Action="mailto:direccion@blabla.com?Subject=Formulario" METHOD="POST">
 <p>Su nombre:</p>
 <p><INPUT id="Nombre" name="Nombre" type="text"></p>
 <p>Mensaje:</p>
 <p><TEXTAREA name="mensaje" id="mensaje"></TEXTAREA></p>
 <INPUT type="submit" value="Enviar el formulario">
 </FORM>

Debemos copiar este código en un archivo de texto plano (no un procesador de textos sino un editor como Geany o el bloc de notas) y guardarlo con extensión .html. Después, hacemos doble clic en ese archivo y se abrirá el formulario en el navegador.

Formulario inútil visto en el navegador

La estructura del formulario es:

<FORM Action=……..aquí la acción que realizará el formulario……….. METHOD=”POST”>

……….aquí los elementos del formulario: botones, textos simples, áreas de texto….

</FORM>

En el primer renglón se define la acción que se realizará al pulsar “Enviar”. En este caso se intentará enviar un mail (Mail To = mailto) a la dirección indicada, con un asunto (Subject):

<FORM Action=”mailto:direccion@blabla.com?Subject=Formulario” METHOD=”POST”>

Después se define un cuadro de texto simple (type=”text”), de un solo renglón:

<p>Nombre:</p>
<p><INPUT id=”Nombre” name=”Nombre” type=”text”></p>

Y otro cuadro de texto pero de múltiples líneas (TEXTAREA):

<p>Mensaje:</p>
<p><TEXTAREA name=”mensaje” id=”mensaje”></TEXTAREA></p>

El último elemento es el botón “Enviar” (type=”submit”), que realizará la acción indicada en la apertura del formulario:

<INPUT type=”submit” value=”Enviar el formulario”>
</FORM>

Este formulario es bastante inútil porque el navegador puede intentar abrir una ventana en un cliente de correo electrónico que no esté configurado, pero es la primera aproximación para comprender cómo funcionan. Para hacer un formulario que realmente sirva, el próximo post muestra un primer paso para crear un formulario PHP.

Artículos sobre cómo crear formularios accesibles:

Leave a Reply

Your email address will not be published. Required fields are marked *