Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Ejemplo formulario HTML y CSS. Parte3 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 19 de diciembre de 2024 por Francisco J. G.

34 visualizaciones

Ejemplo formulario HTML y CSS. Parte3

Más información Transcripción

Descargar la transcripción

El contenido va a ser una etiqueta y un input. 00:00:04
Bien, en cuanto a lo que es la etiqueta, vimos que el form, el for, se refería al id para que fuera asociado al input. 00:00:11
El id que teníamos era este nombre, por eso for aparece aquí con nombre. 00:00:22
La etiqueta, el primer input es un campo de texto que sería este correspondiente, que es un campo de texto y que sería el de nombre. 00:00:26
Entonces, como he puesto nombre asterisco, aquí ha puesto span para hacer referencia con esta clase, que sea obligatorio a este asterisco. 00:00:36
A continuación tenemos aquí el campo de texto y el campo de texto le ha dicho que pongas en el placeholder 00:00:48
Escribe tu nombre, que es obligatorio que se escribe en el mismo y luego el propio ID 00:00:57
Debajo tenemos otro input, pero ahora el input es de tipo email 00:01:04
Y el formato es exactamente el mismo que el de arriba 00:01:09
Bien, pasamos a la segunda parte del formulario 00:01:12
Segunda parte del formulario, si veis, es igual que la anterior. Lo único que está formado es por otro type, en el que el type para teléfono, para URL y luego otro type de tipo texto para el asunto. 00:01:16
Si veis aquí, nos deja de ser más que cada uno de los campos que aparecen aquí. Lo único que nos quedaría al final sería un mensaje que sería de tipo textarea y ya por último lo que es el botón enviar. 00:01:33
Bien, y por último tendríamos la última parte del formulario que sería pues lo que es el mensaje que estaría formado por un textarea. El for mensaje estaría también enlazado a través del id mensaje del propio textarea y luego ya pues el botón, el botón de submit que sería pues para enviar el formulario. 00:01:50
Bien, ¿qué sucede en cuanto a la parte, en cuanto a este sería el formulario? Vamos a hacerlo más reducido. En cuanto a la parte del archivo CSS, tenemos contact form, que sería la parte, bueno, primero le ha puesto a la etiqueta body, le ha puesto estas tres reglas. 00:02:11
Hay que decir que el ancho de página, que sea el 100%, y en cuanto a la fuente por defecto, pues van a ser esta y si no, pues sería la siguiente. 00:02:46
Quiere decir que estas fuentes las importa a través de esta URL. 00:02:58
Si yo me pongo con esta URL, voy a ejecutar, veréis que es una URL en la que lo que está formado aquí es una serie de fuentes. 00:03:02
el que va a importar. Esas fuentes las va a importar para darle ese estilo, para que pueda utilizar Noto Sans o Sans Shave. 00:03:14
En cuanto a Contact Form, sería la parte que vimos del formulario del div. 00:03:25
Si lo bajamos aquí, vamos a hacerlo más reducido, el div tenía una clase, classContactForm, y ese div agrupaba todos los elementos del formulario. A esta clase viene determinada por todas estas reglas que aparecen aquí. 00:03:32
Bien, estas reglas que aparecen aquí, una las aplica al Contact Form y la otra la está aplicando al selector Input. 00:03:52
Para ver las de Contact Form, nos está diciendo que la amplitud del formulario va a ser de 470 píxeles, 00:04:03
la altura va a ser automática, se va a adaptar, va a ser auto, el margin que vimos que lo que era el margin va a ser 80 píxeles, 00:04:11
y luego pues él lo que es el radio del border del borde aquí está me está diciendo pues que 00:04:22
la amplitud del contrafón de aquí aquí va a ser 460 píxeles que la altura va a ser automática 00:04:39
que el margen el margen va a ser de 80 píxeles veis vamos a ver para que veáis el margen cuál 00:04:47
es lo voy a modificar y le voy a poner a 130 y veis que con respecto a este formulario como 00:05:00
se modifica le damos a abordar y al darle a ejecutar veis que veis que el margen si os 00:05:10
Si os acordáis, el margin era esto. El margin era toda la parte externa. Pues se ha modificado. Aquí si lo veis, al modificarlo y pasar a... 00:05:40
Idioma/s:
es
Materias:
Informática
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado superior
      • Primer Curso
      • Segundo Curso
Autor/es:
Francisco J. González Constanza
Subido por:
Francisco J. G.
Licencia:
Todos los derechos reservados
Visualizaciones:
34
Fecha:
19 de diciembre de 2024 - 22:31
Visibilidad:
Público
Centro:
IES CIFP a Distancia Ignacio Ellacuría
Duración:
05′ 59″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
234.97 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid