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


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
Final del formulario
MULTIPLE

Múltiples selecciones posibles
Principio del formulario
Final del formulario
<OPTION> ... </OPTION>
SELECTED
Elección predeterminada

Principio del formulario
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
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
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

Loading...