1
00:00:00,600 --> 00:00:05,350
Entonces en este video vamos a hablar sobre tres formas adicionales de obtener la opinión del usuario.

2
00:00:05,370 --> 00:00:10,830
El primero, el botón de opción es en realidad otro tipo de etiqueta de entrada que hemos visto.

3
00:00:11,010 --> 00:00:12,740
Es similar a una casilla de verificación.

4
00:00:12,780 --> 00:00:16,170
El siguiente, la etiqueta de selección es cómo obtenemos los menús desplegables.

5
00:00:16,230 --> 00:00:20,550
Y finalmente vamos a hablar sobre el área de texto que es cómo podemos crear entradas de

6
00:00:20,550 --> 00:00:22,290
texto que son múltiples líneas de largo.

7
00:00:23,130 --> 00:00:26,900
Así que voy a comenzar, por supuesto, con los estándares de HMO estándar.

8
00:00:26,970 --> 00:00:33,570
Continúe y agregue el título, guarde eso y sigamos adelante y agreguemos un botón de radio.

9
00:00:33,750 --> 00:00:37,830
Entonces es solo tipo de entrada porque la radio.

10
00:00:37,830 --> 00:00:43,410
Y voy a duplicarlo y le voy a dar otro tipo de casilla porque

11
00:00:43,410 --> 00:00:46,570
solo puede verlos uno al lado del otro.

12
00:00:46,650 --> 00:00:48,900
Entonces este es un botón de radio aquí.

13
00:00:49,650 --> 00:00:51,850
No puedo apagarlo una vez que lo he seleccionado.

14
00:00:51,870 --> 00:00:55,350
Esta es una casilla de verificación que puedo activar y desactivar.

15
00:00:55,470 --> 00:01:03,390
Entonces, la diferencia realmente es que una casilla de verificación permite que un usuario la seleccione o no, para decir que

16
00:01:03,390 --> 00:01:07,310
hay cinco opciones diferentes de cosas que un usuario puede verificar.

17
00:01:07,320 --> 00:01:09,890
Digamos que les pedimos a los usuarios que seleccionen su.

18
00:01:10,080 --> 00:01:12,800
Este es un sitio de trabajo y queremos que seleccionen sus habilidades.

19
00:01:12,900 --> 00:01:18,990
Queremos que puedan decir javascript y ver como HMO o tal vez solo javascript y son solo un montón de casillas

20
00:01:18,990 --> 00:01:21,960
de verificación que activan y desactivan nuestro botón de opción.

21
00:01:21,960 --> 00:01:26,280
Sin embargo, se usa generalmente cuando un usuario tiene una opción.

22
00:01:26,280 --> 00:01:33,840
Por lo tanto, un ejemplo típico en los sitios web debería ser algo así como el género, en el que se le pide

23
00:01:33,840 --> 00:01:36,210
que marque masculino o femenino u otro.

24
00:01:36,600 --> 00:01:38,920
Y solo tienes una opción.

25
00:01:39,000 --> 00:01:41,360
No puedes saber no seleccionar.

26
00:01:41,430 --> 00:01:49,410
Tienes que elegir uno de los elementos para hacerlo, digamos por ejemplo, vamos a tener un formulario donde los usuarios

27
00:01:49,500 --> 00:01:52,110
elijan si prefieren gatos o perros y

28
00:01:55,830 --> 00:01:58,090
no hay opción de elegir ambos.

29
00:01:58,110 --> 00:02:03,470
Lamentablemente en este mundo es negro o blanco o prefieren los gatos que preferimos los perros.

30
00:02:04,080 --> 00:02:07,430
Entonces para hacer eso vamos a tener dos botones de radio.

31
00:02:07,650 --> 00:02:15,600
Y si eso es todo lo que hacemos para comenzar, puedo elegir uno y también puedo elegir el otro.

32
00:02:15,600 --> 00:02:16,650
No es exactamente lo que queremos.

33
00:02:16,650 --> 00:02:18,780
Solo quiero poder elegir uno.

34
00:02:19,080 --> 00:02:24,550
Entonces, lo primero que quiero hacer es obtener un formulario y voy a mover mis entradas a esa forma.

35
00:02:25,170 --> 00:02:29,490
Y por ahora solo vamos a dejarlo para que sea solo una solicitud de obtención y solo la

36
00:02:29,490 --> 00:02:31,290
acción predeterminada que es solo actualizar la página.

37
00:02:31,650 --> 00:02:40,080
Lo siguiente que vamos a hacer es agregar algunas etiquetas, así que voy a seguir adelante y

38
00:02:40,080 --> 00:02:45,360
usar la sintaxis de cuatro para que sea para perros.

39
00:02:48,030 --> 00:02:51,570
Y luego tenemos que dar nuestra opinión y yo RE. perros.

40
00:02:51,650 --> 00:02:53,870
Pero esos tienen que coincidir entonces.

41
00:02:53,880 --> 00:02:55,690
Lo mismo aqui.

42
00:02:55,980 --> 00:03:06,120
Otra etiqueta de etiqueta para gatos y luego gatos Id.

43
00:03:06,210 --> 00:03:08,360
Entonces, si estás fresco ahora, tenemos dos opciones.

44
00:03:08,430 --> 00:03:10,160
Pero aún puedo elegir ambos.

45
00:03:10,500 --> 00:03:17,580
Entonces, lo que tenemos que hacer es decirle cómo estos dos botones de opción son para la misma opción para que pueda

46
00:03:17,580 --> 00:03:20,550
elegir uno u otro, pero son una sola decisión.

47
00:03:20,550 --> 00:03:27,090
necesitamos usar el atributo de nombre que recuerda que el nombre está dando a un ingreso individual un nombre pero puedo

48
00:03:27,090 --> 00:03:34,620
referirme a él y también es la forma en que se almacena o envía en la solicitud de HGP que los nombres son importantes.

49
00:03:34,620 --> 00:03:36,000
Entonces para hacer eso

50
00:03:36,270 --> 00:03:37,580
Así que démosle un nombre aquí.

51
00:03:37,620 --> 00:03:46,370
El primer nombre será, vamos, vamos a llamarlo elección de mascota.

52
00:03:47,610 --> 00:03:51,890
Y luego con la entrada aquí también le daremos el mismo nombre.

53
00:03:52,200 --> 00:03:59,760
Y la razón por la que hacemos eso que verá en tan solo un segundo es que al darles el mismo nombre los

54
00:03:59,760 --> 00:04:02,260
conecta y ahora solo podemos elegir uno.

55
00:04:02,340 --> 00:04:03,510
Entonces, si actualizamos

56
00:04:03,650 --> 00:04:08,510
Puedo hacer clic en perros o gatos, pero no en ambos.

57
00:04:10,050 --> 00:04:11,500
Y una cosa más que te mostraré.

58
00:04:11,520 --> 00:04:14,400
Agreguemos un botón al final del formulario.

59
00:04:15,630 --> 00:04:21,360
Y lo que hemos visto hasta ahora es en realidad el tipo de entrada igual que enviar en la parte inferior de un

60
00:04:21,360 --> 00:04:26,760
formulario, pero te estoy mostrando un botón solo para mostrarte que si el botón es lo último en un formulario, en realidad

61
00:04:26,760 --> 00:04:27,800
enviará el formulario .

62
00:04:27,870 --> 00:04:33,960
Entonces, hay algunas opciones de entradas para enviar el formulario al final del botón al final o el tipo de

63
00:04:33,960 --> 00:04:35,490
entrada que va a enviar.

64
00:04:35,490 --> 00:04:38,250
Entonces, vamos a elegir perros por supuesto.

65
00:04:38,250 --> 00:04:40,270
La única opción natural allí.

66
00:04:40,380 --> 00:04:47,520
Recuerde que el nombre es la elección de la mascota, por lo que deberíamos ver algo aquí en la cadena de consulta al igual que

67
00:04:47,520 --> 00:04:48,710
con cualquier otra entrada.

68
00:04:48,750 --> 00:04:57,420
Cuando hago clic en ir, vemos las opciones de mascotas iguales a O N o en las que no es realmente lo que esperábamos.

69
00:04:58,110 --> 00:05:04,710
Entonces nos falta algo que es necesario también decir cuál es el valor de esta decisión.

70
00:05:04,710 --> 00:05:09,210
Entonces, cuando continúe y agregue la etiqueta de valor dentro de ese atributo de valor.

71
00:05:09,360 --> 00:05:22,610
Y digamos que este valor será solo perro y este será un gato y seamos buenos gordos solo para

72
00:05:22,610 --> 00:05:28,010
que puedas ver lo que viene de donde.

73
00:05:28,220 --> 00:05:28,690
DE ACUERDO.

74
00:05:28,790 --> 00:05:36,430
Por lo tanto, si el usuario hace clic en perros con el nombre de elección de mascota, almacene el valor de perros en mayúsculas si el

75
00:05:36,440 --> 00:05:42,910
usuario envía y hace clic en los gatos por debajo del valor o el nombre de mascota elige el valor de los

76
00:05:42,920 --> 00:05:43,690
gatos en mayúsculas.

77
00:05:44,000 --> 00:05:50,170
Entonces, solo para mostrarles que haga clic en ir a los perros y obtener la opción de mascota es igual a los perros.

78
00:05:50,360 --> 00:05:53,630
Si hacemos gatos, obtenemos elección de mascotas porque los gatos.

79
00:05:53,690 --> 00:05:58,790
Entonces, el siguiente elemento del que vamos a hablar es la etiqueta de selección y con una etiqueta

80
00:05:58,790 --> 00:06:01,260
de selección, qué hacer es crear buenos menús desplegables.

81
00:06:01,730 --> 00:06:03,300
Entonces se llama el nombre de la etiqueta.

82
00:06:03,350 --> 00:06:04,510
Es solo seleccionar.

83
00:06:04,690 --> 00:06:06,470
Es una etiqueta de apertura y cierre.

84
00:06:06,860 --> 00:06:10,860
Y si solo hago eso y luego solo deslizo y renuevo mi página.

85
00:06:10,920 --> 00:06:13,040
De hecho, ya tengo un menú desplegable.

86
00:06:13,060 --> 00:06:14,890
Está completamente vacío.

87
00:06:14,930 --> 00:06:18,660
Entonces, junto con la etiqueta de selección, usamos la etiqueta de opción.

88
00:06:18,940 --> 00:06:25,150
Entonces, dentro de allí, para cada opción posible que queremos usar o para elegir, agregamos una etiqueta de opción.

89
00:06:25,430 --> 00:06:29,140
Así que hagamos un menú desplegable que lleve al usuario a elegir su

90
00:06:37,610 --> 00:06:39,510
color favorito y hagamos algunas opciones aquí.

91
00:06:39,590 --> 00:06:46,810
Rojo anaranjado y amarillo.

92
00:06:48,680 --> 00:06:53,780
Como puede ver, ya tenemos un buen menú desplegable aquí con nuestras opciones.

93
00:06:54,270 --> 00:06:58,330
Y si presiono ir, seleccione naranja y presiono ir.

94
00:06:58,940 --> 00:07:05,740
Verás que en realidad no obtenemos nada aquí y allá, así es como lo hacemos si seleccionamos los perros que son amarillos

95
00:07:05,770 --> 00:07:08,070
esta vez y ellos aciertan a ir.

96
00:07:08,210 --> 00:07:13,940
Todavía recibo solo una elección de mascota y eso es porque no tenemos un nombre que proporcionemos.

97
00:07:14,060 --> 00:07:20,030
Entonces, en nuestra selección, necesitamos darle un nombre y simplemente llamarlo favorito, vamos por el color

98
00:07:20,020 --> 00:07:21,360
y dejarlo así.

99
00:07:22,270 --> 00:07:29,170
Y actualizo mi página hagamos clic en gatos, hagamos clic en amarillo y observemos aquí cuando toco ir.

100
00:07:29,360 --> 00:07:33,810
Ahora recibo mascotas y el color del gato es amarillo.

101
00:07:34,460 --> 00:07:42,890
Entonces, lo que verán es que dependiendo de la opción que he seleccionado en este caso, mapas amarillos, el

102
00:07:42,880 --> 00:07:51,230
navegador toma lo que sea que el texto esté dentro de esa opción y simplemente lo envía como un

103
00:07:51,230 --> 00:07:54,150
valor bajo el nombre de color.

104
00:07:54,170 --> 00:08:02,450
el valor que se envía en la solicitud sea idéntico a lo que se muestra al usuario en el menú desplegable.

105
00:08:02,450 --> 00:08:05,260
Por lo tanto, no siempre queremos que

106
00:08:05,260 --> 00:08:13,190
Así que un ejemplo de eso podría ser algo así como si quisiéramos que el usuario eligiera un estado

107
00:08:13,190 --> 00:08:21,510
de ánimo, así que digamos cuál es su estado de ánimo actual y queremos tener una cara feliz aquí.

108
00:08:23,120 --> 00:08:29,860
Una cara sin emociones, supongo, y una cara triste.

109
00:08:31,780 --> 00:08:37,810
Y terminamos con este bonito menú desplegable aquí con nuestros emoticones, pero digamos que cuando un

