1
00:00:00,600 --> 00:00:05,350
Então, neste vídeo, vamos falar sobre três maneiras adicionais de obter a entrada do usuário.

2
00:00:05,370 --> 00:00:10,830
O primeiro botão de rádio é realmente apenas outro tipo de tag de entrada que vimos.

3
00:00:11,010 --> 00:00:12,740
É semelhante a uma caixa de seleção.

4
00:00:12,780 --> 00:00:16,170
A próxima, a etiqueta de seleção é a forma como recebemos menus suspensos.

5
00:00:16,230 --> 00:00:20,550
E, finalmente, vamos falar sobre a área de texto, que é como podemos criar entradas de texto

6
00:00:20,550 --> 00:00:22,290
que são múltiplas linhas por muito tempo.

7
00:00:23,130 --> 00:00:26,900
Então vou começar Claro, com esses padrões de HMO padrão.

8
00:00:26,970 --> 00:00:33,570
Vá em frente e adicione o título, salve isso e vamos em frente e adicione um botão de opção.

9
00:00:33,750 --> 00:00:37,830
Então é apenas tipo de entrada, porque o rádio.

10
00:00:37,830 --> 00:00:43,410
E eu vou duplicar e eu vou dar o outro tipo porque caixa de seleção

11
00:00:43,410 --> 00:00:46,570
apenas para que você possa vê-los lado a lado.

12
00:00:46,650 --> 00:00:48,900
Então, este é um botão de rádio aqui.

13
00:00:49,650 --> 00:00:51,850
Não consigo desligar depois de selecioná-lo.

14
00:00:51,870 --> 00:00:55,350
Esta é uma caixa de seleção que eu posso ativar e desativar.

15
00:00:55,470 --> 00:01:03,390
Portanto, a diferença realmente é que uma caixa de seleção permite que um usuário a selecione ou não seja selecionada para dizer que

16
00:01:03,390 --> 00:01:07,310
há cinco opções diferentes de coisas que um usuário pode verificar.

17
00:01:07,320 --> 00:01:09,890
Digamos que pedimos aos usuários que selecionem seus.

18
00:01:10,080 --> 00:01:12,800
Este é um site de trabalho e queremos que eles selecionem suas habilidades.

19
00:01:12,900 --> 00:01:18,990
Queremos que eles possam dizer javascript e ver como um HMO ou talvez apenas javascript e são apenas um monte de caixas

20
00:01:18,990 --> 00:01:21,960
de seleção que eles conferem e desconectam nosso botão de opção.

21
00:01:21,960 --> 00:01:26,280
No entanto, é usado geralmente quando um usuário tem uma escolha.

22
00:01:26,280 --> 00:01:33,840
Então, um exemplo tipicamente em sites da Web deve ser algo como gênero, onde ele pede para verificar

23
00:01:33,840 --> 00:01:36,210
masculino ou feminino ou outro.

24
00:01:36,600 --> 00:01:38,920
E você só tem uma escolha.

25
00:01:39,000 --> 00:01:41,360
Você não pode saber não selecionar.

26
00:01:41,430 --> 00:01:49,410
Você precisa escolher um dos elementos para fazer, digamos, por exemplo, vamos ter um formulário onde os usuários escolherem se

27
00:01:49,500 --> 00:01:52,110
preferem cachorros ou cães e não

28
00:01:55,830 --> 00:01:58,090
há opção para escolher os dois.

29
00:01:58,110 --> 00:02:03,470
Infelizmente, neste mundo, é preto ou branco, quer preferem gatos, preferimos cachorros.

30
00:02:04,080 --> 00:02:07,430
Então, para fazer isso, vamos ter dois botões de rádio.

31
00:02:07,650 --> 00:02:15,600
E se isso é tudo o que fazemos para começar, eu posso escolher um e também posso escolher o outro.

32
00:02:15,600 --> 00:02:16,650
Não é exatamente o que queremos.

33
00:02:16,650 --> 00:02:18,780
Eu só posso escolher um.

34
00:02:19,080 --> 00:02:24,550
Então, a primeira coisa que eu quero fazer é obter um formulário e eu vou mover minhas entradas para essa forma.

35
00:02:25,170 --> 00:02:29,490
E por enquanto só vamos deixá-lo para que seja apenas uma solicitação get e é apenas a ação

36
00:02:29,490 --> 00:02:31,290
padrão que é apenas para atualizar a página.

37
00:02:31,650 --> 00:02:40,080
A próxima coisa que vamos fazer é adicionar alguns rótulos para que eu vá em frente

