Cargando...


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 resúmen 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



Etiquetas HTML para la Creación de Formularios (con ejemplo de código)


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>



Etiquetas HTML para Formularios en Slideshare



Haga clic aquí para ver los comentarios 0 Comentarios:

Gracias por tu comentario

Gracias por sus comentarios


Etiquetas

Abrir HTMl dentro de DIV addthis.com app nativas App para moviles Bases de Datos MySql Botones de Compartir Cajas CSS Cascading Style Sheets CHECKBOX Clasificacion CSS CMS Comentarios en PHP comparacion prestashop y magento Conectar con Base De Datos MySql Convenciones de PHP Creación de Formularios css Declarar Estilos CSS Desventajas de Magento Desventajas de Prestashop Diseño paginas web en barcelona Diseño y Desarrollo Web DIV y SPAN Documento Hojas de Estilo ejemplo css ejemplo estilo css Ejemplo Etiquetas Form Ejemplos HTML Ejercicio CSS El Sistema ha Devuelto: (111) Error de Conexión a::1 Fallida Estilos CSS Estructura de HTML Etapas del Diseño Web Etiqueta DIV Etiqueta SPAN Etiquetas HTML Eventos de Formularios HTML Fases del Desarrollo Web Fases del Diseño Web FORM formulario de contacto Formulario de Contacto HTML Formularios HTML framework móviles Framework para Móviles Funcion mail() de PHP Funciones Mysql PHP Glosario de Términos Guia Basica CSS Guia CSS Hoja de Estilo en Cascada hojas de estilo Hojas de Estilo Externas HTML HTML a Texto Plano HTML y PHP HTTP HTTPS Ingeniería Web INPUT Introducción HTML JavaScrip Javascript jquery touch jquerymovile Lenguaje HTML Lenguaje PHP Magento Manejadores de Contenido Marketing Web Marqueting web barcelona Mysql Mysql_Connect Mysql_Query Mysql_Select_Db Objeto Button Objeto Checkbox Objeto Form Objeto Hidden Objeto Password Objeto Radio Objeto Select Objeto Text Objeto Textarea Objetos de Formularios HTML phoneGap PHP plantilla css Plantilla Web con CSS Posicionamiento con Hojas de Estilo Posicionamiento CSS position: static position:absolute position:relative Prestashop Prestashop vs Magento Programación Web Propiedades CSS Propiedades de Formularios Propiedades Y Métodos Puertos para Apache Qué es HTML Que es PhoneGap RADIO Reglas CSS Reglas de PHP Segundo Ejemplo CSS Selectores CSS sencha touch SEO Servidor Web shareaholic.com Sintaxsis PHP Stylesheet TEXTAREA Tiendas En Linea Tipos de CSS titanium appcelerator Uso de los DIV Variables PHP Ventajas de Magento Ventajas de Prestashop Webmaster Widget Xampp Conexión Refused

Hosting y Alojamiento

MBA Ranking

Online Forex Trading