SlideShare una empresa de Scribd logo
1 de 3
Descargar para leer sin conexión
miw2012.blogspot.com 1
Diseño y Desarrollo De Sitios Web Dinámicos
Etiquetas HTML Básicas Para la Creación de
Formularios
Etiqueta Atributo Valor Resultado Efecto visual
<FORM> ...
</FORM>
METHOD
POST
GET
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>
Send
TEXT
línea simple de
texto cuya
longitud
se especifica
por el atributo
SIZE
RESET
Elimina el
contenido del
formulario
Reset
RADIO botón de radio
CHECKBOX
casilla de
selección
NAME Nombre
SIZE
Tamaño del
texto
<TEXTAREA> ...
</TEXTAREA>
NAME
Casilla de textoROWS
COLS
<SELECT>
<OPTION> ...
</OPTION>
</SELECT>
NAME Opción 1
MULTIPLE
Múltiples
selecciones
posibles
Opción 1
<OPTION> ...
</OPTION>
SELECTED
Elección
predeterminada
Opción 1
Opción 2
Opción 3
VALUE Valor forzado
miw2012.blogspot.com 2
Diseño y Desarrollo De Sitios Web Dinámicos
Etiqueta Atributo Valor Resultado Efecto visual
<FORM> ...
</FORM>
METHOD
POST
GET
ACTION
Envía a la dirección
mostrada
ENCTYPE
Especifica el tipo de
código
Ejemplo:
<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>
Send
Ejemplo:
<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
Ejemplo:
<input type="text" name="nombre" value="" maxlength="15">
PASSWORD
<input type="password" name="pass" maxlength="10">
RESET
Elimina el contenido
del formulario
Reset
Ejemplo:
<input type="reset" name="cancelar" value="Cancelar" >
RADIO botón de radio
Ejemplo:
<input type="radio"name="edad" value="<18">
Menor de 18 años.<br>
miw2012.blogspot.com 3
Diseño y Desarrollo De Sitios Web Dinámicos
Etiqueta Atributo Valor Resultado Efecto visual
CHECKBOX casilla de selección
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
ROWS
COLS
Ejemplo:
<TEXTAREA name="comentarios" rows=5 cols=40>
Contenido por defecto.
</TEXTAREA>
<SELECT>
<OPTION> ...
</OPTION>
</SELECT>
NAME Opción 1
Ejemplo:
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 Opción 1
Opción 2
Opción 3VALUE 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>

Más contenido relacionado

Más de Pedro Antonio Villalta (Pavillalta)

32- Android, Desarrollo de Aplicaciones Moviles, Importancia del Mockup
32- Android, Desarrollo de Aplicaciones Moviles, Importancia del Mockup32- Android, Desarrollo de Aplicaciones Moviles, Importancia del Mockup
32- Android, Desarrollo de Aplicaciones Moviles, Importancia del MockupPedro Antonio Villalta (Pavillalta)
 
Cuestionario de Conceptos Básicos Sobre Redes de Computadoras ING
Cuestionario de Conceptos Básicos Sobre Redes de Computadoras INGCuestionario de Conceptos Básicos Sobre Redes de Computadoras ING
Cuestionario de Conceptos Básicos Sobre Redes de Computadoras INGPedro Antonio Villalta (Pavillalta)
 
Publicar en Facebook, Twitter, Linkedind y Google+ con Hoot Suite
Publicar en Facebook, Twitter, Linkedind y Google+ con Hoot SuitePublicar en Facebook, Twitter, Linkedind y Google+ con Hoot Suite
Publicar en Facebook, Twitter, Linkedind y Google+ con Hoot SuitePedro Antonio Villalta (Pavillalta)
 

Más de Pedro Antonio Villalta (Pavillalta) (20)

Primer Ejemplo de Proyecto en Android Studio
Primer Ejemplo de Proyecto en Android StudioPrimer Ejemplo de Proyecto en Android Studio
Primer Ejemplo de Proyecto en Android Studio
 
Vtiger CRM, Software para Inteligencia de Negocios
Vtiger CRM, Software para Inteligencia de NegociosVtiger CRM, Software para Inteligencia de Negocios
Vtiger CRM, Software para Inteligencia de Negocios
 
Introduccion a Lenguaje HTML, Programacion Web
Introduccion a Lenguaje HTML, Programacion WebIntroduccion a Lenguaje HTML, Programacion Web
Introduccion a Lenguaje HTML, Programacion Web
 
32- Android, Desarrollo de Aplicaciones Moviles, Importancia del Mockup
32- Android, Desarrollo de Aplicaciones Moviles, Importancia del Mockup32- Android, Desarrollo de Aplicaciones Moviles, Importancia del Mockup
32- Android, Desarrollo de Aplicaciones Moviles, Importancia del Mockup
 
31-Android Generalidades Sobre Servicios Webs con MySQL
31-Android Generalidades Sobre Servicios Webs con MySQL31-Android Generalidades Sobre Servicios Webs con MySQL
31-Android Generalidades Sobre Servicios Webs con MySQL
 
Controles y Objetos Android Studio (Actualizada 2016)
Controles y Objetos Android Studio (Actualizada 2016)Controles y Objetos Android Studio (Actualizada 2016)
Controles y Objetos Android Studio (Actualizada 2016)
 
Entorno-de-Desarrollo-Android-Studio
Entorno-de-Desarrollo-Android-StudioEntorno-de-Desarrollo-Android-Studio
Entorno-de-Desarrollo-Android-Studio
 
