1 00:00:01,200 --> 00:00:01,520 Tudo bem. 2 00:00:01,530 --> 00:00:07,050 Assim, nos próximos vídeos, vamos nos concentrar em cada equipe, todos os formulários, de modo que as formas são como recebemos 3 00:00:07,590 --> 00:00:14,010 a entrada de um usuário se é para se inscrever para uma página para comentar uma foto para carregar uma foto para escolher uma cor 4 00:00:14,010 --> 00:00:14,910 para escolher um encontro. 5 00:00:14,940 --> 00:00:19,650 Há tantas coisas diferentes a fazer com as formas e na verdade é relativamente simples e 6 00:00:19,650 --> 00:00:19,840 afastou-o. 7 00:00:19,840 --> 00:00:23,450 Há apenas dois elementos importantes sobre os quais vamos aprender aqui. 8 00:00:24,270 --> 00:00:30,840 vamos terminar ao aprender sobre as validações para os nossos dados, como nos certificamos de que alguém preencha parte da reforma. 9 00:00:30,840 --> 00:00:36,600 Então, vamos nos concentrar na etiqueta de formulário, na etiqueta de entrada, na etiqueta e, em seguida, também 10 00:00:36,600 --> 00:00:41,860 Alguém não pode deixar nossa senha em branco ou enviar um email em branco ou algo assim. 11 00:00:41,910 --> 00:00:46,900 Então, para começar, vamos fazer uma rápida pesquisa de algumas das formas que você encontra no dia a dia. 12 00:00:46,980 --> 00:00:51,330 Então eu tenho algumas imagens aqui de sites como Twitter Facebook Google. 13 00:00:51,690 --> 00:00:54,280 Vamos dar uma olhada e quebrar alguns desses. 14 00:00:54,300 --> 00:00:57,420 Então, aqui está o formulário de login para o Facebook. 15 00:00:57,600 --> 00:01:03,530 Temos um lugar onde podemos digitar algum texto no texto e colocar outra entrada em que digamos 16 00:01:03,530 --> 00:01:04,050 senhas. 17 00:01:04,140 --> 00:01:07,920 Muito provavelmente, quando você digita sua senha, é pontilhada para que você realmente não veja a senha. 18 00:01:08,340 --> 00:01:09,990 E depois uma caixa de seleção. 19 00:01:10,260 --> 00:01:14,500 E quando clicamos neste botão, ele envia toda essa coisa. 20 00:01:14,640 --> 00:01:16,160 Então, agrupa esses conjuntos. 21 00:01:16,290 --> 00:01:20,370 Não temos um botão para enviar um e-mail para um botão para a senha um botão para a caixa de seleção. 22 00:01:20,370 --> 00:01:22,110 Tudo corre ao mesmo tempo. 23 00:01:22,110 --> 00:01:23,910 A mesma coisa aqui quando nos inscrevemos. 24 00:01:23,910 --> 00:01:29,560 Temos mais entradas cinco diferentes entradas de texto três diferentes menus suspensos. 25 00:01:29,580 --> 00:01:33,790 Estes são chamados de tags selecionadas e, em seguida, duas coisas chamadas de botões de rádio. 26 00:01:34,050 --> 00:01:39,900 E, finalmente, um botão de inscrição que vai levar tudo isso e enviá-lo para o Facebook 27 00:01:39,900 --> 00:01:40,760 para usar. 28 00:01:41,100 --> 00:01:48,210 Então, o que vamos aprender hoje é a etiqueta estrangeira e esses formulários serão um pouco burros. 29 00:01:48,450 --> 00:01:51,730 Na verdade, eles não farão nada. 30 00:01:51,870 --> 00:01:53,940 Precisamos realmente ter um backend configurado. 31 00:01:53,950 --> 00:01:58,050 Precisamos de um banco de dados, precisamos de alguma lógica e algum código de back-end para fazer qualquer coisa com o formulário. 32 00:01:58,050 --> 00:02:02,450 Então, por enquanto, eles simplesmente vão parecer que isso será capaz de recriar isso. 33 00:02:02,640 --> 00:02:08,340 Mas quando você clica em se inscrever ou clica em log-in ou pesquisa no google, nossos fóruns realmente vão 34 00:02:08,340 --> 00:02:09,790 fazer qualquer uma dessas lógicas. 35 00:02:10,110 --> 00:02:13,550 Eles vão ser o usuário frontal enfrentando parte das coisas. 36 00:02:13,950 --> 00:02:15,780 Então, a primeira coisa é a tag do fórum. 37 00:02:16,080 --> 00:02:22,920 Portanto, a tag do fórum é basicamente um shell ou um recipiente para todos esses tipos de entradas. 38 00:02:22,920 --> 00:02:26,710 Então, esta é uma tag de fórum em torno de tudo isso. 39 00:02:26,910 --> 00:02:30,570 Esta pode ser uma marca de formulário em torno de tudo isso e assim por diante. 40 00:02:30,570 --> 00:02:36,030 Aqui está outra marca de formulário ao fazer uma tag de fórum que você realmente não vê nada na página. 41 00:02:36,240 --> 00:02:38,270 Veremos isso em apenas um segundo. 42 00:02:38,280 --> 00:02:41,630 Basicamente, é apenas um recipiente e colocamos todas as nossas entradas diferentes lá. 43 00:02:41,640 --> 00:02:47,540 Assim, caixas de seleção e botões e caiu nos menus e imagens coloridas, todos vão dentro de um ovo formado. 44 00:02:48,090 --> 00:02:52,320 Portanto, dois atributos importantes passarão mais tempo com isso quando chegarmos ao backend. 45 00:02:52,770 --> 00:02:58,410 Então tente não ficar pendurado exatamente como isso funciona, mas um formulário vai enviar uma solicitação em algum 46 00:02:58,410 --> 00:03:01,980 lugar que envie dados do formulário para um servidor em algum lugar. 47 00:03:02,040 --> 00:03:06,840 Portanto, a ação da primeira parte vai especificar onde enviar os dados. 48 00:03:07,320 --> 00:03:08,550 Vai para o Google. 49 00:03:08,580 --> 00:03:13,830 Será que ele vai se inscrever a página vai sair, vamos aprender muito mais sobre como 50 00:03:13,830 --> 00:03:16,570 realmente fazemos isso na seção de back-end desta classe. 51 00:03:16,800 --> 00:03:21,180 E então a segunda parte é o tipo de solicitação HSDPA para enviar. 52 00:03:21,780 --> 00:03:25,230 Então, podemos enviar uma solicitação ou solicitar uma solicitação de publicação. 53 00:03:25,800 --> 00:03:28,930 E novamente, esta é outra coisa em que vamos gastar muito mais tempo. 54 00:03:29,130 --> 00:03:35,220 Mas a versão simples generalizada fazemos uma solicitação quando estamos fazendo algo como procurar ou recuperar 55 00:03:35,220 --> 00:03:41,280 dados que estamos tentando obter informações e fazemos uma solicitação de publicação quando estamos enviando dados 56 00:03:41,280 --> 00:03:45,770 que queremos ser adicionados a um banco de dados postado para um servidor. 57 00:03:45,780 --> 00:03:52,440 Então, nestes exemplos, aqui quando você pesquisa no Google, você bateu enter ou você clicar e pesquisar que 58 00:03:52,440 --> 00:03:54,070 vai fazer uma solicitação. 59 00:03:54,180 --> 00:03:56,160 Na verdade não está adicionando nada ao banco de dados. 60 00:03:56,160 --> 00:03:57,770 Não está mudando nada. 61 00:03:57,840 --> 00:04:00,630 É apenas uma simples busca de dados. 62 00:04:00,710 --> 00:04:03,070 Está recebendo dados é uma solicitação de get. 63 00:04:03,450 --> 00:04:08,420 Estes aqui, porém, para se inscrever no Facebook ou se inscrever no Twitter. 64 00:04:08,460 --> 00:04:14,040 você clicar em se inscrever, ele leva seus dados e realmente o adiciona ao banco de dados do Twitter. 65 00:04:14,340 --> 00:04:17,370 Esses serão pedidos de publicação quando você digitar dados e 66 00:04:17,370 --> 00:04:21,860 Então, novamente, vamos realmente trabalhar nisso um pouco mais tarde nesta classe. 67 00:04:21,990 --> 00:04:26,440 Por enquanto, apenas esteja familiarizado com a ação e o método e com o fato de que eles existem. 68 00:04:26,640 --> 00:04:30,480 Então, a tag de entrada é o que realmente entra dentro de nossas formas. 69 00:04:30,600 --> 00:04:37,020 É o que vai criar as diferentes entradas que vemos aqui, um texto introduzido uma entrada de senha um 70 00:04:37,020 --> 00:04:38,120 botão de rádio. 71 00:04:38,190 --> 00:04:40,020 Na verdade, ele não cria um menu suspenso. 72 00:04:40,020 --> 00:04:45,360 isso no exercício posterior, mas cria todos os tipos de entradas diferentes para a entrada do usuário. 73 00:04:45,360 --> 00:04:46,580 Então, vamos falar sobre 74 00:04:46,620 --> 00:04:48,840 Então eu tenho alguns exemplos aqui. 75 00:04:48,900 --> 00:04:53,130 Eles são todos exatamente o mesmo, exceto para esse atributo de tipo. 76 00:04:53,310 --> 00:04:57,210 Então, se o tipo for igual ao texto, obtemos um tipo de caixa de texto igual a data. 77 00:04:57,290 --> 00:04:59,970 Você obtém esse pequeno tipo de seleção de data igual à cor. 78 00:05:00,270 --> 00:05:04,230 Você obtém um recarregador de cores no arquivo de Eiffel, obtemos um tipo de seleção de arquivos tipo Pickle's checkbox. 79 00:05:04,260 --> 00:05:05,680 Recebemos uma caixa de seleção. 80 00:05:05,850 --> 00:05:11,110 Então eu realmente vou puxar o endian e procurar a entrada. 81 00:05:11,110 --> 00:05:18,660 E enquanto faço isso, você verá como eu rolar para baixo para atributos sob o tipo, há uma lista de todos 82 00:05:18,660 --> 00:05:20,970 os tipos possíveis que podemos especificar. 83 00:05:21,550 --> 00:05:23,440 E há cerca de 30 ou 40 deles aqui. 84 00:05:23,790 --> 00:05:27,800 E para ser honesto há muito aqui que você provavelmente nunca precisará usar. 85 00:05:28,110 --> 00:05:30,810 Mas há alguns que você usa o tempo todo. 86 00:05:30,810 --> 00:05:32,660 E então, vamos realmente nos concentrar nessas. 87 00:05:32,700 --> 00:05:40,410 Essas são coisas como texto email senha data botão enviar, em seguida, alguns dos outros como a cor. 88 00:05:41,040 --> 00:05:43,830 Você não pode usar muitas vezes. 89 00:05:43,830 --> 00:05:46,120 Definitivamente, desejamos ter mais chances de fazer imagens coloridas. 90 00:05:46,130 --> 00:05:50,910 É o meu favorito das entradas, mas eu quero que você esteja ciente de que há muitas opções diferentes aqui. 91 00:05:53,820 --> 00:05:59,060 Então, para fazer um formulário, simplesmente tomamos uma marca de formulário e nós a preenchemos com algumas tags de entrada. 92 00:05:59,160 --> 00:06:00,960 Então aqui está um exemplo muito simples. 93 00:06:00,960 --> 00:06:02,230 Temos duas entradas. 94 00:06:02,360 --> 00:06:06,830 Igual ao tipo de texto, a senha da Pickle e nos faz esta boa forma aqui. 95 00:06:07,140 --> 00:06:12,190 E você pode ver, à medida que preenchemos, esse primeiro texto é igual ao texto que apenas parece texto normal. 96 00:06:12,280 --> 00:06:17,550 E à medida que preenchemos o tipo de senha igual, ele fornece apenas os cabeçalho dos campos de senha ocultos.