SlideShare una empresa de Scribd logo
1 de 4
Descargar para leer sin conexión
1-Vamos a empezar con una estructura HTML base y guardamos este archivo como index.html:
2-Creamos una hoja de estilos, le ponemos de nombre estilos.css y la ubicamos en la misma
carpeta en donde está el .HTML
El siguiente código define las propiedades de fuente, color de fondo y longitud del body:
3-Hacemos un selector para el formulario y le definimos border, border-radius, padding, margin, y
color de fondo:
4-En la línea 17 estamos definiendo dos sombras: una externa y otra interna que da la apariencia
de un borde interior.
5-Para las cajas de textos usamos selectores múltiples, para los input y para el text área:
*Nota que en la línea 26 y 34 se usa el selector input[type=’text’] esto es para que no se mezcle con
el otro input[type=’submit’].
6-Por ultimo para el botón de envió usaremos estilos similares a los de las cajas de textos, pero
además va a tener bordes redondeados, sombra al texto y para el background le pondremos
degradados CSS3:
EL RESULTADO FINAL ES ESTE:

Más contenido relacionado

La actualidad más candente

Colegio nacional nicolas esguerra 2
Colegio nacional nicolas esguerra 2Colegio nacional nicolas esguerra 2
Colegio nacional nicolas esguerra 2Ivan Corredor
 
Informatica basica iii, sesion iii
Informatica basica iii, sesion iiiInformatica basica iii, sesion iii
Informatica basica iii, sesion iiiVictor Hugo
 
Introducción a la base de datos
Introducción a la base de datosIntroducción a la base de datos
Introducción a la base de datosRonald Gil
 
Abraham creación de una mini agenda
Abraham creación de una mini agendaAbraham creación de una mini agenda
Abraham creación de una mini agendaAbraham_hercules
 
Paso Para Crear Una Red Social
Paso Para Crear Una Red SocialPaso Para Crear Una Red Social
Paso Para Crear Una Red Socialguest7baa8fd
 
Bases de datos (Ejemplo del videoclub)
Bases de datos (Ejemplo del videoclub)Bases de datos (Ejemplo del videoclub)
Bases de datos (Ejemplo del videoclub)Felipe Duarte Camacho
 

La actualidad más candente (8)

Colegio nacional nicolas esguerra 2
Colegio nacional nicolas esguerra 2Colegio nacional nicolas esguerra 2
Colegio nacional nicolas esguerra 2
 
Informatica basica iii, sesion iii
Informatica basica iii, sesion iiiInformatica basica iii, sesion iii
Informatica basica iii, sesion iii
 
Introducción a la base de datos
Introducción a la base de datosIntroducción a la base de datos
Introducción a la base de datos
 
Abraham creación de una mini agenda
Abraham creación de una mini agendaAbraham creación de una mini agenda
Abraham creación de una mini agenda
 
Paso Para Crear Una Red Social
Paso Para Crear Una Red SocialPaso Para Crear Una Red Social
Paso Para Crear Una Red Social
 
Qué es access
Qué es accessQué es access
Qué es access
 
Bases de datos (Ejemplo del videoclub)
Bases de datos (Ejemplo del videoclub)Bases de datos (Ejemplo del videoclub)
Bases de datos (Ejemplo del videoclub)
 
Serrano alex word-1
Serrano alex word-1Serrano alex word-1
Serrano alex word-1
 

Destacado

investigacion evolucion de los dispositivos moviles
investigacion evolucion de los dispositivos movilesinvestigacion evolucion de los dispositivos moviles
investigacion evolucion de los dispositivos movilesGustavo Castillo
 
Clasificación de los dispositivos móviles
Clasificación de los dispositivos móvilesClasificación de los dispositivos móviles
Clasificación de los dispositivos móvilesGabbo Torres
 
Aplicaciones Moviles
Aplicaciones MovilesAplicaciones Moviles
Aplicaciones MovilesSara1277
 
Historia de los dispositivos moviles
Historia de los dispositivos movilesHistoria de los dispositivos moviles
Historia de los dispositivos movilesdannielmont
 
Evolución y análisis de los dispositivos móviles
Evolución y análisis de los dispositivos móvilesEvolución y análisis de los dispositivos móviles
Evolución y análisis de los dispositivos móvilesYamil Lambert
 
Linea del tiempo dispositivos móviles
Linea del tiempo dispositivos móviles Linea del tiempo dispositivos móviles
Linea del tiempo dispositivos móviles Isys López
 
La evolución de los dispositivos móviles
La evolución de los dispositivos móvilesLa evolución de los dispositivos móviles
La evolución de los dispositivos móvilesIsaac Meneses
 
Línea del Tiempo "Evolución de los dispositivos móviles"
Línea del Tiempo "Evolución de los dispositivos móviles"Línea del Tiempo "Evolución de los dispositivos móviles"
Línea del Tiempo "Evolución de los dispositivos móviles"Jocelyne Gallegos
 
Aplicaciones móviles (diapositivas)
Aplicaciones móviles (diapositivas)Aplicaciones móviles (diapositivas)
Aplicaciones móviles (diapositivas)asegundos
 
Clasificacion de dispositivos móviles
Clasificacion de dispositivos móvilesClasificacion de dispositivos móviles
Clasificacion de dispositivos móvilesMa Ly
 
Evolución de los Dispositivos Móviles
Evolución de los Dispositivos MóvilesEvolución de los Dispositivos Móviles
Evolución de los Dispositivos MóvilesMayrithaa Rodrigueez
 
Dispositivos moviles
Dispositivos movilesDispositivos moviles
Dispositivos movilesJuan Alvarez
 
Aplicaciones Moviles
Aplicaciones MovilesAplicaciones Moviles
Aplicaciones MovilesFuibebesuerox
 
Tipos de dispositivos móviles
Tipos de dispositivos móviles Tipos de dispositivos móviles
Tipos de dispositivos móviles Andy Oka
 

Destacado (17)

investigacion evolucion de los dispositivos moviles
investigacion evolucion de los dispositivos movilesinvestigacion evolucion de los dispositivos moviles
investigacion evolucion de los dispositivos moviles
 
Clasificación de los dispositivos móviles
Clasificación de los dispositivos móvilesClasificación de los dispositivos móviles
Clasificación de los dispositivos móviles
 
Aplicaciones Moviles
Aplicaciones MovilesAplicaciones Moviles
Aplicaciones Moviles
 
Historia de los dispositivos moviles
Historia de los dispositivos movilesHistoria de los dispositivos moviles
Historia de los dispositivos moviles
 
Evolución y análisis de los dispositivos móviles
Evolución y análisis de los dispositivos móvilesEvolución y análisis de los dispositivos móviles
Evolución y análisis de los dispositivos móviles
 
Linea del tiempo dispositivos móviles
Linea del tiempo dispositivos móviles Linea del tiempo dispositivos móviles
Linea del tiempo dispositivos móviles
 
Presentación de Aplicaciones Móviles
Presentación de Aplicaciones MóvilesPresentación de Aplicaciones Móviles
Presentación de Aplicaciones Móviles
 
La evolución de los dispositivos móviles
La evolución de los dispositivos móvilesLa evolución de los dispositivos móviles
La evolución de los dispositivos móviles
 
Diapositivas dispositivos moviles
Diapositivas dispositivos movilesDiapositivas dispositivos moviles
Diapositivas dispositivos moviles
 
Línea del Tiempo "Evolución de los dispositivos móviles"
Línea del Tiempo "Evolución de los dispositivos móviles"Línea del Tiempo "Evolución de los dispositivos móviles"
Línea del Tiempo "Evolución de los dispositivos móviles"
 
Aplicaciones móviles (diapositivas)
Aplicaciones móviles (diapositivas)Aplicaciones móviles (diapositivas)
Aplicaciones móviles (diapositivas)
 
