Então, neste vídeo, vamos seguir em frente e criar uma solução para este formulário de registro.
Então eu tenho um novo arquivo para salvá-lo.
Eu só vou ligar para este formulário de registro que HDMI vou usar meu atalho sublime e obter
a nossa placa de caldeira da caldeira.
Então, quando nos deparamos com um projeto como esse, há alguns lugares que podemos começar.
E a primeira coisa que eu vou fazer é adicionar o formulário Tagen e então também vou adicionar este
H1 apenas
acima do top aqui e Louis colocar o registro.
Então, vamos em frente e abra nosso formulário de inscrição aqui e mova-o.
Ok, não está bem lá, mas pelo menos ou Cada um está bem.
Então, vamos voltar a sublimar e vamos enfiar, vamos começar com a coisa mais simples deve ser
esse nível superior de insumos.
O primeiro nome e sobrenome.
Então, vamos começar com a entrada.
E esses são tipos iguais ao texto ups.
vamos fazer outro marcador de posição Smith e então precisamos dar dois rótulos.
E vamos dar-lhe um espaço reservado que parece ser John,
Então, podemos usar qualquer sintaxe para rótulos.
Eu vou usar os quatro.
Então, eu vou chamar isso primeiro e nós teremos certeza de que nós obteremos um ID igual a primeiro.
E, em seguida, este rótulo irá dizer o primeiro nome do cólon que nos dará isso e então precisamos
fazer exatamente a mesma coisa.
Outro rótulo para o último de dizer um sobrenome em dois pontos e, em seguida, precisamos dar essa identificação igual a última.
Então, vamos verificar e ver o que temos.
Por enquanto, tudo bem.
Há uma coisa pequena que estamos perdendo, e não temos dado
a essas entradas um nome, então, dê-lhe primeiro o nome e nomeie o último ótimo.
Então, vamos para o próximo pedaço aqui.
O que realmente nos falta uma coisa que é a validade.
Então, enquanto estamos aqui, lembre-se de que o primeiro nome e o sobrenome não devem estar em branco.
Então, para fazer isso, é muito simples, apenas adicionamos o atributo necessário nas entradas necessárias
e definimos isso como verdadeiro.
Então, vou avançar e expandir isso apenas para que possamos ver um pouco mais claro sobre o
que estamos trabalhando.
Então, a próxima coisa se consultarmos o formulário aqui é o botão de rádio de gênero.
Então precisamos ter três botões de rádio.
Então, esses são tipos de entrada igual ao rádio.
Três deles.
E se dar uma olhada com isso nos dá a primeira coisa que você verá, é que eles estão de acordo com
os outros elementos, que na verdade não é o que a forma que eu lhe dei.
Então, temos algumas opções para que as coisas se comportem.
Podemos jogá-los
em um parágrafo como este, apenas adicione algum espaçamento.
Agora, nós os colocamos em uma linha separada.
Eu vou usar uma div aqui.
Lá você entra em uma div.
Não tem o mesmo espaçamento.
Um parágrafo no vídeo C S S realmente falará sobre o que esse espaçamento é.
Então, agora precisamos seguir em frente e adicionar
ou rótulos e antes de fazermos, vamos começar a dar-lhes o mesmo nome, então o nome será gênero aqui.
Vamos seguir em frente e deveria ter usado o meu atalho aqui, que é para mandar clicar em vários cursores
para que os obtenha nomeando gênero cruzado e, em seguida, vamos dar-lhes cada um valor.
Então, o primeiro, o valor será masculino.
A segunda será feminina.
O último é também e atualize.
Nós não vemos nada disso, é claro, porque é só por trás dos bastidores.
Então, o que precisamos fazer é adicionar em nossos rótulos.
Então vamos querer três etiquetas.
O primeiro vai dizer o rótulo quatro e nós vamos chamar isso de
masculinismo que temos aqui.
Não há apenas o correio de Colon e então Id é igual ao correio.
Mesma coisa.
Outro rótulo aqui.
Este será feminino.
E então vamos querer dizer Id me para você, porque feminino.
E então você continua dizendo que você causa sexo feminino.
Então, como você pode ver a construção dessas formas, às vezes é um pouco tedioso.
Você tem um monte de rótulos e muitas coisas de bagunça que você precisa ter
cuidado demais para que você tenha tudo correspondente corretamente.
Então, queremos por outro, quero dizer, queremos fazer identidade igual a qualquer um.
Então, vamos verificar isso, veja o que temos.
Tudo bem.
Isso parece ótimo.
Só podemos selecionar um que é o que queremos.
A seguir, podemos seguir em frente e vamos adicionar o botão de envio no final apenas enquanto estivermos aqui.
Então, esse será o tipo de entrada igual a submeter.
E vamos apenas garantir que a validação funcione.
Sim, é ótimo em boa forma.
Então, em seguida, temos um campo de e-mail e senha.
E esses também estão na linha nova.
Então, vamos em frente e adicione outra div e vamos fazer uma entrada e, desta vez, é um tipo igual ao
e-mail.
Não é apenas o texto e o espaço reservado aqui foi o seu e-mail, que certamente não é o melhor texto do espaço
reservado, mas vamos ficar com essa imagem, certifique-se de seguir a tarefa.
Então, o tipo de entrada é o espaço reservado do e-mail é o seu e-mail e, em seguida, temos outro para
a senha e isso nos dá duas entradas.
Em seguida, podemos seguir com o nome para apenas dizer que o nome é o membro do e-mail aqui se você estiver confuso.
descobrir como enviar os dados, o que devemos enviar os dados no pedido sob o que é o nome dele.
Esse nome é puramente usado nos bastidores para
Então, neste caso, o que quer que digamos neste campo, será chamado de e-mail.
Então, não vemos nenhum impacto, pelo caso.
Eu acho que essa é uma das partes mais confusas porque não é muito visual.
Então, este vai dizer que o nome foi senha e, então, vamos continuar e adicionar ou rótulos.
Então, apenas para misturá-lo aqui vou usar o outro tipo de rótulo, onde é onde aninhamos os dados dentro do
próprio rótulo.
Então, dirá o e-mail do cólon do que os quatro e a sintaxe da Id.
Eles funcionam da mesma maneira, façamos o email e a senha.
Vamos ser muito precisos.
Há dois pontos nos dois.
Ótimo.
Mas salve isso e há uma outra coisa que devemos dar uma olhada e ver se as
validações estão em vigor, preencha isso.
Não.
Então, uma coisa que nos falta é que precisamos do e-mail.
Então, precisamos ir ao nosso e-mail e adicionar necessário agora, atualizamos, preencha-os.
Nós deixamos o email vazio se escrevemos um e-mail não válido.
Recebemos esse erro.
Ótimo.
Então, até agora tudo parece ser bom.
Vamos voltar para a validação da senha de bônus no final antes de chegar lá.
Vamos passar para a seleção de aniversário.
Então, três menus suspensos.
Então, novamente você pode adicionar outra div e desta vez nesta div, vamos adicionar três seleções diferentes.
Então, um dois três.
Vamos começar com este primeiro que é de quatro meses e vamos em frente e comece com o rótulo.
Há apenas um rótulo aqui para tudo.
Então, você sabe fazê-lo como este rótulo e colocar todos os três assuntos dentro
e este rótulo ia dizer um aniversário e isso ficará assim.
Então, se vemos o que recebemos, temos nossas três entradas, são três rótulos e tudo o que precisamos fazer
é adicionar os dados corretos dentro.
Então é um monte de opções.
Então, primeiro, vamos seguir em frente e acrescentar que vou fazer duas ou três aqui, então isso será por meses.
Então vamos fazer janeiro e março.
O próximo faz o mesmo.
Apenas algumas opções e isso será por dia.
Então vamos começar.
Vamos fazer dois dígitos em 10 11 e 12.
E o último será o ano.
Basta fazer três novamente e vamos fazer 1999 2000 2001.
Ótimo.
E você pode ver o nosso caído aqui.
Há uma pequena diferença, porém, que é o nosso começo imediatamente com janeiro e números
e o ano.
Mas o que eu te dei começa com o mês e o ano.
Então, existem algumas maneiras de fazer isso.
formato HDMI apenas escolherá a primeira opção e ele determinará o valor inicial.
O
mais simples é apenas fazer a primeira opção dizer mês dia e ano e, ao fazer
isso, o
Então, essa é a maneira mais comum de fazer isso.
Então agora nossa empresa parece muito boa.
possamos adicionar ainda outra div aqui e, então, esta é devidamente div divina em vez disso,
vamos começar
com o rótulo desta vez, vamos fazer quatro e essa vamos chamar Vamos chamar isso de acordo.
Nós só precisamos de nossa caixa de seleção final de acordo com termos e condições para que
Eu concordei com os termos e
condições e, em seguida, a próxima coisa que precisamos é nossa caixa de seleção de chamadas de fita, vamos dar uma
ID porque eu concordei e nomeei e também concordei.
E isso é o que conseguimos parece ser bom para mim.
Então, uma coisa que também precisamos adicionar às nossas tags selecionadas é o nome.
Então, ligue para este
mês e este do dia e este estará aqui.
E lembre-se que, se não quisesse em janeiro e fab e Mar para ser o que realmente foi enviado,
se ele quisesse ser algo diferente, como um número correspondente, colocaríamos um valor aqui.
Então, para janeiro, podemos colocar o valor 1 neste caso.
Estou bem com apenas ter Jan lá.
Não especifique como ele precisa se comportar.
Então nós voltamos aqui, parece muito bom.
Tudo parece o mesmo.
A última coisa que realmente temos que discutir é a validação de senha real.
Então, eu quero apenas mostrar-lhe como você poderia encontrar isso.
Então, eu vou abrir a validação do comprimento HMO e vamos tentar isso.
Como você pode ver, eu já estive aqui.
Isso é algo que eu tive que procurar recentemente e parece ser.
Então, este é o estouro de pilha, caso não tenha visto isso antes.
Isso permite que alguém faça uma pergunta.
Existe algum outro atributo que ele está lá, com a ajuda da qual eu posso definir um tamanho mínimo de
valor para os campos.
E, em seguida, as pessoas fornecem respostas e as respostas votadas mais altas aparecem primeiro.
Então, esta resposta diz que você pode usar o atributo do padrão, o atributo necessário também é necessário.
Caso contrário, um campo de entrada com um valor vazio será excluído da validação de restrições.
ESTÁ BEM.
Então, parece que isso é tudo o que precisamos.
Então, esta é uma entrada que lhe damos padrão é igual a essa coisa estranha.
E, em seguida, necessário e, em seguida, este título.
Então, antes mesmo de perguntar sobre o que isso faz e o que esses cinco comuns 10 fazem.
Vamos ver.
Então, vamos em frente, encontre nossa senha e isso é muito do que.
Ser um desenvolvedor é que é uma grande quantidade de copiar e colar algumas coisas ou encontrar algum código
e ajustá-lo.
Então, precisamos fazer isso caber o que temos qual é um nome de entrada é o tipo de senha porque a senha.
Então, apenas vou copiar esses três atributos.
Então, agora temos um tipo de senha, o padrão é cinco e 10 necessários.
E o título é igual a cinco a 10 caracteres.
Então, vamos ver o que isso atualiza.
Certifique-se de que temos tudo o mais preenchido.
Eu clique em enviar e ele me diz, por favor preencha este campo.
Cinco a 10 caracteres e tipo 2 e tipo 3 e digite mais de 10 não funciona.
Mas se eu digitar cinco ou seis funciona.
Então, vamos explorar um pouco mais.
Vamos começar com este aqui.
Vamos mudar isso para ser.
A senha deve ter entre cinco e 10 caracteres
e atualizar.
Certifique-se de preencher tudo o resto para que possamos obter esse erro.
E eu clicar em enviar e você pode ver que recebo essa mensagem que definimos a senha deve ter
entre 5 e 10 caracteres.
Então é isso que este título está fazendo.
É basicamente a mensagem de erro que está sendo exibida.
usando essa sintaxe, estamos apenas definindo o comprimento de uma extensão de comprimento total aceitável para essa entrada.
Então, a outra parte nova é esse padrão e isso é certo um pouco estranho, mas
Então, se mudarmos isso para ser dois ou
três eu envio ainda não aceitos não aceitáveis, mas dois são aceitáveis.
Então, isso é apenas definir um intervalo ou padrão que precisamos seguir.
Então, definitivamente há mais isso, você pode fazer outras coisas, além de um comprimento mínimo ou uma série de comprimentos, mas isso
é tudo que eu precisava que você achasse aqui.
Se você não conseguiu descobrir que não entra em pânico, ainda é muito cedo.
Mas haverá mais oportunidades para você tentar coisas assim.
Então eu tenho uma solução completa que eu escrevi o que é completo na medida em que tem o dia inteiro e as insumos de ano e mês e
você pode ver que é uma espécie de bagunça.
Eu não escrevi isso à mão e não esperava que você escrevesse isso também.
Então, veremos como gerar isso mais tarde na classe.
Você poderia usar o javascript para fazê-lo por você, então você não precisa escrever isso.
Então dê uma olhada na solução.
Se você tiver quaisquer perguntas