logo

Formulario de registro de fibra de carbono con PHP, jQuery y CSS3

Hoy estamos haciendo una forma de estilo de fibra de carbono, construida usando mejoras progresivas. Esto significa que primero nos aseguramos de que el formulario funcione bien sin JavaScript y compatibilidad con CSS elegante (piense en IE6 aquí) y luego avanzamos superponiendo estilos geniales, AJAX y jQuery magic.

El formulario presenta su propia validación de información sobre herramientas personalizada, e incluso se puede usar perfectamente con JavaScript deshabilitado.

Paso 1 - XHTML

El primer paso incluye la creación de la columna vertebral XHTML del formulario. Tiene que ser simple y, de acuerdo con los principios definidos por la mejora progresiva, debe ser perfectamente utilizable por sí mismo.

demostración.html

<div id="carbonForm">
    <h1>Signup</h1>

    <form action="submit.php" method="post" id="signupForm">

        <div class="fieldContainer">
            <div class="formRow"></div>
            <!-- Two more formRow divs -->
        </div>

        <div class="signupButton">
            <input type="submit" name="submit" id="submit" value="Signup" />
        </div>

    </form>
</div>

La forma de carbono div es el contenedor principal del formulario. Está centrado en el medio de la página con el margen de CSS propiedad, y luego centrado verticalmente con jQuery (eche un vistazo a nuestro MicroTut para obtener más información sobre el centrado).

En su interior tenemos el encabezado y el formulario con el fieldContainer división En su interior hay tres formRow divs, que comparten el marcado que se indica a continuación:

demostración.html

<div class="formRow">
    <div class="label">
        <label for="name">Name:</label>
    </div>

    <div class="field">
        <input type="text" name="name" id="name" />
    </div>
</div>

Cada par de etiquetas y entrada elementos se coloca dentro de sus propios divs envolventes, que flotan hacia la izquierda. Esto permite el diseño del formulario que puede ver en la página de demostración. Es importante que los nombres de los cuadros de texto sean iguales como su id s, porque esto se usa para mostrar la información sobre herramientas de error como verá en los siguientes pasos.

Paso 2:CSS

El formulario se basa en gran medida en CSS para lograr el efecto de fibra de carbono. También se utilizan una serie de reglas CSS3, que imitan con éxito los efectos que antes solo eran posibles en suites gráficas como Photoshop. Aquí solo se dan los estilos más interesantes, puedes ver el resto en styles.css en el archivo de descarga.

estilos.css

#carbonForm{
    /* The main form container */
    background-color:#1C1C1C;
    border:1px solid #080808;
    margin:20px auto;
    padding:20px;
    width:500px;

    -moz-box-shadow:0 0 1px #444 inset;
    -webkit-box-shadow:0 0 1px #444 inset;
    box-shadow:0 0 1px #444 inset;
}

.fieldContainer{
    /* The light rounded section, which contans the fields */
    background-color:#1E1E1E;
    border:1px solid #0E0E0E;
    padding:30px 10px;

    /* CSS3 box shadow, used as an inner glow */
    -moz-box-shadow:0 0 20px #292929 inset;
    -webkit-box-shadow:0 0 20px #292929 inset;
    box-shadow:0 0 20px #292929 inset;
}

#carbonForm,.fieldContainer,.errorTip{
    /* Rounding the divs at once */
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
}

.formRow{
    height:35px;
    padding:10px;
    position:relative;
}

.label{
    float:left;
    padding:0 20px 0 0;
    text-align:right;
    width:70px;
}

label{
    font-family:Century Gothic,Myriad Pro,Arial,Helvetica,sans-serif;
    font-size:11px;
    letter-spacing:1px;
    line-height:35px; /* Neat line height trick */
}

.field{
    float:left;
}

.field input{
    /* The text boxes */
    border:1px solid white;
    color:#666666;
    font-family:Arial,Helvetica,sans-serif;
    font-size:22px;
    padding:4px 5px;
    background:url("img/box_bg.png") repeat-x scroll left top #FFFFFF;
    outline:none;
}

#submit{
    /* The submit button */
    border:1px solid #f4f4f4;
    cursor:pointer;
    height:40px;
    text-indent:-9999px;
    text-transform:uppercase;
    width:110px;

    background:url("img/submit.png") no-repeat center center #d0ecfd;

    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}

#submit.active{
    /* Marking the submit button as active adds the preloader gif as background */
    background-image:url("img/preloader.gif");
}

input:hover,
input:focus{
    /* CSS3 glow effect */
    -moz-box-shadow:0 0 8px lightblue;
    -webkit-box-shadow:0 0 8px lightblue;
    box-shadow:0 0 8px lightblue;
}

La mayoría de estas reglas son bastante sencillas. Puede que le resulte interesante cómo manejamos el botón de envío, ya que este elemento es bastante complicado de diseñar de manera consistente en todos los navegadores.

Para ocultar el texto del botón (en nuestro caso "Registrarse "), podemos usar la sangría de texto negativa truco, pero en IE solo funciona si también especificamos el text-transform:uppercase regla. También agregamos una imagen de fondo transparente que consta del texto "Enviar " en siglo gótico , que se reemplaza con un precargador giratorio de gifs si al botón se le asigna un "activo " clase.

También utilizamos una serie de efectos CSS3 junto con sus versiones específicas del proveedor para una mejor compatibilidad. borde-radio es para esquinas redondeadas y con box-shadow podemos imitar diferentes efectos de brillo y sombra.

Paso 3:jQuery

