En una reciente limpieza a mi disco duro he encontrado esta guia que tenia guardada por ahi y creo que esta muy buena para empezar y conocer las nociones basicas del HTML.Sintaxis para caracteres especiales.
.
Posiblemente hasta ahora no se a preguntado como disponer dentro de una página los caracteres: < y >. Veremos que no los podemos disponer directamente ya que el navegador los confudiría con los caracteres que se utilizan para las marcas HTML.
La solución es utilizar otra sintaxis para dichos caracteres, veamos los más utilizados:
< < > > & & " " //Espacio en blanco. © © € €
Es decir la sintaxis es disponer un ampersand seguido de un nombre significativo (por lo menos para los que entienden ingles) y finalmente un punto y coma.
Para ver su funcionamiento mostraremos la siguiente ecuación:
10+x*y < 12*z
pagina1.html
<html> <head> <title>Título de la primer página</title> </head> <body> <h1> 10+x*y < 12*z </h1> </body> </html>
Formulario - <form>.
n formulario permite que el visitante al sitio cargue datos y sean enviados al servidor.
Es el medio ideal para registrar comentarios del visitante sobre el sitio, solicitar productos, sacar turnos etc.
De todos modos veremos que el lenguaje HTML solo tiene el objetivo de crear el formulario. El HTML no tiene la responsabilidad de registrar los datos en el servidor, esta actividad está delegada a un lenguaje que se ejecute en el servidor (PHP, ASP, ASP.Net, JSP etc.)
Como este curso nos concentramos solamente en el lenguaje HTML no veremos como registrar los datos en el servidor. Si está impaciente puede visitar y ver como capturar los datos en el servidor mediante PHP en PHP Ya
Si recien comienza en el mundo del desarrollo de páginas web es recomendable primero aprender y conocer todos los elementos para la creación de formularios en HTML y en un paso posterior estudiar la registración en el servidor
Veamos la sintaxis básica para crear un formulario donde ingresemos nuestro nombre.
Para crear un formulario debemos utilizar el elemento form, que tiene marca de comienzo y fin. Dentro de la marca form veremos otros elementos para crear botones, editores de línea, cuadros de chequeo, radios de selección etc.
Confeccionaremos un formulario para el ingreso de nuestro nombre y un botón para el envío del dato ingresado al servidor:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> <input type="submit" value="enviar"> </form> </body> </html>
Veamos detenidamente la estructura de un formulario elemental, lo primero la apertura de la marca form donde debemos definir dos propiedades (action y method):
<form action="/registrardatos.php" method="post">
La propiedad action se inicializa con el nombre de la página que procesará los datos en el servidor. Como no conocemos la sintaxis de un lenguaje de servidor almacené en la raiz de este sitio una página codificada en PHP que recibe los datos del formulario y los imprime en una nueva página (recordar que en este curso no se ve como programar en el servidor)
Todo los formularios que implemento y los que usted implementará como ejercicios deben llamar a esta página: "/registrardatos.php" más adelante cuando conozca un lenguaje de servidor podrá almacenarlos en una base de datos, consultar otros datos, modificar datos existentes etc.
La segunda propiedad que debemos inicializar es method. Esta propiedad puede almacenar únicamente dos valores (post o get)
Normalmente un formulario se envía mediante post (los datos se envían con el cuerpo del formulario) En caso de utilizar get los datos se envían en la cabecera de la petición de la página, utilizando el método get estamos limitados en la cantidad de datos a enviar, no asi con el método post.
Ahora veamos el cuadro de texto donde se ingresa el nombre:
Ingrese su nombre: <input type="text" name="nombre" size="20"> <br>
El mensaje "Ingrese su nombre:" es un texto fijo.
El elemento input permite definir un cuadro de texto (editor de línea) si asignamos a la propiedad type el valor "text".
Todo cuadro de texto debe inicializar la propiedad name con un nombre para el cuadro de texto. Este es un dato fundamental para poder recuperar el dato ingresado en el servidor (por ejemplo mediante PHP)
Por último inicializamos la propiedad size con el valor 20, esto significa que el cuadro de texto se dimensiona para permitir mostrar 20 caracteres (no se limita la cantidad de caracteres a ingresar por parte del visitante sino la cantidad de caracteres que se pueden visualizar)
Seguidamente:
<input type="submit" value="enviar">
También mediante el elemento input definimos un botón para el envío de datos al servidor. Debemos inicializar la propiedad type con el valor submit, con esto ya tenemos un botón para el envío de datos.
La propiedad value almacena la etiqueta que debe mostrar el botón.
Finalmente cerramos el formulario:
</form>
Formulario - input type="text"/ input type="password"
En el concepto anterior vimos como implementar un formulario básico.
Veamos ahora con más detenimiento el elemento input. Este elemento hemos visto que nos permite definir cuadros de texto y botón para subir los datos al servidor. Ahora veremos que también podemos definir cuadros para el ingreso de una clave y botones para borrar el contenido de todos los controles del formulario.
Confeccionaremos un formulario que solicite el ingreso del nombre de un usuario y su clave:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su clave: <input type="password" name="clave" size="12"> <br> <input type="submit" value="enviar"> <input type="reset" value="borrar"> </form> </body> </html>
Veamos la sintaxis nueva para definir un cuadro de texto para el ingreso de una clave:
<input type="password" name="clave" size="12">
Utilizamos el mismo elemento input pero inicializamos la propiedad type con el valor "password", con esto logramos que cuando el visitante ingrese la clave se visualicen asteriscos en lugar de los caracteres que tipeamos.
Luego para definir un botón que permita borrar todos los datos ingresados hasta el momento lo hacemos mediante:
<input type="reset" value="borrar">
Es decir inicializamos la propiedad type con el valor "reset", con esto sabe el navegador que cuando dicho botón sea presionado debe borrar todos los controles de ingreso de datos de dicho formulario.
Otra cosa que hay que tener en cuenta que la propiedad name de cada elemento input debe tener un nombre distinto (esto debido a que en el servidor se lo rescata a partir de este nombre)
Formulario – textarea.
Es muy utilizado cuando queremos ingresar un comentario de una longitud de caracteres grande.
Confeccionemos un formulario para que un visitante pueda ingresar su nombre, su mail y un comentario del sitio, empleando para este último dato a ingresar un elemento de tipo textarea:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Ingrese su mail: <input type="text" name="mail" size="50"><br> Comentarios:<br> <textarea name="comentarios" rows="5" cols="60"></textarea> <br> <input type="submit" value="Enviar"> </form> </body> </html>
La sintaxis para definir un área de texto para el ingreso de múltiples líneas es:
<textarea name="comentarios" rows="5" cols="60"></textarea>
Es un elemento que requiere una marca de comienzo y una de finalización.
Además de tener la propiedad name similar a los otros elementos relacionados a formularios tiene dos propiedades llamadas rows y cols. Estas dos propiedades indican la cantidad de filas y columnas que visualiza el área de texto.
Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:
El Mundo de Ubuntu en las Redes Sociales
Espero que esta publicación te haya gustado. Si tienes alguna duda, consulta o quieras complementar este post, no dudes en escribir en la zona de comentarios. También puedes visitar Facebook, Twitter, Google +, Linkedin, Instagram, Pinterest, restantes Redes Sociales y Feedly donde encontrarás información complementaria a este blog. COMPARTE EN!