Instalacion-y-Configuracion-de-Android-Studio-con-Genymotion
Instalacion-y-Configuracion-de-Android-Studio-con-GenymotionInstalacion-y-Configuracion-de-Android-Studio-con-Genymotion
Instalacion-y-Configuracion-de-Android-Studio-con-Genymotion
 
Generalidades-de-Android-Estudio
Generalidades-de-Android-EstudioGeneralidades-de-Android-Estudio
Generalidades-de-Android-Estudio
 
Entornos-de-Desarrollo-Eclipse-y-Android-SDK
Entornos-de-Desarrollo-Eclipse-y-Android-SDKEntornos-de-Desarrollo-Eclipse-y-Android-SDK
Entornos-de-Desarrollo-Eclipse-y-Android-SDK
 
Conceptos y Generalidades de Android
Conceptos y Generalidades de AndroidConceptos y Generalidades de Android
Conceptos y Generalidades de Android
 
Capitulo I Cisco CCNA1: La vida en un mundo centrado en la red
Capitulo I Cisco CCNA1: La vida en un mundo centrado en la redCapitulo I Cisco CCNA1: La vida en un mundo centrado en la red
Capitulo I Cisco CCNA1: La vida en un mundo centrado en la red
 
Cuestionario de Conceptos Básicos Sobre Redes de Computadoras ING
Cuestionario de Conceptos Básicos Sobre Redes de Computadoras INGCuestionario de Conceptos Básicos Sobre Redes de Computadoras ING
Cuestionario de Conceptos Básicos Sobre Redes de Computadoras ING
 
Capas del Modelo OSI y sus Funciones
Capas del Modelo OSI y sus FuncionesCapas del Modelo OSI y sus Funciones
Capas del Modelo OSI y sus Funciones
 
Cosas que solo pasan en El Salvador
Cosas que solo pasan en El SalvadorCosas que solo pasan en El Salvador
Cosas que solo pasan en El Salvador
 
Compiladores, Analisis Lexico, Tabla de Transiciones
Compiladores, Analisis Lexico, Tabla de TransicionesCompiladores, Analisis Lexico, Tabla de Transiciones
Compiladores, Analisis Lexico, Tabla de Transiciones
 
Publicar en Facebook, Twitter, Linkedind y Google+ con Hoot Suite
Publicar en Facebook, Twitter, Linkedind y Google+ con Hoot SuitePublicar en Facebook, Twitter, Linkedind y Google+ con Hoot Suite
Publicar en Facebook, Twitter, Linkedind y Google+ con Hoot Suite
 
Estructuras Repetitivas con PSeInt (Parte 2)
Estructuras Repetitivas con PSeInt (Parte 2)Estructuras Repetitivas con PSeInt (Parte 2)
Estructuras Repetitivas con PSeInt (Parte 2)
 
Estructura Repetitiva MIENTRAS (While) con PSeInt
Estructura Repetitiva MIENTRAS (While) con PSeIntEstructura Repetitiva MIENTRAS (While) con PSeInt
Estructura Repetitiva MIENTRAS (While) con PSeInt
 
Creacion de diagramas de clases en visual c#
Creacion de diagramas de clases en visual c#Creacion de diagramas de clases en visual c#
Creacion de diagramas de clases en visual c#
 

Último

Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estossgonzalezp1
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanamcerpam
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfvladimiroflores1
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxAlan779941
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21mariacbr99
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.FlorenciaCattelani
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITMaricarmen Sánchez Ruiz
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfAnnimoUno1
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...JohnRamos830530
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxMiguelAtencio10
 

Último (11)

Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 

Etiquetas HTML para la Creación de Formularios

  • 1. miw2012.blogspot.com 1 Diseño y Desarrollo De Sitios Web Dinámicos Etiquetas HTML Básicas Para la Creación de Formularios Etiqueta Atributo Valor Resultado Efecto visual <FORM> ... </FORM> METHOD POST GET 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> Send TEXT línea simple de texto cuya longitud se especifica por el atributo SIZE RESET Elimina el contenido del formulario Reset RADIO botón de radio CHECKBOX casilla de selección NAME Nombre SIZE Tamaño del texto <TEXTAREA> ... </TEXTAREA> NAME Casilla de textoROWS COLS <SELECT> <OPTION> ... </OPTION> </SELECT> NAME Opción 1 MULTIPLE Múltiples selecciones posibles Opción 1 <OPTION> ... </OPTION> SELECTED Elección predeterminada Opción 1 Opción 2 Opción 3 VALUE Valor forzado
  • 2. miw2012.blogspot.com 2 Diseño y Desarrollo De Sitios Web Dinámicos Etiqueta Atributo Valor Resultado Efecto visual <FORM> ... </FORM> METHOD POST GET ACTION Envía a la dirección mostrada ENCTYPE Especifica el tipo de código Ejemplo: <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> Send Ejemplo: <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 Ejemplo: <input type="text" name="nombre" value="" maxlength="15"> PASSWORD <input type="password" name="pass" maxlength="10"> RESET Elimina el contenido del formulario Reset Ejemplo: <input type="reset" name="cancelar" value="Cancelar" > RADIO botón de radio Ejemplo: <input type="radio"name="edad" value="<18"> Menor de 18 años.<br>
  • 3. miw2012.blogspot.com 3 Diseño y Desarrollo De Sitios Web Dinámicos Etiqueta Atributo Valor Resultado Efecto visual CHECKBOX casilla de selección 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 ROWS COLS Ejemplo: <TEXTAREA name="comentarios" rows=5 cols=40> Contenido por defecto. </TEXTAREA> <SELECT> <OPTION> ... </OPTION> </SELECT> NAME Opción 1 Ejemplo: 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 Opción 1 Opción 2 Opción 3VALUE 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>