Manualhtml

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.
0 Transitional//EN">
< html>
< head>
<title>Mándanos tus comentarios</title>
< /head>
< body bgcolor="#cccc66" text="#003300" link="#006060" vlink="#006060">

< ?
if (!$HTTP_POST_VARS){
?>
< form action="envia_form_php.php" method=post>
Nombre: <input type=text name="nombre" size=16>
< br>
Email: <input type=text name=email size=16>
< br>
Comentarios: <textarea name=coment cols=32 rows=6></textarea>
< br>
< input type=submit value="Enviar">
< /form>
< ?
}else{
//Estoy recibiendo el formulario, compongo el cuerpo
$cuerpo = "Formulario enviado\n";
$cuerpo .= "Nombre: " . $HTTP_POST_VARS["nombre"] . "\n";
$cuerpo .= "Email: " . $HTTP_POST_VARS["email"] . "\n";
$cuerpo .= "Comentarios: " . $HTTP_POST_VARS["coment"] . "\n";
//mando el correo...
mail("admin@tudominio.com","Formulario recibido",$cuerpo);
//doy las gracias por el envío

echo "Gracias por rellenar el formulario. Se ha enviado correctamente.";
}
?>
< /body>
< /html>
_____________________________________________________________________________
Java script
Codigo:
<head>
<script language="javascript">
function validar_edad() {
if ( edad.value='' )
alert('Ingresa tu edad') ; return false ; }
</script>
</head>
Ahora hay que agregar el codigo a la etiqueta form de esta forma:
Codigo:
<form method="post" action="http://www.melodysoft.com/cgi-bin/form.cgi
onsubmit="validar_edad()">
Edad: <input type="text" name="edad">
Html
12.6 Formularios avanzados

Agrupación de etiquetas
Es posible mejorar el aspecto de un formulario agrupando varias etiquetas en

un mismo apartado. Para ello utilizaremos la etiqueta <fieldset> ...
</fieldset>. Dentro de ella incluiremos varios campos. Esta etiqueta agrupa
dentro de un cuadro a los campos incluidos dentro de ella.
Además también podemos poner una cabecera o título al cuadro que forma la
etiqueta fieldset mediante la etiqueta: <legend>texto</legend>, la
cual debe estar también incluida en la etiqueta fieldset
Mediante un ejemplo vemos primero el aspecto en el navegador de la

aplicación de estas etiquetas:
datos personales
nombre:
Apellido:
Correo electrónico:
El código HTML utilizado para agrupar los elementos de este ejemplo es el

siguiente:
<form ....>
<fieldset>
<legend>datos personales</legend>
<p>nombre: <input type="text" name="nombre"/></p><br/>
<p>Apellido: <input type="text"
name="apellido"/></p><br/>
<p>Correo electrónico: <input type="text"
name="correo"/></p>
</fieldset>
...
</form>
Mediante la etiqueta fieldset se crea un cuadro que agrupa varios

elementos del formulario. En un formulario podemos incluir varias etiquetas
fieldset con sus correspondientes etiquetas legend, creando así varios
apartados dentro del formulario
La etiqueta legend debe estar incluida dentro de la etiqueta fieldset y

como se ve en el ejemplo le da el título al cuadro.
En el siguiente enlace se muestra el formulario de ejemplo dado en páginas

anteriores, mejorado mediante las etiquetas fieldsdet y legend.
ejemplo de formulario mejorado
título del campo de formulario
En la mayoría de los controles de formulario no hay establecida una relación

entre el campo y el texto que se muestra junto al control. Hasta ahora el texto
que se muestra junto al campo se incluye en forma de texto normal, sin
ninguna referencia al campo que describe.
En algunos programas o bases de datos que procesan los formularios, puede

ser necesaria esta referencia; para ello en HTML se dispone de la etiqueta
<label>...</label>, la cual debe encerrar el texto que se mostrará como
título del formulario.
La referencia entre el texto de esta etiqueta y su control se hace mediante los
siguientes atributos:
 En la etiqueta label incluiremos el atributo

