Apuntes_HTML_2

I.E.S.
Rey Fernando VI 1º DAM/DAW

Lenguaje de marcas y sistemas de gestión de información
Profesor: María José Madrid Montes
UT02. Lenguajes para la Visualización de la Información
Apuntes de HTML-2
Este documento contiene los apuntes de los conceptos tratados

durante las clases del tema 2 referenciado en la cabecera. Se
describen los conceptos, algunos ejemplos y el enlace a la w3school
que es el manual de referencia que estaremos utilizando.
Estos apuntes están destinados a ir revisando las etiquetas y

atributos necesarios para generar los distintos ejercicios parciales,
que nos permitan desarrollar la entrega final de HTML. Para ello se
pueden revisar los enunciados parciales que se encuentran colgados
en el aula virtual.
Esta parte de la asignatura es eminentemente práctica y requiere de

realizar pruebas y ejercicios para adquirir los conocimientos
necesarios.
Para continuar con las actividades y seguir

evolucionando nuestra página del restaurante,
tenemos que aprender Formularios.
https://www.w3schools.com/html/html_forms.asp
Un formulario en HTML es un elemento que nos permite recoger datos
introducidos por un usuario.
El formulario puede estar construido con menús desplegables,

botones de selección única o múltiple o campos de texto libre. Estos
elementos son <imput> que recogerán la información.
El elemento <label> nos permite indicar opciones en el caso de un

desplegable, o cuando queremos que se seleccione, por ejemplo
cuando usamos Radio Button o Checkboxes.
This work is licensed under CC BY-NC 4.0. To view a copy of this

license, visit https://creativecommons.org/licenses/by-nc/4.0/
I.E.S. Rey Fernando VI 1º DAM/DAW
Apuntes de HTML-2
Nota: ¿Qué diferencia hay entre radiobutton y checkboxes?
El botón “SUBMIT” o “Enviar” permite enviar la información recogida

en el formulario a la “acción” definida para el formulario. Esta acción
puede ser enviar la información a un email o que la reciba un
programa publicado en un servidor web. También es común el tipo de
imput “RESET” para limpiar el formulario.
Atributos de formulario:
https://www.w3schools.com/html/html_forms_attributes.asp
1. action
Especifica la URL a la que se envían los datos del formulario cuando

se envía.
 <form action="/submit-form">
 <form action="/action_page.php">
 <form action="mailto:ejemplo@correo.com" method="post"

enctype="text/plain">
Nota: este último ejemplo no automatiza el envío de correos, se abrirá

el cliente de correo predeterminado del usuario con el campo "Para"
ya completado con la dirección especificada (ejemplo@correo.com).
2. method
Define el método HTTP que se utilizará para enviar el formulario. Los

valores comunes son GET (datos en la URL) y POST (datos en el
cuerpo de la solicitud).
Si no sabes que método elegir para un formulario, existe una regla

general que dice que el método GET se debe utilizar en los
formularios que no modifican la información (por ejemplo, en un
formulario de búsqueda). Por su parte, el método POST se debería
utilizar cuando el formulario modifica la información original (insertar,
modificar o borrar alguna información).

Apuntes de HTML-2
El ejemplo más común de formulario con método GET es el de los
buscadores. Si realizas una búsqueda con tu buscador favorito, verás
que las palabras que has introducido en tu búsqueda aparecen como
parte de la URL de la página de resultados.
 <form method="post">
3. enctype
Especifica cómo se deben codificar los datos del formulario antes de

enviarlos al servidor. Útil cuando el formulario contiene archivos que
se desean cargar. SOLO SE UTILIZA CON EL METODO POST.
Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las

respuestas las recibamos como un fichero de texto, perfectamente
legible y sin codificar.
 <form enctype="multipart/form-data">
4. autocomplete
Indica si el navegador debe sugerir completar el formulario

automáticamente en función de entradas anteriores. Posibles valores:
on (habilitado) o off (deshabilitado).
 <form autocomplete="off">
5. target
Define dónde se abre la respuesta del formulario. Comúnmente

utilizado con ventanas nuevas o pestañas (_blank).
 <form target="_blank">

Apuntes de HTML-2
6. novalidate
Si se incluye, desactiva la validación del formulario en el cliente antes

de ser enviado.
 <form novalidate>
7. name
Asigna un nombre al formulario para identificarlo en los scripts o al

procesar los datos.
 <form name="userForm">
Elementos de formulario:
https://www.w3schools.com/html/html_form_elements.asp
1. <imput>. El elemento imput es el mas utilizado y se puede

mostrar dependiendo del atributo “type”.
A. Tipos de imput – se muestran los más comunes.
https://www.w3schools.com/html/html_form_input_types.asp
a. Text – define una línea simple de texto
b. Password – define un campo de contraseña, al
rellenarse no se verá el contenido.
c. Submit – define un botón para enviar información a un
handler.
Nota. Imput submit genera un botón tal y cómo podemos generar

con el atributo de formulario <button>. La diferencia radica en que
button es mas flexible, permite no solo añadir texto, sino también
imágenes, íconos o otros elementos HTML, además de poder aplicar
estilos CSS más avanzados.
d. Reset - define un botón de Reset que limpia el

formulario.
e. Radio – define un radio button, es decir, permite al
usuario elegir una única opción de las que aparecen.
Apuntes de HTML-2
f. Checkbox – define un check-box, es decir, permite al
usuario elegir una o más opciones de las que se
muestran.
g. Button – define un botón con un comportamiento.
h. Color – dependiendo del navegador, permitirá abrir un
selector de color (picker) (puede no ser compatible con
todos los navegadores).
i. Fecha – el tipo date permite iañadir un “picker”

dependiendo del navegador, es decir, un calendario p
ara seleccionar una fecha.
j. Fecha y hora – define un picker de fecha y hora.

k. Hora - time define horas.
Nota: tanto para fechas cómo para horas podemos usar restricciones
de input, como son max y min que nos permiten acotar. En este
ejemplo, no se permite reservar mesa antes de las 12:00.

Apuntes de HTML-2
l. Email – describe un campo email y controla no

introducir un campo que no contenga “@”.
m. Image – define una imagen cómo un botón.
n. File – permite la selección de un fichero desde el
sistema de archivos.
B. Atributos de input – con los atributos de input podemos
especificar mas particularidades al tipo seleccionado.
https://www.w3schools.com/html/html_form_attributes.asp
a. Value – permite dar un valor por defecto en el campo
de texto
b. Readonly – permite tras darle un valor, que este solo
sea de lectura, y el usuario no pueda modificarlo.
c. Disable – define un campo que no se puede clickar ni
usar.
d. Size – especifica la anchura visible del campo, en

caracteres. Por defecto es 20 y se puede aplicar a text,
search, tel, url, email, and password.
e. Maxlenght – especifica la máxima longitud en un
campo de texto, es decir, el máximo número de
caracteres.

Apuntes de HTML-2
f. Min y Max – especifica valores mínimos y máximos. Se

puede aplicar a number, range, date, datetime-local,
month, time and week. Ya vimos el ejemplo para
controlar las horas de una reserva con los tipos fecha y
hora.
g. Multiple – Se puede aplicar a tipo email y file, y permite

más de uno.
h. Required - cómo su nombre indica, informa al usuario
que el campo es obligatorio.
2. <label>. El elemento label se utiliza para asociar una etiqueta

de texto a un campo de formulario, mejorando la accesibilidad y
la usabilidad. Se vincula a un campo con el atributo for, que
debe coincidir con el id del campo.
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email">
3. <select>. El elemento select crea un menú desplegable que

permite a los usuarios seleccionar una o más opciones. Con
<option> definimos las opciones y con <size> indicamos
cuantas opciones queremos que estén visibles.

Apuntes de HTML-2
4. <textarea>. Proporciona un área de texto multilínea para que

los usuarios puedan escribir más contenido que en un input de
una sola línea.
5. <button>. El elemento button crea un botón que puede ser

utilizado para enviar un formulario, ejecutar un script o
cualquier otra acción. Puede tener el atributo type para
especificar si es un botón de envío o un botón normal.
6. <fieldset> y <legend>.
Apuntes de HTML-2
El elemento <fieldset> se utiliza para agrupar visual y
semánticamente varios elementos de un formulario, como los
campos de entrada y sus etiquetas. Mejora la accesibilidad y
facilita la organización de los formularios largos o complejos al
crear bloques de campos relacionados.
El elemento <legend> se utiliza dentro de un <fieldset> para
proporcionar un título o leyenda que describe el contenido del
grupo de campos que encapsula el <fieldset>. Mejora tanto la
comprensión como la accesibilidad del formulario.
7. <datalist>. El elemento <datalist> en HTML proporciona una

lista de opciones predefinidas que el usuario puede seleccionar
al escribir en un campo de entrada <input> o escribir un valor
personalizado.
Es útil para ofrecer sugerencias o autocompletar valores en
campos de entrada, mejorando la experiencia del usuario sin
limitarlo a una selección estricta como ocurre con un <select>.

Apuntes de HTML-2
Ahora ya tenemos el conocimiento para realizar
nuestra página de reservas para la práctica del
restaurante.


Apuntes_HTML_2

Cargado por

Copyright:

Formatos disponibles

Apuntes_HTML_2

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Apuntes_HTML_2

Cargado por

Copyright:

Formatos disponibles

I.E.S.

Rey Fernando VI 1º DAM/DAW

Este documento contiene los apuntes de los conceptos tratados

Estos apuntes están destinados a ir revisando las etiquetas y

Esta parte de la asignatura es eminentemente práctica y requiere de

Para continuar con las actividades y seguir

El formulario puede estar construido con menús desplegables,

El elemento <label> nos permite indicar opciones en el caso de un

This work is licensed under CC BY-NC 4.0. To view a copy of this

Nota: ¿Qué diferencia hay entre radiobutton y checkboxes?

El botón “SUBMIT” o “Enviar” permite enviar la información recogida

Especifica la URL a la que se envían los datos del formulario cuando

 <form action="mailto:ejemplo@correo.com" method="post"

Nota: este último ejemplo no automatiza el envío de correos, se abrirá

Define el método HTTP que se utilizará para enviar el formulario. Los

Si no sabes que método elegir para un formulario, existe una regla

This work is licensed under CC BY-NC 4.0. To view a copy of this

Especifica cómo se deben codificar los datos del formulario antes de

Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las

Indica si el navegador debe sugerir completar el formulario

Define dónde se abre la respuesta del formulario. Comúnmente

This work is licensed under CC BY-NC 4.0. To view a copy of this

Si se incluye, desactiva la validación del formulario en el cliente antes

Asigna un nombre al formulario para identificarlo en los scripts o al

1. <imput>. El elemento imput es el mas utilizado y se puede

Nota. Imput submit genera un botón tal y cómo podemos generar

d. Reset - define un botón de Reset que limpia el

i. Fecha – el tipo date permite iañadir un “picker”

j. Fecha y hora – define un picker de fecha y hora.

This work is licensed under CC BY-NC 4.0. To view a copy of this

l. Email – describe un campo email y controla no

d. Size – especifica la anchura visible del campo, en

This work is licensed under CC BY-NC 4.0. To view a copy of this

f. Min y Max – especifica valores mínimos y máximos. Se

g. Multiple – Se puede aplicar a tipo email y file, y permite

2. <label>. El elemento label se utiliza para asociar una etiqueta

<label for="email">Correo electrónico:</label>

<input type="email" id="email" name="email">

3. <select>. El elemento select crea un menú desplegable que

This work is licensed under CC BY-NC 4.0. To view a copy of this

4. <textarea>. Proporciona un área de texto multilínea para que

5. <button>. El elemento button crea un botón que puede ser

7. <datalist>. El elemento <datalist> en HTML proporciona una

This work is licensed under CC BY-NC 4.0. To view a copy of this

This work is licensed under CC BY-NC 4.0. To view a copy of this

También podría gustarte