HTML: Formularios – Parte 1
Articles,  Blog

HTML: Formularios – Parte 1


hola soy guzmán fernando garcía desarrollador web y en este vídeo que forma parte del curso introducción al desarrollo web voy a explicar el uso de formularios de html puedes encontrarme en mi web guzmán fernández puntocom y en twitter como pie izquierdo también puedes contactar conmigo a través de mi correo electrónico guzmán punto hasta gmail.com qué son los formularios según la w3c un formulario html es una sección de un documento que contiene contenido normal código elementos especiales llamados controles y rótulos para esos controles los usuarios normalmente rellenar un formulario modificando sus controles antes de enviar el formulario a un agente para que lo procese a un servidor web un servidor de correo etcétera para que se utilizan pues justamente para eso para permitir que el usuario envíe información al servidor formularios de registro o accesos sitios web formularios de contacto hasta para escribir un comentario en facebook estamos utilizando un formulario te presento las etiquetas básicas para formularios vamos a ir analizando las una a una la etiqueta form es fundamental para que el resto de elementos puedan ser enviados todos los campos que se quieren enviar deben estar entre las etiquetas form ibarra forma esta etiqueta no tiene representación gráfica action es el único atributo requerido para la etiqueta forma espera una cadena de texto que especifique la url o ruta a la acción de destino que procese los datos de la petición es posible utilizar una ruta absoluta o una relativa method indica la forma de enviar la información este atributo acepta dos valores get y post si no se utiliza el formulario se enviará por defecto mediante el método ok no es común la expresión realiza una petición get a la url http www.idg.es más bien diríamos algo así como en tren y des web punto es sin embargo para el trabajo con formularios es necesario saber distinguir entre dos tipos de peticiones que a un cliente le hace un servidor get y post hay más pero no las comentaré en este tema que es el método que utilizamos normalmente al navegar al utilizarlo en un formulario los datos de envío son visibles en la url como parejas nombre igual valor esta forma de envío está limitada y el límite depende de cada navegador utilizaremos que normalmente en los casos en los que el resultado del envío sea siempre el mismo y cuando queramos que el resultado se pueda guardar por ejemplo en un formulario de búsqueda post es un método un poco más seguro que para el envío de información sensible como pueden ser contraseñas ya que los datos no son visibles en la url del navegador además pues no tiene límite en el envío y posibilita la subida de ficheros al servidor un formulario de registro podría ser un buen ejemplo de uso del método post accept sarset espera una lista de juegos de caracteres separados por comas normalmente utilizamos el estándar y único out efe 8 y puede que alguna vez veas en eso los formularios el juego late in one o iso 8.859 uno que define el alfabeto latino no es un atributo muy común y probablemente no llegues a usarlo en formularios en type especifica el tipo de codificación por defecto a application x www fournier url en code y convertir a todos los espacios en signos suma y caracteres especiales en valores así hexadecimal multiparte párrafo que data se utiliza cuando vayamos a subir ficheros mediante el formulario y text plane solo convierte los espacios en signos de sumar pero los caracteres especiales no son convertidos la etiqueta input es de las más utilizadas en formularios con ella podemos definir gran parte de los controles típicos de formularios entradas de tipo texto casillas de verificación y de opción conocidas como radio archivos contraseñas campos ocultos y botones varios en seguida los estudiaremos en profundidad pero antes quiero destacar que la etiqueta input no tiene etiqueta de cierre y por tanto es interesante que la cierras debidamente para cumplir con los estándares el atributo name es común a todos los campos de formulario no exclusivo de input es pero una cadena de texto que indica el nombre que recibirá el campo al ser enviado si por ejemplo enviamos un formulario con un elemento cuyo tributo name se iguala e mail el servicio responsable de procesar ese formulario poder trabajar con un campo del nombre email para la etiqueta input type es uno de los atributos más importantes ya que define en qué se convertirá el control pese a que no es obligatorio es recomendable su uso por defecto es de tipo texto check box indica que el campo será una casilla de verificación después veremos ejemplos sobre cómo utilizar este y otros tipos de elementos input predio dibujará una casilla de acción o un botón tipo radio si todavía no te suena no te preocupes con los ejemplos te quedará más claro file muestra un botón que abrirá una ventana para seleccionar un archivo también muestra el nombre o la ruta al archivo dependiendo del navegador password genera un campo de texto enmascarado ideal para campos de contraseña hitn es un campo oculto para almacenar información que el usuario no vaya a introducir de forma activa por ejemplo podríamos incluir el tiempo que ha tardado el usuario en rellenar el formulario button mostrará un botón se me dibuja un botón enviar que al pulsarlo enviar el formulario a la acción que corresponda email utiliza una imagen con la misma función que el botón de tipos a mí me gustaría destacar que en la actualidad esta opción es poco utilizada y vivir se inserta un botón que reiniciara el formulario borrando los datos insertados por el usuario disabled deshabilita el campo para que no pueda ser utilizado para cumplir con estándares argumentó igual valor disable se iguala a la cadena disabled la representación depende del navegador pero el campo queda totalmente inutilizable ree dolly funciona de forma parecida a disuelvo pero aplicado por ejemplo a un input de tipo text sería posible seleccionar el texto y copiarlo ciertos campos necesitan de un atributo value para completar su funcionalidad como veremos en los ejemplos a continuación ahora que ya conoces todos los atributos comunes a etiquetas input vamos a profundizar un poco en cada tipo el tipo de input por defecto es texto no en vano en el campo de texto es el más común los input de tipo texto pueden limitar el número de caracteres que se insertan esto es útil por ejemplo para controlar que ciertos campos que en base de datos están limitados no lleguen con más datos de los que se puedan almacenar max land es el atributo encargado de ello y el valor debe ser un número entero el atributo size también espera un número y se traduce en la anchura del campo de texto en caracteres es decir un input con 63 será lo suficientemente ancho para mostrar tres caracteres pero no cuatro al estar directamente relacionado con el estilo de ese consejo el uso de este atributo en la medida de lo posible trata de separar la estructura de estilo en tus desarrollos web te facilitará el mantenimiento el campo value el input de tipo texto indica el valor que tiene este campo por defecto por ejemplo y aunque en la actualidad no se realiza esta práctica podríamos poner el texto buscar en un campo para aclarar su funcionamiento este texto no se borrará cuando el componente obtenga el foco y el usuario deberá borrarlo para poder insertar su propia cadena normalmente esta práctica se realiza apoyándose en javascript o con atributos nuevos de html5 los kings de tipos xbox insertan casillas de verificación como estas casillas suelen organizarse en grupos de selección múltiple es importante que el atributo en name de todas las casillas de verificación del mismo grupo tenga el mismo nombre de forma que al recibirlas el servicio destino sepa que esos valores corresponden al mismo campo el atributo check toma como valor el texto check e indica que la casilla aparece marcada por defecto observarás en los ejemplos que por cuestiones de elegibilidad omito otros atributos que pueden ser necesarios el atributo value en este tipo de elementos es imprescindible le indica el formulario qué valor debe enviar si la casilla está activada si no se declara el formulario enviara información imposible de procesar los input de tipo vídeo se representan como casillas de opción también conocidas como botones radio la particularidad de estas casillas es que a diferencia de las de verificación sólo es posible seleccionar una de las opciones para que el control funcione correctamente es necesario que todos los elementos de cada grupo de casillas de acción tengan el mismo valor para el tri button name del mismo modo que las casillas de verificación un impotente y por medio mediante el atributo check se mostrará seleccionado por defecto el atributo válido de limpio y seleccionarlos será el que se envía junto al formulario los impute tipo file ofrecen la posibilidad al usuario de adjuntar archivos al envío del formulario según la tabla yuturi schools con el atributo accept es posible especificar los tipos de archivo que aparecen para ser seleccionables pero ni está implementado por todos los navegadores mayoritarios ni supondrá filtro alguno ya que la opción de todos los archivos permitirá a los usuarios abrir cualquier tipo de archivo recuerda que la etiqueta form tiene un atributo en type que debe tener el valor multipark garrafón deidad para el envío de archivos es como un ver campos que a priori parecen de tipo texto y al tratar de escribir aparecen puntos o asteriscos en lugar de los caracteres introducidos éstos son los campos de texto enmascarado o time password estos campos tienen las mismas opciones que los campos de tipo texto a veces es interesante trabajar con campos ocultos para enviar información que creemos útil pero que el usuario no insertará de forma directa por ejemplo como comentábamos antes sería posible que un método en javascript contabilizar el tiempo que tarda el usuario en rellenar el formulario y lo introdujera en este campo antes de enviarlo en campo style y tan sólo son útiles atributos name y value puesto que no son visibles para el usuario los botones son otro elemento común en los formularios cada vez es más raro verlos con los estilos del navegador por defecto puede que porque sean demasiado feos o porque no encajan en el diseño de la web para cada tipo de voto no se utiliza un tipo de input diferente vamos a verlos todos al marcar un input como tipo sambeat se dibujará un botón con el texto a enviar cuya acción será la de enviar el formulario al destino marcado en el atributo action de la etiqueta form los botones de tipos bizet suelen tener un texto similar a restablecer este botón reinicio el formulario dejándolo como si el usuario no hubiese modificado nada también es posible insertar botones con otro tipo de acciones para ello se establece el atributo type igual a patton para dotar de acción a estos botones es necesario trabajar con eventos javascript y en intrusivo mediante atributos como un clic o bien no intrusivo haciendo uso de librerías scripts no incrustados en html esto se verá en el tema de javascript existe un tipo realmente utilizado que consiste en usar una imagen como botón si establecemos el atributo type igual a image podremos ver este resultado para este tipo de input se utilizan del mismo modo que para las imágenes de atributos para incluir un texto alternativo y src para especificar la ruta a la imagen este tipo de botones están a medio camino entre estructura y diseño por lo que desaconsejó su uso podremos trabajar el estilo del botón mediante css el atributo value empleando en botones especifica el texto que aparece en el botón salvo en el caso de los botones de tipo imagen que obviamente no muestran texto para no alargarme un exceso el vídeo he dejado el resto de etiquetas de formularios para un segundo vídeo en resumen los formularios se envían mediante dos métodos get y post con get el envío está delimitado y la información enviada es visible sin embargo es útil para poder guardar el resultado en marcadores o favoritos y con post el envío no tiene limitación y los datos no son visibles en la url además permite la subida de archivos todas las etiquetas del formulario deben ir entre etiquetas form ibarra form para que su información sea enviada con el formulario hemos visto que la etiqueta input es muy versátil para terminar te dejo cuatro consejos que espero te sean útiles fuera de las etiquetas forma ibarra form es posible utilizar elementos de formulario serán visibles pero no se enviará la información repasa el código especifica siempre el atributo type necesitarás un botón submit para enviar el formulario en la medida de lo posible separa el contenido de estilos lo agradecerás cuando tengas que mantener la web puedes hacerme llegar cualquier duda a través de mi correo electrónico o de mi cuenta en twitter y si realmente te quedaste con ganas puedes pedirme algún caso práctico por estas vías recuerda que este vídeo es el primero de la serie de los vídeos sobre formularios en html no te pierdas el segundo estos vídeos forman parte del curso de introducción al desarrollo web disponible en la dirección y des web punto es muchas gracias por tu atención

23 Comments

  • iDESWEB UA

    De parte de Guzmán, muchas gracias. Le ha llevado mucho tiempo intentar que el vídeo sea claro y sencillo de seguir.

  • Jearm Kdos

    como puedo verificar datos en un formulario… que me aparezca un mensaje de llenar campo (oviamente si no lo llene) cuando le de enviar..?

  • vandfil

    Es imperativo que un educador a la hora de hace un vídeo de una lección posea una voz firme y entendible, ademas de poderse oír sin dificultad, tuve que poner los parlantes para poder oír, ademas de notar que el profesor evidentemente uso un tono bajo de voz adrede (y no era solo que el volumen del vídeo estaba bajo), por favor, mas dedicación la próxima a la hora de hablar en un vídeo.
    Pd. No tengo queja de la información dada sobre el tema.

  • Gabriel R

    Disculpá, no se si es porque hablás muy rápido o porque vas leyendo todo lo del video en lugar de ir explicando, pero tuve que repetir cada parte del video como 2 o 3 veces… Acordate que es un video de un curso para empezar a programar en HTML! Dijeron 2 millones de veces quién es Tim Berners-Lee y en 10 minutos y a toda velocidad pretendés explicar unas de las cosas fundamentales de la introducción a html. Quizás la culpa no es tuya sino que te pidieron que lo hagas rápido…
    Dicho esto: gracias igual. El curso es muy bueno.

  • metime

    enserio lo he visto 10 veces y no logro comprender ciertas partes, en el comienzo del curso dijeron esta dirigido a personas que no tienen absolutamente nada de conocimientos, el tema es que ya llevo dos temas que no me quedan claras algunas dudas.

  • Liveless.

    Disculpa, es un buen trabajo a nivel de contenido, pero el tono de voz y la velocidad no ayudan a procesar la información de manera eficiente y fluída. Lo he tenido que repetir muchas veces y aún no me he enterado.

  • Fernando Losada

    Se echa en falta que se explique la sintaxis, es decir: si los atributos llevan comillas, si se escribe el signo =
    Para enterarme tuve que abrir el formulario de ejemplo y ver el código fuente

  • Manuel Martinez

    iva de diez con el curso hasta que llegue a este video mal explicado y mal redactado debería ser con mas paciencia y entendiendo que esta dirigido a gente que esta aprendiendo.

Leave a Reply

Your email address will not be published. Required fields are marked *