for="referencia"
 En la etiqueta del control (input, select,
textarea, ...) incluiremos el atributo
id="referencia".
 El valor del atributo for y del atributoid es lo que
relaciona el titulo con su etiqueta, por lo que
deben ser el mismo para una mismo control y
distinto del de los demás controles con los que no
esté relacionado.
Veamos el código HTML de un ejemplo:
<label for="apellido">apellido</label>: <input type="text"

name="apellido" id="apellido"/>
El aspecto de este control de formulario será el siguiente:
apellido:
Aunque aparentemente tiene el mismo aspecto que sin la etiqueta label la

diferencia en la pantalla es que al pulsar con el ratón encima del título queda
seleccionado el campo al que hace referencia; esto puede ser útil en los
controles de botones de radio y checkbox.
Los botones de enviar, borrar, y "boton normal" no necesitan la etiqueta "label",

ya que su texto va incluido dentro del botón.
En el siguiente enlace se muestra el formulario del enlace anterior, al que se le

han añadido las etiquetas label correspondientes, con los atributos
necesarios para poner título a todos los campos.
ejemplo de formulario con etiquetas de título
Estilo en formularios
El estilo o aspecto que queremos darle a un formulario, es decir, tipo y tamaño

de letra, márgenes, bordes, colores e imágenes de fondo, etc., puede y debe
hacerse mediante el código CSS, para ello basta con aplicar las mismas
propiedades que para los textos, párrafos, etc. El tratamiento de cualquier
elemento del formulario, incluso los botones, por medio de estilo CSS es similar
a cualquier otro elemento de la página, pudiendo usar las mismas propiedades.
Las propiedades más usadas suelen ser las de texto, margenes, etc.
Completamos aquí el tema de formularios en HTML. Pasamos al siguiente
tema:
Diseño de páginas
Los formularios
 Formularios
 Campos de texto
 Opciones
 Botones del formulario
 Marcas de verificación
 Campos ocultos
arriba
Formularios
Las páginas webs no son solo permiten presentar documentos de forma más o menos atractiva al
destinatario final, sino que también proporcionan elementos para interactuar con él. De esta
manera el usuario final puede enviar su opinión de la página al autor, o realizar una compra en
línea. Estos elementos se conocen como formularios y seguro que todos los habéis visto y utilizado
alguna vez. Por ejemplo este sencillo formulario
Tu nombre:
¿Estás registrado?
Si
No
<FORM ACTION="" METHOD="POST" name="formul">

Tu nombre:<BR>
<INPUT NAME="nombre" TYPE="TEXT" SIZE="32"/><BR>
¿Estás registrado?<br>
<label><input type="radio" name="Si" value="1">Si</label><br>
<label><input type="radio" name="Si" value="0">No</label><br><BR>
<INPUT TYPE="Submit" VALUE="Enviar">
<input name="Reset" type="reset" id="Reset" value="Borrar">
</FORM>
El formulario está formado por una serie de elementos (cajas de texto, casillas de verificación,
botones...) encerrados entre las etiquetas <FORM> </FORM>. Como verás en esta etiqueta
existen varios parámetros como son:
ACTION la acción que se ejecutará al pulsar el botón de enviar. Habitualmente será una URL a un
programa CGI encargado de procesar los datos del formulario. Puede ser también mailto: seguido
de una dirección de correo electrónico, en este caso el formulario se enviará por correo, en cuyo
es recomendable añadir el parámetro ENCTYPE="text/plain" para que el mensaje sea fácil de
leer.
METHOD indica como se enviarán losa datos del formulario al programa que los procese: POST de
forma interna (oculta) y GET añadido a la dirección URL del programa. Si usas el formulario para
un mailto: debes usr el método POST
NAME es el nombre que identifica al formulario, útil si se usan scripts dentro de la página.
arriba
Cajas de texto
Los controles o cajas de texto permiten al usuario escribir texto en el formulario. Pueden ser cajas
de una solo línea o cuadros de texto con varias líneas. Las primeras usan la etiqueta <INPUT> y
pueden ser de texto simple (se ve lo que escribimos) o de tipo password (lo que escribimos es
visto como una serie de asteriscos).
<INPUT TYPE=TEXT>
<INPUT TYPE=PASSWORD>
Ojo, el dato escrito en el segundo campo no se ve pero eso no quiere decir que esté codificado
en ninguna manera. Ambos tipos comparten todos sus atributos que son:
Parámetro Significado
SIZE Tamaño en columnas de la caja de texto.
MAXLENGTH Número máximo de caracteres que se pueden teclear.
VALUE Texto por defecto que aparecerá en el campo.
Pero si necesitamos que el usuario escriba más llineas de texto pues usamos la etiqueta
<TEXTAREA></TEXTAREA>:
<TEXTAREA>Comienza a escribir </TEXTAREA>
Si escribimos algun texto dentro de esta etiqueta, ese texto aparecerá por defecto en ese area
de texto. Admite estos parámetros:
Parámetro Utilidad
ROWS Filas que ocupará la caja de texto.
COLS Columnas que ocupará la caja de texto.
arriba
Opciones
Para que el usuario pueda marcar una de entre varias opciones podemos usar un campo INPUT
de tipo RADIO. En nuestro ejemplo lo hemos usado:
Si<INPUT NAME="Registrado" TYPE=RADIO
VALUE="1"><BR> Si
No<INPUT NAME="Registrado" TYPE=RADIO
VALUE="0"><BR> No
Fíjate que ambos INPUT usan el mismo atribuyto NAME , de esa manera el navegador los
reconoce como un juego de respuestas alternativas.
VALUE Este es el valor que asignará a la variable.
CHECKED Si lo indicamos en una de las opciones esta será la que esté activada por defecto.
arriba
Listas de opciones
Hay una alternativa al control de selección de alternativas: las listas desplegables. Mediante este
control el usuasrio puede seleccionar una opción de entre un grupo que aparece en una lista
desplegable. La lista se encierra en etiquetas <SELECT></SELECT>, y las opciones se poenen en
etiquetas <OPTION></OPTION>:
<SELECT NAME="Idioma">
<OPTION>Español</OPTION>
<OPTION>Inglés</OPTION>
<OPTION>Francés</OPTION>
<OPTION>Alemán</OPTION>
</SELECT>
Los parámetros que admite SELECT son las siguientes:
SIZE El número de opciones que podremos ver. Si es mayor que 1 veremos una lista de
selección con un scroll y, si no, veremos una lista desplegable.
MULTIPLE Si lo indicamos podremos elegir más de una opción, para ello el usuario utilizará la
tecla CTRL y el botón activo del ratón.
Y OPTION estos:
VALUE Este es el valor que asignará a la variable.
SELECTED La opción con esta propiedad será la que aparezca seleccionada por defecto.
arriba
Botones del formulario
Existen dos clases e botones: uno que se utiliza para poner en marcha la operación indicada
por ACTION (botones submit) y otro que sirve para resetear el formulario borrando el
contenido de todos los controles:
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
En ambos casos su puede usar el parámetro VALUE para el texto que aparece dentro del botón. El
botón de submit puede ser una imagen, por ejemplo
<input name="imageField" type="image"

src="imgs/botonel.gif"
width="85" height="46" border="0">
Que se vería
Este botón actua como un botón tipo SUBMIT, pero envía con los datos del formulario las
coordenadas X Y del punto de la imagen donde pulsó el usuario.
arriba
Marcas de verificación
Son controles parecidos a los campos de opciones pero que no van agrupados, o sea no son
excluyentes, Sirven para que el usuario coloque una marca de si o no (verdadero o falso,
marcado o no marcado). Lo podremos conseguir por medio de controles de confirmación:
<INPUT NAME="Opina" TYPE=CHECKBOX>¿Te gusta el curso?

¿Te gusta el curso?
Si queremos que el control esté activado por defecto le añadiremos el parámetro CHECKED.
arriba
Campos ocultos
Mediante un formulario podemos también enviar datos al programa encargado de procesarlo. Esto
se realiza mediante los llamados campos ocultos, que son campos INPUT de tipo HIDDEN, y se
llaman así porque no se ven en la página web, o sea, el usuario no los ve a menos que se mete en
la vista de código de la página, digo esto poruqe no vayamos a pensar que con estos campos
podemos pasar información privada mediante los formularios. El código para este tipo de campos
es algo como esto:
<INPUT TYPE=HIDDEN NAME="Curso" VALUE="Javascript">
De esta manera si en un sitio tengo muchos formularios sabré que estos datos en concreto vienen
de la página de Javascript. Su uso realmente no lo verás hasta que no escribas o utilices
programas para gestionar los formularios.
arriba
__________________________________________________________________________
Php
1. echo "<h1>Selecciona una fruta</h1>";

2.
3. //abrimos el select
4.
5. //(el size indica el ancho del select)
6.
7. echo '<select name="frutas" size="5">';
8.
9. //realizamos la conexión
10.
11. mysql_conecta($link);
12.
13. //realizamos la consulta
14.
15. $respuesta=mysql_query("select fruta_id, fruta_nombre from frutas",
$link);
16.
17. //recorremos los datos
18.
19. while($fila=mysql_fetch_array($respuesta)){
20.
21. echo '<option value="'.$fila["fruta_id"].'">
22.
23. '.$fila["fruta_nombre"].'></option>';
24.
25. }
26.
27. //cerramos el select
28.
29. echo '</select>';

Manualhtml

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manualhtml

Cargado por

Copyright:

Formatos disponibles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.

< body bgcolor="#cccc66" text="#003300" link="#006060" vlink="#006060">

//doy las gracias por el envío

alert('Ingresa tu edad') ; return false ; }

Ahora hay que agregar el codigo a la etiqueta form de esta forma:

Edad: <input type="text" name="edad">

12.6 Formularios avanzados

Es posible mejorar el aspecto de un formulario agrupando varias etiquetas en

Mediante un ejemplo vemos primero el aspecto en el navegador de la

El código HTML utilizado para agrupar los elementos de este ejemplo es el

Mediante la etiqueta fieldset se crea un cuadro que agrupa varios

La etiqueta legend debe estar incluida dentro de la etiqueta fieldset y

En el siguiente enlace se muestra el formulario de ejemplo dado en páginas

ejemplo de formulario mejorado

título del campo de formulario

En la mayoría de los controles de formulario no hay establecida una relación

En algunos programas o bases de datos que procesan los formularios, puede

 En la etiqueta label incluiremos el atributo

Veamos el código HTML de un ejemplo:

<label for="apellido">apellido</label>: <input type="text"

El aspecto de este control de formulario será el siguiente:

Aunque aparentemente tiene el mismo aspecto que sin la etiqueta label la

Los botones de enviar, borrar, y "boton normal" no necesitan la etiqueta "label",

En el siguiente enlace se muestra el formulario del enlace anterior, al que se le

ejemplo de formulario con etiquetas de título

El estilo o aspecto que queremos darle a un formulario, es decir, tipo y tamaño

 Botones del formulario

<FORM ACTION="" METHOD="POST" name="formul">

<TEXTAREA>Comienza a escribir </TEXTAREA>

Los parámetros que admite SELECT son las siguientes:

Botones del formulario

<input name="imageField" type="image"

<INPUT NAME="Opina" TYPE=CHECKBOX>¿Te gusta el curso?

<INPUT TYPE=HIDDEN NAME="Curso" VALUE="Javascript">

1. echo "<h1>Selecciona una fruta</h1>";

También podría gustarte