Olá, tudo bem? Tenho duvida em relação aos detalhes da criação de formulários, como por exemplo, posso colocar o input antes do label? Qual a diferença de "type" e "for", e a diferença de "id" para "value"? Como saber quando e como usar? Como disse são pequenas duvidas, não sei se fui claro na explicação das minhas duvidas mas se alguém entender e puder me esclarecer algumas coisas ficarei muito agradecido.
hoje, com a Alura e o Google Gemini
Olá, sim, você pode colocar o label depois do input, segue o exemplo:
<input type="text" id="fname" name="fname" />
<label for="fname">First name:</label>
type serve para informar para que o input deve ser utilizado, se é para texto, se é data, telefone, email, ou multiplas opções. Isso muda a aparencia e funcionalidade do input. O for e o value servem para "linkar" o label com o input, quando ambos tem o mesmo nome os mesmos ficam "relacionados", isso é necessário para a parte do back-end. O id serve para marcar aquele elemento como o único da página, assim se consegue fazer várias coisas a partir disso.
espero que te ajude a entender melhor, basta praticar.
Olá Arthur, tudo bem?
O uso do input antes do label é uma opção válida sim. . O "type" dentro do input serve para você atribuir que tipo de dado o campo input pode receber no momento em que o usuário for preencher esse input. Exemplos:
<input type="date"> <!-- campo que espera receber alguma data -->
<input type="email"> <!-- campo que espera receber algum email -->
<input type="password"> <!-- campo que espera receber alguma senha -->
<input type="number"> <!-- campo que espera receber algum número -->. Sobre o "id", é um valor de identificação daquele campo, ou seja, no id você pode atribuir um valor, podendo ser um nome ou um código, e mais tarde quando precisar buscar esse determinado input, você pode fazer buscas utilizando o id que você definiu. . Exemplo: Você coloca seu email e senha para entrar no site de uma Loja Online, mas só entra se o valor que você digitou no input email e no input senha, estiverem corretos...e para fazer esse tipo de verificação, no HTML da Loja, eles podem configurar um id no input email (id="primeiroNomeCliente") e outro id no input senha (id="senhaCliente"). .
E na hora de montar um método (função) que vai até o Servidor/Banco de Dados, conferir se os valores digitados estão iguais aos valores que estão cadastrados na Base de Clientes, eles podem utilizar o id facilitando a forma de realizar a comparação. Se os dados estiverem OK, a função pode fazer o redirecionamento do usuário/cliente para outra página de "Clientes Plano Fidelidade" da Loja, por exemplo. . O atributo "for" serve para vincular a label(rótulo) com o campo input do formulário. Esse tipo de associação geralmente é feita de forma explicita e ajuda a tornar o campo input clicável, além de facilitar o tipo de vínculo para os leitores de telas contribuindo para a acessibilidade. . Exemplo:
<input type="checkbox" name="receberNotificacoes" id="receberNotificacoes">
<label for="receberNotificacoes">Deseja receber notificações</label>
<!-- será apresentado uma caixinha, onde o Cliente pode ou não escolher "ticar" para ativar o recebimento de notificações da Loja.. O "value" significa valor, é utilizado por exemplo, se você quiser atribuir um "Nome" para aquele determinado input, e esse valor que você define é o que será apresentado na tela do site. Exemplo:
<input type="submit" value="Enviar dados">
<input type="button" value="Cancelar">. Como sugestão, no site W3Schools você encontra vários exemplos e alguns você pode testar clicando no botão "Try it Yourself"... Caso queira conferir, clique no link: https://www.w3schools.com/tags/tag_label.asp
Espero ter ajudado!
Cida.