Formularios con Foundation

Clase 16 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Resumen

Mira cómo crear formularios efectivos con Foundation

David Camacho

student•

Los form en HTML lo que hacen es llamar a una action (accion)...

Estos form tambien llevan un method (metodo), el cual puede ser: GET, POST, DELETE, entre otros. Esto es parte del protocolo de HTTP.

En el action se define una ruta y en el method se define que tipo de metodo va a utilizar el navegador para acceder a esa ruta, como se menciona anteriormente, tenemos distintos metodos como:

PUT: Cuando se actualizan datos

GET: Cuando se accede a una pagina o una funcion de una pagina

POST: Cuando enviamos datos a una pagina

DELETE: Si estamos eliminando datos de un sitio web

Foundation nos permite poner row y dentro de esas row podemos crear columns...

Pero tambien nos permite poner row columns (una fila que sea una columna), a su vez podemos agregarle los tamaños que queremos que tenga, sin embargo si el contenedor 'row columns' esta dentro de otra grilla no podemos agregarle tamaños. Esto es como un callout es decir un contenedor...

Los row columns se centran automaticamente. Y se ven asi:

div class="input-group": Estos divs nos permiten crear los formularios con diseño, ejemplo un formulario que lleve un icono antes del texto a ingresar, luego el input y luego un boton. Todo esto se va a definir dentro de el input-group y va dentro del row columns.

Dentro de ese input-group el primer elemento es un span class="input-group-label" y dentro de ese span incluimos el icono con un i class="fi-mail" (en este caso). Como podemos ver hasta este punto los bordes de la izquierda son redondeados, mientras que los de la derecha son rectos, esto es con el fin de que sigamos incluyendo el input.

Luego de esto podemos ingresar el input, para este ejemplo necesitamos un input type email, con el fin de que el formulario valide que es un email.

Le vamos a dar una clase llamada 'input-group-field' (Esto va dentro del mismp input-group, sin salirnos de ahi).

De igual forma podemos observar que los bordes derechos siguen siendo rectos, esto se debe a que ahi va a ir nustro boton.

Sin salir del input-group, vamos a ingresar un div con clase input-group-button, dentro de ese div vamos a crear el boton, para ello vamos a crear un input type submit con class button y un value (el value es el texto que se muestra dentro del boton).

Si queremos referirnos a un input en css lo hacemos de la siguiente manera:

input[type="submit, button, email.. entre otros"]

Para mas información referente a formularios con foundations puede encontrarla aqui

Samuel Sobalvarro

student•

PODEMOS HACER GLOBAL EL FONT-FAMILY

*{
	font-family: 'Fuente';
}

Cesar David Ramírez Dimaté

student•

Instalar Nodejs y NPM en Ubuntu

1. Instalar NodeJs y npm
sudo apt-get update
sudo apt-get install build-essential libssl-dev
sudo apt-get install curl
curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh -o install_nvm.sh
bash install_nvm.sh
	# Close and reopen your terminal to start using nvm
nvm ls-remote
	# Revisar versiones
nvm install 8.11.1
node -v
	# v8.11.1
npm -v
	# 5.6.0
2. Instalar el paquete "serve"
npm install -g serve
3. Iniciar servidor local
cd Documents/platzipalooza
serve .

Teofilo Rosales Gama

student•

para levantar servidor python debes escribir en el cmd o git bash o en el terminal que configuraste:

python -m http.server 8080

Sebastian Barberans

student•

No me queda claro como hacer correr el servidor con el terminal, ¿existe algun curso relacionado a ello?

Ricardo Azpeitia P.

student•

Instalas node
instalas serve npm install -g serve
correst serve .

Jonathan Jiménez

student•

Sí tienes algún problema para hacer funcionar el servidor, en el vídeo anterior he añadido una breve explicación sobre como crear uno tu mismo.

Sí por el contrario lo que quieres es tener más información acerca de su funcionamiento, podrás encontrarla en el curso de programación básica de 2014 en los últimas lecciones y en la mayoría de cursos avanzados sobre javascript.

Juan David lemus Rubiano

student•

para los que no le dio dar los colocar la fuente, al boton
es

 #suscribite-container input.button{
font-family:'bree Serif', serif;}

Usuario anónimo

user•

tengo una duda y es cual es la diferencia de “background” y “background-color” o es lo mismo.

Oscar Daniel Piñeros Hernández

student•

Hola, Andrew.

Sucede que en CSS es posible especificar propiedades puntuales o utilizar métodos abreviados. Este es el caso de background (fondo), para el cual se puede utilizar, por ejemplo:

background-color: especificar el color para el fondo,
background-image: especificar la imagen de fondo,
background-repeat: especificar si la imagen de fondo se multiplica o no,

así:

background-color: #ffffff;
background-image: url(’…/images/background.jpg’);
background-repeat: no-repeat;

Esto mismo puede escribirse en forma resumida así:

background: url(’…/images/background.jpg’) no-repeat #ffffff;

Las propiedades que no se especifiquen toman el valor por defecto. No importa el orden en el cual se escriban en el método abreviado.

Usuario anónimo

user•

Muchisisisisimas gracias por tu ayuda

Gilberto Francisco Naranjo Valles

student•

Algunas veces al poner el Button. queda con un muy pequeño espacio en la parte de abajo que hace que no quede parejo el botón con la barra del email. Si les llega a pasar esto… Aquí esta la solución… “Ir a la hoja de estilos Foundation-flex.css” y buscar esta parte del código

.input-group-button a,
  .input-group-button input,
  .input-group-button button,
  .input-group-button label {
    height: 2.7rem;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1rem; }

El primer height debería de estar en 2.5rem; por lo menos a mi me paso así. Solo se cambia a 2.7rem; y eso debería solucionar el problema.!

espero halla sido de ayuda…

Ricardo Garrido Cruz

student•

Aportación:
Note que no me funciona “serve” si no tengo internet, si les pasa, pues al menos les dejo el dato, saludos.

oscar enrique ordoñez izquierdo

student•

Tienes algún ejemplo donde foundation y django trabajan juntos…

oscar enrique ordoñez izquierdo

student•

especialmente con formularios

Cesar David Ramírez Dimaté

student•

Internet mi so This is a Django application to add django-crispy-forms layout objects for Foundation for sites

Formularios con Foundation

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman