Formularios
y subida al servidor
Formularios
Un formulario HTML es una sección de un documento que contiene
texto, código, elementos especiales llamados controles: casillas de
verificación (checkboxes), botones de opción (radio buttons), menúes,
etc.; y rótulos (labels) en esos controles.
Los usuarios normalmente “completan” un formulario modificando los
valores de sus controles (introduciendo texto, seleccionando objetos de
un menú, etc.), antes de enviar el formulario a un agente para que lo
procese (por ej.: a un servidor web, a un servidor de correo, etc.)
Formularios: <form>
Se utiliza la etiqueta contenedora <form>,
que incluye todos los campos necesarios
para su funcionamiento.
Hay tipos de campos adecuados para cada
tipo de dato.
Existe un control especial, el botón, que
puede enviar los datos del formulario al
servidor o limpiar el contenido de sus
campos.
Formularios: atributos action y method
La etiqueta <form> admite diversos atributos.
Entre ellos:
● action: define el tipo de acción que se
llevará a cabo (enviar a un mail o
procesar su contenido con un script).
También podemos indicar la URL a la
que se enviará la petición HTTP con toda
la información del formulario.
● method: indica si la petición HTTP será
GET o POST.
Ejemplo:
[Link]
[Link]
Formularios: <label>
<label>: se usa para especificar la etiqueta (o nombre) del campo del
formulario. Es información para el usuario.
Admite el atributo for, que debe tener el mismo valor que el atributo id del
campo (input, select o textarea) al que hace referencia la etiqueta.
Formularios: <input>
Atributos del tag <input>:
● type: este valor puede tener muchos valores: text, email, checkbox, color,
date, file, hidden, etc. en función del tipo de campo que queramos.
● id: este atributo es obligatorio si en el elemento label tiene un atributo for,
en tal caso deberá contener un identificador único en la página.
● name: representa el nombre asignado al campo cuando se envía la
petición HTTP.
● size: define el tamaño de la caja de texto en número de caracteres visibles.
● maxlength: indica el tamaño máximo del texto, en número de caracteres,
que puede ser escrito en el campo.
● value: representa el valor que se asignará al campo cuando se envíe la
petición HTTP. Permite asignar un valor por defecto al campo.
Formularios: atributo type
El atributo type de la etiqueta <input> valida el tipo de dato de entrada:
● text: permite ingresar una cadena alfanumérica.
● number: sólo permite seleccionar un número.
● date: ofrece un calendario para cargar la fecha.
● password: oculta el texto que se está ingresando en el campo.
● email: valida que sea un mail.
● url: valida que sea una url.
● image: define una imagen como botón de envío.
● tel: define un campo para ingresar un número de teléfono.
● file: define un campo de selección de archivo.
● button: activa código JavaScript cuando se hace clic en él.
● checkbox: permite elegir varias opciones.
● radio: permite elegir una opción entre varias posibles.
● range: define un control de rango (como un control deslizante).
● submit: botón enviar.
Formularios: <input type=”password”>
Ocultar texto para contraseñas:
Utilizamos el atributo type con el valor “password” para
generar un campo input que oculte el texto que se está
ingresando.
Se utiliza, por ejemplo, para el ingreso de contraseñas.
Reemplaza cada caracter ingresado por un asterisco.
Clave: <input type="password" name="clave" size="25">
Formularios: <input type=”checkbox”
Los checkboxes permiten seleccionar
algunas opciones de una lista.
Se crean utilizando en un input el
atributo type con el valor “checkbox”
Para que funcionen como una unidad,
cada uno de estos input deben tener
su atributo name con el mismo valor.
El atributo value contiene el valor que
contendrá ese campo cuando la
opción correspondiente esté
seleccionada.
Formularios: <input type=”radio”
Los radiobutton o simplemente radio, <h2>Radio</h2>
<input type="radio" name=“opcion" value="1">Opción 1
permiten seleccionar una opción de una
<input type="radio" name="opcion" value="2">Opción 2
lista. <input type="radio" name="opcion" value="3">Opción 3
<input type="radio" name="opcion" value="4">Opción 4
Se crean utilizando en un input el atributo
type con el valor “radio”.
Para que funcionen como una unidad, cada
uno de estos input deben tener su atributo
name con el mismo valor.
El atributo value contiene el valor que
contendrá ese campo cuando la opción
correspondiente esté seleccionada.
Formularios: botones
Los botones que vemos en los
formularios también son un input. Se
crean configurando el atributo type
con el valor “submit” o “reset”.
Un input del tipo “submit” permite, al
ser pulsado, que el formulario envíe los
datos de sus campos a la dirección
determinada por el atributo target de
la etiqueta form.
Un input del tipo “reset” borra el
contenido de todos los campos del
formulario al ser pulsado.
Formularios: <fieldset>
<fieldset>: define una sección en un
formulario y permite agrupar sus campos.
El elemento <legend> puede contener a
otros elementos o se puede utilizar para
definir un título.
● id: igual que el elemento input.
● name: igual que el campo input.
● value: igual que el atributo value del
campo input.
Ejemplo:
[Link]
name=tryhtml_fieldset
Formularios: <textarea>
Los campos de texto amplios, que permiten el ingreso de
varias líneas de texto, también son un input.
Utilizado para comentarios multilínea o consultas, tienen el
atributo type con el valor “textarea”. Nos permiten definir
rows (filas), columns (columnas). En lugar de utilizar value
escribimos entre las etiquetas textarea.
Consulta: <textarea name="comentario" rows="10"
cols="40">Escribe tu consulta...</textarea>
Formularios: <select> y <option>
Las listas desplegables crean una
lista de opciones, cada una contenida
dentro de un elemento <option>.
Se crean como un input con su
atributo type fijado en “select”.
● size: indica el número de valores
mostrados a la vez en la lista.
● multiple: permite la selección
simultánea de varios elementos
de la lista.
● id, value y name se comportan
igual que el resto de los tipos de
input vistos.
Formularios: atributos opcionales
En muchos de los campos definidos en un formulario
podemos añadir otros atributos que modifican su
comportamiento:
● required: el formulario no se podrá enviar hasta
que ese campo tenga contenido.
● placeholder: si queremos que aparezca un
texto de ayuda para rellenar el campo.
● value: para introducir un valor por defecto en el
campo.
● readonly: si queremos que sea de sólo lectura.
Ejemplos:
● [Link]
ame=tryhtml5_input_required
● [Link]
ame=tryhtml_input_readonly
Formularios - Ejemplos
Subida a un servidor
Netlify
Hosting gratuito que permite probar rápidamente nuestro sitio
web. Requiere registro.
Para agregar el sitio basta con arrastrar la carpeta que contiene el
sitio.
[Link]
Tutoriales sobre cómo subir a Netlify:
● Netlify Drop. Introduction: [Link]
● Netlify Tutorial. Deploy a new site just by Drag and Dropping:
[Link]
GitHub Pages
● Cómo publicar un sitio web gratis
con Github Pages:
[Link]
TURNAUqY&feature=[Link]
● Curso Git y GitHub:
[Link]
tXiQwE535s&list=PLoCpUTIZIYORkDz
YwdunkVf-
KIqGjyoot&ab_channel=ProgramarD
esdeCero
¿Cómo pensar un proyecto
web?
¿Cómo pensar un proyecto web?
A nivel conceptual, tenemos que tener clara la idea de
negocio. Se trata “simplemente” de hacer un ejercicio de
análisis y reflexión.
1) ¿Cuál es el objetivo a cumplir con este proyecto?
2) ¿Quién es tu público objetivo? ¿Quién eres tú para
merecerlos?
3) ¿Cuáles son tus palabras clave?
¿Cuál es el objetivo a cumplir con este
proyecto?
En ello está basado todo tu negocio. Si vas
a montar una tienda de calzado, seguro
que tienes clarísimo que tu objetivo es
vender calzado. Sin embargo, la gente
piensa que su objetivo es tener miles de
visitas, o posicionarse en el primer lugar
de Google. Sí, eso está muy bien, pero sólo
para vender zapatos.
¿Quién es tu público objetivo?
Es clave saber quién es tu audiencia para
dirigirte a ella. Ahí radica la diferencia: recibir
tráfico cualificado, interesado realmente en lo
que ofreces. De lo contrario, podrás conseguir
miles de visitas, pero muy pocos clientes
interesados.
¿Quién eres tú para merecerlos? Es
importante reflexionar sobre qué tienes tú o
tu producto o tu servicio que te haga
diferente del resto: ¿por qué habría yo de
elegirte a ti y no al de al lado?
Identificar los beneficios que obtendrá la
persona que te compre, contrate o lo que sea
que ofrezcas.
¿Cuáles son tus palabras clave?
Las palabras clave son el alimento del que
se nutre tu blog y tu sitio web. Tienes que
tenerlas claras.
Algo que haga referencia, a tu cliente
ideal, a tu especialidad o lo que te hace
diferente, o a algún beneficio que posea tu
producto. Esto último es fruto de
identificar beneficios y nichos de mercado.
Estructura genérica de un sitio web
Tipos de estructura de un sitio web
1. Pensar el número de páginas en la
estructura del sitio web.
2. Pensar los niveles de estructura de
un sitio web.
3. Definir la estructura del sitio web a
nivel conceptual.
4. Definir la estructura del sitio web a
nivel técnico (Maquetar):
1. Hacer el árbol de la estructura de un
sitio web.
2. Hacer estructura de un sitio web
amigable para SEO.
3. Utilizar enlaces internos para mejorar
la estructura del sitio web.
Etiquetas semánticas
Etiquetas semánticas
En versiones anteriores a HTML5, al crear la estructura de una página,
normalmente se utilizaban etiquetas <div> para ir agrupando secciones de la
página. En HTML4 se utilizaban etiquetas div diferenciadas por clases.
Etiquetas semánticas
Son etiquetas dedicadas para cierto tipo
de contenido.
Describen su significado tanto para el
navegador como para el desarrollador.
Debemos respetarlas porque ayudan al
navegador a entender su significado para
mostrarlo en pantalla y ayudan a los
buscadores a reconocer el contenido y la
estructura del sitio.
Etiquetas semánticas
● <header> Se coloca en el body y es la cabecera visual de la página o de una
sección (logotipo, título, etc.). No confundir con <head>, que es el encabezado
del documento HTML.
● <nav> Apartado de navegación (enlaces de secciones, categorías, etc...).
También permite dividir en categorías una sección.
● <main> Contenido principal del body
● <footer> Pie de página (del documento completo) o de una sección.
● <section> Define una sección en un documento
● <aside> Agrupación de contenido no relacionado con el tema principal del
documento. Suele usarse para agregar publicidad.
● <article> Artículo. Parte principal de un escrito (posts en blogs, artículos en
diarios, mensajes en foros, comentarios, etc.)
● <address> Agrupación con la información de contacto del autor del artículo o
documento.
¡Pongamos en práctica lo visto en HTML en clase!
● Recrear el boceto en código HTML
según los temas vistos.
● Debe quedar así
Material extra
Artículos de interés
Cuál es "la peor página web del mundo" y para qué sirve:
[Link]
Las 8 reglas de una buena página web:
[Link]
buena-pagina-web
10 Consejos para Construir una Buena Página de Inicio:
[Link]
de-inicio/
¿Qué es la Arquitectura de la información y por qué es tan importante para tu
proyecto Web?: [Link]