FORMULARIOS EN HTML5En primer lugar abrimos notepad++ y empezamos digitando las siguentes etiquetas.Luego guardamos en una...
Y podemos ver que con la etiqueta text nos permite digitar nuestro nombre.Y ahora podemos digitar nuestro nombre.De igual ...
Y para separar y que se mire de forma ordenada, simplemente colocamos la etiqueta BR.Ahora podemos rellenar los recuadros ...
Después aremos lo mismo que hicimos con el nombre y el apellido pero en este caso lo aremos para colocarle unacontraseña.A...
Luego le vamos a colocar la etiqueta SUBMIT, que es un boton que nos sirve para enviar la informacion seleccionada aotra p...
Ahora tambien le colocaremos REQUIRED a las otras opciones terminando en la contraseña.El siguente paso es darle una alter...
Podemos ir colocandole diferrentes detalles como fecha para lo cual utilizamos esta estructura:<label>Fecha:</label><input...
Y tambien podemos colocarle una barra, la cual nnos permite elegir el color que querramos, siguendo estaestructura:<input ...
<input type="number"max="10"min="0"value"5"/><br/><br/><br/>Y de esta manera podemos colocarle todos los retoques necesari...
Upcoming SlideShare
Loading in …5
×

Formularios en html5

467 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
467
On SlideShare
0
From Embeds
0
Number of Embeds
161
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Formularios en html5

  1. 1. FORMULARIOS EN HTML5En 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 formatodehtml.Para ejecutar la pagina vamos a la opcion run y seleccionamos launch in Chrome.
  2. 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. 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 puedeelegir una.
  4. 4. Después aremos lo mismo que hicimos con el nombre y el apellido pero en este caso lo aremos para colocarle unacontraseña.Ahora le vamos a colocar 2 opciones que me permitan seleccionar una de ellas para ello le voy a colocar la etiquetaradio, 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 unarchivo.Luego al ejecutarla nos sale la opcion de seleccionar un archivo ya sea imagen o video.
  5. 5. Luego le vamos a colocar la etiqueta SUBMIT, que es un boton que nos sirve para enviar la informacion seleccionada aotra 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 aempezar con el nombre.
  6. 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 siguenteetiqueta.<label>Tu correo</label><input type="amail" value="tunombre@domino.com"><br/><br/>
  7. 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. 8. Y tambien podemos colocarle una barra, la cual nnos permite elegir el color que querramos, siguendo estaestructura:<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. 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 unapágina en este modelo.

×