Ahora que hemos visto cómo añadir botones a nuestra página web.
En este ejercicio, vamos a ver los formularios y cómo podemos agregar formularios a
nuestra página web y también darle estilo a estos elementos de formulario usando las clases de Bootstrap.
Volviendo a la página contactus.html,
desplácese hacia abajo hasta que vea este comentario allí llamado «El formulario va aquí».
Vamos a reemplazar esto con el formulario de esta página web.
Entonces, eliminemos eso y luego construyamos
el formulario en esa ubicación particular dentro del div allí.
Para empezar con el formulario,
voy a usar la etiqueta HTML del formulario y construir el formulario dentro de esta etiqueta HTML.
Por lo tanto, dentro de esta etiqueta de formulario,
vamos a añadir los elementos de radio de nuestra forma.
Entonces, dentro de este formulario,
voy a dividir este formulario en varias filas allí.
Para dividir su formulario en filas,
simplemente puede usar un div con la class="form-group» y luego aplicarle la clase de fila.
Por lo tanto, con esto, vamos a añadir en dos grupos de formularios aquí.
Voy a copiar esto y luego pegarlo aquí abajo.
Por lo tanto, puede ver que voy a agregar dos filas a este formulario aquí.
Entonces, para agregar un elemento a este formulario,
vamos a este div y luego comenzaré usando una etiqueta de etiqueta aquí.
Y para las etiquetas de etiqueta,
así que tendré dos filas;
una que permite al usuario rellenar su nombre
y la segunda para su apellido.
Entonces, aquí es donde vamos a usar esa etiqueta para especificar la clase allí.
Ahora, Además, Bootstrap nos permite utilizar la cuadrícula de Bootstrap
para especificar cómo se van a presentar estos formularios anuncio así que aplicaré el col-md-2.
Puede ver que he aplicado las clases de columna md-2 a este elemento en particular.
Por lo tanto, este elemento en el formulario ocupará dos columnas.
Por lo tanto, dentro de este elemento de formulario,
hemos dividido cada fila en 12 columnas.
Entonces, porque ya hemos usado la fila para el div,
por lo que nos proporcionará 12 columnas dentro del div allí.
Además, tengo que aplicar la etiqueta del formulario col de clase a esto.
Entonces, esto es lo que me permite especificar una etiqueta aquí.
Por lo tanto, para esta etiqueta,
rellenaré la etiqueta como nombre y luego cerraré la etiqueta de etiqueta.
Por lo tanto, esta etiqueta de etiqueta me permite dar una etiqueta,
que ocupará dos columnas izquierdas en esta fila en particular.
En el lado derecho, voy a usar otro div que la clase aplicó como col-md-10.
Observe que la etiqueta anterior usaba col-md-2 allí.
Entonces, para este div,
voy a aplicar el col-md-10 allí.
Y luego dentro de este div,
voy a aplicar un elemento de entrada,
que es del tipo de texto.
Por lo tanto, si está familiarizado con los formularios de HTML,
verá que estamos utilizando los elementos de formulario de HTML para
crear ese formulario aquí, por lo que el cuadro de entrada aquí es del tipo de texto.
Ahora, aquí es donde vamos a aplicar las clases Bootstrap a esto
y la clase Bootstrap correspondiente para esto
es el control de formulario y luego puedo especificar
un ID para esto como nombre de pila.
Por lo tanto, observe que este ID coincide con esta etiqueta para div.
Entonces, nombre, y luego nombre como
nombre y también especificaré
un marcador de posición para esto, así que permítanme usar la siguiente línea aquí,
marcador de posición como, estoy seguro de su conocimiento de HTML,
usted entiende cómo se hace esta especificación aquí.
Así que, con esto, ahora hemos creado nuestro primer elemento de formulario en nuestra forma.
Echemos un vistazo rápido a la página web.
Ir a nuestra página web, ahora puede ver cómo agregar elementos en el formulario ha creado
este cuadro de texto de entrada y la etiqueta en el lado izquierdo.
Ahora, voy a añadir otra fila con el apellido.
Volviendo a mi contactus.html,
déjame simplemente copiar esta parte y luego pegarla en el segundo div aquí,
y luego entrar y editar eso.
De primer nombre cambiaré eso a apellido.
Asegúrese de completar todas las ediciones correctamente.
Incluso una edición incorrecta faltante,
hará que su formulario no funcione correctamente, así que asegúrese de que
todas las cosas del primer nombre aquí sean reemplazadas por mi apellido.
Por lo tanto, el apellido,
control de formulario de texto md-10.
El ID aquí debe ser el apellido y el nombre también debe
ser el apellido y el marcador de posición de
nuevo el apellido, por lo que se debe agregar en una segunda fila con el apellido. Al
ir a su página web,
usted puede ver ahora el formulario
poco a poco en forma para que tenga el nombre y apellido.
Ahora, vamos a añadir un elemento de entrada.
Veremos cómo funciona esto a medida que agregamos el código.
Pasando ahora a la siguiente parte del ejercicio,
aquí vamos a añadir dos campos más en
nuestro formulario aquí para introducir el número de teléfono y el ID de correo electrónico.
Dado que la estructura básica del código es similar al
nombre y el apellido que ya ha agregado al formulario,
así que solo voy a copiar el código del nombre y
el apellido y luego pegarlo aquí y luego modificar el código en consecuencia.
Por lo tanto, he pegado el código del nombre y el apellido aquí.
Vamos a seguir adelante y ahora modificarlo para convertirlo en campos que permitan
al usuario ingresar el número de teléfono y el ID de correo electrónico.
Entonces, para el número de teléfono,
así que aquí ya tenemos el nombre y el apellido de arriba.
Entonces, el tercero, voy a cambiar esto a la etiqueta para «telnum».
Por lo tanto, esto es desde el número de teléfono y luego las clases,
voy a aplicar una clase col-12 a este dicho que esta etiqueta estará en
su propio sorteo cuando el formulario se muestre en tamaños de pantalla extra pequeños a pequeños.
Y luego, para el tamaño de pantalla medio a mayor,
esto se mostraría en dos columnas
de esa fila en particular aquí, así que ese es el cambio que haremos allí.
Y luego también, la etiqueta en sí,
permítanme cambiar eso a número de teléfono de contacto, contacto Tel.
Ahora, el número de teléfono en sí,
dejaremos que el usuario lo introduzca como dos partes; una,
que es el código de área y la segunda,
que sería el número de teléfono real.
Por lo tanto, voy a tomar esta parte del código,
que era el campo de entrada que teníamos para
el primer nombre y luego crear otra abajo aquí abajo,
que voy a usar para el número de teléfono en sí.
Y ahora vamos a convertir este primero en el campo para ingresar el código de área.
También puede usarlo, por ejemplo,
para el código de país si eso es lo que desea poner en el formulario.
Entonces, para el código de área en sí,
voy a solicitar el div,
la classes="col-5 col-md-3 aquí».
Por lo tanto, observe que para la pantalla media,
tenemos dos columnas ocupadas por la etiqueta,
tres columnas ocupadas por el código de área en sí y
las siete columnas restantes lo daré al campo de texto aquí.
Entonces, de manera similar, para el código de área digo col cinco.
Por lo tanto, para pantallas extra pequeñas a pequeñas esto ocupará
cinco columnas y luego para las siete columnas restantes,
dejaremos que el número de teléfono se alimente a sí mismo ocupado en.
Entonces, déjame cambiar el siguiente a col-7 y col-md-7 aquí.
Ahora, este campo voy a cambiar esto a tel,
tipo de entrada tel para el número de teléfono y la clase es control de formulario,
el ID es código de área y el nombre es código de área y luego el marcador de posición,
Voy a cambiar esto a código de área.
Y la siguiente parte,
vamos a cambiar esto también tipo tel e ID es telnum,
el nombre es telnum y el marcador de posición,
en sí, sería número tel.
Por lo tanto, esto formará el campo de número de teléfono,
que se ingresará como dos partes;
el código de área y el número de teléfono.
Por lo tanto, estamos utilizando, de nuevo,
las clases de columna con
el fin de estructurar cómo se muestran las dos partes del campo de entrada en el formulario allí.
Ahora el último, por supuesto,
esto sería para ID de correo electrónico, así que la etiqueta,
lo convierto en ID de correo electrónico y luego la etiqueta en sí
es correo electrónico y el tipo de entrada es correo electrónico.
Ahora, cambiamos el tipo a correo electrónico,
que está permitido en HTML para que más adelante si necesitamos hacer la validación del formulario,
entonces sabemos que este campo debe contener
sólo un tipo de correo electrónico de entrada allí, y el ID, en
sí mismo, ID de correo electrónico y el nombre ID de correo electrónico y el marcador de posición.
Correo electrónico. Eso es todo.
Vamos a guardar los cambios y vamos a echar un vistazo al formulario actualizado.
Al ir al formulario en el navegador,
ahora verá dos filas adicionales agregadas a nuestro formulario.
El nombre y el apellido se añadirán en la parte anterior del ejercicio.
Entonces, aquí, tenemos el número de teléfono de contacto,
que se divide en el código de área y el número de teléfono.
Tenga en cuenta cómo hemos utilizado las clases de columna para colocar estos dos en
el formulario en sí y luego el campo de correo electrónico aquí.
Echemos un vistazo a lo mismo en un tamaño de pantalla extra pequeño.
Por lo tanto, cuando vaya a un tamaño de pantalla extra pequeño,
notará cómo se presenta el formulario en sí.
Verá que la etiqueta está en la parte superior y luego el campo mismo en la parte inferior.
Así que nombre, apellido.
Observe cómo los
campos de entrada de número de teléfono de contacto se colocan utilizando las clases de columna,
por lo que el código de área aquí,
y el número de teléfono,
y luego el ID de correo electrónico aquí.
Ahora, continuaremos con el ejercicio.
Continuando en el siguiente paso,
vamos a añadir en una casilla de verificación y luego vamos a añadir en un seleccionar dos o cuatro.
Para agregar una casilla de verificación,
vamos a copiar este grupo de formularios aquí para que lo agreguemos como otra fila aquí,
y luego agregar en el grupo de formulario div aquí,
y luego cerrar el div aquí.
Y luego dentro de esta fila de grupo de formularios,
por lo que esto nos da una fila más en el formulario.
Entonces, dentro de esta fila de grupo de formularios,
permítanme agregar primero la casilla de verificación.
Entonces, para hacer eso, agregaremos un div con la class="col-md-6" para
que vea que esto va a ocupar
seis columnas en el tamaño de pantalla medio a extra grande,
y luego offset-md-2, por lo que esto lo compensará a
la derecha por dos columnas y luego mostrará la casilla de verificación allí.
Ahora, dentro de aquí, para agregar una casilla de verificación,
div con la clase="form-check» y
dentro de esta clase de verificación de formulario agregaremos un tipo de entrada="casilla de verificación»
y la class="form-check-input» y luego déjame ir a la siguiente línea y luego
decir name="approve» y el
id = «aprobar» y el valor hay una cadena vacía allí.
Y a esta casilla de verificación,
agreguemos una etiqueta.
Por lo tanto, para agregar una etiqueta,
vamos a ir y agregar en label
class="form-check-label» y luego esta etiqueta
es para esta casilla de verificación que acabamos de agregar.
Por lo tanto, es por eso que vamos a decir «aprobar», así que tenga en cuenta que para la casilla de verificación,
hemos dado el nombre y el ID como aprobación, por lo que aquí,
vamos a guardar para la etiqueta para aprobar.
Y luego dentro de esta etiqueta,
especificaremos el contenido como «¿Podemos ponernos en contacto con usted?»
Y luego guarda los cambios y vamos a echar un vistazo a nuestro formulario. Al
ir a la página web,
ahora puede ver que hemos añadido en una casilla de verificación junto con una etiqueta aquí y observar
que esta etiqueta está en negrita debido al uso de la etiqueta «fuerte» allí,
y lo hicimos offset-md-2.
Así que es por eso que presionamos esta casilla de verificación hasta aquí.
Esto no tiene una etiqueta aquí, pero en su lugar esto se empuja aquí, por
lo que esa es la razón para usar offset-md-2 aquí,
y este ocupa md-6, así que seis columnas aquí.
Aún no hemos terminado con eso.
Voy a agregar en la siguiente parte aquí,
que es un cuadro de selección allí.
Así que aplicaré un div más aquí con
la class="col-md-3 offset-md-1" aquí.
Y dentro de este div,
voy a definir un selecto.
Por lo tanto, de nuevo, a partir de su conocimiento de HTML,
usted sabe lo que un selecto hace por usted.
Ahora, la selección aplicará
el control de formulario de clases, por lo que esta es la clase Bootstrap que estoy aplicando a la selección aquí,
y cierre la selección.
Y dentro de aquí, necesito dar las opciones para el selecto.
Por lo tanto, estoy usando una selección simple aquí,
por lo que la primera es una opción
para teléfono o correo electrónico y cierre la opción.
Por lo tanto, esto crea un elemento de selección en mi formulario,
que tiene dos opciones;
teléfono y correo electrónico, así que,
vamos a guardar los cambios.
Echando un vistazo a nuestra página web,
ahora puede ver cómo se crea la casilla de selección de teléfono y correo electrónico aquí, así
que esto me permite seleccionar cuál hacer y luego también puede marcar la casilla de verificación como esta.
Por lo tanto, esto termina la siguiente fila.
Añadamos una fila más,
lo que permitirá al usuario escribir realmente sus comentarios.
Por lo tanto, usaré un área de texto para formatear eso.
Para el siguiente, voy a usar un área de texto. Por
lo tanto, lo que voy a hacer es subir y copiar esta parte de correo electrónico.
Soy demasiado perezoso para seguir escribiendo todo todo el tiempo.
Por lo tanto, tiendo a cortar y pegar siempre que sea posible, pero para este,
la etiqueta debe ser retroalimentación y la etiqueta del formulario de columna,
y luego el texto real es, «Sus comentarios aquí».
Así que esa es la etiqueta.
Y luego, aquí, el segundo,
voy a formatear este.
En lugar de tipo de entrada,
voy a cambiar eso a un área de texto,
y luego no necesito el tipo allí.
Área de texto, la clase sigue siendo control de formulario y el ID es retroalimentación. El
nombre es una retroalimentación y el marcador de posición no es necesario
aquí y en su lugar cámbielo a cuántas filas
quiero dar de la retroalimentación para el área de texto?
Así que voy a decir 12 filas y luego cerrar el texto.
Así que observe cómo he incluido el área de texto en mi forma.
Guarde los cambios.
Echa un vistazo. Al ir a mi página web,
ahora ves que mi formulario toma su forma completa aquí.
Tienes el nombre, apellidos,
teléfono, correo electrónico, y luego los comentarios.
El área de texto de 12 filas.
Ahora, necesitará un botón en el que el usuario debe hacer clic para enviar sus comentarios.
Por lo tanto, vamos a añadir un botón de envío a este formulario.
Volviendo al formulario de nuevo,
cree una fila más aquí usando
el div aquí con la fila del grupo de formularios
aquí, y dentro de aquí voy a agregar un botón aquí.
Entonces, diría, div
class="offset-md-2" porque quiero que mi botón se
coloque justo debajo de todos los campos que
tengo aquí para que las dos columnas de la izquierda se usen para la etiqueta.
Entonces, el botón de enviar no necesita una etiqueta, así que solo
lo presionaré hacia la derecha aquí y luego
diría «col-md-10" para que esto ocupe las 10 columnas restantes allí.
Y luego dentro de esos div,
voy a agregar un botón allí.
Por lo tanto, cuando agregue un botón a su formulario,
use la etiqueta de botón aquí con un tipo enviar.
Por lo tanto, este es el botón de enviar para su formulario allí y clase.
Recuerde clases de botones, botón primario,
por lo que esto crearía un botón azul oscuro en su formulario y
luego cierre el botón allí,
y luego simplemente voy a entrar y dentro del botón,
voy a dar el nombre como «Enviar comentarios» y luego guardar los cambios.
Ahora, nuestro formulario está completo.
Entonces, echemos un vistazo a la versión final de nuestro formulario.
Ir a nuestra página web,
ahora puede ver el formulario completado.
Todos estos campos que ya hemos visto,
el botón en la parte inferior con la frase «Enviar
comentarios» y el botón de color azul oscuro debido al uso del botón «primario».
Por lo tanto, esto completa el formulario que queríamos crear en nuestra página web.
Con esto, completamos este ejercicio,
donde hemos visto cómo podemos construir un formulario e incluirlo en nuestra página web.
Trabajará con formularios en algunos de
los ejercicios posteriores, incluida su segunda asignación.
Este es un buen momento para que hagas un buen comentario con los formularios de mensaje.