Html formulários
• O elemento HTML <form>é usado para criar um formulário HTML
para entrada do usuário:
<form action="/processar-dados" method="post">
<!-- Elementos do formulário aqui -->
</form>
• action: Um atributo que especifica a URL para onde os dados do
formulário serão enviados quando submetidos.
• method: Um atributo que define o método HTTP a ser usado para
enviar os dados. Os mais comuns são GET (usado para buscar
informações) e POST (usado para enviar dados de forma mais segura,
como para um cadastro).
ELEMENTO
• Define LABEL
um rótulo para muitos elementos do formulário.
• É útil para usuários de leitores de tela, porque o leitor de tela lerá em voz
alta o rótulo quando o usuário se concentrar no elemento de entrada.
• <label for="html">HTML</label><br>
• O for atributo da <label> é igual a um id ou seja é um
elemento para vinculá-los que identifica o label.
css
• label {
font-family: Arial, sans-serif;
color: #333;
background-color: #f0f0f0;
width: 100px;
text-shadow: 1px 1px 2px #000;
display: block; /* ou inline, etc. */
}
INPUT TYPES
TEXT
• Campo de texto básico: Ele fornece uma área de entrada de texto fundamental sem recursos
especializados, como mascaramento de senha ou validação de e-mail, que são manipulados por
outros tipos de entrada (por exemplo, type="password", type="email").
• Atributos: Ele suporta vários atributos para personalizar seu comportamento e aparência,
incluindo:
• name: Essencial para associar o campo de entrada a um par nome/valor ao enviar o formulário.
• id: Usado para vincular com um <label>elemento para acessibilidade e para segmentação com
CSS ou JavaScript.
• placeholder: Fornece uma dica ou exemplo do valor de entrada esperado dentro do campo.
• maxlength: Define o número máximo de caracteres permitidos.
• readonly: Torna o campo de entrada não editável.
• required: Especifica que o campo deve ser preenchido antes do envio do formulário.
• <input type="text" id="username" name="username" placeholder="Enter your username"
maxlength="20" required />
CSS INPUT TEXT
• input[type="text"] {
color: #333;
font-family: Arial, sans-serif;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
border-radius: 4px;
}
input[type="text"]:focus {
border-color: #007bff;
outline: none;
}
• input[type=text] {
background-color: white;
background-image: url('[Link]');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
• input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Password
• Semelhante à entrada de texto, mas mascara os caracteres inseridos
para fins de segurança, comumente usado para entrada de senha.
checkbox
• Cria uma caixa de seleção que os usuários podem marcar ou
desmarcar.
Radio button
• Os botões de opção são usados quando os usuários precisam
selecionar apenas uma opção de um grupo de opções (todos os
botões de opção com o mesmo nome).
number
• Fornece um campo de entrada numérico. Os atributos min e max
definem o intervalo permitido.
Date
• Permite que os usuários selecionem uma data em um seletor de data.
email
• Valida se o texto inserido está no formato de um endereço de e-mail.
URL
• Valida se o texto inserido está no formato de uma URL.
Input file
• Permite que os usuários carreguem um arquivo. Clicando nisso, uma
caixa de diálogo de seleção de arquivo será exibida.
Reset Button
• Cria um botão que redefine todos os controles do formulário para
seus valores padrão.
Hidden Input
• Esta entrada não é visível no formulário, mas pode armazenar dados
que são enviados quando o formulário é enviado.
Color Input
• Este tipo de entrada permite que os usuários escolham uma cor
usando um seletor de cores.
Range Input
• Cria um controle deslizante que permite aos usuários selecionar um
valor numérico dentro de um intervalo especificado.
Search Input
• Projetado para campos de pesquisa, fornecendo um teclado e estilo
específicos para entradas de pesquisa.
Tel Input
• Usado para números de telefone e pode incluir caracteres especiais
como parênteses e hifens.
Time input
• Permite que os usuários insiram um valor de tempo, normalmente
exibido como um seletor de tempo.
Week input
• Permite que os usuários escolham uma semana específica, exibida
como um seletor de semanas.
Date-time local
• Representa uma data e hora local, exibidas como um seletor
datetime-local.
Month input
• Permite que os usuários selecionem um mês específico, exibido como
um seletor de meses.
Input type image
• Utiliza uma imagem como botão de envio. As coordenadas do clique
(x, y) são enviadas como parte do envio do formulário.
Submit Button
• Cria um botão que envia o formulário quando clicado.
Input type button
• O <input>elemento com o type="button"atributo é usado para criar
um botão clicável em HTML.
• Ao contrário do botão de envio ( type="submit"), um botão com
entrada type="button"não executa nenhuma ação inerentemente por
si só.
• Em vez disso, você pode associar funções JavaScript a ele para definir
ações ou comportamentos específicos.
Dropdown
<select id=“marca_carros" name=“marca_carros">
<option value=“volkswagen">Volkswagen</option>
<option value=“fiat">Fiat</option>
<option value=“chevrolet">Chevrolet</option>
</select>
CSS para INPUT TYPES
• Para os campos de INPUT podemos trabalhar:
• width
• padding
• margin
• border
• border-radius
• background-color
• color
• font-size
USANDO SELETOR FOCUS
• Por padrão, alguns navegadores adicionam um contorno azul ao redor
da entrada quando ela recebe foco (é clicada). Você pode remover
esse comportamento adicionando
• outline: none;
• Use o seletor :focus para fazer algo com o campo de entrada quando
ele receber foco:
• EXEMPLO:
input[type=text]:focus {
background-color: lightblue;
}
COLOCANDO ICONES NA CAIXA DE TEXTO
• use a propriedade background-image e posicione-a com a
propriedade background-position.
• EXEMPLO:
• input[type=text] {
background-color: white;
background-image: url('[Link]');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
background-size: contain;
}
TRANSIÇÃO
• Usamos a propriedade de transição CSS para animar a largura da entrada de texto
quando ela recebe foco.
• EXEMPLO:
• input[type=text] {
transition: width 0.4s ease-in-out background-color 3s;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
input[type=text]:focus {
width: 100%;
background-color= blue;
transform: rotate(180deg);
}
ease-in-out: PODE SER SUBSTITUIDO POR linear,ease,ease-in,ease-out
Pode ser inserido um transform também veremos a frente…
Dropdowns, buttons,
• [Link]
• [Link]
• [Link]
• [Link]
Mais exemplos...:
• [Link]
ATIVIDADES
• CRIE UM FORMULARIO PARA :
• [Link]