110
00:08:37,930 --> 00:08:41,930
usuario selecciona feliz no queremos que todo esto se envíe.

111
00:08:42,200 --> 00:08:48,570
En cambio, queremos que la palabra sea feliz de ser enviada o la palabra que se dice que se envíe para hacer eso.

112
00:08:48,670 --> 00:08:52,570
Usamos la etiqueta de valor, perdón el atributo de valor.

113
00:08:52,750 --> 00:08:54,990
Entonces diremos que el valor es igual a.

114
00:08:55,000 --> 00:09:04,720
Y digamos Happy es igual a neutral y value es igual a set.

115
00:09:04,730 --> 00:09:10,220
Ahora si actualizo los perros correctos, salgamos y hago clic en ir.

116
00:09:10,660 --> 00:09:14,890
Puedes ver que la elección de la mascota es perros y el color es igual a dicho.

117
00:09:15,010 --> 00:09:20,690
Y, por supuesto, eso se debe a que mantuvimos el nombre del color que querríamos cambiar para que fuera de ánimo,

118
00:09:20,680 --> 00:09:24,030
de modo que nuestro marcado sea significativo y en realidad tenga sentido.

119
00:09:24,230 --> 00:09:29,050
Entonces los gatos son muy felices y, sin embargo, el estado de ánimo es igual de feliz.

120
00:09:29,060 --> 00:09:29,300
DE ACUERDO.

121
00:09:29,330 --> 00:09:33,140
Así que eso es todo lo que tenemos que cubrir con selects.

122
00:09:33,250 --> 00:09:37,250
Otra cosa es la etiqueta textarea y textarea.

123
00:09:37,430 --> 00:09:44,330
Lo pondré en Indian es una buena forma de crear entradas que son más de una línea.

124
00:09:44,380 --> 00:09:50,480
Entonces, hemos visto que las entradas de texto como este tipo de entrada equivalen a

125
00:09:53,380 --> 00:09:55,250
texto y son líneas únicas.

126
00:09:55,250 --> 00:10:01,360
Pero, ¿qué pasaría si quisiéramos pedirle a un usuario una biografía o copiar y pegar un currículum o algo

127
00:10:01,370 --> 00:10:05,540
que no va a funcionar muy bien y esta entrada corta realmente delgada?

128
00:10:05,620 --> 00:10:09,390
Entonces textarea es en realidad otra etiqueta como seleccionar.

129
00:10:09,430 --> 00:10:12,490
Entonces no es una entrada con un tipo.

130
00:10:12,530 --> 00:10:15,560
En realidad, es un tipo diferente de control de forma.

131
00:10:15,880 --> 00:10:19,690
Y la forma en que funciona, hay dos partes importantes.

132
00:10:19,690 --> 00:10:27,690
El primero es que creamos una etiqueta de área de texto y eso por sí solo nos dará esta área de texto.

133
00:10:28,420 --> 00:10:35,860
Pero lo que también podemos hacer es especificar qué tan grande es ese área de texto usando estas filas y

134
00:10:36,320 --> 00:10:37,720
columnas de dos atributos.

135
00:10:37,970 --> 00:10:40,040
Así que te mostraré eso aquí.

136
00:10:40,150 --> 00:10:47,890
Comencemos con 10 filas y 50 columnas y puede ver que mi área de texto se expandió en ambas direcciones.

137
00:10:48,230 --> 00:10:49,270
Pero definitivamente se hizo más amplio.

138
00:10:49,280 --> 00:10:55,370
Entonces digamos que ahora quiero 100 filas y se puede ver que se vuelve mucho más larga.

139
00:10:55,370 --> 00:10:59,920
Básicamente, podemos especificar cuántas filas y cuántas columnas cambiar las dimensiones de nuestra

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

141
00:11:01,850 --> 00:11:07,870
Otra cosa es que con estos otros elementos regresemos a uno más pequeño a 10

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

143
00:11:08,650 --> 00:11:14,570
Al igual que con estos otros elementos, si quería enviar estos datos en la solicitud, eliminemos

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

145
00:11:15,670 --> 00:11:22,970
Necesitaría darle un nombre que sea igual a, y digamos párrafo, llenar este párrafo

146
00:11:28,100 --> 00:11:30,170
con algo de texto.

147
00:11:30,190 --> 00:11:33,800
Hice clic en ir y puede ver o expandir esto.

148
00:11:33,930 --> 00:11:36,880
Me sale el párrafo igual al texto que tengo aquí cada

149
00:11:39,790 --> 00:11:40,590
vez que voy