Formulario básico en html.

Hay varias personas que me han preguntado como se hacen los formularios. Yo uso el dreamweaver para hacerlos pero.... Como nunca está demás saber un poco de html, me he puesto a indagar un poquillo.

Ya sé que existe otro tutorial de formularios, quizá se puedan complementar.
http://www.comocreartuweb.com/phpBB2/ftopic4254.html


Este también es básico, así que no se puede enviar por correo electrónico. Para hacer eso se necesita programación php del cual no tengo ni papa.

¿Para qué sirven los formularios? Los formularios nos permiten interactuar con el usuario a través de encuestas, cajas búsquedas y poder enviar información a un correo electrónico.

Lo primero que se necesita es la etiqueta <form></form>. Todo lo que esté dentro de esta etiqueta, formará parte del formulario.

Algunos atributos de form son estos:

Action: Cuando se le da al botón enviar, el action ejecuta una acción de las cuales pueden ser:

* Redirigirte a un archivo o página web donde te puede procesar algún script.
* Te abre el programa de mensajería predeterminado por el usuario, por ejemplo, en windows xp te abre por defecto el outlook.

Ejemplos:

Código:
<form action="http://miweb.com">

<form action="mailto:pepito@hotmail.com">
En el primer ejemplo, el action te enviará a http://miweb.com. En el segundo ejemplo, el action te abrirá el outlook con el destinatario pepito@hotmail.com listo para enviar.

Cuando el action está vacío, la página simplemente se actualiza.

Method: Es la forma por la que viajarán los datos enviados hacia el action. Se puede elegir entre POST y GET. La diferiencia está en que get pasa los datos a través de la url, lo que hace que los datos introducidos se muestren en esta, haciéndolos poco seguros. Este método lo suelen usar los buscadores. El método post, envía la información de los formularios a través de la entrada estándar Stdio. Este método es más seguro y permite mandar más cantidad de información ya que los datos no se muestran en la url.

Name: Es el identificador del formulario.

Campos de texto

Name: Identificador del campo de texto.

Size: Tamaño del campo.

Maxlength: Limita la cantidad de carácteres en el campo (letas, números).

length : Limita el número de carácteres que se muestran en pantalla.

Value: Te da la opción de colocar texto dentro del campo.

Ejemplo:

<input name="nombre" type="text" size="20" maxlength="20" Value="texto que se muestra en el formulario"/>

label: Muestra texto al lado de cada campo. Este texto, es leído por los navegadores de síntesis vocal, proporcionándole ayuda a los discapacitados.

Ejemplo:

<label>Nombre:
<input name="nombre" type="text" size="20" maxlength="20" />
</label>

Campo de texto con contraseña

<label>Contraseña:
<input name="campo" type="password" id="campo" size="20" maxlength="20" />
</label>

Área de texto

Name: Identificador.

Size: Tamaño del campo.

Value: Te da la opción de colocar texto dentro del campo.

Cols: Número de columnas (ancho del campo).

Rows: Número de líneas (alto del campo).

Ejemplo:

<label>Introduzca su comentario:
<textarea name="textarea" cols="10" rows="20"></textarea>
</label>

Casilla de verificación

Name: Identificador.

Checked: Activa la casilla de verificación.

Ejemplo:

<input name="checkbox" type="checkbox" checked="checked" />

Botón de opción

Name: Identificador.

Checked: Marca el botón como activado.

Ejemplo:

<input name="radiobutton" type="radio" checked="checked" />

Listas de opciones

Name: Identificador.

Size: Nº de opciones que muestra en la lista (El alto).

Multiple: Permite seleccionar varias opciones de la lista.

Selected: Opción seleccionada por defecto.

Ejemplo:

<select name="select" size="1" multiple="multiple">
<option selected>opcion 1 </option>
<option>opcion 2 </option>
</select>

Campo de archivo

Name: Identificador.

Size: Tamaño del campo.

Ejemplo:

<input name="file" type="file" size="10" />

Campo oculto

<input type="hidden" name="hiddenField" />

Botón

<input type="button" value="Texto del botón">

Botón de envio

<input type="submit" value="Enviar">

Botón borrar formulario

<input type="reset" value="Borrar">



Formularios con Dreamweaver 8

Lo primero es crear el formulario (etiquetas <form></form>)

1.Menú insertar/formulario/formulario.





2.Para insertar un elemento de formulario, misma operación. Menú insertar/formulario/campo de texto.

Te mostrará una ventana de accesibilidad donde le puedes poner la etiqueta label y las teclas de acceso rápido del teclado.



3.Seleccionas el campo y te vas al inspector de propiedades donde le podrás dar el name(Campo de texto), Ancho de carácteres, Carácteres máximos, etc..