Whaleshares Logo

Aprende a diseñar tu propia pagina web tutorial HTML #4 Formularios

erick777Posted for Everyone to comment on, 5 years ago3 min read

Un Gusto en saludarles mis queridos lectores para mi es un placer de traerles la 4ta parte del curso de diseño web.

A continuación les traigo lo que será un curso de HTML para todos aquellos que quieren comenzar con lo que es el diseño de páginas web el cual también nos servirá para mejorar nuestra presentación debido a las etiquetas que se pueden utilizar, nos sirven para trabajar en la creación de nuestro post. Primeramente es importante saber que las páginas web están desarrolladas con lenguajes de marcado como el HTML, que pueden ser interpretados por los navegadores y es muy fácil su edición.

curso-de-diseño-web.png

fuente de la imagen

  • Primeramente abrimos nuestro anterior documento si no lo tienes puedes visualizarlo y crearlo

    aqui

  • Podemos utilizar el anterior documento o crear uno nuevo yo en mi caso comenzare uno nuevo.
  • Para comenzar comenzamos con la etiqueta form, ella nos permite crear el formulario, la etiqueta label nos permite colocar el titulo que tendrá la caja de texto y la etiqueta input que es la que nos crea la caja de texto

uno.jpg

  • Si lo pudiste apreciar en la etiqueta Input se puede observar varios atributos estos son:
    1. type: Nos indica el tipo de variable que utilizaremos en la caja de texto, en mi caso las dos primeras coloque text ya que son texto los que colocare allí, la tercera le coloque password, debido que colocare una contraseña en la mencionada caja
    2. name: Esta nos indica la palabra clave que definirá nuestra caja de texto para cuando utilicemos código de programación como el php.

    3. dos.jpg

      • Podemos añadirle mas atributos a nuestra caja uno de estos es placeholder que nos coloca un texto en la caja el cual se borra cuado escribimos en la caja de texto

      tres.jpg

      4.jpg

      Aquí puedes visualizar en las cajas como se ve y como se borra las letras al escribir

      • Ahora agregaremos un selector para que podamos seleccionar fechas o países.


      cinco.jpg

      • Colocamos también un botón, su función es enviar los datos que uno introduzca a el formulario

      seis.jpg

      • Podemos observar como quedo el selector y el botón que hemos creado.

      7.jpg

      • Ahora podemos ordenarlos y dejarlos uno debajo del otro colocando un < b r > para que pase a la siguiente linea

      ocho.jpg

      • Para que el formulario tenga un mejor aspecto te mostrare este preámbulo al css y le agregare una imagen de fondo y le cambiare el color a la etiqueta label

      9.jpg

      La imagen debe estar guardada donde mismo guardaste la ubicacion de la pagina en la misma carpeta


      • Ahora nuestra pagina nos queda así y nuestro formulario obtiene un mejor aspecto.

      d10.jpg

      Así me despido una vez más un saludo para todos los lectores, próximo capitulo Sorpresa.!!

      modificado.png

      Sigueme en mis redes sociales


      twitter.jpg Tw facebook.jpg Fb instagram-logo-gif-9.jpg Ig

      Todas las fotografías son captures de mi propiedad.

      -Puedes apoyar y votar como witnesses a @beyondbitcoincas en el siguiente link https://whaleshares.io/~witnesses

      Puedes unirte al servidor de Discord en el BBCas haciendo click aquí


      Captura de pantalla 2018-08-20 a la(s) 22.06.34.png

Sign Up to join this conversation, or to start a topic of your own.
Your opinion is celebrated and welcomed, not banned or censored!