1
00:00:00,930 --> 00:00:06,100
그래서이 비디오에서 우리는이 등록 양식을위한 해결책을 만들어 낼 것입니다.

2
00:00:06,640 --> 00:00:09,360
그래서 나는 그것을 저장할 새로운 파일을 가지고있다.

3
00:00:09,540 --> 00:00:25,220
나는이 등록 양식을 HDMI라고 부르겠다. 나는 숭고한 지름길을 사용하고 보일러 보일러 판을 사용하게 될 것이다.

4
00:00:26,370 --> 00:00:31,010
그래서 우리가 이와 같은 프로젝트에 직면했을 때 우리가 시작할 수있는 장소가 꽤 있습니다.

5
00:00:31,260 --> 00:00:47,940
그리고 제가 할 일은 Tagen 양식을 추가하는 것입니다. 그리고 나서이 H1을 여기에 추가하고 Louis는 등록부를 추가 할 것입니다.

6
00:00:48,060 --> 00:00:53,510
이제 등록 양식을 열어서 옮깁시다.

7
00:00:53,970 --> 00:00:59,580
좋아, 아직 거기에 있지만 적어도 또는 각 하나는 좋아 보인다.

8
00:01:00,060 --> 00:01:07,340
그러니 숭고한 것으로 돌아가서 가장 간단한 것으로 시작하자.이 최고 수준의 투입물이어야한다.

9
00:01:07,500 --> 00:01:11,670
이름과 성.

10
00:01:11,670 --> 00:01:13,750
먼저 입력부터 시작하겠습니다.

11
00:01:14,400 --> 00:01:20,370
그리고 그것들은 텍스트 형식과 같습니다.

12
00:01:22,900 --> 00:01:35,640
John이 또 다른 placeholder Smith를하고 나서 두 개의 레이블을 줄 필요가있는 것처럼 보이는 자리 표시자를 제공합시다.

13
00:01:36,120 --> 00:01:39,270
그래서 우리는 레이블을위한 구문을 사용할 수 있습니다.

14
00:01:39,270 --> 00:01:42,970
나는 4 가지를 사용할 것이다.

15
00:01:43,260 --> 00:01:48,950
먼저 이것을 호출하고 ID와 ID를 먼저 비교해 보겠습니다.

16
00:01:50,040 --> 00:01:59,020
그리고 나서이 레이블은 우리에게 그것을주는 첫 번째 이름 콜론을 말할 것이고 똑같은 것을 할 필요가 있습니다.

17
00:01:59,220 --> 00:02:14,300
마지막으로 콜론을 말한 다음 마지막으로이 ID를 부여해야합니다.

18
00:02:15,810 --> 00:02:19,200
그럼 체크인해서 우리가 가진 것을 보자.

19
00:02:19,680 --> 00:02:21,820
여태까지는 그런대로 잘됐다.

20
00:02:21,960 --> 00:02:35,540
우리가 누락 된 하나의 작은 것이 있습니다. 우리는 이러한 입력에 이름을 부여하지 않았으므로 이름을 먼저 지정하고 마지막 이름을 큰 이름으로 지정합니다.

21
00:02:35,550 --> 00:02:37,950
여기에있는 다음 덩어리로 넘어 갑시다.

22
00:02:38,090 --> 00:02:41,640
우리가 실제로 실증하고있는 것은 유효성 검사입니다.

23
00:02:41,640 --> 00:02:46,540
그래서 우리가 여기에있는 동안 이름과 성이 비어 있지 않아야한다는 것을 기억하십시오.

24
00:02:46,590 --> 00:02:56,160
그래서 간단히하기 위해 필요한 입력에 필수 속성을 추가하고 그 값을 true로 설정합니다.

25
00:02:56,340 --> 00:03:01,550
그래서 우리가 작업하고있는 것을 좀 더 명확하게 볼 수 있도록이 것을 확장하고 확장 할 것입니다.

26
00:03:02,190 --> 00:03:08,320
따라서 여기에서 양식을 참고하면 성별 라디오 버튼이됩니다.

27
00:03:08,580 --> 00:03:12,060
그래서 세 개의 라디오 버튼이 필요합니다.

28
00:03:12,210 --> 00:03:18,940
따라서 입력 유형은 라디오와 동일합니다.

29
00:03:19,470 --> 00:03:21,600
그 중 세 명.

30
00:03:21,600 --> 00:03:32,300
그리고 우리가 그걸 가지고 살펴 본다면, 여러분이 보게 될 것입니다. 여러분이 보게 될 것입니다. 여러분이 보게 될 것입니다. 실제로 제가 여러분에게 준 형태가 아닌 것처럼 보이는 다른 요소들과 일치합니다.

31
00:03:32,460 --> 00:03:36,870
그래서 우리는 행동을 취할 수있는 몇 가지 옵션을 가지고 있습니다.

32
00:03:36,870 --> 00:03:46,620
우리는 이것들을 단락에 넣을 수 있습니다.

33
00:03:46,680 --> 00:03:49,710
이제 우리는 그것들을 별도의 줄에 넣습니다.

34
00:03:49,860 --> 00:03:52,840
여기서 div를 사용하려고합니다.

35
00:03:54,330 --> 00:03:56,020
거기에서 당신은 div에 들어갑니다.

36
00:03:56,190 --> 00:03:57,940
같은 간격을 가지고 있지 않습니다.

37
00:03:57,980 --> 00:04:03,600
단락은 C S S 비디오에 실제로 그 간격이 무엇인지에 대해 이야기 할 것입니다.

38
00:04:03,960 --> 00:04:15,010
이제 우리는 레이블을 추가하거나 레이블을 붙일 필요가 있습니다. 그렇게하기 전에 실제로 이름을 붙이기 시작합니다. 그래서 이름은 여기 성별이 될 것입니다.

39
00:04:15,640 --> 00:04:31,080
계속 진행해 보겠습니다. 여기서는 여러 커서를 클릭하여 명령을 내릴 수 있도록 내 지름길을 사용 했어야합니다. 그래서 교차성에 이름을 부여하고 각각에 가치를 부여하겠습니다.

40
00:04:31,290 --> 00:04:35,460
그래서 첫 번째 값은 남성 일 것입니다.

41
00:04:35,460 --> 00:04:37,140
두 번째는 여성이 될 것입니다.

42
00:04:37,140 --> 00:04:40,860
마지막 하나는 새로 고침과 새로 고침 중 하나입니다.

43
00:04:41,010 --> 00:04:44,390
그것이 바로 뒤에 있기 때문에 우리는 물론 그 중 어떤 것도 보지 못합니다.

44
00:04:44,730 --> 00:04:47,210
그래서 우리가해야 할 일은 우리의 레이블을 추가하는 것입니다.

45
00:04:47,580 --> 00:04:51,150
그래서 우리는 세 개의 라벨을 원할 것입니다.

46
00:04:51,150 --> 00:05:03,750
처음에는 레이블 4를 말하려고합니다. 그리고 우리는이 남성을 우리가 여기에서 te te라고 부를 것입니다.

47
00:05:03,900 --> 00:05:09,470
콜론은 우편이 아니기 때문에 우편물과 똑같습니다.

48
00:05:09,940 --> 00:05:11,020
같은 것.

49
00:05:11,010 --> 00:05:13,590
여기 또 다른 레이블.

50
00:05:13,600 --> 00:05:15,250
이 사람은 여성이 될 것입니다.

51
00:05:15,730 --> 00:05:21,150
그리고 나서 우리는 당신을 위해 이드가 여성이라고 주장하고 싶습니다.

52
00:05:21,490 --> 00:05:25,830
그리고 나서 당신은 여성이되는 신분증을 말합니다.

53
00:05:25,840 --> 00:05:31,130
그래서이 양식들을 만들면서 볼 수 있듯이 때때로 약간 지루합니다.

54
00:05:31,140 --> 00:05:38,940
당신은 많은 라벨과 많은 엉망진창을 가지고 있습니다. 당신은 모든 것을 올바르게 대응하고 있다는 점에주의를 기울여야합니다.

55
00:05:38,940 --> 00:05:47,500
그래서 우리는 다른 것을 원합니다. 나는 우리가 ID를 동일하게하고 싶다는 것을 의미합니다.

56
00:05:47,710 --> 00:05:50,500
그럼 여기에 우리가 가진 것을 보도록하겠습니다.

57
00:05:50,620 --> 00:05:50,910
괜찮아.

58
00:05:50,940 --> 00:05:51,980
잘됐다.

59
00:05:52,000 --> 00:05:55,680
우리가 원하는 것만 선택할 수 있습니다.

60
00:05:55,720 --> 00:06:01,940
다음 단계로 넘어 가서 우리가 여기있는 동안 끝에 제출 버튼을 추가하십시오.

61
00:06:01,990 --> 00:06:06,480
그래서 이것은 입력 유형이 submit이 될 것입니다.

62
00:06:07,600 --> 00:06:09,540
유효성 검사가 제대로 작동하는지 확인해 봅시다.

63
00:06:09,730 --> 00:06:13,810
예, 좋은 모양으로 훌륭합니다.

64
00:06:15,250 --> 00:06:17,930
다음은 전자 메일과 암호 필드가 있습니다.

65
00:06:18,310 --> 00:06:20,230
그리고 그것들은 새로운 라인에도 있습니다.

66
00:06:20,230 --> 00:06:28,640
이제 다른 div를 추가하고 입력을 수행하고 이번에는 유형이 전자 메일과 같아 지도록하겠습니다.

67
00:06:28,660 --> 00:06:42,400
그것은 단지 텍스트가 아니며 자리 표시자는 여기에 가장 적합한 자리 표시 자 텍스트가 아닌 귀하의 전자 메일이지만 우리는 그 이미지를 고수해야합니다.

68
00:06:42,390 --> 00:06:53,940
따라서 입력 유형은 전자 메일 자리 표시 자이며 전자 메일은 암호이며 다른 입력은 두 가지입니다.

69
00:06:54,310 --> 00:07:01,550
다음에 우리는 이름을 가지고 갈 수 있습니다. 이름이 혼란 스러울 때를 대비하여 이름은 여기 전자 메일 회원입니다.

70
00:07:01,690 --> 00:07:12,480
이 이름은 순수하게 배후에서 요청의 데이터를 보내야하는 데이터를 보내는 방법을 파악하는 데 사용됩니다.

71
00:07:12,580 --> 00:07:16,520
그래서이 경우 우리가이 필드에 입력하는 것은 무엇이든 전자 메일이라고 불릴 것입니다.

72
00:07:16,870 --> 00:07:19,300
그래서 우리는 어떤 경우에도 영향을 보지 못합니다.

73
00:07:19,310 --> 00:07:24,200
나는 이것이 매우 시각적이지 않기 때문에 이것이 더 혼란스러운 부분 중 하나라고 생각한다.

74
00:07:24,670 --> 00:07:30,750
그래서이 사람은 이름이 비밀 번호라고 말하고 그 다음에 레이블을 추가하거나 추가하겠습니다.

75
00:07:30,940 --> 00:07:41,390
그래서 여기에서 섞어서 레이블의 다른 유형을 사용합니다. 레이블의 다른 유형은 레이블 자체의 데이터를 중첩하는 곳입니다.

76
00:07:41,560 --> 00:07:49,800
따라서 4 개와 ID 구문보다는 전자 메일 콜론을 사용합니다.

77
00:07:49,810 --> 00:07:56,520
그들은 전자 메일과 암호를 사용하는 것과 같은 방식으로 작동합니다.

78
00:07:57,060 --> 00:07:58,490
매우 정확 해지자.

79
00:07:58,690 --> 00:08:00,360
양쪽에 콜론이 있습니다.

80
00:08:00,370 --> 00:08:00,920
큰.

81
00:08:01,210 --> 00:08:13,330
그러나 그것을 저장하십시오. 우리가 살펴보고 봐야 할 다른 하나가 있습니다. 유효성 검사가이 부분을 채우고 있습니다.

82
00:08:13,750 --> 00:08:15,130
아니.

83
00:08:16,060 --> 00:08:20,670
그래서 우리가 놓친 한가지는 이메일을 요구할 필요가 있다는 것입니다.

84
00:08:21,510 --> 00:08:30,170
그래서 우리는 우리 전자 메일에 가서 추가 할 필요가 있습니다.

85
00:08:30,580 --> 00:08:35,000
유효하지 않은 전자 메일을 입력하면 전자 메일을 비워 둡니다.

