Estudos Programação

• Lida diretamente com o usuário final, definindo como será sua interação com a interface do site;
• Cuida da regra de negócio (tanto front quanto back lidam com a regra de negócio, mas a maior parte fica por conta do back);
• Regra de negócio é uma lista de regras que dita o que, como, onde, quando e por que as coisas serão feitas;
• A regra define de que maneira o negócio será gerenciado, tornando-o viável, lucrativo e/ou funcional.
• Desenvolve o visual das páginas, aplicando cores, formas, fontes, estilos e animações;
• Tem seus códigos executados pelo navegador.

Pilares da Web

• HTML: conteúdo - HTML não é uma linguagem de programação, é uma linguagem de marcação usada para definir a estrutura de seu conteúdo.
• CSS: design - cuida de toda a estilização, é uma linguagem de estilo.
• JS: interações - torna sua página interativa e dinâmica, é uma linguagem de script/programação.

Código no HTML:

<form>

    <label for="email" >
        Inscreva-se na nossa newsletter
    </label>

    <input id="email" 
               type="email" 
               placeholder="Escreva aqui seu e-mail" />

    <button type="submit" >
        Enviar
    </button>

</form>

Como ficaria na web:

Primeiro, o que é um input? É o faz tudo do formulário!

É um campo de formulário onde o usuário poderá interagir e digitar seus dados. A entrada desse campo varia de acordo com seu tipo (ou type). Esses dados poderão ser enviados para um data base (ou banco de dados) lá no Back-end, para fins como:

• criar contas;
• verificar se o usuário digitou sua senha e seu e-mail corretamente para seu login ser liberado;
• no caso de um site de compras, verificar se os dados do cartão de crédito que o usuário inseriu no formulário é válido para somente assim liberar sua compra e etc.

Além de definir o tipo correto de input a ser usado, é preciso associá-lo a um label para o usuário ter uma experiência melhor, pois além de estar explícito o tipo de informação que ele digitará, ao clicar no label seu respectivo input terá foco.

<form>

    <label for="email" >
        Inscreva-se na nossa newsletter
    </label>

    <input id="email" 
            type="email" 
            placeholder="Escreva aqui seu e-mail" />

    <button type="submit" >
        Enviar
    </button>

</form>
                        

Importante:

➜ O id do input e o for do label precisam ter o mesmo nome para associarem-se.

➜ O placeholder nada mais é do que um label dentro do próprio input. Ele determina o que estará escrito dentro do campo. Uma vez que o usuário começa a digitar algo ele some, e reaparece novamente caso o campo esteja vazio. Por isso é interessante usar o label mesmo já existindo um placeholder, pois nosso querido usuário pode esquecer para que serve aquele campo.

• <input type="text" />:
• <input type="email" />:
• <input type="password" />:
• <input type="number" />:
• <input type="date" />:
• <input type="checkbox" />:
• <input type="radio" />:
• <input type="text" />: