Formulario de contactos con HTML5 CSS y PHP

Formulario de contactos con HTML5 CSS y PHP

A continuación explicaré como realizar un formulario de contacto de manera simple y eficiente utilizando una combinación de los lenguajes HTML5, CSS y PHP. Con la nueva versión de HTML (HTML5), el código para desarrollar sitios web es más limpio, intuitivo y comprende nuevas características y propiedades que simplifican nuestro trabajo, gracias a esto los formularios también se desarrollan de una manera más simple y efectiva.

Para que funcione correctamente el formulario es necesario correrlo en un servidor web para que el código php pueda ser ejecutado.

Estructura HTML

Para comenzar a desarrollar el formulario, primero debemos crear nuestro archivo contactos.html, el mismo contendrá el código que generará visualmente el formulario en nuestra página.

archivo : contacto.html

<html>
    <head>
        <title>Formulario de contactos con HTML5 CSS y PHP</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="estilo.css">         
    </head>
    <body>
      <section class="formulario">
        <form action="contacto.php" method="post">
         <label>Formulario de contactos</label>
         <label for="nombre">Nombre:</label>
         <input id="nombre" type="text" name="nombre" placeholder="Nombre y Apellido" required="" />
         <label for="email">Email:</label>
         <input id="email" type="email" name="email" placeholder="karlosrivas@gmail.com" required="" />
         <label for="mensaje">Mensaje:</label>
         <textarea id="mensaje" name="mensaje" placeholder="Mensaje" required=""></textarea>
         <input id="submit" type="submit" name="submit" value="Enviar" />
        </form>                 
    </body>
</html>

Podemos ver que gracias al lenguaje HTML5, las etiquetas utilizadas son mucho más intuitivas y faciles de leer, a diferencia de las versiones anteriores, donde se utilizaban divs para crear bloques, ahora los diferenciamos con etiquetas fácilmente reconocibles como head, header, section, article, footer, entre otras…

El CSS

A continuación aplicaremos estilos al formulario, para ello debemos crear el archivo estilo.css e incluír el siguiente código en él. Esta parte depende de la creatividad de cada uno, este código se puede modificar a gusto adaptándolo al diseño de su sitio web.

archivo : estilo,css

/*
    Created on : 14/04/2014, 09:29:06 PM
    Author     : kriv@s.net
*/
            label {
               display:block;
               margin-top:20px;
               letter-spacing:1px;
            }
            .formulario {
               display:block;
               margin:0 auto;
               width:510px;
               color: #666666;
               font-family:Arial;
            }
            form {
                margin:0 auto;
                width:400px;
            }
            input, textarea {
                width:380px;
                height:27px;
                background:#666666;
                border:2px solid #f6f6f6;
                padding:10px;
                margin-top:5px;
                font-size:10px;
                color:#ffffff;
            }
            textarea {
                height:150px;
            }
            #submit {
                width:85px;
                height:35px;
                border:none;
                margin-top:20px;
                cursor:pointer;
            }

PHP

A continuación creamos el archivo contacto.php e incluimos el siguiente código.

<?php 
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$mensaje = $_POST['mensaje'];
$para = 'TUCORREO@CORREO.COM';
$titulo = 'ASUNTO DEL MENSAJE';
$header = 'From: ' . $email;
$msjCorreo = "Nombre: $nombre\n E-Mail: $email\n Mensaje:\n $mensaje";
 

if ($_POST['submit']) {
echo "<h1>Nombre  : $nombre<br>";
echo "E-mail  : $email<br>";
echo "Mensaje : $mensaje<br></h1>";

if (mail($para, $titulo, $msjCorreo, $header)) {
echo "<script language='javascript'>
alert('Mensaje enviado, muchas gracias.');
window.location.href = 'http://TUSITIOWEB.COM';
</script>";
}
else {
echo "<script language='javascript'>
alert('Fallo en envio, lo sentimos mucho.');
window.location.href = 'http://kjarlosrivas.blogspot.com'.;
</script>";
}
}
?>

Vista Previa del ejercicio

 

PRACTICA CALIFICADA

1.ELABORA EL SIGUIENTE FORMULARIO

 

