monikafe23-blog
monikafe23-blog
Sin título
74 posts
Don't wanna be here? Send us removal request.
monikafe23-blog · 8 years ago
Text
Noviembre 8
Evaluación
0 notes
monikafe23-blog · 8 years ago
Text
Noviembre 1
Acumulativo 4 periodo
0 notes
monikafe23-blog · 8 years ago
Text
Octubre 25
Proyecto
0 notes
monikafe23-blog · 8 years ago
Text
Octubre 18
Celebración Día del niño
0 notes
monikafe23-blog · 8 years ago
Text
Octubre 11
Continuación de explicación de mysql
0 notes
monikafe23-blog · 8 years ago
Text
codigo
index:
h3>NAVIDAD_20</h3>
<form name="ejercicio" id="ejercicio" action="otro.php" method="post">
<select name="numero" id="numero"><br><br>
<option value="cero">0</option> <option value="uno" >1</option> <option value="dos" >2</option> <option value="tres" >3</option> <option value="cuatro" >4</option> <option value="cinco" >5</option> <option value="seis" >6</option> <option value="siete" >7</option> <option value="ocho" >8</option> <option value="nueve" >9</option> <option value="diez" >10</option>
</select> <br> <br> <input type="submit" value="Enviar"></br> </form> </center>
ejercicio
<div class="col-lg-6 col-lg-offset-3 centered"> <h3>NAVIDAD_20</h3>
<?php $b = $_POST['numero']; ?>
<?php if ($b=="cero") {   echo "cero"; }else
if ($b=="uno") {   echo "uno"; }else
if ($b=="dos") {   echo "dos"; }else
if ($b=="tres") {   echo "tres"; }else
if ($b=="cuatro") {   echo "cuatro"; }else
if ($b=="cinco") {   echo "cinco"; }else
if ($b=="seis") {   echo "seis"; }else if ($b=="siete") {   echo "siete"; }else if ($b=="ocho") {   echo " ocho"; }else if ($b=="nueve") {   echo "nueve"; }else if ($b=="diez") {   echo "diez"; }?>    
0 notes
monikafe23-blog · 8 years ago
Text
Octubre 4
Curso de MySQL(3): Comandos y funciones de MySQL. PhpMyAdmin
Esta es la tercera y última parte del curso de MySQL para principiantes. Ayer vimos los comandos básicos de MySQL para crear, modificar y borrar bases de datos, tablas y registros. Hoy vamos a ver cómo enlazar tablas, cómo crear usuarios, las funciones básicas de MySQL y una introducción a phpMyAdmin.
Este curso de MySQL para principiantes consta de tres entregas:
Introducción a las Bases de Datos Relacionales.
Instalación y Conceptos Básicos de MySQL.
Comandos y funciones de MySQL. Introducción a phpMyAdmin.
Enlazar tablas
Vamos a seguir con el ejemplo de ayer para ver como podemos enlazar tablas usando el comando joins de select. Teníamos la base de datos biblioteca. Para los que justo os incorporáis al curso, la podéis crear y seleccionar con:
1
create
database
biblioteca;
2
use biblioteca;
Volvemos a crear la tabla libros, pero esta vez incluimos el campo editorial:
1
create
table
libros(
2
      libro_id
int
unsigned auto_increment,
3
      titulo
varchar
(50)
not
null
,
4
      autor
varchar
(30)
not
null
default
'Desconocido'
,
5
      codigo_editorial
int
unsigned
not
null
,
6
      cantidad
smallint
unsigned
default
0,
7
     primary
key
(libro_id)
8
);
Y ahora también creamos una tabla editoriales:
1
create
table
editoriales (
2
     editorial_id
int
unsigned auto_increment,
3
     nombre_editorial
varchar
(25)
not
null
,
4
    primary
key
(editorial_id)
5
);
Ahora necesitamos crear una serie de registros para ambas tablas para ver el funcionamiento en la práctica:
1
insert
into
libros (titulo, autor, codigo_editorial, cantidad)
2
             values