86
00:08:35,010 --> 00:08:36,640
이 오류가 발생합니다.

87
00:08:37,260 --> 00:08:39,350
큰.

88
00:08:39,510 --> 00:08:41,940
그래서 지금까지 모든 것이 잘 어울립니다.

89
00:08:41,950 --> 00:08:47,670
우리는 거기에 가기 전에 마지막에 보너스 패스워드 검증으로 돌아갈 것입니다.

90
00:08:47,670 --> 00:08:50,780
생일 선택으로 넘어 갑시다.

91
00:08:50,920 --> 00:08:53,140
그래서 세 가지 드롭 다운 메뉴.

92
00:08:53,500 --> 00:09:02,920
그래서 다시 다른 div를 추가 할 수 있으며 이번에는 3 개의 다른 select를 추가 할 것입니다.

93
00:09:02,980 --> 00:09:06,920
그래서 1 2 3.

94
00:09:07,240 --> 00:09:13,070
4 개월 후 첫 번째 레이블부터 시작해 보겠습니다.

95
00:09:13,120 --> 00:09:15,620
모든 것에 대해 단 하나의 라벨이 있습니다.

96
00:09:16,000 --> 00:09:31,330
그래서 당신은이 레이블을 좋아하고 3 개의 주제를 모두 안에 넣었고이 레이블은 생일을 말할 것입니다. 그리고 그것은 그렇게 보일 것입니다.

97
00:09:31,330 --> 00:09:41,450
따라서 우리가 얻는 것을 볼 때 세 개의 입력은 세 개의 레이블이며 우리가해야 할 일은 올바른 데이터를 내부에 추가하는 것입니다.

98
00:09:41,470 --> 00:09:44,380
그래서 이것은 많은 선택 사항입니다.

99
00:09:44,400 --> 00:09:49,420
그래서 첫 번째 것은 앞으로 나아가고 저는 여기에 두세 가지를 할 것입니다. 그래서 이것은 몇 달 동안있을 것입니다.

100
00:09:49,410 --> 00:09:53,950
그래서 우리는 1 월과 3 월을 할 것입니다.

101
00:09:55,760 --> 00:09:58,290
다음은 똑같은 일을합니다.

102
00:09:58,330 --> 00:10:02,240
몇 가지 옵션 만 있으면 하루 동안 사용할 수 있습니다.

103
00:10:02,250 --> 00:10:03,240
그래서 우리는 시작할 것입니다.

104
00:10:03,430 --> 00:10:07,430
10 11과 12에서 두자리 수를합시다.

105
00:10:07,620 --> 00:10:09,600
그리고 마지막 한 해가 될 것입니다.

106
00:10:10,180 --> 00:10:17,640
다시 3 번 해보고 1999 2000 2001 해보자.

107
00:10:19,060 --> 00:10:19,590
큰.

108
00:10:19,810 --> 00:10:22,310
그리고 우리는 우리가 여기에 떨어지는 것을 볼 수 있습니다.

109
00:10:22,330 --> 00:10:31,220
하나의 작은 차이점이 있습니다. 바로 그것이 우리가 1 월과 숫자 및 연도로 즉시 시작한다는 것입니다.

110
00:10:31,690 --> 00:10:38,090
하지만 내가 줬던 사람은 일년에 한 달에 시작합니다.

111
00:10:38,320 --> 00:10:40,150
그래서 몇 가지 방법이 있습니다.

112
00:10:40,180 --> 00:11:01,870
가장 단순한 것은 가장 먼저 옵션을 월과 일이라고 말하면서 HDMI가 폼을 선택하면 초기 값을 결정합니다.

113
00:11:02,080 --> 00:11:05,050
그래서 그렇게하는 것이 가장 일반적인 방법입니다.

114
00:11:05,350 --> 00:11:08,040
이제 우리 회사는 꽤 좋아 보인다.

115
00:11:08,050 --> 00:11:38,050
우리는 최종 조건이 필요합니다. 약관에 동의 함 확인란을 선택하면 여기에 또 다른 div를 추가 할 수 있습니다. 그러면이 태그 대신 올바른 div가 표시됩니다. 이번에는 레이블로 시작하겠습니다. 이번에는 4 개를 호출하고 동의하라고하자.