2. ENIVA LOS DATOS SELECCIONADOS A UNA PAGINA PARA CONFIRMAR LA MATRICULA.

Ingresar dos valores por medio de un formulario y mostrar posteriormente todos los números pares comprendidos entre ellos

Determinar el signo zodiacal en PHP

---

---

<html>
    <head>
        <title>Signo Zodiacal</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            .textbox {
                color: purple;
                background-color: #aaff3d;
                font-size: 12pt;
                text-align:center}
            .button {
                color: red;
                background-color: window;
                font-size: 12pt;
            }

        </style>
    </head>
    <body>
        <div>
            <h1>Signo Zodiacal by krivas.net</h1>
            <form Method="Post">
                <h3>Ingrese su fecha de nacimiento (dd-mm-aaaa)
                <Input Type="Text" Name="dia" size="2" maxlength="2" class="textbox">
                <Input Type="Text" Name="mes" size="2" maxlength="2" class="textbox">
                <Input Type="Text" Name="anno" size="4" maxlength="4" class="textbox">
                <Input Type="Submit" Name="Consultar" Value="Consultar" class="button">
                </h3>
            </form>
        </div>
    </body>
</html>

<?php
if (!function_exists("zodiaco")) {
function zodiaco($fechanac){

$fechadia=date("d", strtotime($fechanac));
$fechames=date("m", strtotime($fechanac));
/*
 Aries  (21/3 - 20/4)
 Tauro  (21/4 - 21/5)
 Géminis  (22/5 - 20/6)
 Cáncer  (21/6 - 23/7)
 Leo (24/7 - 23/8)
 Virgo  (24/8 - 23/9)
 Libra  (24/9 - 23/10)
 Escorpio  (24/10 - 22/11)
 Sagitario  (23/11 - 21/12)
 Capricornio  (22/12 - 20/1)
 Acuario  (21/1 - 19/2)
 Piscis (20/2 - 20/3)
*/
if((($fechadia >= "21") && ($fechames == "3")) or
   (($fechadia <= "19") && ($fechames == "4"))){
    $signo="Aries";
}
if((($fechadia >= "20") && ($fechames == "4")) or
  (($fechadia <= "20") && ($fechames == "5"))){
    $signo="Tauro";
}
if((($fechadia >= "21") && ($fechames == "5")) or
  (($fechadia <= "21") && ($fechames == "6"))){
    $signo="Geminis";
}
if((($fechadia >= "22") && ($fechames == "6")) or
  (($fechadia <= "22") && ($fechames == "7"))){
    $signo="Cancer";
}
if((($fechadia >= "23") && ($fechames == "7")) or
  (($fechadia <= "22") && ($fechames == "8"))){
    $signo="Leo";
}
if((($fechadia >= "23") && ($fechames == "8")) or
  (($fechadia <= "22") && ($fechames == "9"))){
    $signo="Virgo";
}
if((($fechadia >= "23") && ($fechames == "9")) or
  (($fechadia <= "22") && ($fechames == "10"))){
    $signo="Libra";
}
if((($fechadia >= "23") && ($fechames == "10")) or
  (($fechadia <= "21") && ($fechames == "11"))){
    $signo="Escorpio";
}
if((($fechadia >= "22") && ($fechames == "11")) or
        (($fechadia <= "21") && ($fechames == "12"))){
    $signo="Sagitario";
}
if((($fechadia >= "22") && ($fechames == "12")) or
  (($fechadia <= "19") && ($fechames == "1"))){
    $signo="Capricornio";
}
if((($fechadia >= "20") && ($fechames == "1")) or
  (($fechadia <= "18") && ($fechames == "2"))){
    $signo="Acuario";
}
if((($fechadia >= "19") && ($fechames == "2")) or
  (($fechadia <= "20") && ($fechames == "3"))){
    $signo="Piscis";
}

return $signo;
}
}
?>
<?php
if($_POST["Consultar"]){
    $anno=$_POST["anno"];
    $mes=$_POST["mes"];
    $dia=$_POST["dia"];
 
 
    if(!is_numeric($dia) || $dia<1 || $dia>31){
        echo "<h2>Ingrese dia correctamente";
         return 0;
    }
     if(!is_numeric($mes) || $mes<1 || $mes>12){
        echo "<h2>Ingrese mes correctamente</h2>";
         return 0;
    }
     if(!is_numeric($anno)){
        echo "<h2>Ingrese año correctamente</h2>";
        return 0;   //Terminar ejecucion
    }
 
    $fechanac=$dia."-".$mes."-".$anno;
    echo "<br><h2>Fecha de nacimiento : $fechanac <br>";
    $fechanac=$anno."-".$mes."-".$dia;
    echo "Su signo zodiacal corresponde a : ".zodiaco($fechanac)."</h2>";
}
?>

---

Los Fractales y la Teoría del Caos

Script en PHP para generar el fractal Mandlebrot

El siguiente script permite generar el fractal de Mandlebrot. Descargado desde la pagina : http://khlo.co.uk/stuff/fractals/

<?php 

set_time_limit(0); 

function microtime_float() { 

    list($usec, $sec) = explode(" ", microtime()); 

    return ((float)$usec + (float)$sec); 

} 

$time_start = microtime_float(); 

/* Lil Mandlebrot Set Fractal Generator */ 

define ('IMAGE_WIDTH', 100); 

define ('IMAGE_HEIGHT', 100); 

define ('X_MIN', -1.5); 

define ('X_MAX', 0.5); 

define ('Y_MIN', -1); 

define ('Y_MAX', 1); 

define ('MAX_ITERATIONS', 200); // if you change this to a number bigger than 200, make sure you create a new palette.png 

header("Content-type: image/png"); 

$image = imagecreate(IMAGE_WIDTH, IMAGE_HEIGHT); 

// Load the palette to find colours 

$colours = array(); 

$colours['inside'] = imagecolorallocate($image, 0, 0, 0); 

$palette = imagecreatefrompng("palette.png"); 

for ($i=0; $i<imagesx($palette); $i++) { 

    $rgb = imagecolorat($palette, $i, 0); 

    $colours[$i] = imagecolorallocate($image, ($rgb >> 16) & 0xFF, ($rgb >> 8) & 0xFF, $rgb & 0xFF); 

} 

for ($i=0; $i<IMAGE_WIDTH; $i++) { 

    for ($j=0; $j<IMAGE_HEIGHT; $j++) { 

        // What values of x and y does this pixel represent? 

        $x = X_MIN+$i*((X_MAX - X_MIN) / (IMAGE_WIDTH-1)); 

        $y = Y_MIN+$j*((Y_MAX - Y_MIN) / (IMAGE_HEIGHT-1)); 

         

        // C=x+yi 

         

        $iteration = 0; 

        $z = array(0,0); // The initial value of z is 0+0i 

        $magnitude = 0; 

         

        // Optimization: Store x^2 and y^2 so we don't have to keep 

        $x2 = 0; 

        $y2 = 0; 

         

        // If the |z| > 2 ever, then the sequence will tend to infinity so 

        while ($iteration <= MAX_ITERATIONS && $x2+y2 <= 4) { 

            // In order to get the next term in the sequence 

            // we need to square the previous number and then add 

            // the original complex number 

            // 

            // z(n+1) = z(n)^2+c 

             

            $k = $z; 

             

            // z is a complex number. When we square a complex number in the  

            // New real component: x^2-y^2 

            // New imaginary component: 2*real*imaginary 

            $z[0] = $x2 - $y2; 

            $z[1] = 2 * $k[0] * $k[1]; 

             

            // Add Complex Number 

            $z[0] = $z[0] + $x; 

            $z[1] = $z[1] + $y; 

             

            $x2 = pow($z[0], 2); 

            $y2 = pow($z[1], 2); 

             

            ++$iteration; 

        } 

         

        if ($iteration == MAX_ITERATIONS) { 

            imagesetpixel($image, $i, $j, $colors['inside']); 

        } else { 

            imagesetpixel($image, $i, $j, $colours[$iteration]); 

        } 

    } 

} 

$time_end = microtime_float(); 

header ("X-Exec-Time: ".($time_end - $time_start)); 

imagepng($image); 

?>

Nota : se requiere la siguiente paleta de imagen que deberá ser guardada en la carpeta donde esta el script.