Después de incluir la biblioteca jQuery y nuestro propio script.js archivo en la página, podemos pasar a escribir el código JavaScript que le dará algo de vida al formulario.

secuencia de comandos.js

$(document).ready(function(){
    // $(document).ready() is executed after the page DOM id loaded

    // Binding an listener to the submit event on the form:
    $('#signupForm').submit(function(e){

        // If a previous submit is in progress:
        if($('#submit').hasClass('active')) return false;

        // Adding the active class to the button. Will show the preloader gif:
        $('#submit').addClass('active');

        // Removing the current error tooltips
        $('.errorTip').remove();

        // Issuing a POST ajax request to submit.php (the action attribute of the form):
        $.post($('#signupForm').attr('action'),
            $('#signupForm').serialize()+'&fromAjax=1',function(response){

            if(!response.status)
            {
                // Some kind of input error occured

                // Looping through all the input text boxes,
                // and checking whether they produced an error
                $('input[type!=submit]').each(function(){
                    var elem = $(this);
                    var id = elem.attr('id');

                    if(response[id])
                        showTooltip(elem,response[id]);
                });
            }
            else location.replace(response.redirectURL);

            $('#submit').removeClass('active');
        },'json');

        e.preventDefault();
    });

    $(window).resize();
});

// Centering the form vertically on every window resize:
$(window).resize(function(){
    var cf = $('#carbonForm');

    $('#carbonForm').css('margin-top',($(window).height()-cf.outerHeight())/2)
});

// Helper function that creates an error tooltip:
function showTooltip(elem,txt)
{
    // elem is the text box, txt is the error text
    $('<div class="errorTip">').html(txt).appendTo(elem.closest('.formRow'));
}

Al hacer clic en el botón Enviar (o al presionar enter mientras ingresa texto en uno de los campos) envía el formulario. La función vinculada al evento de envío evita que esto suceda con e.preventDefault() y envía una solicitud AJAX a submit.php en su lugar.

La respuesta que se devuelve se evalúa como código JSON (un objeto JavaScript), que contiene un estado especial. propiedad. Según su valor, la secuencia de comandos muestra información sobre herramientas de error en los campos o redirige el navegador a la URL especificada en la respuesta.

respuesta de error de muestra

{
    "status"    : 0,    // Indicates that the response is an error
    "email"     : "Please fill in a valid email!",      // Error message
    "pass"      : "Please fill in a valid password!"    // Error message
}

El script genera la información sobre herramientas de error mientras recorre todos los campos del formulario y verifica si sus ID existen como propiedades en el objeto de respuesta. Si lo hacen, se crea una información sobre herramientas con showTooltip() función.

Observe también cómo usamos serialize() en la línea 18 para enviar todos los campos del formulario a la vez. Además, en esta misma línea, configuramos fromAjax=1 , que le indicará a PHP que devuelva la respuesta como JSON.

Ahora veamos cómo se genera esta respuesta y cómo se valida el formulario.

Paso 4 - PHP

Lo bueno de este formulario es que se puede usar incluso si JavaScript está deshabilitado. Esto funciona, porque el atributo de acción del elemento de formulario también se establece en submit.php . Esto significa que solo tenemos que implementar la validación una vez sin importar cómo se envíe el formulario.

enviar.php

// Error reporting:
error_reporting(E_ALL^E_NOTICE);

// This is the URL your users are redirected,
// when registered succesfully:

$redirectURL = 'https://demo.tutorialzine.com/2010/04/carbon-signup-form/demo.html';

$errors = array();

// Checking the input data and adding potential errors to the $errors array:

if(!$_POST['name'] || strlen($_POST['name'])<3 || strlen($_POST['name'])>50)
{
    $errors['name']='Please fill in a valid name!<br />Must be between 3 and 50 characters.';
}

if(!$_POST['email'] || !preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $_POST['email']))
{
    $errors['email']='Please fill in a valid email!';
}

if(!$_POST['pass'] || strlen($_POST['pass'])<5)
{
    $errors['pass']='Please fill in a valid password!<br />Must be at least 5 characters long.';
}

// Checking whether the request was sent via AJAX
// (we manually send the fromAjax var with the AJAX request):

if($_POST['fromAjax'])
{
    if(count($errors))
    {
        $errString = array();
        foreach($errors as $k=>$v)
        {
            // The name of the field that caused the error, and the
            // error text are grouped as key/value pair for the JSON response:
            $errString[]='"'.$k.'":"'.$v.'"';
        }

        // JSON error response:
        die ('{"status":0,'.join(',',$errString).'}');
    }

    // JSON success response. Returns the redirect URL:
    echo '{"status":1,"redirectURL":"'.$redirectURL.'"}';

    exit;
}

// If the request was not sent via AJAX (probably JavaScript
// has been disabled in the visitors' browser):

if(count($errors))
{
    echo '<h2>'.join('<br /><br />',$errors).'</h2>';
    exit;
}

// Directly redirecting the visitor if JS is disabled:

header("Location: ".$redirectURL);

Todos los errores encontrados se agregan a los $errors formación. Esto, dependiendo de si fromAjax se configuró o no, luego se devuelve como un objeto JSON o se imprime directamente en la pantalla.

¡Con esto nuestro formulario de registro de fibra de carbono está completo!

Conclusión

Puede modificar y desarrollar este formulario de la forma que desee. Actualmente, el formulario en realidad no registra a los usuarios, pero puede agregar el código necesario para hacerlo. También hará un gran trabajo como formulario de contacto para su sitio.