Creating Your First Form

La etiqueta <form> se usa para crear un formulario – se ve así:

<form>
	Input elements
</form>

La etiqueta <form> encierra el contenido de su formulario. Este contenido puede estar formado por widgets, controles o campos de formulario – todos se refieren a lo mismo. Este contenido es, en su mayoría, de diferentes tipos de campos de entrada y alguno que otro boton. Veamos un formulario muy sencillo con solamente dos campos de entrada de datos (input fields) y un boton para enviar (submit-button):

<form>
	First name: <input type="text" name="firstname" /> <br />
	Surname: <input type="text" name="surname" /> <br />
	<input type="submit" value="Submit now" />
</form>

Como se puede ver, los campos de entrada (input fields) son definidos por el elemento <input>. El elemento input representa un campo de entrada de datos para escribir en él y cuyo contenido el usuario puede editar. El atributo type define que tipo de control esta usando, en este caso es un elemento de texto regular, y el atributo name identifica a cada uno de los campos de entrada de manera individual. El atributo type es la clave para definir que tipo de elemento de entrada de datos es realmente.

El botón también se define usando la etiqueta <input> pero el valor del atributo type es "submit" en lugar de "text" como en los dos campos previos e indica que se trata de un botón para enviar el formulario. El botón para enviar (submit) tiene un atributo adicional llamado value. El valor del atributo value define el texto que el botón va a mostrar y para nuestro ejemplo escogí "Submit now".
Como puede haber notado, la etiqueta <input> es un elemento vacío y por lo tanto se cierra automáticamente usando el caracter / al final.

Tip!

Siempre es bueno cuando se tiene la posibilidad de acortar la definición de una etiqueta (markup) sin comprometer la calidad y aqui se tiene la oportunidad cuando se crea un campo de texto regular (text input) en su formulario. Se puede omitir el atributo type y el navegador web interpretará automáticamente el campo de entrada como un campo de texto regular. Esto significa que los siguientes dos elementos input son interpretados de la misma forma:

<input type="text" />
<input />