En este ejercicio vamos a escribir una página Web (color.html) en la que a través de un formulario con tres campos de texto crearemos un muestreador de color. Se introducirá un color en valores RGB (0, 255) y llame a otra página (muestra.php), que procesa el formulario y nos muestre el color deseado como color de fondo de la página.
Este es el típico ejercicio básico que en su día tuve que desarrollar para el ciclo de DAW (Desarrollo de Aplicaciones Web) en la asignatura de Desarrollo de Aplicaciones en Entorno Servidor. Por esto me ha parecido útil dejarlo aquí colgado para que todo el que quiera realizar una consulta sobre este tipo de ejercicios sobre PHP.
Muestreador de color HTML interactivo
Archivo: color.html
<form name='form' action='muestra.php' method='post'> <table border="1" bgcolor="#f0f0f0" cellpadding="2" align="center"> <tr> <td colspan="2"> Elige tu color favorito en RGB:<br> </td> </tr> <tr> <td> Color Rojo: </td> <td align="center"> <input type='text' name='rojo' size="4" maxlength="3"></br> </td> </tr> <tr> <td> Color Verde: </td> <td align="center"> <input type='text' name='verde' size="4" maxlength="3"></br> </td> </tr> <tr> <td> Color Azul: </td> <td align="center"> <input type='text' name='azul' size="4" maxlength="3"></br> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="enviar"> || <input type="reset" value="borrar"> </td> </tr> </table> </FORM>
Ejercicio: muestra.php
<?php $rojo=$_POST['rojo']; $verde=$_POST['verde']; $azul=$_POST['azul']; //************************************************************************* if(is_numeric($rojo)){ if($rojo>=0 && $rojo<=255){ $red=$rojo; }else{ echo "El color rojo solo puede contener valores entre 0 y 255.<br>"; echo "Al no tener un valor valido tomo como el valor 0 por defecto.<br><br>"; $red=0; } }else{ echo "El campo Rojo tiene que ser un número.<br>"; echo "Al no tener un valor valido tomo como el valor 0 por defecto.<br><br>"; $red=0; } //************************************************************************* if(is_numeric($verde)){ if(0<=$verde && 255>=$verde){ $green=$verde; }else{ echo "El color verde solo puede contener valores entre 0 y 255.<br>"; echo "Al no tener un valor valido tomo como el valor 0 por defecto.<br><br>"; $green=0; } }else{ echo "El campo Verde tiene que ser un número.<br>"; echo "Al no tener un valor valido tomo como el valor 0 por defecto.<br><br>"; $green=0; } //************************************************************************* if(is_numeric($azul)){ if($azul>=0 && $azul<=255){ $blue=$azul; }else{ echo "El color azul solo puede contener valores entre 0 y 255.<br>"; echo "Al no tener un valor valido tomo como el valor 0 por defecto.<br><br>"; $blue=0; } }else{ echo "El campo Azul tiene que ser un número.<br>"; echo "Al no tener un valor valido tomo como el valor 0 por defecto.<br><br>"; $blue=0; } ?> <html> <head> </head> <body > <div align="center"> <h3>Colores seleccionados por el usuario</h3> </div> <table <?php e cho "bgcolor='$red,$green,$blue'"; ?> width="300px" height="150px" border="1" align="center"> <tr> <td align="center"> <?php echo "<font color='white'>Rojo: $red </font><br>"; echo "<font color='white'>Verde: $green</font><br>"; echo "<font color='white'>Azul: $blue </font<br>"; ?> </td> </tr> <tr> <td align="center"><p> <a href="color.html" title="Volver">Volver</a> </p></td> </tr> </table> </body> </html>