SlideShare ist ein Scribd-Unternehmen logo
1 von 9
FORMULARIOS EN HTML5
En primer lugar abrimos notepad++ y empezamos digitando las siguentes etiquetas.
Luego guardamos en una carpeta y le damos el nombre de FORMULARIOS.HTML y escogemos el tipo o el formatode
html.
Para ejecutar la pagina vamos a la opcion run y seleccionamos launch in Chrome.
Y podemos ver que con la etiqueta text nos permite digitar nuestro nombre.
Y ahora podemos digitar nuestro nombre.
De igual manera utilizamos label e INPUT para colocar el apellido, ademas de la etiqueta html.
Y para separar y que se mire de forma ordenada, simplemente colocamos la etiqueta BR.
Ahora podemos rellenar los recuadros con nuestros nombres y apellidos de la siguente manera.
Para formar una lista utilizamos la etiquta Select, en el cual podemos colocarle una lista cualquiera como la siguente.
No solo podemos colacarle 2 si no muchas mas, en este caso le he colocado 3 opciones mas de las cuales se puede
elegir una.
Después aremos lo mismo que hicimos con el nombre y el apellido pero en este caso lo aremos para colocarle una
contraseña.
Ahora le vamos a colocar 2 opciones que me permitan seleccionar una de ellas para ello le voy a colocar la etiqueta
radio, la cual permite crear un boton.
el siguiente tag se para escoger un archivo en el cual colocaremos la etiquta file, el cual nos permite seleccionar un
archivo.
Luego al ejecutarla nos sale la opcion de seleccionar un archivo ya sea imagen o video.
Luego le vamos a colocar la etiqueta SUBMIT, que es un boton que nos sirve para enviar la informacion seleccionada a
otra pagina.
Si yo quiero que aparezca un comentario al final como por ejemplo que rechace la informacion porque faltan datos,
simplemente le coloco la etiqueta REQUIRED para que el usuario complete todos los datos que se le pide vamos a
empezar con el nombre.
Ahora tambien le colocaremos REQUIRED a las otras opciones terminando en la contraseña.
El siguente paso es darle una alternativa al usuario para que coloque el correo, para ello utilizarremos la siguente
etiqueta.
<label>Tu correo</label>
<input type="amail" value="tunombre@domino.com"><br/><br/>
Podemos ir colocandole diferrentes detalles como fecha para lo cual utilizamos esta estructura:
<label>Fecha:</label>
<input type="date"/><br/><br/>
De igual forma podemos colocarle el color esta estructura:
<label>Color</label>
<input type="color"/><br/><br/>
Y tambien podemos colocarle una barra, la cual nnos permite elegir el color que querramos, siguendo esta
estructura:
<input type="range"max="20"min="10"step"5"/><br/><br/>
Ahora le asignare los numeros para ello utiizamos la siguente estructura:
<label>Numero:</label>
<input type="number"max="10"min="0"value"5"/><br/><br/><br/>
Y de esta manera podemos colocarle todos los retoques necesarios a nuestra página web, y al final nos quedara una
página en este modelo.

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (14)

410167 Delicious Qué Es Y Cómo Usarlo
410167 Delicious Qué Es Y Cómo Usarlo410167 Delicious Qué Es Y Cómo Usarlo
410167 Delicious Qué Es Y Cómo Usarlo
 
Html
HtmlHtml
Html
 
Informatica
InformaticaInformatica
Informatica
 
Unidad 5 la busqueda 1
Unidad 5 la busqueda 1Unidad 5 la busqueda 1
Unidad 5 la busqueda 1
 
Sacar gmail
Sacar gmailSacar gmail
Sacar gmail
 
Tutorial ms word 2010
Tutorial ms word 2010Tutorial ms word 2010
Tutorial ms word 2010
 
trabajo de tics 1 "A" .2° unidad
trabajo de tics 1 "A" .2° unidad trabajo de tics 1 "A" .2° unidad
trabajo de tics 1 "A" .2° unidad
 
Pagina web en html
Pagina web en htmlPagina web en html
Pagina web en html
 
Guía visual
Guía  visualGuía  visual
Guía visual
 
Google drive
Google driveGoogle drive
Google drive
 
Mela
MelaMela
Mela
 
Navegadores web
Navegadores webNavegadores web
Navegadores web
 
Html 1
Html 1Html 1
Html 1
 
Que es html
Que es htmlQue es html
Que es html
 

Ähnlich wie Formularios en html5

Ähnlich wie Formularios en html5 (20)

Lista Dinamica desde MySQL hacía PHP
Lista Dinamica desde MySQL hacía PHPLista Dinamica desde MySQL hacía PHP
Lista Dinamica desde MySQL hacía PHP
 
Formularios con html5
Formularios con html5Formularios con html5
Formularios con html5
 
Formulario en html 5
Formulario en html 5Formulario en html 5
Formulario en html 5
 
Informatica
InformaticaInformatica
Informatica
 
Informatica
InformaticaInformatica
Informatica
 
Informatica
InformaticaInformatica
Informatica
 
Texto del manual de html
Texto del manual de htmlTexto del manual de html
Texto del manual de html
 
Html
HtmlHtml
Html
 
El primer código que vamos a utilizar es el del nombre y el de los apellidos
El primer código que vamos a utilizar es el del nombre y el de los apellidosEl primer código que vamos a utilizar es el del nombre y el de los apellidos
El primer código que vamos a utilizar es el del nombre y el de los apellidos
 
Formatos de texto html
Formatos de texto htmlFormatos de texto html
Formatos de texto html
 
Correo electronico
Correo electronicoCorreo electronico
Correo electronico
 
Correo electronico
Correo electronicoCorreo electronico
Correo electronico
 
TUTORIAL DE HTML
TUTORIAL DE HTMLTUTORIAL DE HTML
TUTORIAL DE HTML
 
Curso HTML 5 & jQuery - Leccion 5
Curso HTML 5 & jQuery - Leccion 5Curso HTML 5 & jQuery - Leccion 5
Curso HTML 5 & jQuery - Leccion 5
 
Escuela Abierta - Taller de Html
Escuela Abierta - Taller de HtmlEscuela Abierta - Taller de Html
Escuela Abierta - Taller de Html
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Google drive paso a paso
Google drive paso a pasoGoogle drive paso a paso
Google drive paso a paso
 
Trabajoprcticon5 110521133301-phpapp01
Trabajoprcticon5 110521133301-phpapp01Trabajoprcticon5 110521133301-phpapp01
Trabajoprcticon5 110521133301-phpapp01
 
Action scrip pipe
Action scrip pipeAction scrip pipe
Action scrip pipe
 
Formularios HTML
Formularios HTMLFormularios HTML
Formularios HTML
 

Mehr von Sonia Fernanda Idrobo Idrobo

Mehr von Sonia Fernanda Idrobo Idrobo (20)

Mantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivoMantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivo
 
Mantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivoMantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivo
 
Mantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivoMantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivo
 
Pasos para realizar mentenimiento preventivo
Pasos para realizar mentenimiento preventivoPasos para realizar mentenimiento preventivo
Pasos para realizar mentenimiento preventivo
 
Mantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivoMantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivo
 
Mantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivoMantenimiento preventivo y correctivo
Mantenimiento preventivo y correctivo
 
Pasos para realizar mentenimiento preventivo
Pasos para realizar mentenimiento preventivoPasos para realizar mentenimiento preventivo
Pasos para realizar mentenimiento preventivo
 
Botones pulsantes
Botones pulsantesBotones pulsantes
Botones pulsantes
 
Clips de pelicula
Clips de peliculaClips de pelicula
Clips de pelicula
 
Fundamentales de action script
Fundamentales de action scriptFundamentales de action script
Fundamentales de action script
 
