🧡 TODOS los Elementos de formularios en HTML [Curso de HTML desde cero]
Summary
TLDREste video ofrece una visión detallada de las diferentes etiquetas utilizadas en formularios HTML. El programador, Palomares, inicia creando un archivo HTML y luego procede a construir un formulario, explorando y explicando cada tipo de etiqueta. Se discuten atributos de la etiqueta 'input', como 'type', 'name', y 'id', y se muestra cómo se pueden utilizar para crear campos de texto, correo electrónico y otros tipos de entrada. Además, se abordan elementos como 'label', 'select', 'option', 'textarea', y 'button', incluyendo su configuración y funcionalidad. Se destaca la diferencia entre los botones 'button' y 'submit' y se menciona la etiqueta 'datalist' para proporcionar sugerencias automáticas mientras se escribe. El video es práctico y enfocado en la demostración de cómo estos elementos se整合 y funcionan juntos para crear formularios interactivos en HTML.
Takeaways
- 📝 Se discuten diferentes etiquetas utilizadas en formularios HTML.
- 💬 Se muestra cómo crear un formulario con la etiqueta `form`.
- ✍️ Se utiliza la etiqueta `input` para crear campos de texto, correo electrónico, y otros tipos.
- 🏷️ Se explica el uso de la etiqueta `label` para asociar texto con un campo de entrada específico.
- 🔍 Se menciona la etiqueta `select` para crear menús desplegables con la etiqueta `option`.
- 🟢 Se describe cómo hacer que una opción se seleccione por defecto utilizando `selected`.
- 📏 Se discute el uso de `textarea` para entradas de texto multilínea y cómo establecer su tamaño.
- 🔘 Se cubren los atributos `multiple` y `size` para los menús desplegables.
- 🔲 Se presentan los botones en formularios, incluyendo sus atributos `type` y cómo evitar recargas de página.
- 🔁 Se menciona la etiqueta `datalist` y cómo proporciona sugerencias de autocompletado a partir de una lista de opciones.
- 🔄 Se destaca la diferencia entre los botones `button` y `submit` en términos de envío de formularios.
Q & A
¿Qué es la etiqueta 'form' en HTML?
-La etiqueta 'form' en HTML se utiliza para crear un formulario en el que los usuarios pueden ingresar datos para ser enviados al servidor.
¿Cuáles son algunos de los tipos de atributos que puede tener la etiqueta 'input'?
-La etiqueta 'input' puede tener varios atributos, como 'type' para definir el tipo de campo (como 'text', 'email', etc.), 'name' para identificar el campo en el servidor, y 'id' para asociar el campo con otros elementos como 'label'.
¿Cómo se asocia un 'label' con un 'input' específico en un formulario HTML?
-Para asociar un 'label' con un 'input' específico, se utiliza el atributo 'for' en el 'label', el cual toma el valor del atributo 'id' del 'input' correspondiente.
¿Qué es la etiqueta 'select' y cómo se utiliza?
-La etiqueta 'select' se utiliza para crear un menú desplegable en un formulario HTML. Dentro de la etiqueta 'select', se colocan las opciones con la etiqueta 'option'.
¿Cómo se establece una opción predeterminada en un menú desplegable 'select'?
-Para establecer una opción predeterminada en un menú desplegable 'select', se utiliza el atributo 'selected' en la etiqueta 'option' correspondiente a la opción deseada.
¿Qué atributo se utiliza en la etiqueta 'select' para mostrar más de una opción al mismo tiempo?
-El atributo 'multiple' se utiliza en la etiqueta 'select' para permitir la selección de múltiples opciones en el menú desplegable.
¿Cómo se define el tamaño de un área de texto 'textarea' en un formulario HTML?
-El tamaño de un área de texto 'textarea' se define con los atributos 'rows' y 'cols', que especifican el número de filas y columnas respectivamente.
¿Qué atributo se utiliza en la etiqueta 'button' para evitar que se recargue la página al hacer clic en el botón?
-El atributo 'type' se utiliza en la etiqueta 'button', y se establece en 'button' para evitar que se recargue la página al hacer clic en el botón.
¿Cuál es la diferencia entre un botón de tipo 'submit' y uno de tipo 'button' en un formulario HTML?
-Un botón de tipo 'submit' se utiliza para enviar el formulario al servidor, mientras que un botón de tipo 'button' se utiliza para ejecutar una acción de JavaScript o cualquier otra acción que no involucre el envío del formulario.
¿Cómo se utiliza la etiqueta 'datalist' para proporcionar sugerencias de autocompletado en un campo de entrada?
-La etiqueta 'datalist' se utiliza para crear una lista de opciones. Para conectarla con un campo de entrada, se utiliza el atributo 'list' en la etiqueta 'input', el cual hace referencia al 'id' de la 'datalist'.
¿Qué ventaja tiene un campo de entrada con una 'datalist' asociada en comparación con un 'select'?
-Un campo de entrada con una 'datalist' asociada permite al usuario escribir lo que quiera, incluso si esa opción no está en la lista de sugerencias, mientras que un 'select' solo permite al usuario elegir de las opciones listadas.
Outlines
📝 Introducción a las etiquetas de formularios en HTML
Este primer párrafo introduce el tema del video, que es la exploración de las diferentes etiquetas utilizadas en formularios HTML. Se menciona que se verán ejemplos prácticos de cada una y se dará comienzo con la creación de un archivo HTML y la etiqueta 'form'. Además, se habla sobre la etiqueta 'input' y sus distintos atributos, como 'type', 'name' y 'id', y cómo estos se ven reflejados en el navegador en tiempo real. También se menciona la intención de hacer un video especial para explorar todos los tipos de 'input' disponibles.
🏷️ Etiquetas de formularios: label, select y textarea
En el segundo párrafo, se profundiza en el uso de la etiqueta 'label' para asociar texto con un 'input', lo que mejora la accesibilidad y la experiencia del usuario. Se aborda la etiqueta 'select' y su funcionalidad, incluyendo cómo se pueden establecer opciones predeterminadas y cómo se pueden visualizar múltiples opciones a la vez mediante el atributo 'size'. Se discuten los atributos 'multiple' y 'selected', y se proporciona un ejemplo práctico de cómo se pueden seleccionar múltiples opciones. Luego, se introduce la etiqueta 'textarea', que se utiliza para entradas de texto extenso, y se explica cómo se pueden establecer sus dimensiones mediante atributos como 'rows' y 'cols'.
✍️ Finalización de los formularios con botones y datalist
El tercer párrafo concluye la discusión sobre las etiquetas de formularios, introduciendo los botones y su funcionalidad. Se habla sobre los atributos 'type' y 'onclick' de los botones, y se muestra cómo se puede utilizar uno para enviar un formulario y otro para ejecutar una función JavaScript. Además, se menciona el uso de la etiqueta 'datalist' en conjunto con un 'input' para proporcionar sugerencias de autocompletado basadas en una lista de opciones. Se destaca la diferencia entre un 'select' y un 'input' con 'datalist', donde el primero solo permite seleccionar de una lista predefinida, mientras que el segundo permite entradas personalizadas además de las sugerencias. Finalmente, se hace un recordatorio sobre el próximo video del curso de HTML, que se centrará en explorar todos los tipos de 'input' disponibles.
Mindmap
Keywords
💡formularios HTML
💡etiqueta input
💡atributo type
💡etiqueta label
💡etiqueta select
💡etiqueta textarea
💡etiqueta button
💡atributo name
💡datalist
💡atributo size
💡multiple
Highlights
Se discuten diferentes etiquetas utilizadas en formularios HTML.
Se muestra cómo crear una etiqueta form y agregar diferentes tipos de etiquetas dentro de ella.
La etiqueta input es presentada con su atributo type, que puede ser text, email, entre otros.
Se ejecuta el código en un navegador para visualización en tiempo real.
Se explica cómo agregar atributos a un input, como name y id.
Se menciona la creación de un vídeo especial para explorar todos los tipos de input disponibles.
Se describe cómo utilizar la etiqueta label para asociar un texto con un input específico.
Se detalla cómo funciona la etiqueta select y su uso con la etiqueta option para crear menús desplegables.
Se muestra cómo establecer una opción seleccionada por defecto en un select utilizando el atributo selected.
Se discute el uso del atributo size en un select para controlar el número de opciones visibles.
Se explora el atributo multiple en un select para permitir la selección de múltiples opciones.
Se introduce la etiqueta textarea para el ingreso de texto extenso y se explica cómo controlar su tamaño.
Se menciona cómo utilizar CSS para dar estilo y dimensiones a un textarea.
Se habla sobre la etiqueta button y sus diferentes tipos, como button y submit.
Se describe cómo hacer que un botón ejecute una función JavaScript mediante el atributo onclick.
Se explica la diferencia entre un botón de tipo button y uno de tipo submit en un formulario.
Se presenta la etiqueta datalist para proporcionar sugerencias de autocompletado a un input.
Se resalta la flexibilidad de un input en combinación con datalist, donde el usuario puede ingresar cualquier texto.
Transcripts
en este vídeo vamos a ver todas las
diferentes etiquetas que tenemos en el
mundo de los formularios dentro de html
vamos a ver algunos ejemplos de cada una
de ellas el tercero de todas las que hay
y lo haremos de forma práctica
programador programador a mi nombre
explico palomares y vamos a comenzar
[Aplausos]
bueno para empezar yo tengo por aquí
abierto el visual studio code y lo
primero que necesito es tener un archivo
de html voy a llamar index html vamos a
inicializar lo con html5 ya lo tenemos
por aquí y ahora vamos a crearnos
nuestro formulario en el cual vamos a ir
haciendo pruebas bien primero vamos a
dedicar a crear la etiqueta form y
dentro vamos a ir creando los diferentes
tipos de etiquetas que tenemos la
primera etiqueta que tenemos es la
etiqueta input vamos a escribir aquí
input y esta etiqueta tiene el atributo
type el cual le podemos poner por
ejemplo text y antes de que avancemos
voy a ejecutar esto en el navegador para
que vayamos viendo en tiempo real lo que
estamos haciendo así que me voy a venir
aquí voy a hacer un open with lights
server y vamos a abrir en el navegador
bien que estamos viendo por aquí el
navegador ha abierto vale y podemos ver
este input que si yo clico en él pues
aquí pues puedo escribir vale es un
input de texto donde yo puedo escribir
pues eso texto a éste impulse podríamos
añadir por ejemplo también un haití vale
para que tuviera por su identificador
por ejemplo le podríamos poner el nombre
también podríamos añadirle un
y que es el nombre de la variable que se
va a enviar cuando enviemos el
formulario por ejemplo el name en este
caso podría ser name porque estamos
poniendo el nombre no pues un formulario
de nombre en fin tenemos un montón de
atributos en la n el input que de hecho
hay tantos formas de input diferentes
porque este tipo que es de tipo texto
puede ser también por ejemplo tipo email
y entonces aquí lo único que puedes
meter es un email de input tenemos
tantos tipos que no los vamos a ver
todos en este vídeo de hecho no vamos a
ver ninguno más porque voy a hacer un
vídeo especial sólo para ver y exclusivo
para ver solo todos los tipos de input
que tenemos porque como os digo hay
muchísimos vale así que suscríbete al
canal si es que no lo estás para no
perderte el próximo vídeo de este curso
de html una vez dicho esto vamos a
seguir con la clase mirando los
diferentes tipos de elementos que
tenemos dentro de los formularios otra
de las etiquetas que tenemos en los
formularios es el ave con el ave podemos
ponerle una etiqueta o un nombre a lo
que es el input que vamos a tener o al
elemento del formulario por ejemplo si
llego aquí el input este que es el email
pues aquí le puedo poner email y de esta
manera tenemos ahí el label email para
éste
pero para que sea para este input y
sepamos realmente que este label
corresponde a stein put le tenemos que
poner aquí el atributo ford le ponemos
atributo fall y aquí lo que tenemos que
ponerle es el aire y el aire que tiene
el input al que queremos o la etiqueta a
la que queremos referenciar de esta
manera sabemos que este label de aquí
corresponde a éste impute aquí más
elementos que tenemos dentro de los
formularios pues también tenemos el
selector el select aquí ponemos select y
dentro del selecto demos que poner
diferentes opciones tenemos la etiqueta
option valley aquí podemos poner
opciones ejemplo voy a poner colores
puede poner rojo amarillo y verde y como
veis aquí pues tenemos este es l con
tres opciones y aquí estamos
visualizando lo y automáticamente no
sale seleccionado el rojo porque es la
primera opción pero si le damos aquí se
despliega este desplegable este selector
y podemos seleccionar otro en amarillo
el verde o el que queramos por ejemplo
si yo quisiera que por defecto si me
seleccionará el verde cuando recargamos
yo puedo poner aquí selected y de esta
manera pues estará el verde seleccionado
por defecto veis de esta manera este es
el valor por defecto también por
supuesto a mí dentro del selecto
darle un mail vale que será el nombre
del valor que se enviará en este caso
puedo poner aquí color y como hemos
visto antes también podemos ponerle un
la venta y voy a poner aquí un label
para el selector que sea elige un color
para esto tenemos que tener una uvi en
el selector vale queríamos a ponerle
aquí por ejemplo color este en este caso
no pasa nada porque sea el mismo hay de
que el name y aquí podemos decirle ford
color vale de esta manera sabemos que
este label de aquí corresponde a este
selector de aquí otro atributo que
tenemos también en el selector es el
side como veis ahora mismo aquí estamos
viendo sólo un valor que es el que
tenemos seleccionado pero si yo aquí le
pongo size igual a por ejemplo 2
según este caso como tenemos 3 vamos a
darle 2 ahora estamos viendo que se me
hace aquí la caja más grande y puedo ver
dos valores al mismo tiempo y puedo
hacer aquí scroll vale vemos que
seleccionado sólo está el verde ahora
está seleccionada el amarillo pero al
mismo tiempo vemos dos vale igual si yo
le diera aquí por ejemplo 63 pues vamos
a ver todos para aquí tenemos ya los
tres y vemos aquí el que está
seleccionado de esta manera
no creo que vayas a utilizar mucho esto
pero bueno que sepas que está ahí otra
cosa que también tenemos en los
selectores es el atributo múltiple de
esta manera podemos seleccionar varias
cosas dentro del de lo que es el el
selector por ejemplo el verde el
amarillo el rojo puede seleccionar
varios como veis para seleccionar varios
yo tengo que apretar la tecla de control
no es que sea muy intuitivo si no lo
sabes te puedes perder aquí no sabes
cómo seleccionar varios pero bueno
apretando la tecla de cordón de control
puedes seleccionar varios vamos a pasar
a otro tipo de elemento que podemos
tener dentro de los formularios y son
los text áreas aquí tenemos el text área
y como veis aquí se me está haciendo una
caja de texto yo puedo aquí escribir
texto además puedo redimensionar lo
puedo escribir aquí todo el texto que
quiera esto es para cuando tenemos
escribir mucho texto del text área
podemos especificar de las rose que se
van a ver por ejemplo yo le puedo dar
aquí que se vean 10 rose y como veis
esto se me hace más grande hasta que se
ven pues 10 líneas y lo mismo se puede
hacer con calls y ponerle aquí por
ejemplo vamos a darle 20 aparentemente
no ha cambiado nada
por ejemplo 500 a ver si cambia y
efectivamente así que se me ha hecho
demasiado grande no vamos a darle 100
por ejemplo también tenemos a grande
vamos a darle 50 aquí en 30 como veis
pues se va haciendo más grande nos le
doy 10 columnas pues me va reduciendo un
pin esto es una manera que tenemos de
darle el tamaño que no creo que tampoco
utilices esto normalmente el tamaño y
demás será por css vale así que no son
unas características que vayas a
utilizar mucho de text área es más común
decirle por ejemplo está ahí le estoy
dentro del css decirle wifi y decirle
aquí pues quiero que sea 100 píxeles de
wifi vale y esto ya pues se pone a 100
píxeles y lo mismo con el hate el text
área también podemos ponerles un en vale
de esta manera pues este es el mensaje
de un mensaje esta es la variable que se
va a enviar cuando cuando enviamos los
datos para recogerla es importante pues
que tengas una y que más elementos
tenemos dentro de los formularios bueno
pues tenemos los botones que serían si
los botones no pudiéramos enviar el
formulario
tenemos la variable la etiqueta button
vale y esta manera veremos qué se nos
genera un botón
beissat y alain monné
texto porque yo aquí dentro pues puedo
poner por ejemplo botón y ahora sí que
hay aquí texto y yo puesto que un botón
que puedo pulsar y ahora mismo pues no
hace nada bueno en realidad sí que está
haciendo como veis lo que está siendo
recargando la página por defecto si no
le haces ninguna función al botón lo que
te haces esto es recargar la página el
botón tiene un abarth un atributo que es
el type vale que está ahí puede ser de
tipo un botón vale aunque parezca un
poco redundante es importante ponerlo a
horas o explicar el por qué vale este
botón es de tipo botón y ahora por
ejemplo cuando lo pulso veis que no hace
nada ahora y antes sí que hacían te
estaba recargando la página y ahora no
lo hace y también tenemos aquí el
atributo por ejemplo un clic vale donde
podemos meterle pues que ejecutó una
función de javascript de queramos no por
ejemplo yo puedo hacer aquí un alert
directamente escribiendo el javascript y
diciendo aquí hola vale y lo que vamos a
hacer estas comillas dobles vamos a
ponerle a simple para que no nos dé
problemas y ahora vamos a ejecutarlo
vamos a darle al botón y veremos que me
sale aquí este alerta que me dice hola
bien vamos a quitarle lo un clic y vamos
a ver otro tipo de botón
el tipo suv de este tipo suv ni lo que
se utiliza es para enviar el formulario
que este es el que está puesto por
defecto antes cuando yo estaba pulsando
el botón y se recargaba la página en
realidad no se estaba recargando la
página lo que estaba haciendo es
enviando el formulario solo que como no
haya ningún sitio no tengo un puesto
aquí ningún sitio a donde lo quiero
enviar pues lo que hace es recargar la
página de enviar formulario a sí misma a
la propia página vale pues este tipo es
un y ahora si le damos vamos a ver qué
me está recargando través de la página
porque está enviando el formulario vale
esa es la diferencia entre button y
submit para enviar el formulario y
button después para hacer otras cosas
vale puedes hacer pues a lo mejor
resetear campos o lo que sea o calcular
no se ejecuta de funciones de javascript
lo que quieras vamos a ver otro elemento
más que tenemos dentro de los
formularios primero debía crear un input
vale me normal como lo que hemos visto
al principio del vídeo y ahora debajo de
este input lo que me voy a crear es un
data list para de esta manera podemos
meter aquí una lista con diferentes
opciones con diferentes opción por
ejemplo vamos a retomar el caso de los
colores
ya tengo aquí varios colores bien ahora
el 'tata' list este lo que vamos a hacer
es ponerle una id y vale que sea por
ejemplo colores y ahora al input le
vamos a decir que coja la lista vamos a
decirle list y le vamos a decir colores
vale de esta manera ahora éste impute
está conectado a este data list que va a
hacer lo siguiente cuando yo escriba
aquí fijaos ahora mismo no he hecho nada
todavía le imputó y cuando pasó por
encima me sale esta flechita de aquí si
yo la pulso ves que me sale sugerido
esto de aquí de datanálisis esta manera
yo puedo seleccionar uno y rellenarlo
automáticamente aún así yo puedo
escribir aquí lo que quiera como veis yo
puedo escribir aquí lo que quiera pero
si yo empiezo a escribir algo que ya
está en el catarí por ejemplo pongo la
red me sale todo lo que tiene r vales
por ejemplo pongo rojo y sale pues el
rojo el rosa y el negro el negro porque
tiene roja al final negro
de esta manera es como una especie de
autocompletar rápido que podemos hacer a
partir de una lista
a diferencia del selector en este caso
tú puedes escribir lo que quieras vale
puedes enviar lo que quieras aunque no
esté por ejemplo yo puedo escribir aquí
que no está aquí como por ejemplo el
gris vale yo puedo enviar el gris aunque
no esté como color sugerido aquí es la
diferencia que hay con respecto al
selector túnez un selector sólo puedes
elegir lo que está en la lista aquí no
aquí es un input a abierto que puedes
escribir lo que quieras bueno acuérdate
que para el próximo vídeo que vamos a
sacar para este curso de html este que
te dejo por aquí vamos a sacar el vídeo
de los tipos de input que hay muchísimos
tipos vamos a verlos todos en un vídeo
tranquilamente donde haremos pruebas de
todos ellos por cierto suscríbete al
canal para no perderte lo programador
programadora nos vemos en el próximo
vídeo
تصفح المزيد من مقاطع الفيديو ذات الصلة
CURSO de CSS 2021 Rapido y Facil # 2 | 💻 PRIMEROS PASOS
Tutorial básico de HTML desde cero - Video 2: Vistazo inicial a las etiquetas.
[MOOC] - Apps para dispositivos móviles (ed. 2016) - iOS. Desarrollo de una App
Curso de HTML. 2.3. Introducción a las Hojas de Estilo CSS
CURSO de CSS 2021 Rapido y Facil # 8 | 💻 MODELO CAJA
7. Botones Personalizados - Programar aplicaciones iOS - Curso de Xcode
5.0 / 5 (0 votes)