(
"Técnicas avanzadas de posicionamiento en buscadores"
,
"Fernando Maciá Domene"
, 1, 2);
3
insert
into
libros (titulo, autor, codigo_editorial, cantidad)
4
             values
(
"Diseño Web con CSS"
,
"Ralph G. Schulz "
, 2, 1);
5
insert
into
libros (titulo, autor, codigo_editorial, cantidad)
6
             values
(
"Usabilidad. Prioridad en el diseño Web"
,
"Jakob Nielsen"
, 1, 1);
1
insert
into
editoriales (nombre_editorial)
values
(
"Anaya"
);
2
insert
into
editoriales (nombre_editorial)
values
(
"Marcombo"
);
En la tabla editoriales, Anaya es el registro 1 y Marcombo el registro 2. Ahora queremos mostrar los libros de la editorial Anaya, probad esto:
1
select
*
from
libros
where
codigo_editorial=1;
Veremos que efectivamente sólo se muestran los libros de la editorial Anaya, pero en el campo editorial aparece el número 1. Lo que nosotros queremos es que en este campo aparezca el nombre de la editorial y no su código. Aquí entra el comando left join para vincular tablas.
Left join
1
select
*
from
libros
join
editoriales
2
      on
editoriales.editorial_id = libros.codigo_editorial;
En este caso, vemos los libros de todas las editoriales, pero también aparece los campos codigo_editorial y editorial_id que no queremos visualizar en los resultados:
Para evitarlo, cambiamos el comodín asterisco por los campos que queremos visualizar:
1
select
libros.titulo, libros.autor,libros.cantidad, editoriales.nombre_editorial
2
                from
libros
join
editoriales
on
editoriales.editorial_id = libros.codigo_editorial;
El resultado es:
Si solo queremos visualizar los libros de la editorial Anaya, entonces hemos de modificar el código:
1
select
libros.titulo, libros.autor,libros.cantidad, editoriales.nombre_editorial
2
             from
libros
join
editoriales
on
editoriales.editorial_id = libros.codigo_editorial
3
            where
libros.codigo_editorial=1;
Finalmente, el resultado es:
Hay otros tipos de comandos join, para más información te invitamos a ver la documentación oficial de MySQL.
Unión de tablas
Con MySQL también podemos unir las consultas a varias tablas en un único conjunto de resultados. Para ello utilizamos el comando union. Es importante tener en cuenta que ambas tablas han de tener el mismo número de campos o nos dará error. Un ejemplo será:
1
select
libros.titulo
from
libros
union
select
editoriales.nombre_editorial
from
editoriales;
Crear un usuario en MySQL
Cuando creamos un usuario, tenemos que definir qué tipo de acceso le damos de los tres disponibles: local, remoto y total. También hemos de definir los permisos que el usuario tendrá: si sólo de lectura o de lectura y escritura.
Acceso total y permisos de lectura y escritura A continuación vamos a crear un usuario llamado administrador en la base de datos biblioteca con la contraseña 123abc. A este usuario le vamos a dar un perfil de administrador, esto es, total acceso y permisos de escritura y lectura:
1
grant
all
privileges
on
biblioteca.*
to
'administrador'
@
'localhost'
2
    identified
by
'123abc'
with
grant
option
;
3
flush
privileges
;
Ponemos flush privileges para no tener que esperar a que se reinicie el servidor para que se hagan efectivos los permisos.
El tema de los permisos y gestión de usuarios excede este curso para principiantes, para los que queráis saber más, os recomiendo consultar la página de referencia de MySQL.
Las funciones en MySQL
La mayoría de las funciones que veremos en este curso de MySQL para principiantes se crean usando el comando select, pero puedes utilizar las funciones de MySQL de manera mucho más amplia. A continuación veremos las funciones básicas de MySQL para incluir en la programación de nuestras bases de datos.
Convertir una cadena de caracteres en mayúsculas
1
select
upper
(titulo)
from
libros;
Nos devuelve el título en mayúsculas de todos los libros incluidos en la tablalibros.
Convertir una cadena de caracteres en mínusculas
1
select
lower
(titulo)
from
libros;
Nos devuelve el título en mínusculas de todos los libros incluidos en la tablalibros.
Concatenar cadenas Para ilustrarlo, vamos a crear una tabla usuarios dentro de biblioteca
1
use biblioteca;
2
create
table
usuarios (
3
usuario_id  
int
unsigned auto_increment,
4
     nombre
varchar
(30)
not
null
,
5
      primer_apellido
varchar
(30)
not
null
,
6
     primary
key
(usuario_id)
7
);
Ahora vamos a insertar un par de registros en esta tabla:
1
insert
into
usuarios (nombre, primer_apellido)
values
(
"Sara"
,
"Gutiérrez"
);
2
insert
into
usuarios (nombre, primer_apellido)
values
(
"Pablo"
,
"Morales"
);
Para ver el nombre y el apellido como una cadena, hacemos:
1
select
concat (nombre,
'  '
, primer_apellido)
from
usuarios;
El resultado será que veremos en pantalla lo siguiente:
En el título de los resultados vemos que pone concat (nombre, ‘ ‘ , primer_apellido), pero nosotros queremos que ponga Usuarios. Con esto introducimos el comando as:
1
select
concat (nombre,
'  '
, primer_apellido)
as
Usuarios
from
usuarios;
Ahora vemos que en lugar de concat (nombre, ‘ ‘ , primer_apellido) aparece Usuarios:
Longitud de una cadena de texto Con el comando length podemos calcular el número de caracteres de una palabra o frase:
1
select
length(
'mi casa'
);
El resultado es 7, ya que también cuenta los espacios.
Para más funciones con cadenas, os recomendamos ver la guía oficial de MySQL.
Funciones numéricas
Primero de todo, veamos los operadores numéricos: Suma
1
select
3+5;
Muestra en pantalla 8.
Resta
1
select
3-5;
Muestra en pantalla -2.
Multiplicación
1
select
3*5;
Muestra en pantalla 15.
División
1
select
3/5;
Muestra en pantalla 0.60.
Mödulo El módulo es el resto de una división.
1
select
5%2;
Muestra en pantalla 1.
Entre las funciones numéricas destacamos:
Raíz cuadrada
1
select
sqrt(4);
Devuelve 2.
Redondeo El primer valor de la funcion round(n1, n2) es el número decimal que queremos redondear y el segundo valor es el número de decimales que se han de conservar.
1
select
round(56.443, 2);
Devuelve 56.44.
Rand Muestra un número aleatorio entre 0 y 1
1
select
rand();
Para otras funciones numéricas, os recomendamos este enlace de MySQL.
Funciones para la fecha y hora
Las funciones para la fecha y la hora de MySQL son particularmente flexible y útiles. Tanto si lo que quieres es hacer un cálculo basado en la fecha (por ejemplo, obtener la edad dividiendo la fecha actual con la de nacimiento), o simplemente devolver el nombre del mes, existe una función de MySQL para cada propósito. Aquí sólo veremos una selección de las mismas, puede consultar la página de desarrollo de MySQL para ver todas las funciones que tienes disponibles.
Mostrar la fecha actual
1
select
curdate();
Muestra 2012-03-01.
Mostrar la hora actual
1
select
curtime();
Muestra 18:15:32.
Mostrar la fecha y hora actual
1
select
now();
El formato del resultado es: 2012-03-01 18:15:32.
Extraer la fecha de un resultado
1
select
date
(
'2011-12-31 01:02:03'
);
El formato del resultado es: 2011-12-31.
Escapa del alcance de este curso el entrar en detalle en todas las funciones disponibles en MySQL, puedes encontrar toda la información en la guía oficial de desarrolladores de MySQL.
Introducción a phpMyAdmin
Os recomiendo el uso de phpMyAdmin a todos los que aprendéis MySQL con el objetivo de combinarlo en la creación de páginas web dinámicas. En sí, todos los gestores de contenidos basados en PHP y MySQL lo traen integrado, como es el caso de WordPress, Joomla y Drupal. phpMyAdmin es una herramienta de software gratuita pensada para la fácil administración de MySQL en Internet.
Las operaciones más usadas, como crear, modificar y borrar bases de datos, tablas o registros se pueden realizar a través de su interfaz sin necesidad de saber MySQL, lo que lo convierte en una estupenda herramienta para las personas que no conocen el lenguaje. También es útil cuando, aún conociéndolo, se trata de ir rápido, pues no has de prestar atención en la sintaxis de cada una de las sentencias. Uno de los puntos fuertes es que cada vez que haces algo con la interfaz, no sólo da el resultado, sino que te muestra en pantalla la sintaxis que ha utilizado para llevarlo a cabo, lo que también es una herramienta excelente de aprendizaje.
Veamos un ejemplo. Tenemos ya creadas la base de datos biblioteca junto con las tablas libros, usuarios y editoriales. Ahora queremos insertar un nuevo libro en la tabla libros. Veremos esta pantalla:
Como vemos, nos permite introducir dos registros, para ello, deberíamos quitar la marca de “Ignorar”. Podéis ver en la imagen que he creado un libro titulado “Me lo invento” de autor “Desconocido” de la editorial 1 y del que tenemos 2 en total. Cuando pulsamos en “Continuar”, vemos esta pantalla:
Como vemos, no sólo nos confirma que se ha creado una nueva fila en la tabla libros, sino que además nos muestra el código generado. Es una excelente interfaz gráfica para el desarrollo web.
Entre otras funciones, phpMyAdmin puede crear y eliminar bases de datos, crear, modificar y eliminar alterar tablas, añadir, editar y borrar campos, ejecutar cualquier sentencia de MySQL, crear, editar y borrar usuarios, administrar privilegios, así como importar y exportar datos en varios formatos. Estas funciones de importar y exportar también son muy útiles cuando queremos trasladar nuestro blog a otro sistema, por ejemplo, de Drupal a WordPress.
Crear una base de datos con phpMyAdmin
Para crear una base de datos, vamos a la pestaña “Base de Datos” en el campo “Crea una base de datos”, ponemos el nombre de la base de datos que queremos crear y pulsamos “Crear”:
Borrar una base de datos con phpMyAdmin
En la misma pestaña que antes, seleccionamos la base de datos que queremos borrar y pulsamos “Eliminar”:
Crear una tabla con phpMyAdmin
En la pestaña anterior, clicamos encima de la base de datos que queremos modificar. Veremos que hemos seleccionado la base de datos, porque, tal y como vemos en la siguiente imagen, aparecerá en el panel lateral de phpMyAdmin. Suponiendo que no hemos eliminado videoteca.hacemos clic sobre ella y veremos esto:
Como hacíamos anteriormente, hemos de especificar el número de campos que tendrá la tabla. En el paso siguiente habremos de especificar los valores de los campos, tal y como hacíamos manualmente:
Para modificar o borrar una tabla, haremos lo mismo que hicimos con las bases de datos: la seleccionamos y le damos a “Eliminar”. Para insertar un registro, en la pantalla donde aparece la tabla, pulsamos “Insertar” y en la siguiente pantalla rellenamos los diferentes campos:
Conclusión
Esta ha sido la tercera y última parte de un curso de MySQL para principiantes. Hemos visto como vincular tablas con joint left y union, como crear usuarios, las funciones básicas de MySQL y una introducción a phpMyAdmin. Si te ha interesado el tema y quieres seguir aprendiendo, te recomendamos la web de desarrollo de MySQL en castellano.
0 notes
monikafe23-blog · 8 years ago
Text
Septiembre 27
primera habilidad del cuarto periodo en 100 y nivelo informatica tercer periodo
0 notes
monikafe23-blog · 8 years ago
Text
SEPTIEMBRE 27
Nivelación 3 periodo
0 notes
monikafe23-blog · 8 years ago
Text
Septiembre 20
Entrega de notas
INICIO DEL CUARTO PERIODO
.cRONOGRAMA 
Tumblr media
0 notes
monikafe23-blog · 8 years ago
Text
Septiembre 13
Semana de receso
0 notes
monikafe23-blog · 8 years ago
Text
Agosto30
0 notes
monikafe23-blog · 8 years ago
Text
Agosto 23
Acumulativo
0 notes
monikafe23-blog · 8 years ago
Text
Agosto 16
Proyecto tercer periodo
0 notes
monikafe23-blog · 8 years ago
Text
Muchos de nosotros hemos utilizado los Templates de Dreamweaver con la esperanza de facilitarnos, a futuro, la tarea de hacer cambios en partes de nuestras webs. Así, por ejemplo, si necesitamos agregar un botón al menú de un sitio de 40 páginas, hacemos dicha modificación en el template, para no tener que cambiarlo en todas las páginas, lo que nos demandaría un rato muy largo. Sin embargo, las templates de Dreamweaver pueden no ser siempre la mejor solución ni la más fácil de administrar. Es por eso que resulta mejor maquetar nuestras plantillas en un solo archivo y luego dividirlo en partes: encabezado, menu, sidebar, footer, etc., como hace Wordpress. Esto nos permite un mayor control sobre los elementos que componen nuestras páginas. Vamos a ello: Supongamos que creamos un archivo index.html, que contiene lo siguiente:
Código :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head>   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">   <title>Titulo de la pagina</title> </head> <body> <!--Menú--> <ul> <li>Inicio</li> <li>Quiénes somos</li> <li>Contacto</li> </ul> <!--Div con el encabezado--> <div id="encabezado"> <!--Aquí va una imagen o un logo o un swf o todo a la vez--> </div> <!--Div con el contenido--> <div id="wrapper"> <h1>Aquí va el título de la página</h1> <p>Aquí va algún texto y más abajo irían imágenes</p> </div> <!--Sidebar--> <div id="sidebar"> <p>Aquí van algunos links o publicidad</p> </div> <!--Footer--> <div id="footer"> <p>Aquí pueden ir los datos de contacto</p> </div> </body> </html>
Bien, esto es lo básico, si quisiéramos crear una segunda página, digamos quienes_somos.html, simplemente grabaríamos como y, conservando la misma estructura, cambiaríamos los contenidos, principalmente el del div principal (wrapper).
Pero, si el día de mañana tuviéramos que cambiar los datos del sidebar, el pie, el menú, etc., deberíamos cambiarlos en cada página. Para facilitar las cosas -y de paso no usar plantillas Dreamweaver- vamos a dividir las partes de la página en varios archivos y luego llamarlos con la sentencia include() de
PHP
.
Lo primero será renombrar nuestro index.html a index.php. Luego, podríamos copiar, por ejemplo, el menú del sitio a un archivo llamado menu.php, que contendría sólo lo siguiente:
Código :
<!--Menú--> <ul> <li>Inicio</li> <li>Quiénes somos</li> <li>Contacto</li> </ul>
Luego, volviendo a nuestro index.php, borraríamos el código que acabamos de copiar y, en su lugar, pondríamos:
Código :
<?php include("menu.php"); ?>
Con esto tan simple, aparece el menú como si lo tuviéramos en la misma página.
Luego, haríamos lo mismo con todas las otras partes, creando los archivos respectivos a cada sección del diseño que se repite en cada página:
encabezado.php
sidebar.php
footer.php
Y reemplazaríamos el código en index.php, quienes_somos.php, contacto.php, etc., por su respectiva llamada
Código :
<?php include("encabezado.php"); ?> <?php include("menu.php"); ?> <?php include("footer.php"); ?>
Así, cuando necesitáramos agregar un botón en el menú, una publicidad en el sidebar o cambiar los datos de contacto en el footer, simplemente acudiríamos a los archivos específicos, con lo cual estos cambios se mostrarían en todas las páginas.
Si alguien no desea utilizar la extensión php en los archivos de sus sitio web, puede simplemente renombrarlos mediante un archivo
.htaccess
.
0 notes
monikafe23-blog · 8 years ago
Text
alidar que el texto introducido en un formulario HTML es realmente un número es, quizas, el código JavaScript más utilizado a lo largo de la red. No en vano, si nos ponemos a pensar en el tipo de validaciones que se hacen dentro de un formulario, estas se limitaran a tamaños de cadenas, validaciones de número o, en los casos más avanzados, en patrones o expresiones regulares.
Y es que la potencia de detección de patrones en JavaScriptpuede ayudarnos a resolver cualquier validación que queramos hacer en un formulario HTML. Como veremos más adelante en el caso que nos compete.
Para empezar tenemos un formulario HTML simple, en el cual incluiremos un campo de texto mediante una etiqueta <INPUT>.
<FORM id="formularioCantidad">
 Cantidad: <INPUT type="text" SIZE=10 id="cantidad">