Condicionales
CondicionalesCondicionales
Condicionales
 
Puertos pc
Puertos pcPuertos pc
Puertos pc
 
Pagina web audio y video
Pagina web audio y videoPagina web audio y video
Pagina web audio y video
 
Pagina web audio y video
Pagina web audio y videoPagina web audio y video
Pagina web audio y video
 
Puertos pc
Puertos pcPuertos pc
Puertos pc
 
Flotar bolitas
Flotar bolitasFlotar bolitas
Flotar bolitas
 
Flotar bolitas
Flotar bolitasFlotar bolitas
Flotar bolitas
 
Flotar bolitas
Flotar bolitasFlotar bolitas
Flotar bolitas
 
2° pagina web html5
2° pagina web html52° pagina web html5
2° pagina web html5
 
Flotar bolitas
Flotar bolitasFlotar bolitas
Flotar bolitas
 

Formularios en html5

  • 1. FORMULARIOS EN HTML5 En primer lugar abrimos notepad++ y empezamos digitando las siguentes etiquetas. Luego guardamos en una carpeta y le damos el nombre de FORMULARIOS.HTML y escogemos el tipo o el formatode html. Para ejecutar la pagina vamos a la opcion run y seleccionamos launch in Chrome.
  • 2. Y podemos ver que con la etiqueta text nos permite digitar nuestro nombre. Y ahora podemos digitar nuestro nombre. De igual manera utilizamos label e INPUT para colocar el apellido, ademas de la etiqueta html.
  • 3. Y para separar y que se mire de forma ordenada, simplemente colocamos la etiqueta BR. Ahora podemos rellenar los recuadros con nuestros nombres y apellidos de la siguente manera. Para formar una lista utilizamos la etiquta Select, en el cual podemos colocarle una lista cualquiera como la siguente. No solo podemos colacarle 2 si no muchas mas, en este caso le he colocado 3 opciones mas de las cuales se puede elegir una.
  • 4. Después aremos lo mismo que hicimos con el nombre y el apellido pero en este caso lo aremos para colocarle una contraseña. Ahora le vamos a colocar 2 opciones que me permitan seleccionar una de ellas para ello le voy a colocar la etiqueta radio, la cual permite crear un boton. el siguiente tag se para escoger un archivo en el cual colocaremos la etiquta file, el cual nos permite seleccionar un archivo. Luego al ejecutarla nos sale la opcion de seleccionar un archivo ya sea imagen o video.
  • 5. Luego le vamos a colocar la etiqueta SUBMIT, que es un boton que nos sirve para enviar la informacion seleccionada a otra pagina. Si yo quiero que aparezca un comentario al final como por ejemplo que rechace la informacion porque faltan datos, simplemente le coloco la etiqueta REQUIRED para que el usuario complete todos los datos que se le pide vamos a empezar con el nombre.
  • 6. Ahora tambien le colocaremos REQUIRED a las otras opciones terminando en la contraseña. El siguente paso es darle una alternativa al usuario para que coloque el correo, para ello utilizarremos la siguente etiqueta. <label>Tu correo</label> <input type="amail" value="tunombre@domino.com"><br/><br/>
  • 7. Podemos ir colocandole diferrentes detalles como fecha para lo cual utilizamos esta estructura: <label>Fecha:</label> <input type="date"/><br/><br/> De igual forma podemos colocarle el color esta estructura: <label>Color</label> <input type="color"/><br/><br/>
  • 8. Y tambien podemos colocarle una barra, la cual nnos permite elegir el color que querramos, siguendo esta estructura: <input type="range"max="20"min="10"step"5"/><br/><br/> Ahora le asignare los numeros para ello utiizamos la siguente estructura: <label>Numero:</label>
  • 9. <input type="number"max="10"min="0"value"5"/><br/><br/><br/> Y de esta manera podemos colocarle todos los retoques necesarios a nuestra página web, y al final nos quedara una página en este modelo.