Formas

Contenido
Formas
Definición
La etiqueta XHTML Form
Etiquetas usadas en las formas
2
1
Formas
Ejemplos de formas
Las formas se utilizan en la web para:
Proporcionar información
proveer interactividad
Una forma es un elemento XHTML
Contiene y organiza otros objetos
text boxes
check boxes
buttons
3
4
La etiqueta Form
La etiqueta Form
<form>
Contiene a los elementos de la forma
<form id=“forma" name=“forma" method="post"
action="">
</form>
Atributos Requeridos
method
get/post
Es la manera como se comunica la
forma con el servidor
Action
url del script que va a procesar la forma
5
La etiqueta <input />
Forma Simple
Se usa para configurar los elementos
de la forma, puede incluir
6
<form id="forma" name="forma"
method="post" action="">
<input type="text" name="name"
id="name" />
</form>
text boxes
radio buttons
check boxes
buttons
7
8
<form> atributos
<input> Text box
action
Permite recibir información escrita
Atributos:
Especifica el programa del lado del servidor o el
script que va a procesar los datos de la forma.
id y name
Identifican la forma
method
get
Es el valor por default, los datos se envían en el
URL
post
Los datos se anexan al cuerpo del mensaje.
type=“text”
name
size
maxlength
Value
Nombre
required (HTML5)
placeholder (HTML5)
9
Ejemplo
Ejemplo
10
Ejemplo (cont…)
<form method="get“ action=" http://10.12.128.42/eco ">
formato preferido?
<input type="text" name="formato" size="20"></input>
<br />
Nombre
<input type="text" name="nombre" size="20"></input>
<br /><br />
<input type="submit" value="enviar"></input>
</form>
11
12
<input> Password
Ejemplo
<form method="get"
action="http://10.12.128.42/eco">
La información se oculta
Atributos:
type=“password”
name
size
maxlength
Value
required (HTML5)
Password
placeholder (HTML5)
formato preferido?
<input type="password" name="formato"
size="20"></input><br />
Ejemplo
Nombre
<input type="password" name="nombre"
size="20"></input><br /><br />
******
<input type="submit" value="enviar"></input>
</form>
13
14
<input> Check box
Ejemplo (cont…)
El usuario puede seleccionar una o
mas opciones de un grupo
determinado.
Atributos:
type=“checkbox”
name
checked
value
Ejemplo
¿Que browser prefiere?
IE
Netscape
Opera
15
16
Ejemplo
Ejemplo (cont…)
<h2>Checa todas las que apliquen</h2>
<form method="get" action=" http://10.12.128.42/eco ">
Deportista
<input type="checkbox" name="deportista" /><br /><br />
Mexicano
<input type="checkbox" name="mexicano" /><br /><br />
<input type="submit" value="enviar" />
</form>
17
<input> Radio Button
Ejemplo
El usuario solo puede seleccionar una opción
por cada grupo de ellas.
Cada botón de un grupo tiene el mismo
nombre pero un valor distinto.
Atributos:
Ejemplo
type=“radio”
name
checked
value
18
<h2>Como te consideras de acuerdo a tu actividad física?</h2>
<form method="get" action=" http://10.12.128.42/eco ">
Deportista
<input name="deportista" value="si" type="radio" /><br /><br
/>
No deportista
<input name="deportista" value="no" type="radio" /><br /><br
/>
¿Que browser prefiere?
IE
<input value="enviar" type="submit" />
</form>
Opera
19
20
<textarea>
Ejemplo (cont…)
Permite obtener un “text box” con “scroll”
Atributos:
name
cols
rows
Ejemplo
Descripción del problema
Describa su problema en este espacio
y al terminar pulse el botón…
21
22
<select>
<option>
Se usa para agrupar una lista de opciones
<option> formando así una lista de selecciones.
También se le conoce como “Drop-Down List”
El usuario puede escoger una o mas opciones de
entre la lista predeterminada.
Atributos:
Configura las opciones de una lista
“Select”
Atributos:
name
size
multiple
value
selected
Select con size=“3”
Ejemplo
¿Cual browser prefieres?
¿Cual browser prefieres?
23
24
Ejemplo
Ejemplo (cont…)
<h2>Seleccione las tecnologías que utiliza:</h2>
<form method="post" action=" http://10.12.128.42/eco ">
<select name="Tecnologias" multiple="multiple" size="3">
<option>ASP.NET</option>
<option>C#</option>
<option>VB.NET</option>
<option>XPath</option>
<option>XSL</option>
<option>XQuery</option>
</select><br /><br />
<input type="submit" value="enviar">
</form>
25
26
<input> Reset Button
<input> Submit Button
Se usa para enviar la forma para ser
procesada
Dispara la acción registrada en la forma
<form> provocando que el browser envíe los
datos es decir pares (name , value) de cada
elemento de la forma hacia el servidor de
web.
Atributos:
type=“submit”
name
value
27
Se usa para limpiar todos los
campos de la forma o
asignarles sus valores por
default
Atributos:
type=“reset”
name
value
28
<input> Button
Ejemplo
No hay una acción por default cuando el botón se
oprime.
Usualmente, presionando el botón se invoca una
función en JavaScript
Atributos:
<h2>Proporciona los siguientes datos</h2>
<form method="get“ action=" http://10.12.128.42/eco ">
Nombre
<input type="text" name="nombre" /><br /><br />
type=“button”
name
value
Mayor de edad?
<input type="checkbox" name="mayor" /><br /><br />
<input type="reset" value="borrar" />
<input type="submit" value="enviar" />
</form>
29
Ejemplo (Cont…)
30
Campos ocultos
No se despliegan en la pantalla de browser
Atributos:
type=“hidden”
name
value
<input type=“hidden” name=“item” value=“12345678”/>
31
32
<label>
Ejemplo
Es una etiqueta asociada a un control
Se puede operar el control pulsando
el texto
<label for=“email”>Email: </label>
<input type="text" name=“email” id=“email” />
<h2>Proporciona los siguientes datos</h2>
<form method="get" action=" http://10.12.128.42/eco ">
<label for="nombre">Nombre: </label>
<input type="text" name="nombre" id="nombre" /><br /><br />
<label for="mayor">Mayor de edad </label>
<input type="checkbox" name="mayor" id="mayor"/>
<br /><br />
<input type="reset" value="borrar" />
<input type="submit" value="enviar" />
</form>
O
<label>Email:<input type="text" name=“email”
id=“email” /></label>
33
34
<fieldset>
Ejemplo (Cont…)
Se usa para agrupar
visualmente en la pantalla un
conjunto de elementos de una
forma
La etiqueta <legend>
Se usa para crear una etiqueta de
texto dentro del fieldset
35
36
<fieldset>
HTML5 Inputs
<form action="">
<fieldset>
<legend>Health information:</legend>
Height <input type="text" size="3" />
Weight <input type="text" size="3" />
</fieldset>
</form>
color
date
datetime
datetime-local
email
Month
number
37
range
search
tel
time
url
week
38