Una solución para este problema es la que nos proponen en ryanfait.com, con la que mediante un poco de Javascript y CSS podemos dar un toque especial a nuestros formularios.

Si queremos darle un nuevo estilo al formulario, tendremos que descargar este archivo js, e incluirlo en la página del formulario.

También hay que añadir este código CSS:

span.checkbox {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(checkbox.gif) no-repeat;
display: block;
clear: left;
float: left;
}
span.radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(radio.gif) no-repeat;
display: block;
clear: left;
float: left;
}
span.select {
position: absolute;
width: 158px;
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial, sans-serif;
background: url(select.gif) no-repeat;
overflow: hidden;
}

Lo último es descargar las imágenes de las casillas de verificación, los radiobutton (no se me ocurre ninguna buena traducción… ¿botones de radio? ¿botones circulares?) y las listas desplegables.

Para aplicarlo basta con añadir class=”styled” a los elementos que queremos darle ese nuevo estilo, mientras que dejamos como antes los que no queremos modificar.

Podéis descargar un pequeño formulario de prueba que he creado. Es muy básico, pero se puede ver con facilidad cómo se aplica.

Espero que os resulte útil.

Para esto descargarmos jQuery y el plugin Validate.

Pasos previos

En el header del archivo que contiene el formulario añadimos:

<script src="jquery.js" type="text/javascript"></script> <script src="jquery.validate.js" type="text/javascript"></script>

A continuación añadimos:

<script type="text/javascript"><!--
$().ready(function() {
$("#formulario").validate();
});
// --></script>

Para distinguir el formulario al que se le aplica la validación, jQuery busca el que tenga por id formulario. Podemos cambiar #formulario por #loquesea, siendo loquesea la id del formulario.

El código HTML del formulario puede ser una cosa así:

<form id="formulario" method="post"> Nombre:
<label></label>

<input id="nombre" name="nombre" type="text" />Contraseña:
<label></label>

<input id="pass_1" name="pass_1" type="password" />Repite contraseña:
<label></label>

<input id="pass_2" name="pass_2" type="password" />Email:
<label></label>

<input id="email" name="email" type="text" /><label></label>

<input id="button" name="button" type="submit" value="Enviar" /> </form>

Ahora tenemos que definir qué campos necesitan validación, para ello disponemos de dos métodos:

1. Ponerle una clase específica a cada input, por ejemplo, class=”required” harí que el campo fuese obligatorio.
2. Definir los campos que requieres validación y qué tipo de validación requieren en el código Javascript que hemos añadido al principio.

El método de las clases

Comencemos por el primer método: añadiendo clases a los campos del formulario.

Si queremos que todos los campos sean obligatorios basta con añadirles a todos class=”required”, ahora si dejamos en blanco un campo con esta clase nos mostrará un aviso.

Si le ponemos de clase “email”, buscará la estructura de una dirección de correo electrónico, en casi de no ser una estructura correcta (nombre@dominio.nnn), mostrará un aviso.

Podríamos dejar así el formulario anterior:

<form id="formulario" method="post"> Nombre:
<label></label>

<input id="nombre" class="required" name="nombre" type="text" />Contraseña:
<label></label>

<input id="pass_1" class="required" name="pass_1" type="password" />Repite contraseña:
<label></label>

<input id="pass_2" class="required" name="pass_2" type="password" />Email:
<label></label>

<input id="email" class="required email" name="email" type="text" /><label></label>

<input id="button" name="button" type="submit" value="Enviar" /> </form>

El método de la definición

El segundo método es un poco más complejo. Volvemos al punto en el que añadimos:

<script type="text/javascript"><!--
$().ready(function() {
$("#formulario").validate();
});
// --></script>

Ahora en lugar de esto debemos añadir:

<script type="text/javascript"><!--
$().ready(function() {
$("#formulario").validate({
rules: {
pass_2: {
required: true,
equalTo: "#pass_1"
}
}
});
});
// --></script>

¿Cómo funciona?

Bien, después de rules:{ añadimos el id del campo de nuestro formulario seguido de las reglas que debe cumplir.

En este ejemplo el campo pass_2 es obligatorio, y además debe ser igual a pass_1, si no lo es mostrará un aviso.

Podemos añadir más reglas, como caracteres máximos, rango de caracteres (sólo para número enteros), fechas, etc, podéis ver una lista de todas las reglas aquí.

Ambos métodos son compatibles, podemos usar los dos en el mismo formulario.

Cualquier duda que tengáis no dudéis en preguntarla en los comentarios, espero que os sea útil.

Yo no pensaba que usaría un formulario para subir archivos al servidor, pero hace unos días he necesitado crear un formulario de este tipo, así que me he puesto a investigar un poco y a crear un script para subir archivos al servidor.

El objetivo del tutorial está claro: Subir un archivo al servidor con un formulario.

Para poder realizarlo necesitamos darle permisos 777 a la carpeta en la que subiremos las imágenes.

El formulario

Primero creamos un formulario con un input de tipo file. Además tenemos que darle al atributo enctype del formulario el valor multipart/form-data.

El campo de para subir el archivo lo llamaremos archivo.

El final tendremos un código así:

El PHP

Ahora pasamos al PHP. Usaremos $_FILE para detectar el nombre temporal de archivo y el nombre del mismo.

Si usamos la función print_r para mostrar la matriz $_FILE, veremos que ésta tiene almacenados, entre otros datos, el archivo temporal, el tamaño y el formato del archivo.

Nosotros nos fijaremos sólo en el nombre.

Antes de seguir tenemos que comprobar que el archivo ha sido subido con el formulario, así que lo comprobamos usando la función is_uploaded_file().

Después usando la función copy() copiaremos el archivo a la carpeta que queramos.

El código quedará así:

Nota: Si os fijáis en la función copy, he escrto C:/Servidor/ . Esta es la carpeta en la que quiero poner los archivos subidos. Tened en cuenta que estoy trabajando en un servidor casero en Windows, y que si vosotros tenéis un servidor Linux no debéis poner C:/.

Con esto ya copiaría el archivo a la carpeta que queremos.

Últimos retoques

Por último podemos añadir una cosa más: Un aviso de si se ha subido correctamente o no. Para eso creamos una variable juesto después de la función copy (dentro de la condición), que tenga por valor true.

Luego creamos una nueva condición: Si la variable es true, se ha subido bien el archivo, si no, avisamos del error.

El código final quedaría así:

Y listo, con esto ya hemos acabado nuestro formulario para subir archivos.