Please enable JavaScript.
Coggle requires JavaScript to display documents.
Bootstrap e Formulários HTML 5 (Bootstrap (Um dos seus recursos são:…
Bootstrap e Formulários HTML 5
Bootstrap
Nascido do Twitter, é um framework CSS com estilos base para nossa página, onde ao invés de começar todo o projeto do zero, começamos com uma base geral e adaptamos a nossas necessidades.
Um dos seus recursos são:
Reset CSS
Estilo visual base para a maioria das tags
Ícones
Grids prontos para uso
Componentes CSS
Plugins JavaScript
Tudo responsivo e mobile-first
Para adiciona-lo, basta baixarmos em
http://getbootstrap.com
e usar a tag padrão para adicionar um arquivo css no html
Ícones
O Bootstrap em si não traz uma biblioteca de ícones por padrão, mas eles recomendas algumas bibliotecas de ícones:
Font Awesome
Iconic
Octicons
Depois de escolher um pacote na biblioteca de ícones lá no site do bootstrap, adicione com ao html como um arquivo css normal e pronto!
Você poderá usar os ícones do mesmo jeito que o bootstrap, através das classes
Grids
Grids são colunas que dividem a tela, onde colocamos os elementos dentro delas
O Bootstrap fornece uma grid padrão para nós, ela trabalha com a ideia de 12 colunas, ela poderá ser configurada através de classes
As grids do bootstrap já são responsivas por si, existem classes de grids para diferentes tamanhos de tela:
col- : Extra small < 576px
col-sm- : Small >= 576px
col-md- : Medium >= 768px
col-xl- : Extra large >= 1200px
col-lg- : Large >= 992px
Mais sobre Formulários
Os atributos da tag <form>
action
Indica para onde as informações do formulário serão enviados
method
Especifica o método http pelo qual essa informação será enviada
Componentes
A tag <label>
Tag de conteúdo que faz uma ligação com algum outro elemento do formulário. muito usado para indicar cada parte do elemento
A tag <input>
Usada para capturar as informações que o usuário inserir, seu atributo
type
especifica qual tipo de input será usado para capturar as informações do usuário
Os valores mais usado para o atributo type:
text
usado para capturar textos simples sem quebra de linha
password
usado para capturar senhas, esconde o conteúdo digitado pelo usuário
checkbox
exibe uma caixa de marcação
radio
exibe também uma caixa de marcação, porém quando usado vários input radio com o mesmo atributo
name
somente uma opção poderá ser escolhida
image
Usado para colocar imagens no formulário, muita gente usa esse valor para deixar o botão de enviar mais bonitinho
file
Usado para o envio de arquivos, muitas vezes també é necessário colocar o atributo enctype="multipart/form-data" na tag form quando usar-mos esse tipo de input
hidden
Usado para enviar e receber informações que não queremos que o usuário veja
button
coloca um botão no formulário, só isso mesmo
submit
é um tipo especial de
button
, onde quando clicado envia as informações do formulário ao navegador
reset
limpa as informações digitadas no outros inputs do formulário
email
Usado para inserir endereço de email, nos dispositivos móveis, o teclado virtual se adapta para esse campo
number
Usado para colocar números, pode aceitar um valor max, um min, e o quanto vai ser incrementado nos atributos
url
Usado pra por urls
range
Exibe um controle deslizante, possui os mesmos atributos que o type number
date,
month,
week,
time,
datetime e datetime-local
usado para inserir datas, normalmente os navegadores apresentam um mini-calendário para o que usuário escolha a data mais facilmente, aceita um mínimo e máximo
color
Exibe um seletor de cores para que o usuário escolha com mais precisão a cor
search
Usado para buscas, ṕossui o atributo
results
que determina a quantidade de elementos do histórico de buscas
tel
adaptado para colocar números de telefones
Aceita os atributos além do type:
autofocus
O input irá se auto-selecionar para a entrada de informações quando abrir o formulário
placeholder
Exibe um texto no input caso ele esteja vazio
autocomplete
Usado para fornecer o usuário sugestões de informações com mais facilidade,
tem que ser usado em conjunto com o atributo list que fala de onde se se tirar as sugestões
deve ter uma tag <datalist> com as opções de susgestão
Exemplo:
<input type="text" list="cidades" autocomplete="on">
<datalist id="cidades">
<option value="Brasília">
<option value="Rio de Janeiro">
<option value="São Paulo">
</datalist>
A tag <textarea>
Usada para coloca textos simples grandes, com quebra de linha
A tag <select>
Usado para fornecer diversas opções para o usuário
Possui as tags filhas
option
, que fornece as opções ao usuário
Podem ser agrupadas com a tag
optgroup
Possui por padrão a escolha de somente uma opção, mas se usado o atributo
multiple
, poderá ser escolhido mais de uma
Validação
Para fazer ter certeza que o usuário está digitando os valores corretos no formulário, existe uma série de atributos no html e propriedades no css para verificar isso
No html temos dois atributos que podem ser colocados na tag <input> para impedir que o usuário insira coisas erradas
required
Esse atributo marca o <input> como sendo de preenchimento obrigatório
pattern
Especifica um um formato específico de inserção de dados no <input>
No css, temos o pseudo-elemento
:invalid
que pode fazer uma estilização caso o usuário digite valores errados no formulário
Lembrando que isso são formas de validação de campo consideradas fracas