Los Formularios

Los Formularios HTML

Un formulario es una zona

interactiva de nuestra
página web, donde le
proporcionamos al usuario
controles y campos para
que ingrese o elija datos.

2
Los Formularios

La Etiqueta Form: Definir el formulario

<form ….. >

………..

</form>

3
Los Formularios

La Etiqueta Form: Atributo action y method

<form action=“file.php" method=“POST/GET">

…….
…….
…….
<input type="submit" >

</form>

Action Para definir la Página Dinámica que tomará los datos.

Method Método de envió de datos por POST o GET. 4
Los Formularios

Métodos de envío de datos: Atributo Method

<form action=“file.php"
method =“GET">

<form action=“file.php"
method =“POST">

5
Los Formularios
Métodos de envío de datos: Atributo Method
MÉTODO CONCEPTO
GET lleva los datos de forma
"visible" al cliente (navegador web).
GET
El medio de envío es la URL. Los
datos los puede ver cualquiera.
POST consiste en datos "ocultos"
(porque el cliente no los ve)
enviados por un formulario cuyo
POST
método de envío es post. Es
adecuado para formularios. Los
datos no son visibles.
OBSERVACIONES
Los datos son visibles por la URL, por ejemplo:
www.empresa.com/
action.php?nombre=pedro&apellidos1= gomez
La ventaja de usar POST es que estos datos no son
visibles al usuario de la web. En el caso de usar get,
el propio usuario podría modificar la URL escribiendo
diferentes parámetros a los reales en su navegador,
dando lugar a que la información tratada no sea la
prevista.
6
Los Formularios

Estructura básica para tomar datos

<form action=“file.php" method=“POST/GET">

Título-del-Campo
<input type=“tipo-de-control” name=“Nombre-de-Control">

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

</form>
7
Los Formularios

Etiqueta INPUT

Input Etiqueta para definir los Campos de entrada en un formulario

mediante un tipo de control

Atributos de INPUT
✓ type Definir el tipo de control.
✓ name Definir el Nombre del Control.
✓ value Definir un valor inicial por defecto.

<input type=“tipo-de-control” name=“Nombre-de-Control">

8
Los Formularios

Etiqueta INPUT

Tipos de Controles (TYPE) …

▪ input type=text • input type=file

▪ input type=radio • input type=search
▪ input type=checkbox • input type=tel
▪ input type=password • input type=url
▪ input type=submit • input type=date
▪ input type=reset • input type=month
▪ input type=button • input type=week
▪ input type=email • input type=time
▪ input type=hidden • input type=datetime-local
▪ input type=number • input type=range
▪ input type=image • input type=color 9
Los Formularios

Etiqueta INPUT

Tipos de Controles (TYPE) …

TEXT define una caja de texto que permite a los usuarios editar una sola
línea de texto regular.

Nombre <input type="text" name=“txtNomb" value=“Benjamín”>

Apellido <input type="text" name=“txtApel“

placeholder=“Escriba su apellido completo”>

10
Los Formularios

Etiqueta INPUT

Tipos de Controles (TYPE) …

TEXT define una caja de texto que permite a los usuarios editar una sola
línea de texto regular.

Atributos que pueden acompañar a TEXT

SIZE
para establecer el ancho del control como un número de
caracteres visibles

MAXLENGTH
para establecer el número máximo de caracteres que el valor
puede tomar.

11
Los Formularios

Ejemplo 01: Ingresar un Nombre; envío de datos por método POST

<form action="file.php" method="POST">

<p>
Ingrese su Nombre
<input type="text" name="txtNombre">
</p>

<p><input type="submit" value="Enviar Datos"></p>

</form>

12
Los Formularios

Ejemplo 02: Etiqueta Label.

<form action="file.php" method="POST">

<p><label>Ingrese su Nombre
<input type="text" name="txtNombre">
</label></p>

<p> <input type="submit" value="Enviar Datos"> </p>

</form> 13
Los Formularios

Ejemplo 02-B: Etiqueta Label (otra forma).

<p><label for=“txtNombre_ID”>Ingrese su Nombre</label> </p>

<p><input type="text" name="txtNombre“ id=“txtNombre_ID”></p>

14
Los Formularios

Etiqueta INPUT

Tipos de Controles (TYPE) …

RADIO

CHECKBOX

15
Los Formularios

Etiqueta INPUT

Ejemplo RADIO

<p>
<label>Empleo actual:<br>
<input type="radio" name="RdEmpActual"
value="tiempocompleto"> Tiempo completo<br>

<input type="radio" name="RdEmpActual"

value="mediodia"> Medio día<br>

<input type="radio" name="RdEmpActual"

value="sinempleo"> Sin empleo
</label>
</p>

El atributo checked permite activar la

selección por defecto. 16
Los Formularios

Etiqueta INPUT

Ejemplo CHECKBOX

<p>
<label> Intereses:<br>
<input type="checkbox" name="cbAutos"
value="Los Autos"> Autos<br>

<input type="checkbox" name="cbDepor"

value="Los Deportes"> Deportes<br>

<input type="checkbox" name="cbVidJue"

value="Los Videos Juegos"> Videojuegos
</label>
</p>

17
Los Formularios

Etiqueta INPUT

Ejemplo: PASSWORD

<p>
<label>Usuario
<input type="text" name="txtUser"></label></p>

<p>
<label>Contraseña
<input type="password" name="passClave"></label></p>
</p>

18
Los Formularios y PHP

Ejemplo: ingreso-de-datos.php

<form action="tomar-datos.php" method="POST">

<p>
<label>Usuario
<input type="text" name="txtUser"></label>
</p>

<p>
<label>Contraseña
<input type="password" name="passClave"></label>
</p>

<p><input type="submit"></p>
<p><input type="reset"></p>
</form>

19
Los Formularios y PHP

Ejemplo: tomar-datos.php

<?php

// Tomar datos del formulario

$vUser = $_POST["txtUser"];
$vPass = $_POST["passClave"];

// escribir datos tomados

echo $vUser."-".$vPass

?>
20
Los Formularios

Etiqueta SELECT

<p><label>Deporte favorito:
<select name="selDeporte">
<option value="">Eligir opción...</option>
<option>Fútbol</option>
<option>Caminata</option>
<option> Básquetbol</option>
<option> Hockey</option>
<option> Tenis</option>
</select>
</label></p>
21
Los Formularios

Etiqueta TEXTAREA
Establecer un campo para la entrada de texto multilínea.

<p><label>Escriba su comentario ...<br>

<textarea name="descripcion"
cols="40" rows="5">
</textarea>
</label></p>

22
Los Formularios

Ejemplo 03: Etiquetas Fieldset y Legend.

<form action="file.php" method="POST">

<fieldset>
<legend>Formulario de Entrada de Datos</legend>
<p><label>Ingrese su Nombre
<input type="text" name="txtNombre">
</label> </p>
…
</fieldset>
23

</form>
Los Formularios

Ejemplo 03: Etiquetas Fieldset y Legend.

<fieldset>
agrupar cada conjunto de campos relacionados
entre sí.

<legend>
descriptivo de cada grupo de campos.

24
Los Formularios

Los Formularios – Form

El atributo AUTOCOMPLETE de Form

<form
action="respuesta.php"
method="post"
autocomplete=“on/off“
>

autocomplete=”off”.
Impide que el navegador memorice lo ingresado en
todos sus inputs. 25
Los Formularios

Atributo autofocus: posicionar el cursor automáticamente en el primer

campo a completar

<input type="text"
name="txtNombre"
placeholder="Escriba su nombre”
autofocus
>

26
Los Formularios

Atributo Required: fijar que el campo necesita de un dato obligatorio.

Sirve para validar que se tenga un dato.

<input type="text"
name="txtNombre"
placeholder="Escriba su nombre”
required
>

27
Los Formularios

Atributo Pattern: fijar un patrón para el ingreso de datos.

Ingresar su Edad
<input type="text"
name=“txtEdad"

pattern="[0-9]{1,2}"
>

Ingresar en el campo solamente dígitos del 0 al 9 y en una cantidad

de entre 1 y 2 dígitos

28
Los Formularios

… Ejemplos varios

<input type="number" min="0" max="100" step="10" value="50">

<input type="url" name="diario" list="sugerencias">

<datalist id="sugerencias">
<option label="La Nación" value="http://www.lanacion.com.ar"></option>
<option label="Clarín" value="http://www.clarin.com"></option>
<option label="Página 12" value="http://www.pagina12.com.ar"></option>
<option label="Infobae" value="http://www.infobae.com"></option>
</datalist>

29
Los Formularios

… Ejemplos varios

<label>Seleccionar el archivo para subir: <br><br>

<input type="file" name="documento" accept=".doc">
</label><br><br>

<input type="submit" name="enviar" value=" Subir ">

30
Ejercicio:
Definir los Campos y visualizar los datos ingresados/seleccionado
usando código php.

31