HTML Bloque 2 [Modo de compatibilidad]
Anuncio
08/04/2015 Diseño Web y Multimedia Modulo 2: Diseño e implementación de la estructura de un sitio Web. - HTML 5.- Formularios. - Etiqueta <form> - Atributos: - Action: url del programa que va a tratar el formulario. Method: Método por medio del cual se enviarán los datos. Enctype: Como se codificarán los datos antes de enviarlos. Ejemplo: <form name=“identificacion” action=“login.jsp” method=“get”> Nombre de usuario: <input type=“text” name=“login”/><br/> Password: <input type=“password” name=“password”/><br/> <input type=“submit” value=“entrar”/> </form> 1 08/04/2015 - HTML 5.- Formularios. Ejemplo: <form name=“identificacion” action=“login.jsp” method=“get” enctype=“text/plain”> Nombre de usuario: <input type=“text” name=“login” value=“guest”/><br/> Password: <input type=“password” name=“password”/><br/> <input type=“submit” value=“entrar”/> </form> De esta forma los datos se enviaran como una secuencia de pares: dato(name) y valor(value). La codificación depende del atributo enctype, así pues si no se especifica nada el valor es: application/x-www-form-urlencoded, el cual trabaja de la siguiente forma: - Sustituye los espacios por +. - Sustituye los caracteres especiales por % seguido del código ASCII. - HTML 5.- Formularios. - GET Vs POST. ¿Difícil elección? Get envia los datos en la URL de la petición: login.jsp?login=pedro&password=hola+%26juanito Codificación por defecto sin enctype. Problemas que ocasiona todo esto: - Los datos se ven en la barra del navegador. - La longitud no puede ser muy larga. 2 08/04/2015 - HTML 5.- Formularios. Post envía los datos en el cuerpo de la petición. - Es usado normalmente para enviar por e-mail: action=“mailto:[email protected]” <form name=“identificacion” action=“mailto:[email protected]” method=“post” enctype=“text/plain”> Nombre: <input type=“text” name=“login” value=“guest”/><br/> e-mail: <input type=“text” name=“email”/><br/> asunto: <input type=“text” name=“asunto”/><br/> <input type=“submit” value=“enviar”/> </form> - HTML 5.- Formularios. (Controles de formularios I). - La mayor parte se definen como <input>. - El atributo type indica el tipo de control. - Controles básicos: - - Cuadro de texto de 1 línea: type=“text”. Cuadro de password: type=“password”. Enviar ficheros: type=“file” y además requiere enctype=“multipart/form-data”. Botones de acción: - Enviar un formulario: type=“submit”. Enviar formulario con imagen: type=“image”. Borrar controles: type=“reset”. Imagen, para usar una imagen como botón de enviar: <input type=“image” src=“imagen.gif” width=“94px” height=“26px” border=“0px” alt=“enviar” /> 3 08/04/2015 - HTML 5.- Formularios Ejemplo de formulario: <html> <head> <title>Mi primer formulario</title> </head> <body> <form action="mailto:[email protected]" method="post" enctype="multipart/form-data"> Login: <input type="text" name="nombre“ /> <br /> fichero: <input type="file" name="fichero“ /> <br /> <input type="submit" value="enviar“ /> </form> </body> </html> - HTML 5.- Formularios - Controles Casillas de verificación: type=“checkbox” Los del mismo grupo tienen el mismo atributo name: además puede haber varios señalados al mismo tiempo. <form action=“mailto:[email protected]” method=“post” enctype=“text/plain”> Describa aficiones: <br/> <input type=“checkbox” name=“aficion” value=“cine” checked/> Cine <input type=“checkbox” name=“aficion” value=“musica”/> Musica <input type=“submit” value=“Enviar”/> </form> Solamente se enviará name=valor para los casos en los que el checkbox tenga el valor checked. 4 08/04/2015 - HTML 5.- Formularios - Controles Botones de Radio: type=“radio” Todos los del mismo grupo tienen el mismo name: pero sólo puede haber marcado uno a la vez. <form action=“mailto:[email protected]” method=“post” enctype=“text/plain”> <input type=“radio” name=“voto” value=“enrique” checked /> Enrique Iglesias <input type=“radio” name=“voto” value=“manolo” /> Manolo Kabezabolo <input type=“submit” value=“¡Vota!”> </form> - HTML 5.- Formularios - Controles Cuadro de lista o lista desplegable: <select> – Atributos name: nombre del control. multiple: si está presente, se puede seleccionar más de una opción. size=tamaño: número de opciones simultáneas en pantalla (si tamaño=1, lista desplegable) 5 08/04/2015 - HTML 5.- Formularios - Controles Para definir cada opción: <option> – Atributos: - value: si no está presente, el value es el contenido de <option>. - selected: seleccionada por defecto. - HTML 5.- Formularios - Controles Ejemplo formulario: <form action=“mailto:[email protected]” method=“post” enctype=“text/plain”> <select name=“edad” size=“1”> <option value=“1”>menor de 18 </option> <option value=“2” selected> 18-25 </option> <option value=“3”> mayor de 25 </option> </select> <input type=“submit” value=“Enviar” /> </form> 6 08/04/2015 - HTML 5.- Formularios - Controles Áreas de texto. Se emplean para que el usuario pueda introducir un párrafo. Etiqueta: <textarea> </textarea> Atributos: – Name: nombre que identifica al control. – Rows: número de filas. – Cols: número de columnas. - HTML 5.- Formularios - Controles Ejemplo: <form action=“mailto:[email protected]” method=“post” enctype=“text/plain”> <textarea name=“comentario” rows=5 cols=30></textarea> <input type=“submit” value=“Enviar” /> </form> 7 08/04/2015 - HTML 6.-Tablas. Empleadas para dividir la página en zonas y distribuir los elementos. Algunos atributos: – width: ancho en pixels o en porcentaje de ventana (%). – Height: altura en pixels o en porcentaje de ventana (%). – border: ancho del borde. – cellspacing: espacio entre celdas. – cellpadding: espacio entre limite de celda y texto en ella. - HTML 6.-Tablas. <tr>:define una fila de datos. <td>:define una celda de datos. – Algunos atributos width: ancho en pixels o en porcentaje de tabla (%). height: alto mínimo. rowspan: filas abarcadas por la celda. colspan: columnas abarcadas por la celda. 8 08/04/2015 - HTML 6.-Tablas. <table border=“3px” cellspacing=“10px” cellpadding=“5px” width=“150px” height=“100px”> <tr> <td colspan="2">Temas</td> <td> Sesiones </td> </tr> <tr> <td> 1 </td> <td> HTTP </td> <td> 1 </td> </tr> <tr> <td> 2 </td> <td> AppletsJava </td> <td> 3 </td> </tr> </table> - HTML 7.- Otras etiquetas. Permiten dividir la pantalla en varias zonas. Cada una incluye una página web diferente <html> <head> <title>Ejemplo del uso de marcos</title> </head> <frameset rows=“10,*"> <frame src=“titulo.htm" name="topFrame"> <frameset cols=“20,*"> <frame src=“menu.htm" name="leftFrame"> <frame src=“contenido.htm" name="mainFrame"> </frameset> </frameset> <noframes> <body> </body> </noframes> </html> 9 08/04/2015 - HTML 7.- Otras etiquetas. Divisiones. Crear secciones en el código – DIV: sección de bloque (fuerza salto de línea) Aquí se insertará un salto de línea <div>Esto es un bloque del documento </div> – SPAN: sección en línea La asignatura de <span>Mátematicas</span> se imparte en el aula del nuevo pabellón. Uso: diferenciar partes para cambiar estilos, animaciones, etc... - HTML 7.- Otras etiquetas – Atributos comunes. Hay una serie de atributos que aceptan casi todas las etiquetas: – class: subclase de etiquetas – id: identificador único – onclick, ondblclick, onmouseover,.. eventos <p onclick=“alert(‘¡Ay!’);”> No me pinches</p> 10