</FORM>
La idea es que cuando la persona teclee algo sobre este campo y se vaya a otro realicemos la validación sobre si es o no un número.
A si que lo primero que tenemos que hacer es controlar el evento onChange el cual nos indicará que el contenido del campo ha cambiado con respecto al anterior ha cambiado y nos hemos ido a otro elemento de la página. Y asociaremos a este evento la función de validación.
Quedándonos la siguiente línea de código:
<INPUT type="text" SIZE=10 id="cantidad" onChange="validarSiNumero(this.value);">
Como podemos ver, la función está recibiendo como parámetro el valor que haya en el campo del formulario. Si bien, podemos utilizar cualquier otro evento que nos pueda venir bien. Ahora solo nos quedará codificar la función JavaScript que valide si lo recibido es un número. Como hemos dicho al principio, nos vamos a basar en patrones. Es decir, la idea es validar que los caracteres pasados son números y tendremos que compararlo contra un patrón que signifique eso.
Los patrones en JavaScript son expresiones regulares. Una expresión regular se define de la siguiente forma:
/^ expr regular $/
Es decir, siempre empieza por "/^" y acaba por $/.
Si con una empresión regular queremos validar que un caracter sa un número utilizaremos el rango [0-9], quedándonos la expresión de la siguiente forma:
/^[0-9]$/
Si queremos indicar que van a ser un conjunto de caracteres deberemos de utlizar un operador de cardinalidad. En este caso deberemos de utilizar el * para indicar que serán n caracteres. Ahora, nos quedará de la siguiente forma:
/^([0-9])*$/
Sobre la expresión regular se aplicará el método test, el cual recibe el dato a ser contrastado con la expresión regular. Es por ello que nuestra función de validación de números quedaría de la siguiente forma:
<script>
 function validarSiNumero(numero){
   if (!/^([0-9])*$/.test(numero))
     alert("El valor " + numero + " no es un número");
 }
</script>
Ojo, que en la validación estamos indicando que sea diferente a la expresión regular definida. De ahí el simbolo exclamación (!). Que lo que hace es negar lo puesto después.
La función la deberemos de poner en la cabecera de la página para que pueda ser utilizada desde cualquier parte de la página.
0 notes
monikafe23-blog · 8 years ago
Text
Estás aquí:
Inicio
/
Curso de HTML
/ Formularios III: listas de opciones
Las listas de opciones son de gran ayuda para los formularios en los que queremos saber la opinión de un aspecto concreto en nuestra Web, dentro de diferentes opciones planteadas previamente por nosotros. Las listas de selección u opciones se escriben gracias a la etiqueta <selection> y a su cierre.
Vamos a ponerte un ejemplo de la lista de opciones básica, la más sencilla. Si queremos preguntar, por ejemplo, cuál es el medio de transporte favorito de nuestro usuarios, el código de la lista de selección podría ser el siguiente:
<select name="transporte"> <option>Coche</option> <option>Avión</option> <option>Tren</option> </select>
Y el resultado quedaría de la siguiente manera.
Coche Avión Tren
Pero podemos personalizar esta lista de opciones mediante una serie de atributos. Por ejemplo, podemos hacer que se vea más de una opción a la vez en la lista. Para ello utilizaremos “size”, indicando el número de opciones que queremos que se muestren.
En la lista anterior si quisieramos que se vieran dos opciones, deberíamos cambiar el código anterior por el siguiente:
<select name="transporte" size="2"> <option>Coche</option> <option>Avión</option> <option>Tren</option> </select>
Para obtener el siguiente resultado:
Coche Avión Tren
También podemos definir si queremos que se pueda elegir más de una opción a la vez mediante las teclas ctrl y shift. Para ello utilizaremos el atributo multiple. Mira primero cómo quedaría nuestro código:
<select name="transporte" size="2" multiple> <option>Coche</option> <option>Avión</option> <option>Tren</option> </select>
Y aquí comprobarás lo que nos permite hacer este atributo:
Coche Avión Tren
Otra cosa que podemos predefinir es que la opción que aparezca seleccionada al principio no sea la primera que está en la lista. Esto se realiza gracias al atributo selected y lo tenemos que poner en la opción que queramos que aparezca como seleccionada. En el código siguiente, queríamos que apareciera seleccionada la opción del tren.
<select name="transporte"> <option>Coche</option> <option>Avión</option> <option selected>Tren</option> </select>
Y aquí puedes ver cuál ha sido el resultado:
Coche Avión Tren
Por último esta el atributo value. Este atributo es muy útil para gestionar los datos, sobre todo si le llega a un programa. Con este atributo lo que se le hace es atribuir un número o una letra a cada opción.
El atributo se escribe dentro de cada opción y se define el valor del mismo. Por ejemplo, en la primera lista que te hemos presentado podríamos valorar nuestras opciones de la siguiente manera:
<select name="transporte"> <option value="1">Coche</option> <option value="2">Avión</option> <option value="3">Tren</option> </select>
Y en el supuesto de seleccionar por ejemplo la opción del avión, al programa (o al correo electrónico) le llegaría el siguiente dato: transporte=2. si te fijas, transporte es el nombre de esta lista de opciones.
Listas de botones: radio button
A continuación vamos a ver otro tipo de listas de opciones o de selección. Son listas con botones de tipo radio. Estos botones se escriben mediante la etiqueta type=”radio”.
Vamos a transformar la lista anterior en este tipo de lista. Fijaros que a cada opción le vamos a atribuir una etiqueta nueva, pero todas ellas van a tener el mismo nombre. El código nuevo quedaría de la siguiente manera:
<input type="radio" name="transporte" value="1">Coche <br> <input type="radio" name="transporte" value="2">Avión <br> <input type="radio" name="transporte" value="3">Tren
Y el cambio de aspecto es evidente. Aquí lo tenéis:
Coche Avión Tren
Por defecto no saldrá ninguna opción activada. Pero si queremos activar alguna de ellas podemos hacerlo mediante el atributo checked. Por ejemplo, en el código siguiente la lista de opciones tiene activada la opción avión:
<input type="radio" name="transporte2" value="1">Coche <br> <input type="radio" name="transporte2" value="2" checked>Avión <br> <input type="radio" name="transporte2" value="3">Tren
Y observa el resultado que obtenemos…
Coche Avión Tren
Listas de cajas: checkbox
Estas listas de opciones son muy parecidas a las vistas anteriormente salvo por dos detalles que vamos a mostrarte a continuación.
El primero de ellos y fundamental es que las cajas son de un tipo diferente y se escriben, por tanto, de forma diferente. Las cajas se escriben mediante type=“checkbox”.
Otra diferencia es que así como las listas de botones tipo “radio” sólo permitiían elegir una opción (siempre y cuando los nombres de las opciones fueran los mismos), las listas de cajas permiten seleccionar una o varias opciones.
Aquí tienes el código de una lista que hemos escrito para demostrarte todo lo que te hemos explicado anteriormente:
<input type="checkbox" name="transporte" value="1">Coche <br> <input type="checkbox" name="transporte" value="2" checked>Avión <br> <input type="checkbox" name="transporte" value="3">Tren
0 notes