Formularios HTML

Walther Carpio Rebaza

Taller de Programacin Web
Lima, 17 de Septiembre del 2016

Objetivos:

Analizar y comprender el uso de etiquetas de

formularios en HTML

Formularios
<form>
Elementos del Formulario.
</form>

La etiqueta <form>, nos permite

definir un formulario en HTML

Atributos del Formulario

<form action=procesa.php"method="GET"target="_blank"
accept-charset="UTF-8"
autocomplete="off" novalidate>
.
Elementos del formulario.
</form>

Atributos bsicos de un formulario

Elementos de un Formulario
Cuadro de Texto Text Box
<P>Nombre del Libro: <Input Type=Text Name=NombreLibro Size=40></P>

Elementos del Formulario

1

Text:
<inputtype="text"> permite definir un campo de entrada, en
una lnea.

<form>
Nombre:<br>
<input type="text" name=txt_nombre">
<br>
Apellidos:<br>
<input type="text" name=txt_apellidos">
</form>

Elementos del Formulario

1.1 Input,typePassword:
.
<form action="validar_Datos.php">
Usuario:<br>
<input type="text" name="usuario" value="wcarpior">
<br>
Clave de Acceso: <br>
<input type="password" name="clave" value="123456">
<br>
<input type="submit" value="Ingresar al Sistema">
</form>

Elementos del Formulario

1.2 Input,typedate:
<form action="validar_Datos.php">
Nombre del Curso:<br>
<input type="text" name="curso"
value="Matemticas"><br>
FechadeRegistro:<br>
<inputtype="date"name="fecha"><br>
<input type="submit" value="Ingresar al Sistema">
</form>

Elementos del Formulario

2

Radio Button:
<inputtype="radio"> , define un botn de radio.
<form>
<input type="radio" name="sex" value=hombre" checked>Hombre
<br>
<input type="radio" name="sex" value=mujer">Mujer
</form>

Elementos del Formulario

3

Botn Submit:
Permiteenviarunformularioaotroformularioguadeejecucino
procesamiento.

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

<form>
<input type="radio" name="sex" value=hombre" checked>Hombre
<br>
<input type="radio" name="sex" value=mujer">Mujer
<br>
<input type="submit" value="Enviar">
</form>

Elementos del Formulario

4

Etiqueta <select>:
Nospermitedefinirunalistadesplegable.
<form action="action_enviar_datos.php">
<select name="text_autos">
<option value="cod_toyota">Toyota</option>
<option value="cod_nissan">Nissan</option>
<option value="cod_hyundai" selected>Hyundai</option>
<option value="cod_audi">Audi</option>
</select>

Elementos del Formulario

5

Etiqueta <datalist>:
Nospermitemostrarunalistadeopcionespredifiniasparainput.
<form action="action_enviar_datos.php">
<input list="Universidades" name="txt_universidad">
<datalist id="Universidades">
<option value="UTP">
<option value="San Marcos">
<option value="UPC">
<option value="UPSP">
<option value="UPAO">
</datalist>
<br>
<input type="submit" value="Enviar Datos">
</form>

Elementos del Formulario

6

Etiqueta <textarea>:
Nospermitedefiniruncampodeentradadevariaslneas.
<form action="action_page.php">
<textarea rows="4" cols="50" name="direccion"
maxlength="50" autofocus>
Datos a contener
Otra Lnea
</textarea>
</form>

Campos de entrada
type="" Indicar el tipo de variable a introducir.

maxlenght="" Seguido de un valor que limitar el nmero mximo de

carcteres a introducir en ese campo.
size="" Seguido de un valor que limitar el numero de carcteres a mostrar en
pantalla.
value="" Indica que no hay valor inicial del campo.
Password Indica que el campo a introducir ser una palabra de paso. Mostrar
asteriscos en lugar de letras escritas. Sus atributos sern los mismos que para text.
CheckboxEl campo se elegir marcando de entre varias opciones una casilla
cuadrada.
value="" Entre comillas se indicar el valor de la casilla.
checked La casilla aparecer marcada por defecto.

textIndica que el campo a introducir ser un texto. Sus atributos:

Radio El campo se elegir marcando de entre varias opciones una casilla

circular.
value="" Entre comillas se indicar el valor de la casilla.

ImageEl campo contendr el valor en coordenadas del punto de la imagen que

haya pinchado. Atributo obligatorio:
src="" Entre comillas escribiremos el nombre del archivo de imagen.

hidden El visitante no puede modificar su valor ya que no est visible. Se

manda siempre junto al atributo value= seguido de su valor entre comillas.

Name="" Indicar el nombre que se asigna a un determinado campo.

Checkboxes
<Form Name=Libros>
<P>...
<Input Type=CheckBox Checked=1>Habilitado
Checked=1>
</P>
</Form>

Otros Botones de Accin

<Form Name=Libros>
<P>...
<Input Type=Button Name=Guardar Value=Guardar>
<Input Type=Button Name=Salir Value=Salir><BR>
<Input Type=Submit Name=GuardaSale Value=Guardar y Salir>
<Input Type=Reset Name=Cancelar Value=Cancelar>
</P>
</Form>

Otros Inputs
Hidden escondido
<Input Type=Hidden Name=Usuario Value=r mndez>

File archivo
<Input Type=File Name=Portada Size=30>

Ejercicios

Uso del Select, alineado a la derecha y con ancho definido

Uniendo dos celdas de una fila(Uso del colspan)

Otros Formatos:

<input list="listacolores">

Introduce tu edad: <input

<datalist id="listacolores">
<option value="Azul"> type="number"
<option value="Rojo"> name="edad">
<option
value="Amarillo">
<option value="Negro">
<option value="Blanco">
</datalist>
<input type="range" name="edad" min="18" max="99" step="1"
value="40">

Otros Formatos:

Introduce tu TELEFONO: <input type="tel"

name="telefono">
Introduce tu email: <input type="email"
name="email" pattern="[a-zA-Z0-9_]+([.][a-zA-Z0-9_]
+)*@[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]
{1,5}">