Clasificacion de dispositivos móviles
Clasificacion de dispositivos móvilesClasificacion de dispositivos móviles
Clasificacion de dispositivos móviles
 
Evolución de los Dispositivos Móviles
Evolución de los Dispositivos MóvilesEvolución de los Dispositivos Móviles
Evolución de los Dispositivos Móviles
 
Dispositivos moviles
Dispositivos movilesDispositivos moviles
Dispositivos moviles
 
Aplicaciones Moviles
Aplicaciones MovilesAplicaciones Moviles
Aplicaciones Moviles
 
Clasificacion de dispositivos moviles
Clasificacion de dispositivos movilesClasificacion de dispositivos moviles
Clasificacion de dispositivos moviles
 
Tipos de dispositivos móviles
Tipos de dispositivos móviles Tipos de dispositivos móviles
Tipos de dispositivos móviles
 

Similar a Formulario (20)

Tutorial formulario
Tutorial formularioTutorial formulario
Tutorial formulario
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 
Formulario de contacto 1
Formulario de contacto 1Formulario de contacto 1
Formulario de contacto 1
 
Manual de cgimail
Manual de cgimailManual de cgimail
Manual de cgimail
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
guia sintaxis css.pdf
guia sintaxis css.pdfguia sintaxis css.pdf
guia sintaxis css.pdf
 
Guia de css para principiantes
Guia de css para principiantesGuia de css para principiantes
Guia de css para principiantes
 
HTML: Una introducción.
HTML: Una introducción.HTML: Una introducción.
HTML: Una introducción.
 
Inf 4 (cotizacion de autos)
Inf 4 (cotizacion de autos)Inf 4 (cotizacion de autos)
Inf 4 (cotizacion de autos)
 
Bach2. informática.-.diseño de páginas web con kompozer
Bach2.  informática.-.diseño de páginas web con kompozerBach2.  informática.-.diseño de páginas web con kompozer
Bach2. informática.-.diseño de páginas web con kompozer
 
U3_Aplicaciones Web.pdf
U3_Aplicaciones Web.pdfU3_Aplicaciones Web.pdf
U3_Aplicaciones Web.pdf
 
2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)
 
Taller Wordpress Nivel II
Taller Wordpress Nivel IITaller Wordpress Nivel II
Taller Wordpress Nivel II
 
Manual de introducción a CSS3
Manual de introducción a CSS3Manual de introducción a CSS3
Manual de introducción a CSS3
 
Manual de Introducción a CSS3
Manual de Introducción a CSS3Manual de Introducción a CSS3
Manual de Introducción a CSS3
 
Portales ud4 - lenguaje html
Portales   ud4 - lenguaje htmlPortales   ud4 - lenguaje html
Portales ud4 - lenguaje html
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
html
htmlhtml
html
 
Andrade salazar tarea de la sesión 5
Andrade salazar tarea de la sesión 5Andrade salazar tarea de la sesión 5
Andrade salazar tarea de la sesión 5
 
Lenguaje html y css ..
Lenguaje html y css ..Lenguaje html y css ..
Lenguaje html y css ..
 

Más de Alejandra Rodriguez (19)

Imperial math -_expo
Imperial math -_expoImperial math -_expo
Imperial math -_expo
 
Triptico
TripticoTriptico
Triptico
 
Engargolado
EngargoladoEngargolado
Engargolado
 
Suma de dos_numeros
Suma de dos_numerosSuma de dos_numeros
Suma de dos_numeros
 
Presentacion1(5)(2)
Presentacion1(5)(2)Presentacion1(5)(2)
Presentacion1(5)(2)
 
Practica sustraccion-de-dos-numeros(2)
Practica sustraccion-de-dos-numeros(2)Practica sustraccion-de-dos-numeros(2)
Practica sustraccion-de-dos-numeros(2)
 
Interfaz Pagina Web
Interfaz Pagina WebInterfaz Pagina Web
Interfaz Pagina Web
 
Preguntas codecademy
Preguntas codecademy Preguntas codecademy
Preguntas codecademy
 
Examenn
ExamennExamenn
Examenn
 
Examen
ExamenExamen
Examen
 
Tutorial Hola Mundo
Tutorial Hola MundoTutorial Hola Mundo
Tutorial Hola Mundo
 
Tutorial para-eclipse
Tutorial para-eclipseTutorial para-eclipse
Tutorial para-eclipse
 
Mapa conceptual moviles
Mapa conceptual movilesMapa conceptual moviles
Mapa conceptual moviles
 
Tutorial de Eclipse 3
Tutorial de Eclipse 3Tutorial de Eclipse 3
Tutorial de Eclipse 3
 
Tutorial de eclipse 2
Tutorial de eclipse 2Tutorial de eclipse 2
Tutorial de eclipse 2
 
Tutorial de eclipse 1
Tutorial de eclipse 1Tutorial de eclipse 1
Tutorial de eclipse 1
 
Como hacer una página web
Como hacer una página webComo hacer una página web
Como hacer una página web
 
Tutorial para-eclipse
Tutorial para-eclipseTutorial para-eclipse
Tutorial para-eclipse
 
Evolución de dispositivos móviles
Evolución de dispositivos móvilesEvolución de dispositivos móviles
Evolución de dispositivos móviles
 

Último

KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesFundación YOD YOD
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdfIsabellaMontaomurill
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELmaryfer27m
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadMiguelAngelVillanuev48
 
Clase N°4 - Purificación y secuenciación de acidos nucleicos Benoit Diringer ...
Clase N°4 - Purificación y secuenciación de acidos nucleicos Benoit Diringer ...Clase N°4 - Purificación y secuenciación de acidos nucleicos Benoit Diringer ...
Clase N°4 - Purificación y secuenciación de acidos nucleicos Benoit Diringer ...Luis Olivera
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...FacuMeza2
 
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersSalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersIván López Martín
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024GiovanniJavierHidalg
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx241523733
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptMiguelAtencio10
 
R1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaR1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaarkananubis
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.241514949
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxJOSEFERNANDOARENASCA
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfsoporteupcology
 
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...JaquelineJuarez15
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas  educativadefinicion segun autores de matemáticas  educativa
definicion segun autores de matemáticas educativaAdrianaMartnez618894
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfSergioMendoza354770
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafiosFundación YOD YOD
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxpabonheidy28
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA241531640
 

Último (20)

KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFEL
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidad
 
Clase N°4 - Purificación y secuenciación de acidos nucleicos Benoit Diringer ...
Clase N°4 - Purificación y secuenciación de acidos nucleicos Benoit Diringer ...Clase N°4 - Purificación y secuenciación de acidos nucleicos Benoit Diringer ...
Clase N°4 - Purificación y secuenciación de acidos nucleicos Benoit Diringer ...
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
 
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersSalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.ppt
 
R1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaR1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en mina
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptx
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
 
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas  educativadefinicion segun autores de matemáticas  educativa
definicion segun autores de matemáticas educativa
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafios
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docx
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
 

Formulario

  • 1. 1-Vamos a empezar con una estructura HTML base y guardamos este archivo como index.html: 2-Creamos una hoja de estilos, le ponemos de nombre estilos.css y la ubicamos en la misma carpeta en donde está el .HTML El siguiente código define las propiedades de fuente, color de fondo y longitud del body:
  • 2. 3-Hacemos un selector para el formulario y le definimos border, border-radius, padding, margin, y color de fondo: 4-En la línea 17 estamos definiendo dos sombras: una externa y otra interna que da la apariencia de un borde interior.
  • 3. 5-Para las cajas de textos usamos selectores múltiples, para los input y para el text área: *Nota que en la línea 26 y 34 se usa el selector input[type=’text’] esto es para que no se mezcle con el otro input[type=’submit’]. 6-Por ultimo para el botón de envió usaremos estilos similares a los de las cajas de textos, pero además va a tener bordes redondeados, sombra al texto y para el background le pondremos degradados CSS3: