Home-theater-designers
A coleta de dados de um usuário do site pode ser feita de várias maneiras diferentes. Os formulários em sites podem ter uma função simples, como inscrever um usuário em um boletim informativo, ou uma finalidade mais complexa, como atuar como um formulário de candidatura a um emprego.
No entanto, uma coisa que todos esses formulários simples a complexos têm em comum é o HTML e, mais especificamente, o HTML marcação.
Usando a tag de formulário
o tag é um elemento HTML usado como um contêiner para incluir outros elementos que podem ser considerados blocos de construção para formulários. Alguns desses elementos fundamentais incluem o tag, o tag, e o marcação.
o tag possui um atributo importante que contribui para sua funcionalidade. Este atributo é chamado de ação e é usado para identificar o arquivo para o qual os dados inseridos no formulário serão passados.
Usando o exemplo de tag
O exemplo acima mostra como usar a tag de formulário em seus projetos. Uma das principais lições é que, se você abrir uma tag de formulário, lembre-se de fechá-la. Isso criará uma estrutura de formulário e também garantirá que os dados inseridos no formulário sejam processados corretamente.
Usando a tag
o tag é usada para descrever os dados em cada campo de entrada em um formulário. Esta tag tem um para atributo, que é usado para aprimorar a funcionalidade de um formulário.
Relacionado: Os melhores editores de HTML online gratuitos para testar seu código
Se o id que é atribuído ao campo de entrada correspondente corresponder ao para valor no tag, então esse campo de entrada será automaticamente destacado quando você clicar no rótulo.
Usando o exemplo de tag
First Name:
No exemplo acima, você pode ver que o para atributo é atribuído o valor fname . Portanto, se você criar um campo de entrada com o fname id, este campo será destacado cada vez que você clicar no Primeiro Nome rótulo.
Usando a tag
Em sua forma mais básica, o tag pode ser vista como uma caixa de texto. o tag captura dados do usuário e um de seus recursos mais importantes é o modelo atributo. o modelo attribute indica o tipo de dados que essa caixa de texto pode coletar.
Relacionado: Como criar um formulário empilhado em CSS
Existem vários valores diferentes que você pode atribuir ao modelo atributo, mas alguns dos mais populares são os seguintes.
- Texto
- Número
- O email
- Imagem
- Encontro
- Caixa de seleção
- Rádio
- Senha
Usando a tag Exemplo
First Name:
o tag no código acima tem três atributos diferentes, cada um com uma função única. o modelo atributo é atribuído a um valor de texto, o que significa que a caixa de texto aceitará apenas caracteres.
o Eu iria attribute é um identificador exclusivo para a caixa de texto e é importante porque fornece acesso a esse elemento a partir de um arquivo CSS. o nome atributo também é um identificador único; no entanto, o atributo name é usado para interagir com um elemento do lado do servidor de desenvolvimento.
o Eu iria e nome os atributos geralmente recebem o mesmo valor, já que um fornece acesso a um elemento do lado do cliente e o outro do lado do servidor.
Usando o Elemento Checkbox
O elemento checkbox é muito único em comparação com os outros elementos que você pode usar com o marcação. Ele permite que um usuário selecione uma ou mais opções de uma lista de escolhas relacionadas. As caixas de seleção são facilmente identificadas porque são representadas por pequenas caixas quadradas que contêm uma marca de seleção quando selecionadas.
Usando o exemplo de elemento de caixa de seleção
Programming Languages:
Java
JavaScript
Python
No exemplo acima, cada um dos elementos de caixa de seleção tem um atributo de valor, e isso é importante porque ajuda a distinguir cada opção de caixa de seleção da coleção. Portanto, se um usuário selecionar 'Java' nas opções acima, os dados refletirão isso.
Usando a etiqueta e os elementos de rádio
o tag e os elementos de rádio são semelhantes no sentido de que permitem ao usuário selecionar um único valor de cada vez; portanto, pode-se dizer que têm a mesma função. No entanto, eles são muito diferentes na aparência.
O elemento de rádio está mais próximo do elemento de caixa de seleção na aparência, no entanto, com o elemento de rádio, você tem círculos em vez de quadrados.
o tag produz o que é essencialmente uma caixa suspensa, que permite ao usuário selecionar um único valor.
Usando o exemplo de tag e elemento de rádio
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Usando o Elemento de Data
O elemento de data produz uma pequena caixa de texto que gera um calendário quando clicado. Usando encontro como um tipo de entrada em seus formulários, protege contra um usuário potencialmente inserir uma data incorreta, o que pode levar à coleta de dados incorretos.
Usando o Exemplo de Elemento de Data
Usando o Elemento Email e Senha
Quando um desenvolvedor atribui os valores de e-mail ou senha ao atributo type de um tag, cada um deles produz uma caixa de texto idêntica. No entanto, quando você começa a usar essas caixas, as diferenças tornam-se aparentes.
O elemento email monitora os dados inseridos na caixa de texto e garante que cada envio atenda ao requisito padrão de um endereço de email; o que significa ter uma parte local, seguida do símbolo @ e terminando com um domínio.
Usando o Exemplo de Elemento de Email
No exemplo acima, você foi apresentado a um novo atributo chamado marcador de posição , e esse atributo assume um valor de texto que é exibido na caixa de texto em cinza desbotado. Este texto é usado para indicar os dados que devem ser colocados na caixa de texto, como pode ser visto no exemplo acima.
O elemento de senha transforma os caracteres em asteriscos à medida que são inseridos na caixa de texto. Portanto, se a tela do seu computador estiver visível para outras pessoas, elas não verão a senha que você digitou.
Usando o Exemplo de Elemento de Senha
Usando a etiqueta de botão
Em um formulário, geralmente existem dois tipos diferentes de botões. O primeiro é o botão de envio, que envia os dados inseridos no formulário para o valor atribuído ao atributo de ação (que está localizado no < formulário> marcação).
Exemplo de botão de envio
Submit
O segundo tipo de botão geralmente usado em um formulário é um botão de redefinição, que limpa os dados em um formulário para que o usuário possa inserir dados novos. o tag tem um modelo atributo, que é usado para indicar a função do botão. No exemplo acima, o modelo atributo é atribuir o valor enviar , portanto, um botão que tem um modelo valor de Redefinir é usado para redefinir o formulário.
Exemplo de botão de reinicialização
Reset
Criação de um formulário
Para criar um formulário simples em HTML, você precisará incluir todos os elementos mencionados acima em um marcação.
Criação de um exemplo de formulário
Forms
First Name:
Last Name:
Date of birth:
Age:
Gender:
Male
Female
Other
Email Address:
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Programming Languages:
Java
JavaScript
Python
Password:
Confirm Password:
Submit
Reset
O código acima produzirá o seguinte formulário:
modo kernel inesperado trap windows 10
Agora você pode criar um formulário simples em HTML
Este artigo fornece todas as ferramentas para criar um formulário HTML funcional. Ele identifica as diferentes tags HTML que são usadas na criação do formulário e explora os diferentes atributos que podem ser usados com essas tags.
No entanto, a maioria dos formulários que você vê em sites têm um componente adicional; CSS, que é usado para dar vida à forma e torná-la mais esteticamente agradável.
Compartilhado Compartilhado Tweet O email A folha de dicas de propriedades CSS3 essenciaisDomine a sintaxe CSS essencial com nossa folha de dicas de propriedades CSS3.
Leia a seguir Tópicos relacionados- Programação
- HTML
- Desenvolvimento web
- Tutoriais de codificação
Kadeisha Kean é um desenvolvedor de software full-stack e redator técnico / de tecnologia. Ela tem a habilidade distinta de simplificar alguns dos conceitos tecnológicos mais complexos; produzindo material que pode ser facilmente entendido por qualquer novato em tecnologia. Ela é apaixonada por escrever, desenvolver softwares interessantes e viajar pelo mundo (através de documentários).
Mais de Kadeisha KeanAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever