Crear un formulario en HTML

Os voy a enseñar a crear un formulario en html de la forma más explicativa posible.

Como requisito decir que se necesita tener algunas nociones básicas en html para entender el código.
Si no sabes nada de HTML puedes descárgarte este manual que está muy bien explicado.

Lo primero para empezar es crear un documento en blanco.  Si estás usando linux  pulsa con el botón derecho  Crear un documento/Archivo nuevo, el nombre por ejemplo formulario.html, lo importante es que termine en .html

Como editor de texto os recomiendo que uséis SciTE, si usáis windows pues notepad++

Aquí os enseño a traducir muy fácilmente SciTE.

Como navegador podéis uar cualquiera pero yo recomiendo que uséis Firefox.

El código lo podéis descargar este enlace “Formulario”

Está en PDF porque si pego el código en html al tener etiquetas el blog interpreta el código y es un lío.

El resultado del código es una cosa más o menos así.

El código es este.

Ahora voy a explicar como se hace y que es cada cosa.

NOTA En vez de usar “<>” en la explicación usaré corchetes “[]

Todo formulario tiene que ir entre las etiquetas [form][/form]

Las etiquetas [center][/center] sirven para dejar el formulario centrado.

Las etiuquetas [table] son para hacer tablas [table border=X] X es para ponerle un grosor al borde de la tabla.

Veamos que hace esta línea:

[form name="datos" method="post" action="archivo.php"]

La palabra form como ya he dicho más arriba es la que empieza el formulario.

name= sirve para darle un nombre al formulario

method= existen dos métodos post y get la diferencia entre estos dos métodos está en la forma de enviar los datos a la página, mientras que el método GET envía los datos usando la URL post no muestra vía url a donde se envían los datos, por cuestiones de seguridad es mejor usar post siempre que se pueda.

action= sirve para indicar a donde se van a enviar los datos introducidos en el formlario, en este caso se envía a un archivo .php llamado “archivo.php”

Otra línea.

[tr][td]Nombre: [td][input type="text"]

tr es la etiqueta que se usa para hacer una fila en una tabla

td es la etiqueta que se usa para hacer una celda en una tabla

Nombre es la palabra que queremos que se vea en el formulario

Input type= hay varios tipos, text, password etc sirve para indicar el tipo de información que se va a introducir text muestra el texto tal cual pero password muestra asteriscos en la pantalla para que no se pueda ver la contraseña introducida.

br simplemente sirve para hacer un salto de línea.

ACLARACIÓN me acabo de dar cuenta que he puesto los br en la tabla porque estaba haciendo pruebas en el archivo html y los he subido así sin querer de modo que como no son necesarios podéis borrarlos.

[tr][td>Contrase&ntilde;a: [td][input type="password" size="8" maxlength="8" value="Hola" name="contraseña"]

Contrase&ntilde;a “&ntildesin comillas sirve para poner la letra ñ.

Size= es el tamaño que queremos que tenga la caja de texto, si no ponemos size el tamaño será igual que en la caja de texto de la fila “Nombre”

maxlength= Esta propiedad puede utilizarse para limitar la longitud del texto que se escribe de datos de modo que podemos tener un size=8 y un maxlength=50 en pantalla veríamos como se va desplazando el texto que vamos introduciendo.

Value=”Hola” Es lo que queremos que imprima en pantalla pero en este caso da igual que pongamos Hola que Pepe o Casa porque como en la etiqueta hemos puesto un input type=”password” nos mostrará *** (uno por cada caracter introducido en el value)

name= es el nombre de la variable que se le da a la celda (en este caso “contraseña”) si sabes que es una variable se entiende mucho mejor.

[tr][td][input type="submit" value="Enviar"]

Toda esta línea es el botón “Enviar

input type=”submit” al poner submit estamos diciéndole al navegador que vamos a poner un botón para enviar.

value=”Enviar” Value es lo que queremos que aparezca dentro del botón en este caso Enviar pero podría ser “Listo”, “Mandar” etc

[td][input type="reset" value="Borrar"]

input type=”reset” sirve para crear un botón que borre los datos que hay introducidos en un formulario.

Hasta aquí la clase de hoy, otro día cuando tenga más tiempo pongo otra cosita también sencilla y pronto si el tiempo me deja escribiré algo sobre PHP.

Saludos.

About these ads

1 comment so far

  1. ehcomunicacion on

    Como información a añadir te indico que scite también está disponible para sistemas windows. Me gusta porque es ligerísimo. Pero me gustaría añadirle botones.


Deja un comentario

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

A %d blogueros les gusta esto: