Formularios en HTML: Campos y Funcionalidad

Formularios en HTML

• Un formulario HTML es un documento digital para que el usuario ingrese datos.
• Los datos ingresados se almacenan y procesan posteriormente.
• Los formularios se emplean en páginas que requieren la entrada de datos del usuario, como motores de búsqueda, encuestas, solicitudes de información, registro o identificación.

Campos de un formulario

• Los datos se ingresan en el formulario a través de elementos como cuadros de texto, casillas de verificación, listas, menús y botones.
• Cada uno de estos elementos se designa campo de formulario.
• Los campos de un formulario pueden recopilar información variada y controlable, incluyendo texto, números y longitud de caracteres.
• Todo formulario debe incluir un botón para enviar datos, ubicado dentro del formulario.

Funcionalidad de un formulario

• Al presionar "enviar", los datos recopilados se procesan en el servidor que aloja la página.
• Este proceso se realiza mediante aplicaciones que gestionan la información para: inserción en bases de datos, validación de usuarios, presentación de páginas web concretas, entre otros.
• Para lograr esta funcionalidad, la página web debe estar en un servidor que admita la gestión y proceso de datos.
• Se requiere conocimientos en programación y bases de datos.
• En este resumen se muestra cómo enviar los datos por correo electrónico, para verificar la información recolectada.

La etiqueta <form>

• Delimita el inicio y final de un formulario con las etiquetas <form> y </form>.
• Todos los campos pertenecientes a un formulario, incluido el botón de "Enviar", deben estar dentro de estas etiquetas.
• Dentro de un formulario, se puede insertar cualquier contenido HTML además de los campos propios.
• La alineación de campos usaba tablas, pero actualmente no se recomienda debido a problemas de compatibilidad con navegadores.

Atributos fundamentales de la etiqueta <form>

• Dentro de la etiqueta de apertura <form>, es crucial definir atributos fundamentales que aseguren el funcionamiento y gestión de los datos del formulario.
• name: Identifica el formulario en el servidor, conectándolo con los datos correspondientes, también usado en los campos del formulario, debe ser único en la página.
• action: Define lo que ocurre cuando se pulsa el botón "enviar", por ejemplo, enviar datos por correo (action=mailto:[email protected]) o cargar una página específica (action="pagina.html").
• method: Determina el método de transferencia de los datos del formulario, el valor predeterminado es "get", pero para enviar datos por correo electrónico debe ser "post".
• enctype: Especifica el tipo de encriptación de los datos que se envían. Para datos legibles, se debe indicar enctype="text/plain".

HTML de los campos de un formulario

• Los campos en un formulario se definen con la etiqueta <input>, que no requiere etiqueta de cierre.
• Cada <input> puede contener atributos que se irán viendo.
• Los campos pueden variar en distintos navegadores, e incluso algunos atributos pueden no ser implementados según la versión del navegador.

Campos de texto

• Se crean con la etiqueta <input>.
• Permiten introducir texto en una sola línea y albergar cualquier valor alfanumérico.
• HTML5 permite definir y validar el tipo de texto a introducir.
• El atributo "type" dentro de <input> determina el tipo de texto admitido.
• type="text": Acepta cualquier valor alfanumérico (ej. nombre, código postal).
• type="password": Acepta cualquier valor alfanumérico, mostrando asteriscos.
• type="email": Verifica que el campo siga el formato de correo electrónico.
• type="url": Verifica formato URL completa.
• type="tel": Verifica formato de teléfono.
• type="number": Permite rellenar solo con números, con atributos "min" y "max" para definir un rango numérico.
• type="range": Permite un rango de números y valores intermedios, con atributos "min", "max" y "step".
• type="date": Permite ingresar una fecha (dd/mm/aa) desplegando un calendario.
• type="month": Permite ingresar mes y año.
• type="week": Permite ingresar número de semana y año.
• type="hour": Permite ingresar horas y minutos.
• Otros atributos de los campos de texto:
• <input pattern="[0-9]{8}[A-ZÑ]{1}" size="10" maxlength="32" value="xxx" >
• pattern: Define el patrón del texto a ingresar, como una secuencia de 8 números y una letra mayúscula.
• size: Determina la longitud visual del campo.
• maxlength: Establece el número máximo de caracteres en campos de texto de una línea.
• value: Determina el texto que se muestra en el campo al cargar el formulario.

Área de texto

• Un similar al campo de texto que se define con la etiqueta <textarea>.
• Permite introducir texto en varias líneas para comentarios o textos largos.
• Los atributos incluyen "cols" (ancho), "rows" (número de líneas), "name" o "id" (identificación), "placeholder" (texto que desaparece al escribir) y "title" (tooltip al pasar el cursor).

Campos de selección

• Permiten al usuario seleccionar un archivo o color.
• Se definen usando el atributo "type" dentro de la etiqueta <input>.
• Selección de color: Genera un campo que abre una paleta de colores al hacer clic.
• Selección de archivo: Abre una ventana para seleccionar un archivo del ordenador, no valida ni envía el archivo.

Botón de opción

• Permiten seleccionar una opción de varias alternativas.
• Las opciones forman parte del mismo "grupo" con la misma etiqueta y atributo name.
• El atributo value varía en cada opción.
• El atributo checked indica la opción seleccionada al cargar la página.

Casillas de verificacion

• Se muestran como pequeños cuadraditos donde se puede activar más de una opción.
• Todas las opciones pertenecen al mismo grupo, comparten la misma etiqueta y atributo name.
• Cada opción varía el atributo value.
• El atributo checked permite seleccionar una opción por defecto al cargar la página.
• El atributo disabled no permite seleccionar la opción, y value es lo que se transmitirá en las respuestas del formulario si ese elemento se encuentra seleccionado.

Listas o menús desplegables

• Permiten seleccionar una o varias opciones dentro de un menú desplegable.
• Menú desplegable: Solo se puede seleccionar una opción y se muestra la opción elegida.
• Lista desplegada: Se puede seleccionar más de una opción y se determina el alto o número de las opciones visibles o desplegadas.
• Las diferencias con el menú desplegable es el atributo multiple, que permite la selección de varias opciones, y size, que indica el número de elementos de la lista que serán visibles.
• También puede usarse el atributo selected para que aparezca seleccionada alguna opción al cargar la página.

Otras etiquetas frecuentes en formularios

• Los formularios deben tener un botón para enviar los datos y otro para restablecer los campos al estado inicial.
• Enviar: Debe incluir type="submit" y su pulsación envía el formulario. El texto del botón se especifica en el campo "value".
• Restablecer: Debe incluir type="reset". Al pulsarlo, el formulario vuelve a los valores por defecto. El texto que mostrará el botón.

La etiqueta <button>

• Con la etiqueta <button>, también generar botones de un formulario, se comportan igual.
• La diferencia, con la opción del "input" no es posible aplicarle un estilo, mientras que la etiqueta "button" sí es posible aplicarle estilos con libertad o incluso poner una imagen.

El lenguaje de estilos CSS

• CSS (Cascading Style Sheets) es el lenguaje para determinar el aspecto de elementos HTML.
• El empleo de los estilos CSS permite:
  • Tener control total sobre el diseño.
  • Realizar actualización eficaz del diseño del sitio.
  • Mejorar la accesibilidad y usabilidad.

Un avance a los estilos CSS en Dreamweaver

• Desde las "Propiedades de página" en Dreamweaver se pueden modificar algunos aspectos relacionados con la apariencia relativa a 3 bloques básicos:
  • Apariencia general: permite modificar la tipografía general, aplicar color o imagen de fondo y definir márgenes.
  • Encabezados: permite definir una tipografía específica para encabezados, con tamaños y colores.
  • Vínculos: se puede modificar la apariencia de textos enlazados como color y subrayado.

Fundamentos de los estilos CSS

• Cada instrucción de estilo generada automáticamente en <head> se denomina "regla de estilo".
• Es importante conocer los fundamentos de las reglas, por ejemplo, el selector determina a qué elementos se dirige una regla CSS, que puede ser una etiqueta HTML o un nombre definido.
• Los componentes son:
  • selector
  • propiedad
  • valor
  • declaración

Colocación y aplicación de los estilos CSS

• Reglas de estilos CSS aplicables a un documento o elemento HTML:
  • CSS en línea: Aplica estilos a un elemento específico dentro de la página.Se integra mediante el atributo style.
  • Estilos en <head>: Las reglas CSS se definen dentro de la etiqueta <style>, que se coloca en <head>, aplicando los estilos a todo el documento.
  • CSS externa: Utilizar un archivo externo solo con reglas de estilo en código CSS, estos archivos tienen extensión ".css" y se llama "hoja de estilos externa".

Los selectores CSS

• Una regla de estilo CSS está formada por un selector y una serie de declaraciones que se definen con sintaxis idéntica.
• Selectores de etiquetas: Dirige el estilo a todos los elementos cuya etiqueta HTML coincida.
• Selectores de etiquetas descendientes: Permiten dirigir estilos CSS a elementos HTML dentro de otros elementos.El selector descendiente debe estar formado por al menos dos selectores.
• Selectores de clase: Se utilizan cuando se quiere aplicar un estilo específico sobre elementos concretos del documento. Para aplicar una regla de clase, se usa el atributo "class" dentro de la etiqueta correspondiente.El selector de una regla de "clase" será un nombre que decidamos precedido de un punto ".nombre".
• Selectores de id: Es similar al selector de "clase”.
• Selectores combinados: Tanto los selectores de "clase” como los de “id” pueden ser descendientes o combinados.Es importante prestar atención a como se escriben los selectores combinados.
• Selector de hijos: dirigimos una regla de estilo a los elementos “hijos”.La sintaxis es: elemento “padre” + signo “mayor que” (>) + elemento “hijo”.
• Selector universal: se quiere aplicar una regla que afecte a todos los elementos de la página.

Medidas y colores en CSS

• Unidades de medida relativas:
  • Píxeles (px): relativo al dispositivo.
  • em: Relativo al tamaño de la fuente del elemento.
  • Porcentaje (%): Relativo al elemento padre.
  • vh y vw: Medidas relativas de acuerdo al viewport.
• Unidades de medida absolutas:.
  • Pulgadas (in): (1 pulgada = 2.54 cm).
  • Centímetros (cm).
  • Milímetros (mm).
  • Puntos (pt): (1 sspt = 1/72 pulgadas).
  • Picas (pc): (1pica = 12 puntos).
• Definición de colores en CSS: Se definen las propiedades de color de cualquier selector de CSS mediante las propiedades "color” y “background-color".
• El valor de estas propiedades CSS puede ser nombre, en hexadecimal o mediante valores RGB.

Propiedades CSS relacionadas con los textos

• Dentro de las propiedades CSS relacionadas con los textos cabe destacar:
  • font-family: determina la tipografía que se va a aplicar sobre el selector. Si el nombre de la tipografía tiene más de una palabra es obligatorio ponerlo entre comillas.
  • font-size: permite cambiar el tamaño de las fuentes.
  • font-weight: modifica el grosor de la fuente.
  • font-style: permite elegir entre normal, italic u oblique,
  • font-variant: permite normal o small-caps
  • text-transform: permite definir textos en mayúsculas o minúsculas.
  • text-decoration: permite definir que un texto vaya subrayado, suprarrayado, tachado o con parpadeo.
  • text-align: define la alineación horizontal del bloque de texto.
  • word-spacing y letter-spacing: permiten modificar la separación.
  • line-height: define altura de la línea de texto.
  • text-indent: determina la sangría de primera línea
  • vertical-align: ajustar la alineación vertical del texto
  • Etiqueta <span>: Es una etiqueta de línea para agrupar elementos a los que aplicar estilos diferenciados.

Uso de Google Fonts con CSS

• Una alternativa al uso de tipografías instaladas en el ordenador es el uso de fuentes accesibles en Internet.
• Una opción muy extendida y popular es Google Fonts, un repositorio de fuentes online gratuito de Google: https://fonts.google.com.
• Para ello, hay que crear un enlace a las tipografías seleccionadas y colocarlo dentro del de cada una de las páginas donde se vayan a utilizar las tipografías, así como definir la regla de estilo con la propiedad font-family que se quiera aplicar.

Aprende sobre los formularios HTML, documentos digitales para que los usuarios ingresen datos. Explora los campos de un formulario, como cuadros de texto y botones. Descubre cómo los datos se procesan en el servidor al presionar 'enviar'.