Practica 6 Formularios

Programación web I
FORMULARIOS
Formularios básicos
Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas:
<form> y <input>. Si se considera el formulario que muestra la siguiente imagen:
Formulario sencillo definido con las etiquetas form e input
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Prueba de formulario</title>
<meta charset="UTF-8">
</head>
<body>
<form action="" method="get">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
<input type="submit" value="enviar">
</form>
</body>
</html>
Practica Página Web con formularios
Ana Linda Pineda Mendez

Programación web I
La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros
de texto, listas desplegables) y la etiqueta <input> permite definir varios tipos
diferentes de elementos (botones y cuadros de texto).
La mayoría de formularios utilizan sólo los atributos action y method. El atributo
action indica la URL de la aplicación del servidor que se encarga de procesar los
datos introducidos por los usuarios. Esta aplicación también se encarga de
generar la respuesta que muestra el navegador.
El elemento input. Este elemento que nos permite definir cuadros de texto y botón
para subir los datos al servidor. También podemos definir cuadros para el ingreso
de una clave y botones para borrar el contenido de todos los controles del
formulario.
type = "text | password | checkbox | radio | submit | reset | file | hidden | image |
button" - Indica el tipo de control que se incluye en el formulario
name = "texto" - Asigna un nombre al control
(value = "texto" - Valor inicial del control size = "unidad_de_medida" - Tamaño
inicial del control (para los campos de texto y de password se refiere al número de
caracteres)
Cuadro de texto
Se trata del elemento más utilizado en los formularios. En el caso más sencillo, se
muestra un cuadro de texto vacío en el que el usuario puede escribir cualquier
texto:
Ejemplo de etiqueta input (type=text)
A continuación se muestra el código HTML correspondiente al ejemplo anterior:

Programación web I
Nombre <br/> <input type="text" name="nombre" value="" />
Botón de envío de formulario

La mayoría de formularios dispone de un botón para enviar al servidor los datos
introducidos por el usuario:
Ejemplo de etiqueta input (type=submit)
<input type="submit" name="buscar" value="Buscar" />
El valor del atributo type para este control de formulario es submit. El navegador
se encarga de enviar automáticamente los datos cuando el usuario pincha sobre
este tipo de botón. El valor del atributo value es el texto que muestra el botón. Si
no se establece el atributo value, el navegador muestra el texto predefinido
<textarea>
Mensajes:<textarea placeholder="comentarios" name="textarea" rows="10"

cols="50">Es un inicio</textarea> <br><br>
El elemento textarea representa un campo para la entrada de texto multilínea. El

control asociado a este campo es una caja de texto que permite a los usuarios
editar múltiples líneas de texto regular. Los controles textarea son útiles para
recolectar o editar líneas largas de texto como mensajes, contenido de archivos,
listas, reseñas, artículos, etc.
Adicionalmente, declararemos el atributo placeholder con una pista acerca del
contenido que se espera sea ingresado en el control, el cual será mostrado dentro
de la caja de texto cuando ésta esté vacía.
Los atributos cols y rows para establecer el número de caracteres que el control
podrá mostrar al mismo tiempo, horizontal y verticalmente. Los navegadores
calcularán el ancho y la altura del elemento, multiplicando estos números por el
ancho y la altura de de un carácter de la fuente utilizada.
select (<select>)
El elemento select (<select>) de HTML representa un control que muestra un

menú de opciones. Las opciones contenidas en el menú son representadas por
elementos <option>
Lista de opciones <select name="estados">

<option value="morelos">Morelos</option>
<option value="chiapas">Chiapas</option>
<option value="puebla">Puebla</option>
</select><br><br>
El elemento HTML <option> se usa para representar un item dentro de un

<select>

Programación web I
lista multiple seleccion:<select name="transporte" size="2" multiple>

<option>Informatica</option>
<option>Contaduria</option>
<option>Administracion</option>
</select><br><br>
A la etiqueta <select> le podemos aplicar el atributo multiple, de modo que

desaparecerá la posibilidad de desplegar la lista

Practica 6 Formularios

Cargado por

Copyright:

Formatos disponibles

Practica 6 Formularios

Cargado por

Información del documento

Descripción original:

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

Practica 6 Formularios

Cargado por

Copyright:

Formatos disponibles

Programación web I

Formulario sencillo definido con las etiquetas form e input

Practica Página Web con formularios

Ana Linda Pineda Mendez

Ana Linda Pineda Mendez

Nombre <br/> <input type="text" name="nombre" value="" />

Botón de envío de formulario

Mensajes:<textarea placeholder="comentarios" name="textarea" rows="10"

El elemento textarea representa un campo para la entrada de texto multilínea. El

El elemento select (<select>) de HTML representa un control que muestra un

Lista de opciones <select name="estados">

El elemento HTML <option> se usa para representar un item dentro de un

Ana Linda Pineda Mendez

lista multiple seleccion:<select name="transporte" size="2" multiple>

A la etiqueta <select> le podemos aplicar el atributo multiple, de modo que

Ana Linda Pineda Mendez

También podría gustarte