116
00:11:38,370 --> 00:12:00,310
나는 계약 조건에 동의했다. 그리고 나서 우리가 필요로하는 다음 일은 우리가 동의하고 이름을 짓고 또한 동의했기 때문에 입력 테이프 호출 체크 박스에 ID를 부여하자.

117
00:12:01,120 --> 00:12:05,970
그게 우리가 잘하는 것입니다.

118
00:12:06,000 --> 00:12:11,690
그래서 select 태그에 추가해야 할 한 가지는 이름입니다.

119
00:12:11,910 --> 00:12:22,660
그러니 이번 달에 전화를하고이 중 하나를 여기에 올리십시오.

120
00:12:23,590 --> 00:12:36,350
그리고 만약 우리가 1 월과 3 월과 3 월에 실제로 원하던대로 보내지기를 원하지 않는다면, 숫자와 같은 다른 값을 원한다면 여기에 값을 넣을 것입니다.

121
00:12:36,370 --> 00:12:40,030
따라서 Jan의 경우이 경우 값 1을 넣을 수 있습니다.

122
00:12:40,090 --> 00:12:41,850
거기에 얀이있는 것만으로도 괜찮습니다.

123
00:12:41,860 --> 00:12:45,130
나는 그것이 어떻게 행동해야 하는지를 명시하지 않았다.

124
00:12:45,930 --> 00:12:48,670
그래서 우리는 여기에 다시 와서 꽤 좋아 보인다.

125
00:12:48,660 --> 00:12:50,700
모든 것이 똑같아 보입니다.

126
00:12:50,710 --> 00:12:57,230
마지막으로 논의해야 할 것은 실제 암호 유효성 검사입니다.

127
00:12:57,370 --> 00:13:00,680
그래서 그걸 발견하는 방법을 보여 드리고자합니다.

128
00:13:00,700 --> 00:13:09,860
그래서 HMO 길이 유효성 검사를 열어 보겠습니다.

129
00:13:10,930 --> 00:13:13,560
보시다시피 저는 이미 실제로 여기에 왔습니다.

130
00:13:13,840 --> 00:13:17,980
이것은 내가 최근에 찾아야 만했던 것처럼 보입니다.

131
00:13:17,980 --> 00:13:21,050
이전에 이것을 보지 않았다면 Stack Overflow가 될 것입니다.

132
00:13:21,070 --> 00:13:23,850
이렇게하면 누군가가 질문을 제기 할 수 있습니다.

133
00:13:24,510 --> 00:13:30,000
거기에 어떤 다른 속성이 있습니까 나이가 필드에 대한 가치의 길이를 설정할 수 있습니다 도움이 그를 밖으로 나이.

134
00:13:30,370 --> 00:13:35,160
그런 다음 사람들이 답변을 제공하고 가장 높은 투표 응답이 우선 나타납니다.

135
00:13:35,530 --> 00:13:40,590
그래서이 대답은 필요한 속성이 필요한 패턴 속성을 사용할 수 있다고 말합니다.

136
00:13:40,690 --> 00:13:44,770
그렇지 않으면 빈 값이있는 입력 필드가 제한 조건 유효성 검사에서 제외됩니다.

137
00:13:45,000 --> 00:13:45,770
승인.

138
00:13:46,210 --> 00:13:48,960
그래서 우리 모두가 필요로하는 것처럼 보입니다.

139
00:13:49,690 --> 00:13:55,500
그래서 이것은 우리가 그것을주는 입력입니다 패턴이 이상한 찾고 물건 같습니다.

140
00:13:56,440 --> 00:13:59,050
그런 다음이 제목이 필요합니다.

141
00:13:59,110 --> 00:14:05,230
그래서 우리는 심지어 이것이 무엇을하는지, 그리고이 다섯 가지 공통점이 무엇인지 묻습니다.

142
00:14:05,230 --> 00:14:06,640
어디 보자.

143
00:14:06,630 --> 00:14:10,620
암호를 찾으러 가자. 그러면 많은 것이있다.

144
00:14:10,620 --> 00:14:15,940
개발자가되는 것은 여러 가지를 복사하여 붙여 넣거나 코드를 찾아 수정하는 것입니다.

145
00:14:16,450 --> 00:14:21,250
그래서 우리는 우리가 가지고있는 것을이 이름에 맞게 만들 필요가 있습니다. 왜냐하면 입력 이름은 암호이기 때문에 암호 유형입니다.

146
00:14:21,460 --> 00:14:27,340
그래서이 세 가지 특성을 복사 할 것입니다.

147
00:14:27,340 --> 00:14:33,020
이제 암호 패턴이 5 개에서 10 개가 필요합니다.

148
00:14:33,340 --> 00:14:36,670
제목은 5 ~ 10 자입니다.

149
00:14:36,760 --> 00:14:41,190
그래서 이것이 그 것을 새롭게하는 것을 보자.

150
00:14:41,400 --> 00:14:45,180
다른 모든 것들을 채워야합니다.

151
00:14:45,630 --> 00:14:48,740
제출을 클릭하면이 필드를 작성하십시오.

152
00:14:48,820 --> 00:14:57,310
5-10 자, 유형 2 및 유형 3, 유형 10 이상은 작동하지 않습니다.

153
00:14:57,580 --> 00:15:01,290
그러나 5 또는 6을 타이핑하면 효과가 있습니다.

154
00:15:01,300 --> 00:15:03,520
그럼 조금 더 살펴 보겠습니다.

155
00:15:03,550 --> 00:15:05,170
여기에서 시작해 보겠습니다.

156
00:15:05,320 --> 00:15:07,080
이걸로 바꾸자.

157
00:15:07,480 --> 00:15:18,450
비밀번호는 5 ~ 10 자 사이 여야하며 새로 고침해야합니다.

158
00:15:18,490 --> 00:15:22,300
우리가이 오류를 얻을 수 있도록 다른 모든 것을 채우도록하십시오.

159
00:15:22,890 --> 00:15:30,670
제출을 클릭하면 암호를 설정 한 메시지가 5 자에서 10 자 사이 여야합니다.

160
00:15:31,480 --> 00:15:33,620
이것이 바로이 제목이하는 일입니다.

161
00:15:33,820 --> 00:15:36,710
기본적으로 표시되는 오류 메시지입니다.

162
00:15:37,410 --> 00:15:52,120
그래서 다른 새로운 부분은이 패턴입니다. 이것은 조금 이상하지만이 구문을 사용하여이 입력에 허용되는 길이의 전체 길이를 정의하는 것입니다.

163
00:15:52,120 --> 00:16:10,670
따라서 이것을 2-3 세로 변경하면 용인 할 수없는 용인 할 수없는 것을 제출하지만 2 개는 받아 들일 수 있습니다.

164
00:16:11,470 --> 00:16:15,460
그래서 이것은 단지 우리가 따라야 할 범위 나 패턴을 정의하는 것입니다.

165
00:16:15,930 --> 00:16:23,350
그래서 최소한 길이 나 길이의 범위 외에도 다른 일을 할 수있는 것이 분명히 있습니다.하지만 여기에서 찾을 필요가 있습니다.

166
00:16:23,350 --> 00:16:27,660
당신이 그것을 당황하게하지 않는 것을 발견 할 수 없다면 그것은 아직 아주 이른 것입니다.

167
00:16:27,820 --> 00:16:32,110
그러나 당신이 그런 것들을 시도 할 수있는 더 많은 기회가있을 것입니다.

168
00:16:32,160 --> 00:16:45,860
그래서 나는 완전한 하루와 1 년 및 1 개월 단위의 입력을 가지고 있고 그것이 엉망이라고 생각할 수있는 완전한 해결책을 가지고 있습니다.

169
00:16:45,900 --> 00:16:50,790
나는이 글을 손으로 쓴 적이 없으며, 당신이 이것을 손으로 써 줄 것을 기대하지도 않았다.

170
00:16:51,100 --> 00:16:53,940
따라서 실제로 나중에이 클래스를 생성하는 방법을 살펴 보겠습니다.

171
00:16:53,950 --> 00:16:58,120
당신은 실제로 이것을 쓰지 않아도되도록 자바 스크립트를 사용할 수 있습니다.

172
00:16:58,450 --> 00:16:59,580
솔루션을 살펴보십시오.