Mostrando entradas con la etiqueta formularios. Mostrar todas las entradas
Mostrando entradas con la etiqueta formularios. Mostrar todas las entradas

viernes, 19 de junio de 2020

Métodos GET y POST con PHP

Para enviar información a través de la web tenemos dos métodos que son el protocolo HTTP que emplea el método POST y mediante la URL que emplea el método GET.


Método GET

Es mucho más veloz, pero tiene ciertas limitaciones como la cantidad de datos a enviar, no se permite enviar archivos y se visualiza el valor enviado por el URL, lo que lo puede hacer aparentemente frágil para sistemas de autentificación, pero si se le añade encriptamiento resulta en un método seguro y veloz.

Supongamos el siguiente formulario en una página llamada "formulario.html"
<!DOCTYPE html>
<html>
    <head>
        <title>Formulario GET</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <form action="receptorget.php" method="GET">
            <label>Nombre</label><br/>
            <input type="text" name="txtNombre"/><br/><br/>
            <label>Clave</label><br/>
            <input type="password" name="txtClave"/>
            <br/><br/>
            <select name="txtIdioma">
                <option value="esp">Español</option>
                <option value="ing">Inglés</option>
                <option value="fra">Francés</option>
            </select><br/><br/><br/>
            <button type="submit">Enviar por GET</button>
        </form>  
    </body>
</html>

Se aprecia que en el formulario aparecen dos atributos con sus respectivos valores que son:
  • action: indica a que página viajarán los datos
  • method: indica la forma de enviar los datos, en este caso GET

La salida visual sería:












En una página llamada "receptorget.php" vamos a recibir estos valores enviados por GET, el URL que aparecerá en el navegador tendrá la siguiente forma:

http://localhost/test/receptorget.php?txtNombre=Paul&txtClave=12345&txtIdioma=ing

El código de "receptorget.php" sería:
<?php

$nombre = $_GET["txtNombre"];
$clave = $_GET["txtClave"];
$idioma = $_GET["txtIdioma"];

echo "Nombre: $nombre <br/>";

echo "Longitud de la clave: " . strlen($clave) . "<br/>";

switch ($idioma) {
    case "esp":
        echo "Habla español";
        break;
    case "ing":
        echo "Habla inglés";
        break;
    case "fra":
        echo "Habla francés";
        break;
    case "":
        echo "No ingresó idioma";
        break;
    default:
        echo "ERROR";
        break;
} ?>

El resultado visual sería el siguiente:
Nombre: Paul
Longitud de la clave: 5
Habla inglés 

Método POST

Es menos veloz que el método GET, pero permite enviar una gran la cantidad de datos, incluidos archivos como fotos y no se visualiza los valores enviados en el URL, lo que lo convierte en el método favorito para inicio de sesión.

Supongamos el siguiente formulario en una página llamada "formulario.html"
<!DOCTYPE html>
<html>
    <head>
        <title>Formulario GET</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <form action="receptorget.php" method="POST">
            <label>Nombre</label><br/>
            <input type="text" name="txtNombre"/><br/><br/>
            <label>Clave</label><br/>
            <input type="password" name="txtClave"/>
            <br/><br/>
            <select name="txtIdioma">
                <option value="esp">Español</option>
                <option value="ing">Inglés</option>
                <option value="fra">Francés</option>
            </select><br/><br/><br/>
            <button type="submit">Enviar por POST</button>
        </form>  
    </body>
</html>

Se aprecia que en el formulario aparecen dos atributos con sus respectivos valores que son:
  • action: indica a que página viajarán los datos
  • method: indica la forma de enviar los datos, en este caso POST

La salida visual sería:












En una página llamada "receptorpost.php" vamos a recibir estos valores enviados por POST, el URL que aparecerá en el navegador no tiene ninguna modificación

El código de "receptorget.php" sería:
<?php

$nombre = $_POST["txtNombre"];
$clave = $_POST["txtClave"];
$idioma = $_POST["txtIdioma"];

echo "Nombre: $nombre <br/>";

echo "Longitud de la clave: " . strlen($clave) . "<br/>";

switch ($idioma) {
    case "esp":
        echo "Habla español";
        break;
    case "ing":
        echo "Habla inglés";
        break;
    case "fra":
        echo "Habla francés";
        break;
    case "":
        echo "No ingresó idioma";
        break;
    default:
        echo "ERROR";
        break;
} ?>

El resultado visual sería el siguiente:
Nombre: Paul
Longitud de la clave: 5
Habla inglés 



El método $_Request["name"]

PHP tiene como método de entrada a GET y POST, pero cuando se desconoce el medio por el que llegarán los datos se puede recurrir al método $

<?php
   $nombre = $_REQUEST["txtNombre"];
   $clave = $_REQUEST["txtClave"];
   $idioma = $_REQUEST["txtIdioma"];
?>

Modificaciones de seguridad

Por cuestiones de seguridad y adaptándonos a los nuevos cambios se reemplaza los $_GET y $POST por:
<?php
$dia =  filter_input(INPUT_GET, 'txtIdioma', FILTER_SANITIZE_STRING);
$clave = filter_input(INPUT_POST, 'txtIdioma', FILTER_SANITIZE_STRING); 
?>


miércoles, 1 de mayo de 2019

Formularios en HTML5

Los formularios envían datos a través de los métodos POST y GET, por ello es necesario que los diversos elementos que contendrán los datos que serán enviados se encuentren dentro de las etiquetas FORM

Estructura básica

Todo formulario debe encontrarse entre las etiquetas Form, luego los diversos elementos pueden encontrarse como mejor deseemos, pero lo recomendable es seguir una serie de estándares como utilizar los Fieldset como contenedores de los diversos elementos que pueden ser etiquetas, cajas de texto, botones, etc.

Ejemplo en código:

<form>
  <fieldset>
     Ingrese su usuario:<br/>
     <input type="text" /><br/>
     Ingrese su clave:<br/>
     <input type="password" /><br/><br/>
     <input type="submit" value="Enviar"/>
  </fieldset>                
</form>

Resultado visual:

Ingrese su usuario:

Ingrese su clave:



Títulos, textos, cajas de texto y botones básicos

Podemos colocar un título para cada Fieldset mediante la etiqueta Legend, textos de guía con la etiqueta Label y diversas cajas de texto con la etiqueta Input. Además, botones que pueden ser creados con la misma etiqueta Input o Button.

Ejemplo en código:

<form>
  <fieldset>
     <legend>Titulo</legend>
     <label>Ingrese su usuario:</label><br/>
     <input type="text" /><br/>
     <label>Ingrese su clave:</label><br/>
     <input type="password" /><br/><br/>
     <button>ENVIAR</button>
  </fieldset>
</form>

Resultado visual:


Titulo






Diversos tipos de campos para ingresar información

Tenemos los diferentes tipos con sus respectivas propiedades

Texto normal

Ejemplo en código:

<form>
  <fieldset>
     <legend>INPUT</legend>
     Texto normal: <br/>
     <input type="text"/><br/>
     Texto con valor: <br/>
     <input type="text" value="valor"/><br/>
     Texto solo de lectura: <br/>
     <input type="text" value="no puedes cambiarme" readonly/><br/>
     Texto con placeholder: <br/>
     <input type="text" placeholder="Ingresa tu nombre"/><br/>
     Texto requerido u obligatorio: <br/>
     <input type="text" placeholder="Dale clic a enviar" required/><br/>
     Texto multilíneas: <br/><textarea></textarea><br/>
     <button type="submit">ENVIAR</button>
  </fieldset>
</form>

Resultado visual:


INPUT Texto normal:

Texto con valor:

Texto solo de lectura:

Texto con placeholder:

Texto requerido u obligatorio:

Texto multilíneas:



Texto para contraseñas

Ejemplo en código:

<form>
  <fieldset>
     <legend>CONTRASEÑAS</legend>
     Contraseña: <br/>
     <input type="password" placeholder="Ingresa tu clave" required/><br/>
     <button type="submit">ENVIAR</button>
  </fieldset>
</form>

Resultado visual:

CONTRASEÑAS Contraseña:


Calendario fecha y hora

Ejemplo en código:

<form>
  <fieldset>
     <legend>FECHAS Y HORAS</legend>
     Fecha: <br/>
     <input type="date"/><br/>
     Hora: <br/>
     <input type="time"/><br/>     
  </fieldset>
</form>

Resultado visual:
FECHAS Y HORAS Fecha:

Hora:



Carga de archivos

Ejemplo en código:

<form>
  <fieldset>
     <legend>ARCHIVOS</legend>
     Cargar un archivo: <br/>
     <input type="file" name="archivo"/><br/>
     <button type="submit">ENVIAR</button>
  </fieldset>
</form>

Resultado visual:
ARCHIVOS Cargar un archivo:



Numérico

Ejemplo en código:

<form>
  <fieldset>
     <legend>NÚMEROS</legend>
     Números enteros:<br/>
     <input type="number"/><br/>
     Números con decimales:<br/>
     <input type="number" min="-10" max="20" step="0.01"/><br/>
     Números de tres en tres:<br/>
     <input type="number" step="3"/><br/>
  </fieldset>
</form>

Resultado visual:
NÚMEROS Números enteros:

Números con decimales:

Números de tres en tres:



Colores

Ejemplo en código:

<form>
  <fieldset>
     <legend>COLORES</legend>
     Selecciona un color<br/>
     <input type="color"/><br/>
  </fieldset>
</form>

Resultado visual:

COLORES Selecciona un color



Barras deslizables

Ejemplo en código:

<form>
  <fieldset>
     <legend>BARRAS DESLIZABLES</legend>
     Mueva las barras: <br/>
     <input type="range"/><br/>
     <input type="range" min="0" max="100" step="10"/><br/>
     <input type="range" min="1" max="5" step="1"/><br/>
  </fieldset>
</form>

Resultado visual:

BARRAS DESLIZABLES Mueva las barras:





Botones

Tenemos tres tipos:

Input type submit

Ejemplo en código:

<form>
  <fieldset>     
     <input type="submit" value="Presioname"/><br/>
  </fieldset>
</form>

Resultado visual:




Button type submit

Ejemplo en código:

<form>
  <fieldset>     
     <button type="submit">Presioname</button>
  </fieldset>
</form>

Resultado visual:



Input type reset
Ejemplo en código:

<form>
  <fieldset>     
     <input type="text" value="Hola"/><br/>     
     <input type="date"/><br/>     
     <input type="reset"/><br/>
  </fieldset>
</form>

Resultado visual:






CheckBox y RadioButton

Un checkbox permite seleccionar diversos elementos de una lista, mientras RadioButton elegir un elemento de una serie de valores

Ejemplo en código:

<form>
  <fieldset>
    <legend>Radio Button</legend>
    <label>¿Qué comida que desagrada más?</label><br/><br/>
    <input type="radio" name="comidaNo"><label>Escabeche</label><br/>
    <input type="radio" name="comidaNo"><label>Arroz árabe</label><br/>
    <input type="radio" name="comidaNo"><label>Cebiche</label><br/>
    <input type="radio" name="comidaNo"><label>Tocosh</label><br/><br/>
    <button type="submit">Elegir</button>     
  </fieldset>
  <br/>
  <fieldset>
    <legend>CheckBox</legend>
    <label>¿Qué comidas que te gustan?</label><br/><br/>
    <input type="checkbox" name="comida"><label>Escabeche</label><br/>
    <input type="checkbox" name="comida"><label>Arroz árabe</label><br/>
    <input type="checkbox" name="comida"><label>Cebiche</label><br/>
    <input type="checkbox" name="comida"><label>Tocosh</label><br/><br/>
    <button type="submit">Elegir</button>     
  </fieldset>
</form>

Resultado visual:

Radio Button







CheckBox








Listas desplegables

Conocidas como los Combobox en lenguajes de programación como Visual, Java, etc. permiten desplegar una serie de valores y elegir uno de ellos, la ventaja de este frente al RadioButton es que se puede desplegar mucha más información sin usar demasiado espacio en la página.


Ejemplo en código:

<form>
  <fieldset>
     <legend>Seleccionar una ingeniería</legend>
        <select><option>Ingeniería ambiental</option>
        <option>Ingeniería eléctrica</option>
        <option>Ingeniería informática</option>
        <option>Ingeniería de minas</option>
        <option>Ingeniería química</option>
        <option selected="selected">Ingeniería de software</option>
     </select>    
  </fieldset>
</form>

Resultado visual:

Seleccionar una ingeniería