Computación Básica – Ingeniería Mecatrónica
Formularios en HTML
Los formularios son usados para que el usuario ingrese datos.
Esos datos son enviados a un documento, que se encuentra en un servidor, para que
los procese (por ej., a un servidor web, a un servidor de email, etc.).
La etiqueta form
La etiqueta <form> se utiliza para definir un formulario.
El atributo action es obligatorio y nos indica el documento que procesará los datos del
formulario enviado.
También contamos con el atributo method que nos define el método por el cual se
enviarán los datos del usuario al servidor.
Sintaxis
<form action="URL" method="valor">
...
</form>
La etiqueta input
Nos define el registro donde el usuario puede ingresar los datos.
Los usuarios interaccionan con los formularios a través de los llamados controles.
Tipos de controles:
Botones (buttons)
Casillas de verificación (checkboxes)
Radiobotones (radio buttons)
Menúes (menus)
Entrada de texto (text input)
Selección de ficheros (file select)
Controles ocultos (hidden controls)
Controles tipo objeto (object controls)
El atributo type específica el tipo de control a crear.
Sintaxis
</form>
<input type="control" atributo="valor">
</form>
El control "text"
Crea un control que nos permite ingresar un texto en una línea.
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
Ejemplo
Código Resultado
<form action="[Link]" method="get">
Nombre: <input type="text" name="nombre"> Nombre:
Apellido: <input type="text" name="apellido"> Apellido:
</form>
Nota: la propiedad name le asigna un nombre al elemento que luego puede ser usado en scripts
o en hojas de estilo
El control "radio"
Se usa cuando queremos que el usuario elija una sola opción de entre una serie de
posibilidades.
Ejemplo
Código Resultado
<form action="[Link]" method="post"> ¿Edad?
¿Edad?
<input type="radio" name="edad" value="menor">menor de 17 menor de 17
<input type="radio" name="edad" value="adulto">entre 18 y 60 entre 18 y 60
<input type="radio" name="edad" value="mayor">mayor de 61
</form> mayor de 61
Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de radio.
La propiedad value asigna un valor al elemento que será utilizado por el documento que
procese el formulario.
El control "checkbox"
Permite al usuario elegir varias opciones entre todas las posibilidades.
Ejemplo
Código Resultado
<form action="[Link]" method="get"> ¿Pasatiempos?
¿Pasatiempos?
<input type="checkbox" name="pasa" value="tv">TV TV
<input type="checkbox" name="pasa" value="libros">Libros Libros
<input type="checkbox" name="pasa" value="musica">Música
<input type="checkbox" name="pasa" value="otros">Otros Música
</form>
Otros
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de checkbox.
La propiedad value asigna un valor al elemento que será utilizado por el documento que
procese el formulario.
El control "password"
Funciona igual que text, pero el texto introducido se presenta mediante una serie de
puntitos. Es utilizado generalmente para ingresar contraseñas.
Ejemplo
Código Resultado
<form action="[Link]" method="post">
Nombre: <input type="text" name="nombre"> Nombre:
Password: <input type="password" name="pass"> Password:
</form>
El control "submit" y el control "reset"
El control submit es el botón de envio de datos del formulario y el control reset es
el botón de reinicialización. Al ser pulsado reinicializa todos los controles a sus valores
iniciales.
Ejemplo
Código Resultado
<form action="datos_personales.php" method="post">
Nombre: <input type="text" name="nombre"> Nombre:
Contraseña: <input type="password"
Contraseña:
name="secreto">
<input type="submit" value="Enviar"> Enviar Borrar
<input type="reset" value="Borrar">
</form>
Nota: el valor de la propiedad value define el texto dentro del botón.
El control "file"
El control file nos permite enviar archivos por medio de un formulario.
Ejemplo
Código Resultado
<form action="[Link]" method="post"> Ingrese la foto:
Ingrese la foto: <input type="file" name="foto">
</form>
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
El control "hidden"
El control hidden nos permite enviar información oculta a los ojos del usuario.
Ejemplo
Código Resultado
<form action="[Link]" method="post">
Nombre: <input type="text" name="nombre"> Nombre:
Contraseña: <input type="password" name="contra">
Contraseña:
<input type="hidden" value="cookie">
</form>
El control "image"
El control image nos permite utilizar una imagen personalizada como botón de un
formulario.
Ejemplo
Código Resultado
<form action="[Link]" method="post">
Nombre: <input type="text" name="nombre"> Nombre:
Contraseña: <input type="password" name="contra">
Contraseña:
<input type="image" src="/[Link]">
</form>
Las etiquetas select y option
La etiqueta <select> es usada para crear un menú desplegable.
Cada opción ofrecida por el menú se representa con la etiqueta <option>
Ejemplo
Código Resultado
<form action="[Link]" method="get">
<select name="continente">
<option value="america">América</option>
<option value="asia">Asia</option>
<option value="europa">Europa</option>
<option value="oceania">Oceanía</option>
<option value="africa">Africa</option>
</select>
</form>
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
La etiqueta textarea
Se usa para crear un control de entrada de texto multilínea.
Los atributo rows y cols nos indican la cantidad de filas y columnas que tendrá el
recuadro del área de texto.
Ejemplo
Código Resultado
<form action="[Link]" method="post">
<textarea name="eltexto" rows="5" cols="30">
Aquí podemos ingresar un texto introductorio si lo
deseamos.
</textarea>
</form>
Etiquetas y atributos de los formularios
Etiquetas Atributos Valor Descripción
<form> Define un formulario para el ingreso de
datos.
action URL Especifica un archivo procesador del
Obligatorio formularios.
accept Lista de tipos de Especifica una lista de tipos de
contenido contenido separados por comas, que
un servidor procesador de formularios
manejará correctamente.
accept-charset Lista de Especifica la lista de codificación de
codificación de caracteres para los datos introducidos
caracteres que son aceptados por el servidor que
procesa este formulario.
enctype tipo de contenido Especifica el tipo de contenido usado
para enviar el formulario al servidor.
method Especifica que método HTTP se usará
para enviar el conjunto de datos del
formulario.
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
get Debería usarse cuando los datos del
formulario no tienen efectos
secundarios.
post Debería usarse cuando el formulario
causa efectos secundarios ([Link].,
subscripción a un servicio o modificar
una base de datos.
name cdata Da nombre al elemento de modo que
se pueda hacer referencia a él desde
hojas de estilos o scripts.
target _blank El URL se abrirá es una nueva ventana.
_self El URL se abrirá en el mismo frame
donde fue apretado.
_parent El URL se abrirá en el frameset padre.
_top El URL se abrirá en una ventana de
tamaño completo.
<input> Define el tipo de control de entrada.
accept Lista de tipos de Especifica una lista de tipos de
contenido contenido separados por comas, que
un servidor procesador de formularios
manejará correctamente.
Nota: Usar solo con type="file".
align left Define el alineamiento del texto
siguiente a la imagen.
right Nota: Usar solo con type="image".
top
texttop
middle
absmiddle
baseline
bottom
absbottom
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
alt texto Define un texto alternativo para la
imagen.
Nota: Usar solo con type="imagen".
checked Especifica que el botón esta
marcado("on").
Nota: Usar solo con type="radio" o
type="checkbox".
disabled Deshabilita el control para la entrada
de datos por parte del usuario.
Nota: No debe usarse con
type="hidden".
maxlength número Número máximo de caracteres que
puede introducir el usuario.
Nota: Usar solo con type="text" o
type="password".
name nombre de Asigna el nombre de control.
control Nota: Este atributo es requerido para
type="button", type="checkbox",
type="file", type="hidden",
type="image", type="password",
type="text", type="radio".
readonly Indica que el valor no puede ser
modificado por el usuario .
Nota: Usar solo con type="text".
size número de Define el tamaño del elemento input.
caracteres Nota: No debe usarse con
type="hidden".
src URL Define el URL de la imagen a mostrar.
Nota: Usar solo con type="image".
type checkbox Especifica el tipo de control a crear.
file
hidden
image
password
radio
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
reset
submit
text
value valor Para los botones:
reset y submit: define el texto en el
botón.
checkbox y radio: (requerido) define
el resultado del elemento input cuando
es pulsado.
hidden, password y text: define el
valor por defecto del elemento.
<textarea> Define un área de texto(multi-línea).
col número Número de columnas visibles en el
Obligatorio área de texto.
rows número Número de filas visibles en el área de
Obligatorio texto.
disabled Deshabilita los controles de entrada.
name nombre del área Especifica un nombre para el área de
de texto texto.
readonly El usuario no puede modificar el
contenido en el área de texto.
<label> Adjunta información a los controles.
for idref Referencia a una palabra ID definida
por otro atributo.
<fieldset> Dibuja un recuadro alrededor de los
elementos.
<legend> Permite a los autores asignar un título
a un fieldset.
align top Especifica la posición de la leyenda con
Desaprobado respecto al [Link] las
bottom propiedades de ubicación de CSS en su
lugar.
left
right
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
<select> Crea un menú desplegable.
disabled Deshabilita el menú.
multiple Si está activado permite selecciones
múltiples.
name nombre Define un único nombre para un menú
desplegable.
size número Define el número visible de Items en el
menú desplegable.
<optgroup> Permite a los autores agrupar opciones
logicamente.
label texto Especifica el rótulo del grupo de
Obligatorio opción.
disabled Deshabilita los controles de [Link]
funciona en IE
<option> Define una opción en los menús
desplegables.
label texto Permite escribir de forma sintetizada el
conternido del atributo <option>. El
navegador debería mostrar este valor
en lugar del contenido de <option>.
disabled Deshabilita los controles de opció[Link]
funciona en IE
selected Especifica que opción aparecerá como
seleccionada.
value texto Especifica el valor inicial del control.
<button> Define un botón.
disabled Deshabilita el botón.
name nombre Especifica un nombre para el botón.
type button Define el tipo de botón.
reset
submit
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
value valor Asigna un valor inicial al botón.
<isindex> Use <input> en su lugar.
Desaprobado
Atributos estándard
id, class, title, style, dir, lang, acceskey, tabindex
Si desea una descripción completa, diríjase a: atributos estándard.
Eventos intrínsecos
onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur,
onselect, onchange
Tarea 1: Mostrar el resultado del siguiente código:
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de formularios - [Link]</title>
</head>
<body>
<form action="[Link] method="get">
<p>
<label for="nombre">Nombre: </label>
<input type="text" name="nombre" id="nombre">
<br/> <br/>
<label for="apellido">Apellido: </label>
<input type="text" name="apellido" id="apellido">
<br/> <br/>
<label for="email">Email: </label>
<input type="text" name="email" id="email">
<br/> <br/>
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
<input type="radio" name="sexo" id="varon" value="Varón">
<label for="varon">Varón: </label>
<br/> <br/>
<input type="radio" name="sexo" id="mujer" value="Mujer">
<label for="mujer">Mujer: </label>
<br/> <br/>
<input type="submit" value="Enviar">
<input type="reset">
</p>
</form>
</body>
</html>
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
Tarea 2: crear el siguiente formulario
Nombre:
Apellidos:
@
Correo electrónico:
Población:
Provincia:
Edad: ¿Cómo nos conociste?
0-20 A través de un amigo.
20-40 A través de un buscador.
40-60 Navegando por la red.
60-100 Otros
Opinión sobre nuestra página web
Tiene alguna sugerencia...
¿Cúanto navegas por intenet? (Señala la opción que más se acerque)
2 horas al día.
4 horas al día.
Enviar formulario Borrar formulario
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
PHP
PHP es un lenguaje interpretado que sirve principalmente para realizar páginas html dinámicas
PHP no es case sensitive (no distingue mayúsculas de minúsculas), salvo bugs en el tratamiento
de objetos y variables.
En PHP no se declaran las variables y no tienen un tipo fijo, sino que una misma variable puede
almacenar a lo largo de su vida valores de todo tipo (números, cadenas...)
Para escribir código PHP dentro de una página html, tenemos varias alternativas:
Incluir el código entre <? y ?>
Incluir el código entre <?PHP y ?>
Incluir el código entre bloques <SCRIPT LANGUAGE= "php"> y </SCRIPT>
El resultado de la salida estándar de ese código será escrito en esa misma posición de la página html.
La extensión de los archivos debe ser php
Comentarios
Los comentarios en PHP se escriben:
Con // o # para comentarios de una sóla línea. Entre /* y */ para comentarios de una o más líneas.
Ejemplo:
/* Título: Mi Primera página PHP
Autor: Yo
*/
// Saludamos
echo("¡Hola Mundo!<BR>");
Salida
Se utiliza el comando echo y printf
echo $a,"<br>",$b,"<br>",$c;
printf(cadena formato, variable1, variable2...);
printf("El numero dos con diferentes formatos: %d %f %.2f",2,2,2);
%s Cadena de carácteres.
%d Número sin decimales.
%f Número con decimales.
%c Carácter ASCII.
Hay más tipos pero estos son los más importantes
Variables
Todas las variables en PHP empiezan con el carácter dólar "$".
Tipos
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
Los tipos básicos de PHP son Integer, Double, String, Array y Object. Las variables booleanas no existen como
tales, sino que cualquier valor numérico distinto de 0 o cualquier cadena no vacía se considera TRUE.
$a = "25";
$b = 40;
$resultado = $a + $b;
echo $resultado; el resultado seria 65
Operadores
$a + $b Adición Suma de $a y $b.
$a - $b Resto Diferencia entre $a y $b.
$a * $b Multiplicación Producto de $a and $b.
$a / $b División Cociente de $a entre $b.
$a % $b Módulo Resto de $a dividido entre $b.
$a . $b Concatenar Concatena la variable $a con $b.
$a++
$a--
sqrt (4) Raiz Cuadrada de un número
pow(4,2) Eleva el número 4 a la potencia 2
Operadores de comparación
$a == $b Igualdad Cierto si $a es igual a $b.
$a === $ Identidad Cierto si $a es igual a $b y si son del mismo tipo (sólo PHP4)
$a != $b Desigualdad Cierto si $a no es igual a $b.
$a < $b Menor que Cierto si $a es estrictamente menor que $b.
$a > $b Mayor que Cierto si $a es estrictamente mayor que $b.
$a <= $b Menor o igual que Cierto si $a es menor o igual que $b.
$a >= $b Mayor o igual que Cierto si $a es mayor o igual que $b.
Operadores Lógicos
&& Y (7>2) && (2<4) Devuelve verdadero cuando ambas condiciones son verdaderas.
And Y (7>2) and (2<4) Devuelve verdadero cuando ambas condiciones son verdaderas.
|| O (7>2) || (2<4) Devuelve verdadero cuando al menos una de las dos es verdadera.
Or O (7>2) or (2<4) Devuelve verdadero cuando al menos una de las dos es verdadera.
! No ! (7>2) Niega el valor de la expresión.
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
La instrucción if
La instrucción if nos da la posibilidad de ejecutar un fragmento de código si la
condición es evaluada como TRUE (Verdadera), si la condición es FALSE no se
ejecuta y pasa a la siguiente condición hasta que encuentra el comando ELSE solo
si la condición del if es FALSE.
Por ejemplo:
?
$count = 1;
if($count <= 10){
echo $count . " es menor de 10";
El ejemplo anterior $count tiene valor 1 por lo que la condicional if es TRUE y
mostraría 1 es menor de 10.
La condición if va sujeta a la instrucción else aunque no siempre debe aparecer
pero, en el caso de que la condición if nos devuelva FALSE la podemos añadir para
mostrar otro mensaje o que el script siga otro camino.
Por ejemplo:
?
$count = 20;
if($count <= 10){
echo $count . " es menor de 10";
}else{
echo $count . " es mayor de 10";
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
Ejercicios Básicos con Estructura Condicional
1. Programa php que lea un número entero y calcule si es par o impar.
2. Programa que lea un número entero y muestre si el número es múltiplo de 10.
3. Programa que lea un carácter por teclado y compruebe si es una letra mayúscula.
4. Programa que lea dos caracteres por teclado y compruebe si son iguales.
5. Programa que lea dos caracteres y compruebe si son dos letras minúsculas.
6. Programa que lea un carácter y compruebe si es un número (Carácter entre '0' y '9').
7. Programa que lea dos números por teclado y muestre el resultado de la división del
primero por el segundo. Se debe comprobar que el divisor no puede ser cero.
8. Calcular el mayor de tres números enteros en php.
9. Programa que lea tres números enteros H, M, S que contienen hora, minutos y segundos
respectivamente, y comprueba si la hora que indican es una hora válida.
10. Programa que lea una variable entera mes y compruebe si el valor corresponde a un mes
de 30, 31 o 28 días. Se mostrará además el nombre del mes. Se debe comprobar que el
valor introducido esté comprendido entre 1 y 12.
11. Programa que pida un número del 1 al 5 y diga si es primo o no.
12. Programa que pida tres números e indicar si el tercero es igual a la suma del primero y el
segundo.
13. Programa que tome tres números y diga si la multiplicación de los dos primeros es igual al
tercero.
14. Programa que tome tres números y diga si el tercero es el resto de la división de los dos
primeros
15. Programa que lea un importe bruto y calcule su importe neto, si es mayor de 15.000 se le
aplicará un 16% de impuestos, en caso contrario se le aplicará un 10%.
16. Que calcule el sueldo que le corresponde al trabajador de una empresa que cobra 40.000
euros anuales, el programa debe realizar los cálculos en función de los siguientes criterios:
a. Si lleva más de 10 años en la empresa se le aplica un aumento del 10%.
b. Si lleva menos de 10 años pero más que 5 se le aplica un aumento del 7%.
c. Si lleva menos de 5 años pero más que 3 se le aplica un aumento del 5%.
d. Si lleva menos de 3 años se le aplica un aumento del 3%.
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
La instrucción switch
La instrucción switch compara una expresión con varios valores y tendrá que
ejecutar diferentes fragmentos de código para cada valor almacenado en la variable.
Por ejemplo:
$hacer = "AÑADIR";
switch ($hacer){
case "AÑADIR":
echo "las tareas a realizar, por ejemplo mostrar con un bucle del 1 al 10";
for ($i=1; $i<= 10; $i++) {
echo $i;
break;
case "MODIFICAR":
echo "Sus tareas";
break;
case "BORRAR":
echo "Las tareas a borrar";
break;
}
Docente: Arturo Díaz Pulido
Computación Básica – Ingeniería Mecatrónica
La sentencia switch selecciona el valor que aparece después del comando switch y
lo compara con los case en el orden en el que aparecen, si no coincide con ninguno
el código no se ejecuta, si coincide con alguno se ejecuta hasta que aparece la
instrucción break. sino quiere que la ejecución del script se detenga puede optar por
quitar las sentencias break. Esta instrucción tiene una última instrucción
llamada default que hace la misma labor que el else de la sentencia if, en el caso
de que no se cumpla ninguna de las condiciones saltará a la instrucción default y
mostrara lo que tengamos.
Por ejemplo:
$hacer = "AÑADIR";
switch ($hacer){
case "AÑADIR":
echo "las tareas a realizar, por ejemplo mostrar con un bucle del 1 al 10 <br>";
for ($i=1; $i<= 10; $i++)
{
echo $i;
}
break;
case "MODIFICAR":
echo "Sus tareas";
break;
case "BORRAR":
echo "Las tareas a borrar";
break;
default:
echo "Error, el valor no es valido";
}
Problemas:
1. Crear una calculadora
2. Que muestre un menú que contemple las opciones “Archivo”, “Buscar” y “Salir”, en caso de
que no se introduzca una opción correcta se notificará por pantalla.
3. Que pase de Kg a otra unidad de medida de masa, mostrar en pantalla un menú con las
opciones posibles
Docente: Arturo Díaz Pulido