38
00:02:40,080 --> 00:02:45,360
e use a quatro sintaxe, então isso será para cães.

39
00:02:48,030 --> 00:02:51,570
E então devemos dar nosso contributo e eu. D. cães.

40
00:02:51,650 --> 00:02:53,870
Mas esses têm que combinar então.

41
00:02:53,880 --> 00:02:55,690
Mesma coisa aqui.

42
00:02:55,980 --> 00:03:06,120
Outro rótulo para gatos e depois Id gatos.

43
00:03:06,210 --> 00:03:08,360
Então, se você está fresco, agora temos duas escolhas.

44
00:03:08,430 --> 00:03:10,160
Mas eu ainda posso escolher os dois.

45
00:03:10,500 --> 00:03:17,580
Então, o que precisamos fazer é dizer-lhe como esses dois botões de rádio são para a mesma escolha para que você possa

46
00:03:17,580 --> 00:03:20,550
escolher um ou outro, mas eles são uma decisão.

47
00:03:20,550 --> 00:03:27,090
precisamos usar o atributo de nome que lembra que o nome está dando uma entrada individual de um nome, mas eu

48
00:03:27,090 --> 00:03:34,620
posso referir-se a ele e também é a maneira como ele é armazenado ou enviado na solicitação de HGP que os nomes são importantes.

49
00:03:34,620 --> 00:03:36,000
Então, para fazer isso,

50
00:03:36,270 --> 00:03:37,580
Então, vamos dar um nome aqui.

51
00:03:37,620 --> 00:03:46,370
O primeiro nome será vamos, vamos chamar ele de escolha para animais de estimação.

52
00:03:47,610 --> 00:03:51,890
E então, na entrada aqui, também vamos dar o mesmo nome.

53
00:03:52,200 --> 00:03:59,760
E a razão pela qual fazemos o que você verá em apenas um segundo é que, ao dar-lhes o mesmo nome, ele os

54
00:03:59,760 --> 00:04:02,260
conecta para que agora só possamos escolher um.

55
00:04:02,340 --> 00:04:03,510
Então, se atualizarmos.

56
00:04:03,650 --> 00:04:08,510
Posso clicar em cachorros ou gatos, mas não em ambos.

57
00:04:10,050 --> 00:04:11,500
E mais uma coisa eu vou te mostrar.

58
00:04:11,520 --> 00:04:14,400
Vamos adicionar um botão ao final do formulário.

59
00:04:15,630 --> 00:04:21,360
E o que vimos até agora é realmente tipo de entrada igual a submeter na parte inferior de um formulário, mas

60
00:04:21,360 --> 00:04:26,760
estou lhe mostrando um botão apenas para mostrar que, se o botão for o último em uma forma, ele realmente

61
00:04:26,760 --> 00:04:27,800
enviará o formulário .

62
00:04:27,870 --> 00:04:33,960
Portanto, há algumas opções de entradas para realmente enviar o formulário no botão final no final ou tipo

63
00:04:33,960 --> 00:04:35,490
de entrada que você enviará.

64
00:04:35,490 --> 00:04:38,250
Então, agora vamos escolher cães, é claro.

65
00:04:38,250 --> 00:04:40,270
A única escolha natural lá.

66
00:04:40,380 --> 00:04:47,520
Lembre-se de que o nome é uma escolha para animais de estimação, então devemos ver algo aqui na corda de consulta,

67
00:04:47,520 --> 00:04:48,710
como qualquer outra entrada.

68
00:04:48,750 --> 00:04:57,420
Quando eu clico em ir, vemos escolhas de animais de estimação iguais e depois O N ou em que não é realmente o que esperávamos.

69
00:04:58,110 --> 00:05:04,710
Então, estamos perdendo uma coisa, e é necessário também dizer qual é o valor dessa decisão.

70
00:05:04,710 --> 00:05:09,210
Então, quando você seguir em frente e adicionar a etiqueta de valor dentro desse atributo de valor.

71
00:05:09,360 --> 00:05:22,610
E vamos apenas dizer que esse valor será apenas um cachorro e este será gatos e vamos ser bons todos os limites apenas para

72
00:05:22,610 --> 00:05:28,010
que você possa ver o que está vindo de onde.

73
00:05:28,220 --> 00:05:28,690
ESTÁ BEM.

74
00:05:28,790 --> 00:05:36,430
Então, ele diz se o usuário clica nos cachorros sob o nome de escolha do animal de estimação, armazene os cachorros de valor em todas as maiúsculas, se o

75
00:05:36,440 --> 00:05:42,910
usuário enviar e clicar em gatos sob o valor ou o nome de escolha do animal de estimação armazene o valor de gatos em

76
00:05:42,920 --> 00:05:43,690
todos os limites.

77
00:05:44,000 --> 00:05:50,170
Então, apenas para mostrar isso para você, vamos clicar em cães e nós conseguimos escolha de estimação, igual a cães.

78
00:05:50,360 --> 00:05:53,630
Se fazmos gatos, nós escolhemos o animal de estimação porque os gatos.

79
00:05:53,690 --> 00:05:58,790
Então, o próximo elemento sobre o qual vamos falar é a etiqueta de seleção e, com uma etiqueta de

80
00:05:58,790 --> 00:06:01,260
seleção, o que fazer é criar menus suspensos legais.

81
00:06:01,730 --> 00:06:03,300
Então, o nome da tag é chamado.

82
00:06:03,350 --> 00:06:04,510
É apenas selecionar.

83
00:06:04,690 --> 00:06:06,470
É uma tag de abertura e fechamento.

84
00:06:06,860 --> 00:06:10,860
E se eu apenas fizer isso e depois deslizar e atualizar minha página.

85
00:06:10,920 --> 00:06:13,040
Na verdade, já recebo um menu suspenso.

86
00:06:13,060 --> 00:06:14,890
Está totalmente vazio.

87
00:06:14,930 --> 00:06:18,660
Então, juntamente com a etiqueta de seleção, usamos a etiqueta da opção.

88
00:06:18,940 --> 00:06:25,150
Então, dentro de lá para todas as opções possíveis que queremos usar ou para escolher, adicionamos uma etiqueta de opção.

89
00:06:25,430 --> 00:06:29,140
Então, vamos fazer um menu suspenso que levou o usuário a escolher a cor

90
00:06:37,610 --> 00:06:39,510
favorita e vamos fazer algumas opções aqui.

91
00:06:39,590 --> 00:06:46,810
Vermelho laranja e amarelo.

92
00:06:48,680 --> 00:06:53,780
Então, como você pode ver, já temos um bom menu aqui com nossas escolhas.

93
00:06:54,270 --> 00:06:58,330
E se eu acertar, vamos selecionar laranja e acertei.

94
00:06:58,940 --> 00:07:05,740
Você verá que na verdade não conseguimos nada aqui e aí, você está l, como nós, se selecionarmos cachorros

95
00:07:05,770 --> 00:07:08,070
amarelos desta vez e eles acertam.

96
00:07:08,210 --> 00:07:13,940
Eu ainda só tenho escolha de estimação e é porque não temos um nome que fornecemos.

97
00:07:14,060 --> 00:07:20,030
Então, na nossa seleção, precisamos dar um nome e vamos chamá-lo de fav e vamos apenas com

98
00:07:20,020 --> 00:07:21,360
cores e deixamos isso.

99
00:07:22,270 --> 00:07:29,170
E eu atualizo minha página, vamos clicar em gatos, vamos clicar em amarelo e assistir aqui quando acertei.

100
00:07:29,360 --> 00:07:33,810
Agora eu tenho escolhas de estimação gato e a cor é amarela.

101
00:07:34,460 --> 00:07:42,890
Então, o que você verá é que, dependendo da opção que eu selecionei neste caso, os mapas amarelos

102
00:07:42,880 --> 00:07:51,230
do navegador levam tudo o que o texto está dentro dessa opção e ele apenas envia isso como

103
00:07:51,230 --> 00:07:54,150
um valor sob a cor do nome.

104
00:07:54,170 --> 00:08:02,450
valor que é enviado na solicitação seja idêntico ao que é exibido para o usuário no menu suspenso.

105
00:08:02,450 --> 00:08:05,260
Portanto, nem sempre queremos que o

106
00:08:05,260 --> 00:08:13,190
Então, um exemplo disso pode ser algo como se quisesse que o usuário escolhesse um

107
00:08:13,190 --> 00:08:21,510
humor, então diga qual é o seu humor atual e queremos ter um rosto feliz aqui.

108
00:08:23,120 --> 00:08:29,860
Um rosto sem emoção que eu acho e um rosto triste.

109
00:08:31,780 --> 00:08:37,810
E acabamos com este bom menu aqui com nossos emoticons, mas digamos que, quando

110
00:08:37,930 --> 00:08:41,930
um usuário seleciona feliz, não queremos que isso seja enviado.

111
00:08:42,200 --> 00:08:48,570
Em vez disso, queremos que a palavra seja feliz ou a palavra que se diz seja enviada para fazer isso.

112
00:08:48,670 --> 00:08:52,570
Usamos a tag de valor desculpa o atributo de valor.

113
00:08:52,750 --> 00:08:54,990
Então, nós diremos valores iguais.

114
00:08:55,000 --> 00:09:04,720
E digamos que Happy é igual ao neutro e o valor é igual a definido.

115
00:09:04,730 --> 00:09:10,220
Agora, se eu atualizar cães corretos vamos sair e eu clique em ir.

116
00:09:10,660 --> 00:09:14,890
Você pode ver que eu tenho escolha de estimação é cães e a cor é igual a dita.

117
00:09:15,010 --> 00:09:20,690
E é claro que é porque mantivemos o nome como cor, você gostaria de mudar isso para ser humor

118
00:09:20,680 --> 00:09:24,030
apenas para que nossa marcação seja significativa e realmente faça sentido.

119
00:09:24,230 --> 00:09:29,050
Então, os gatos são tão felizes e, no entanto, o humor é igual a feliz.

120
00:09:29,060 --> 00:09:29,300
ESTÁ BEM.

121
00:09:29,330 --> 00:09:33,140
Então é tudo o que precisamos cobrir com as seleções.

122
00:09:33,250 --> 00:09:37,250
Outra coisa é a etiqueta de texto e a área de texto.

123
00:09:37,430 --> 00:09:44,330
Eu vou colocar no Indian é uma ótima maneira de criar entradas que são mais do que uma linha.

124
00:09:44,380 --> 00:09:50,480
Então nós vimos entradas de texto como esse tipo de entrada é igual ao texto

125
00:09:53,380 --> 00:09:55,250
e são linhas simples.

126
00:09:55,250 --> 00:10:01,360
Mas e se quisermos pedir ao usuário uma biografia ou copiar e colar um currículo ou algo

127
00:10:01,370 --> 00:10:05,540
que não funcione muito bem e essa entrada muito fina e curta.

128
00:10:05,620 --> 00:10:09,390
Então, textarea Na verdade, é uma outra tag, como selecionar.

129
00:10:09,430 --> 00:10:12,490
Portanto, não é uma entrada com um tipo.

130
00:10:12,530 --> 00:10:15,560
Na verdade, é um tipo separado de controle de formulário.

131
00:10:15,880 --> 00:10:19,690
E da maneira que funciona, existem duas partes importantes.

132
00:10:19,690 --> 00:10:27,690
O primeiro é criar uma tag de área de texto e, por conta própria, nos dará essa área de texto.

133
00:10:28,420 --> 00:10:35,860
Mas o que também podemos fazer é especificar exatamente quão grande essa área de texto está usando essas duas linhas

134
00:10:36,320 --> 00:10:37,720
de atributos e colunas.

135
00:10:37,970 --> 00:10:40,040
Então vou mostrar-te aqui.

136
00:10:40,150 --> 00:10:47,890
Vamos começar com 10 linhas e 50 colunas e você pode ver que minha área de texto foi expandida em ambas as direções.

137
00:10:48,230 --> 00:10:49,270
Mas definitivamente ficou mais largo.

138
00:10:49,280 --> 00:10:55,370
Então, digamos que agora quero 100 linhas e você pode ver que isso demora muito mais.

139
00:10:55,370 --> 00:10:59,920
Então, basicamente, podemos especificar quantas linhas e quantas colunas alterar as dimensões da nossa

140
00:10:59,920 --> 00:11:01,060
área de texto.

141
00:11:01,850 --> 00:11:07,870
Uma outra coisa sobre isso é como com esses outros elementos, vamos voltar para um menor para 10

142
00:11:07,880 --> 00:11:08,540
por 10.

143
00:11:08,650 --> 00:11:14,570
Assim como com esses outros elementos, se eu quisesse enviar esses dados no pedido, vamos nos livrar

144
00:11:14,580 --> 00:11:15,460
dessa entrada.

145
00:11:15,670 --> 00:11:22,970
Eu precisaria dar um nome para o nome é igual e vamos apenas dizer o parágrafo preencher

146
00:11:28,100 --> 00:11:30,170
este parágrafo com algum texto.

147
00:11:30,190 --> 00:11:33,800
Cliquei para ir e você pode ver ou expandir isso.

148
00:11:33,930 --> 00:11:36,880
Eu obtive um parágrafo igual ao texto que eu

149
00:11:39,790 --> 00:11:40,590
tenho aqui.