Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 67

Visitas el mes pasado: 69

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




10. Formularios (I)

10.1 Contenido: Texto

Paso 24

logo miweb

Qué es un formulario

Los formularios permiten recoger información sobre el usuario. Mediante un formulario el usuario responde a una serie de preguntas. Nosotros podemos recoger las respuestas que éstos dan.

Las preguntas que ponemos en un formulario pueden ser abiertas, de manera que el usuario responde mediante un texto, o cerradas, es decir el usuario elige entre una serie de opciones que le damos.

El formulario tiene una estructura dentro de la página, es decir, para crear un formulario, este tiene sus propias etiquetas y atributos en el lenguaje HTML. Esto es lo que veremos a continuación.

El archivo formulario.html

Al igual que hemos hecho para crear las páginas anteriores, utilizaremos aquí también el archivo plantilla.html como base para nuestra página. Por lo tanto al igual que con las páginas anteriores abrimos primero el archivo plantilla.html con el editor de textos.

Una vez abierto el archivo hacemos una copia del mismo, pero con otro nombre. Pulsamos para ello en "Archivo / Guardar como (o Salvar Como)", y al guardarlo le ponemos el nombre formulario.html.

Cambiar la cabecera

Al igual que hemos hecho al crear las páginas anteriores, aquí también cambiamos la cabecera o etiqueta head, para cambiar el título y añadir un enlace a un archivo CSS que crearemos más adelante.

Con el archivo formulario.html abierto con el editor de textos, modificamos la cabecera, de manera que quede como en las siguientes líneas:

  <head>
    <link rel="stylesheet" type="text/css" href="general.css" />
    <link rel="stylesheet" type="text/css" href="formulario.css" />
    <title>Formulario en Mi Propia Web</title>
  </head>

Hemos seguido los mismos pasos que para las páginas anteriores: Ponemos un enlace a un archivo CSS específico para la página, y le cambiamos el título.

Contenido: Título y párrafos

Tal como hemos hecho en las páginas anteriores, escribiremos todo el contenido dentro del div id="principal" de la etiqueta body. Dejaremos las demás secciones tal y como están.

Con el archivo formulario.html abierto en el editor de textos, dentro de la etiqueta div id="principal" escribimos lo siguiente:

  <div id="principal">
  <h2>Formulario de prueba</h2>
  <p>La forma principal de interactuar con el usuario, y que pueda mandarnos algunos 
     datos es mediante formularios. Un formulario es una serie de preguntas que se 
     hacen al usuario para que este responda.</p>
  <p>El siguiente formulario es un formulario de prueba. Suponemos que hemos creado 
    un foro o un chat, y pedimos al usuario que rellene el formulario para 
    hacerse usuario del mismo.</p>
  <h3>Formulario de ingreso</h3>
	
  </div>

En azul el texto que hemos puesto nuevo. Hemos incluido aquí el título de la sección (etiqueta h2), unos párrafos explicativos (etiquetas p, y después el título del formulario (etiqueta h3).

Cerramos y guardamos el archivo formulario.html y vamos a ver lo que hemos hecho hasta ahora. Para ello lo abrimos después con el navegador, el cual debe tener el siguiente aspecto:

Iniciar el formulario

Vamos ahora a crear el formulario. Todo el formulario va incluido dentro de la etiqueta <form> </form>. Dentro de esta etiqueta incluiremos todo lo que vaya dentro del formulario. La etiqueta tiene una serie de atributos que debemos poner para que el formulario funcione. Vamos primero a crear la etiqueta en nuestra página y luego explicaremos lo que hemos hecho.

Abrimos el archivo formulario.html con el editor de textos y en la sección div id="principal", debajo de lo que ya hemos escrito, pondremos lo siguiente:

  <form action="mailto:micorreo@servidor.com" enctype="text/plain" method="post" 
     name="foro" id="foro">

		 
  </form>

La etiqueta form tiene varios atributos, vamos a explicar cada uno de ellos:

A partir de ahora todo lo que escribamos en el archivo formulario.html irá incluido dentro de la etiqueta form. Para pedir los datos al usuario incluiremos una serie de etiquetas llamadas también "campos". La etiqueta principal para pedir datos es la etiqueta input, aunque también hay otras. La etiqueta input lleva siempre el atributo type que indica el tipo de datos que se piden. por ejemplo:

<input type="text" />

La etiqueta input no tiene etiqueta de cierre, es por eso que ponemos antes de cerrarla una barra inclinada. esta etiqueta crea el espacio en donde el usuario puede incluir su respuesta, por lo que debemos acompañarla de otras etiquetas que digan lo que queremos que responda.

Vamos a seguir construyendo nuestro formulario. Además de las etiquetas input pondremos también otras etiquetas de texto que completan el contenido del formulario. Con el archivo formulario.html abierto en el editor de textos, modificamos la etiqueta form. Par ello incluimos el texto que ponemos aquí en azul:

  <form action="mailto:aprendeweb@aprende-web.net" enctype="text/plain" method="post" 
     name="foro" id="foro">
    <div class="seccion">
      <h4>Datos personales</h4>
      <p>Nombre: <input type="text" name="nombre" /></p>
      <p>Contraseña: <input type="password" name="Contraseña" /></p>
			
    </div>
		
  </form>

Dentro del formulario organizamos los elementos que lo componen. En primer lugar ponemos un div de clase. Éste formará la primera parte del formulario. Dentro de él ponemos una etiqueta de título, para el primer apartado del formulario. Después, dentro de unas etiquetas de párrafo, incluimos los input y su explicación.

Las etiquetas input las incluimos aquí dentro de los párrafos para que formen parte de éstos.

La primera etiqueta input type="text" crea un recuadro en el que el usuario puede escribir un texto.

La segunda etiqueta input type="password" (contraseña), crea también un recuadro en el que el usuario puede escribir, pero a diferencia del primero, aquí al escribir el texto, éste se muestra oculto.

El atributo name lo pondremos siempre en todo tipo de inputs", ya que nos da la referencia sobre el tipo de dato que estamos pidiendo, y su valor aparecerá también en el e-mail, como el nombre del tipo de dato.

Cada etiqueta "input" o de otra clase que pongamos para pedir un dato se llama también campo. Un campo de un formulario es una etiqueta donde le pedimos al usuario un dato.

Continuamos ahora el formulario. Sin cerrar el archivo, en el editor de textos incluiremos un segundo apartado. Aquí utilizaremos una etiqueta textarea. Incluiremos por tanto lo siguiente (texto en azul)

  <form action="mailto:aprendeweb@aprende-web.net" enctype="text/plain" method="post" 
     name="foro" id="foro">
    <div class="seccion">
      <h4>Datos personales</h4>
      <p>Nombre: <input type="text" name="nombre" /></p>
      <p>Contraseña: <input type="password" name="Contraseña" /></p>
      <h4>Mi perfil</h4>
      <p>Escribe cómo quieres presentarte ante los demás usuarios del foro</p>
      <p><textarea  name="descripcion">Mi perfil: </textarea>
			
    </div>
		
  </form>

La etiqueta textarea crea también un recuadro en el que el usuario puede escribir datos para enviar. La diferencia con input type="text" es que textarea se usa para pedir que se escriba un texto largo, y no un dato concreto. El recuadro que tiene el usuario para escribir es bastante más grande, y con varias líneas.

La etiqueta <textarea> tiene siempre etiqueta de cierre (</textarea>). Podemos no escribir nada entre medio, o escribir un texto, que es el que aparecerá dentro del recuadro por defecto.

Con lo visto hasta ahora vamos a ver cómo queda nuestra página. Par ello cerramos y guardamos el archivo formulario.html, y lo abrimos después con el navegador. El resultado debe ser como en el siguiente enlace:

Vemos que todos los elementos que ponemos nos quedan centrados. Sin embargo no nos preocupemos ahora del estilo. Más tarde nos ocuparemos de ello. Debemos comprobar que los campos funcionan, y que podemos escribir en ellos.

Continuaremos poniendo más tipos de campos en nuestro formulario. Pero esto ya será en el siguiente paso.




En el siguiente paso seguimos construyendo el formulario. Pondremos campos en los que el usuario puede elegir entre una serie e opciones. Veremos también cómo poner los botones de control del formulario para mandarlo o reiniciarlo.

Formularios: Botones




Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com