Formularios HTML: qué son y cómo hacerlos

FORMULARIOS EN
HTML

¿Qué son los formularios? ¿Cómo se
hacen?

¿Qué son formularios?
 Una herramienta que hace posible obtener
datos de algo en específico.

 En internet los formularios recolectan
información online con interacción del usuario
para ejecutar una acción.

Que son
que?

¿Cómo se hacen los
formularios?
 Para definir los elementos interactivos hay
cinco etiquetas que junto con atributos y
modificadores indican como recolectar
información y manejarla después de
recolectada.

Cálmate! No es tan
difícil una vez que lo
entiendes y lo pones en
práctica :D

Etiqueta <FORM>
 Todo formulario debe estar encerrado entre las
etiquetas <FORM> y </FORM> que a su vez
debe ubicarse entre el <BODY> y </BODY>
del documento HTML. Esta etiqueta <FORM>
presenta tres atributos posibles:
Comando Descripción
El valor de este
parámetro es la URL
del programa o guión
ACTION en el Servidor Web
utilizado para procesar
la información

Etiqueta <FORM>

Puede asumir el valor
GET o el valor POST, y
METHOD definen la manera en la
cual los datos son
transferidos al servidor.

 El valor GET: NO PUEDO!!

Todas las variables se enviarán por la
dirección HTML. Ósea que los datos
guardados aparecen en la barra de
direcciones

Etiqueta <FORM>

 El valor POST:
Básicamente envía las variables de forma
“oculta” para que nadie pueda ver los datos
que ha enviado al pulsar el botón de envío de
formulario.
<form action=”url” method=”post”>…</form>

<form action=”url” method=”get”>…</form>

Qué es eso?

Etiqueta <FORM>

 El atributo o
Éste atributo está
reservado para que la parámetro
ENCTYP
E
información viaje en ENCTYPE es
forma encriptado a optativo y no es
través de Internet.
realmente
importante.

YEAH!!

Etiqueta <INPUT>
 Se la puede definir como una etiqueta multifunción,
ya que con la misma podemos crear "push
buttons", "radio buttons", "check boxes", y simples
recuadros para ingresar texto.
 Posee ocho posibles parámetros: ALIGN,
CHECKED, MAXLENGTH, NAME, SIZE, SRC,
TYPE, y VALUE.

Que RAYOS!!

Etiqueta <INPUT>
 Pero no se asusten! Los
atributos cruciales para toda
etiqueta <INPUT> son:

 NAME: que asocia un nombre
con cada variable ingresada.
 TYPE: que puede asumir los No te
valores TEXT, PASSWORD, atragantes!!

CHECKBOX, RADIO,
SUBMIT, RESET, IMAGE y
HIDDEN

Etiqueta <INPUT>

Todo de acuerdo al tipo de elemento que queramos
representar.
<form action=”url” method=”post”>

<INPUT NAME="nombre" MAXLENGTH="25" TYPE="TEXT"
VALUE="">
Ó
<INPUT NAME="boton" TYPE="SUBMIT" VALUE="Enviar">

</form>

Etiqueta <SELECT>
 Este par de etiquetas
define una lista de
elementos de los
cuales el usuario debe
seleccionar uno o
varios, de acuerdo a
los atributos que
especifiquemos.

Etiqueta <OPTION>
 Con esta etiqueta definimos cada elemento de
las listas designadas con el par <SELECT> y
</SELECT>.

Etiqueta <TEXTAREA>
 Este par de etiquetas nos permiten definir un
area de dimensiones arbitrarias que funciona
como una suerte de editor, donde el usuario
puede ingresar texto.

Controlamos el
tamaño del area de
texto con los
parámetros ROWS y
COLS

¿Cómo construir un
formulario?
 Un formulario siempre debe llevar el atributo
NAME para poder identificar el nombre de la
variable que se alojará.
<FORM>
<INPUT TYPE="text"
NAME="nombre">
</FORM>
 También se le puede dar un valor
predeterminado
<FORM>
<INPUT TYPE="text" NAME="nombre" VALUE="J.J.
Lopez">
</FORM>

¿Cómo construir un
formulario?
 Los atributos SIZE se puede aplicar tamaño al
formulario, si no se especifica por defecto se
aplicara tamaño 20.
 Con MAXLENGTH se aplica el limite de
caracteres.
<FORM>
<INPUT TYPE="text" NAME="nombre" SIZE=30
MAXLENGTH=15>
</FORM>

Radio Buttons y Check Boxes
 Los Radio Buttons le permiten al usuario
seleccionar una entre varias opciones. En
cambio las Check Boxes le dan la posibilidad
de elegir una o más opciones.

Radio Buttons
<FORM>
<INPUT TYPE="radio" NAME="equipos" VALUE="cuervo">San Lorenzo
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="gallina">River
Plate
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="bostero">Boca
Juniors
</FORM>

Radio Buttons
 Con el atributo CHECKED le indicamos al
navegador cual de todas las opciones debe
aparecer marcada por defecto.
<FORM>
¿Quién será el campeón del torneo
argentino?<BR>
<BR><INPUT TYPE="radio" NAME="equipos"
VALUE="cuervo" CHECKED>San
Lorenzo…</FORM>

Check Boxes
<FORM>
<INPUT TYPE="checkbox"
NAME="cuervo" VALUE="YES">San
Lorenzo…</FORM>

Es
DEMACIADO!!

Listas en Formularios
 Utilizamos la etiqueta <SELECT> en lugar de
la utilizada anteriormente <INPUT> que a
diferencia debe ser cerrada con su para
</SELECT>.
<FORM>
<SELECT NAME="equipos">
<OPTION VALUE="cuervo">San Lorenzo
<OPTION VALUE="gallina">River Plate
<OPTION VALUE="bostero">Boca
Juniors
<OPTION VALUE="rojo">Independiente
<OPTION VALUE="academia">Racing
Club
</SELECT>
</FORM>

Botones SUBMIT y RESET
<FORM>
<INPUT TYPE="submit" VALUE="Enviar Datos">
<INPUT TYPE="reset" VALUE="Borrar Datos">
</FORM>

 Este tipo de boton envía la información
(SUBMIT). Mientras que el RESET lo que
hace es borrar las modificaciones realizadas
por el usuario y regresar todos los valores por
defecto. Se puede cambiar el texto de los
botones con VALUE.

Formularios HTML: qué son y cómo hacerlos

Formularios HTML: qué son y cómo hacerlos

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Formularios HTML: qué son y cómo hacerlos

Similaire à Formularios HTML: qué son y cómo hacerlos (20)

Dernier

Dernier (20)

Formularios HTML: qué son y cómo hacerlos