Etiquetas HTML Básicas Para la Creación de Formularios

Comparto esta pequeña guía con las etiquetas HTML usadas en la Creación de Formularios. El post tiene tres partes. En la primera parte vemos la tabla resumen con cada una de las etiquetas, segunda parte la misma tabla, pero he incluido el código de ejemplo para cada etiqueta y al final en la parte tres dejo enlace a slideshare donde puedes descargar el documento listo para imprimir y poder usarlo en cualquier clase practica de HTML nivel básico.

Etiquetas HTML para la Creación de Formularios

Etiqueta	Propiedades	Valor	Descripción	Resultado
<FORM> ... </FORM>	METHOD	POST GET	El resultado es el envío de las variables del formulario a código PHP
	ACTION		Envía a la dirección mostrada
	ENCTYPE		Especifica el tipo de código
<INPUT>	TYPE	SUBMIT	realiza la ACTION de la etiqueta <FORM>	Principio del formulario Final del formulario
		TEXT	línea simple de texto cuya longitud se especifica por el atributo SIZE	Principio del formulario Final del formulario
		RESET	Elimina el contenido del formulario	Principio del formulario Final del formulario
		RADIO	botón de radio	Principio del formulario Final del formulario
		CHECKBOX	casilla de selección	Principio del formulario Final del formulario
	NAME		Nombre
	SIZE		Tamaño del texto
<TEXTAREA> ... </TEXTAREA>	NAME		Casilla de texto	Principio del formulario Final del formulario
	ROWS
	COLS
<SELECT> <OPTION> ... </OPTION> </SELECT>	NAME			Principio del formulario Opción 1 Opción 2 Opción 3 Opción 4 Final del formulario
	MULTIPLE		Múltiples selecciones posibles	Principio del formulario Opción 1 Opción 2 Opción 3 Opción 4 Final del formulario
<OPTION> ... </OPTION>	SELECTED	Elección predeterminada		Principio del formulario Opción 1 Opción 2 Opción 3 Opción 4 Final del formulario
	VALUE	Valor forzado

Ejemplos de Etiquetas HTML Para Formularios Web

Etiqueta	Propiedad	Valor	Descripción	Resultado
<FORM> ... </FORM>	METHOD	POST GET	El resultado es el envío de las variables del formulario a código PHP
	ACTION		Envía a la dirección mostrada
	ENCTYPE		Especifica el tipo de código
	Ejemplo sencillo de un formulario para el ingreso de dos campos de texto. <form name="formulario" id="formulario" action="POST" > Nombre:<br> <input type="text" name="nombre" value="" maxlength="15"><br> Password:<br> <input type="password" name="pass" maxlength="10"><br> </form>
<INPUT>	TYPE	SUBMIT	realiza la ACTION de la etiqueta <FORM>	Principio del formulario Final del formulario
		Ejemplo de boton tipo submit y buttom. <input type="submit" name="enviar" value="Enviar"> BUTTOM <input type="button" name="Boton3" value="El botón 3" OnClick="Mostrar(this);">
		TEXT	línea simple de texto cuya longitud se especifica por el atributo SIZE	Principio del formulario Final del formulario
		Ejemplo de etiqueta para campo de texto o contraseña. <input type="text" name="nombre" value="" maxlength="15"> PASSWORD <input type="password" name="pass" maxlength="10">
		RESET	Elimina el contenido del formulario	Principio del formulario Final del formulario
		Ejemplo: <input type="reset" name="cancelar" value="Cancelar" >
		RADIO	botón de radio	Principio del formulario Final del formulario
		Ejemplo: <input type="radio"name="edad" value="<18"> Menor de 18 años.<br>
		CHECKBOX	casilla de selección	Principio del formulario Final del formulario
		Ejemplo: <input type="checkbox" name="check1" checked> Opción 1<br> <input type="checkbox" name="check2"> Opción 2 <br>
	NAME		Nombre	Name = "check1"
	SIZE		Tamaño del texto	Size = "40"
<TEXTAREA> ... </TEXTAREA>	NAME		Casilla de texto	Principio del formulario Final del formulario
	ROWS
	COLS
		Ejemplo de textarea usado para campos amplios como un mensaje o comentario. <TEXTAREA name="comentarios" rows=5 cols=40> Contenido por defecto. </TEXTAREA>
<SELECT> <OPTION> ... </OPTION> </SELECT>	NAME			Principio del formulario Opción 1 Opción 2 Opción 3 Opción 4 Final del formulario
		Ejemplo de etiqueta select, para mostrar varias opciones. Edad:<br> <select name="edad"> <option value="<18" selected>Menor de 18 años</option> <option value=">18 y <60">Entre 18 y 60 años</option> <option value=">60">Mayor de 60 años</option> </select>
<OPTION> ... </OPTION>	MULTIPLE	Múltiples selecciones posibles
	SELECTED	Elección predeterminada		Principio del formulario Opción 1 Opción 2 Opción 3 Opción 4 Final del formulario
	VALUE	Valor forzado
		Ejemplo: Edad:<br> <select name="opciones" multiple size="3" > <option value="Opcion1" selected>Primera Opción</option> <option value="Opcion2">Segunda Opción</option> <option value="Opcion3">Tercera Opción</option> </select>

Guía de Etiquetas HTML para Formularios en Slideshare

Etiquetas HTML para la Creación de Formularios from Pedro Antonio Villalta (Pavillalta)