1
00:00:01,200 --> 00:00:01,520
괜찮아.

2
00:00:01,530 --> 00:00:14,910
다음 몇 가지 동영상에서 우리는 각 팀의 모든 양식에 초점을 맞 춥니 다. 양식은 사용자가 입력하는 방법에 따라 페이지에 가입하여 사진에 댓글을 달고 사진을 업로드하여 선택할 색상을 선택하는 것입니다 날짜.

3
00:00:14,940 --> 00:00:19,840
양식과 관련하여 여러 가지가 있으며 실제로는 상대적으로 간단하고 그를 외면했습니다.

4
00:00:19,840 --> 00:00:23,450
우리가 여기에서 배울 두 가지 중요한 요소가 있습니다.

5
00:00:24,270 --> 00:00:36,600
이제 양식 태그에 초점을 맞출 것입니다. 입력 태그와 레이블 태그를 차례로 살펴보고 데이터 유효성 검사에 대해 알아보고 또한 누군가가 개혁의 일부로 채워지는 것을 확인하는 방법은 무엇입니까?

6
00:00:36,600 --> 00:00:41,860
누군가는 우리의 암호를 공란으로 두거나 공란으로 이메일을 보낼 수 없습니다.

7
00:00:41,910 --> 00:00:46,900
그래서 시작하는 것은 일상 생활에서 겪게되는 몇 가지 형태에 대한 간단한 설문 조사를 시작하겠습니다.

8
00:00:46,980 --> 00:00:51,330
그래서 나는 트위터 페이 스북 구글과 같은 사이트에서 몇 가지 이미지를 가지고있다.

9
00:00:51,690 --> 00:00:54,280
좀 살펴보고 이들 중 일부를 해봅시다.

10
00:00:54,300 --> 00:00:57,420
Facebook 용 로그인 양식입니다.

11
00:00:57,600 --> 00:01:04,050
텍스트에 텍스트를 입력하고 비밀번호를 입력하는 또 다른 입력을 넣을 수있는 공간이 있습니다.

12
00:01:04,140 --> 00:01:08,190
대부분 암호를 입력 할 때 점선으로 표시되므로 암호가 실제로 표시되지 않습니다.

13
00:01:08,340 --> 00:01:09,990
그런 다음 확인란을 선택합니다.

14
00:01:10,260 --> 00:01:14,500
그리고이 버튼을 클릭하면이 모든 것을 제출합니다.

15
00:01:14,640 --> 00:01:16,160
그래서 이들을 하나로 묶습니다.

16
00:01:16,290 --> 00:01:20,370
우리는 체크 박스를위한 하나의 버튼을위한 이메일 버튼 하나를위한 버튼이 하나도 없다.

17
00:01:20,370 --> 00:01:22,110
모든 것이 한꺼번에 진행됩니다.

18
00:01:22,110 --> 00:01:23,910
가입 할 때도 똑같습니다.

19
00:01:23,910 --> 00:01:29,560
우리는 5 개의 다른 텍스트 입력에 3 개의 다른 드롭 다운 메뉴를 더 많이 입력했습니다.

20
00:01:29,580 --> 00:01:33,790
이것을 선택 태그라고 부르며 라디오 버튼이라고하는 두 가지가 있습니다.

21
00:01:34,050 --> 00:01:40,760
그리고 마침내 가입 버튼을 클릭하면이 모든 것을 가져 와서 Facebook에 보낼 수 있습니다.

22
00:01:41,100 --> 00:01:48,450
그래서 우리가 오늘 배워야 할 것은 외국 태그입니다.이 양식들은 조금 바보가 될 것입니다.

23
00:01:48,450 --> 00:01:51,730
그들은 실제로 아무 것도하지 않을 것입니다.

24
00:01:51,870 --> 00:01:53,940
실제로 백엔드를 설정해야합니다.

25
00:01:53,950 --> 00:01:58,050
우리는 폼을 가지고 무엇인가를하기 위해 약간의 로직과 백 엔드 코드가 필요한 데이터베이스가 필요합니다.

26
00:01:58,050 --> 00:02:02,450
그래서 지금은 이것을 재현 할 수있을 것처럼 보일 것입니다.

27
00:02:02,640 --> 00:02:09,790
그러나 가입을 클릭하거나 로그인을 클릭하거나 google에서 검색하면 포럼이 실제로 해당 로직을 수행 할 것입니다.

28
00:02:10,110 --> 00:02:13,550
그들은 단지 사물의 일부에 직면하는 프런트 엔드 사용자가 될 것입니다.

29
00:02:13,950 --> 00:02:15,780
첫 번째 것은 포럼 태그입니다.

30
00:02:16,080 --> 00:02:22,920
따라서 포럼 태그는 기본적으로 이러한 다양한 유형의 입력에 대한 쉘 또는 컨테이너입니다.

31
00:02:22,920 --> 00:02:26,710
그래서 이것은 이것에 관한 하나의 포럼 태그입니다.

32
00:02:26,910 --> 00:02:30,570
이것은이 모든 것을 둘러싼 하나의 양식 태그 일 수 있습니다.

33
00:02:30,570 --> 00:02:36,030
여기에 또 다른 폼 태그가 있습니다. 단지 페이지에서 실제로 볼 수없는 포럼 태그를 만드는 것뿐입니다.

34
00:02:36,240 --> 00:02:38,270
우리는 그것을 잠시 후에 보게 될 것입니다.

35
00:02:38,280 --> 00:02:41,630
기본적으로 이것은 단지 컨테이너 일 뿐이며 우리는 모든 다른 입력을 거기에 넣습니다.

36
00:02:41,640 --> 00:02:47,540
그래서 체크 박스와 버튼은 메뉴에 떨어졌고 색깔있는 그림은 모두 형성된 달걀 안에 들어 있습니다.

37
00:02:48,090 --> 00:02:52,560
따라서 우리가 백엔드에 도달 할 때 두 가지 중요한 특성이 더 많은 시간을 소비하게 될 것입니다.

38
00:02:52,770 --> 00:03:01,980
따라서 이것이 작동하는 방식에 매달려서는 안되지만 폼이 어딘가에 폼에서 서버로 데이터를 보내는 어딘가에 요청을 보낼 것입니다.

39
00:03:02,040 --> 00:03:06,840
첫 번째 부분은 데이터를 보낼 위치를 지정하는 것입니다.

40
00:03:07,320 --> 00:03:08,550
Google에 갈 예정입니까?

41
00:03:08,580 --> 00:03:16,570
그가 등록 할 것인가? 페이지에서 나가는 것인가? 우리는이 수업의 백엔드 섹션에서 우리가 실제 어떻게하는지에 관해 더 많이 배울 것입니다.

42
00:03:16,800 --> 00:03:21,180
그런 다음 두 번째 부분은 어떤 형식의 HSDPA 요청을 보내는 것입니다.

43
00:03:21,780 --> 00:03:25,230
그래서 우리는 요청을 보내거나 우리는 게시물 요청을 보낼 수 있습니다.

44
00:03:25,800 --> 00:03:28,930
그리고 이것은 우리가 훨씬 더 많은 시간을 할애하는 또 다른 것입니다.

45
00:03:29,130 --> 00:03:45,770
그러나 우리가 정보를 얻으려고 시도하는 데이터를 검색하거나 검색하는 것과 같은 일을 할 때 우리가 요청하는 간단한 일반화 된 버전은 데이터베이스에 추가 할 데이터를 게시 할 때 게시 요청을 게시합니다. 서버로.

46
00:03:45,780 --> 00:03:54,070
따라서이 예에서 Google에서 검색 할 때 Enter 키를 누르거나 클릭하여 검색하면 요청하게됩니다.

47
00:03:54,180 --> 00:03:56,160
실제로 데이터베이스에 아무 것도 추가하지 않습니다.

48
00:03:56,160 --> 00:03:57,770
그것은 아무 것도 변하지 않습니다.

49
00:03:57,840 --> 00:04:00,630
순전히 데이터를 다시 검색하는 것입니다.

50
00:04:00,710 --> 00:04:03,070
그것은 요청을 얻는 데이터를 얻고 있습니다.

51
00:04:03,450 --> 00:04:08,420
여기에 페이스 북에 가입하거나 트위터에 가입하는 방법이 있습니다.

52
00:04:08,460 --> 00:04:17,370
그것들은 당신이 데이터를 타이핑 할 때 포스트 요청이 될 것이고, 당신이 데이터를 가져 와서 그것을 실제로 트위터의 데이터베이스에 추가하는 것을 클릭하는 것입니다.

53
00:04:17,370 --> 00:04:21,860
다시 한번이 수업의 뒷부분에서 실제로 작업하겠습니다.

54
00:04:21,990 --> 00:04:26,440
그래서 지금은 행동과 방법 및 그들이 존재한다는 사실을 잘 알고 있어야합니다.

55
00:04:26,640 --> 00:04:30,480
따라서 입력 태그는 실제로 양식 내부로 들어가는 것입니다.

56
00:04:30,600 --> 00:04:38,120
그것은 우리가 여기서 볼 수있는 다양한 입력을 만드는 것입니다. 텍스트 입력은 비밀번호 입력 라디오 버튼입니다.

57
00:04:38,190 --> 00:04:40,020
실제로는 드롭 다운 메뉴를 만들지 않습니다.

58
00:04:40,020 --> 00:04:46,580
그래서 우리는 나중에 연습 할 때 그것에 대해 이야기 할 것이지만 사용자 입력을위한 모든 종류의 입력을 만듭니다.

59
00:04:46,620 --> 00:04:48,840
여기에 몇 가지 예가 있습니다.

60
00:04:48,900 --> 00:04:53,130
이 유형 속성을 제외하고는 모두 동일합니다.

61
00:04:53,310 --> 00:04:57,210
따라서 type이 텍스트와 같으면 텍스트 상자 유형이 날짜와 동일하게됩니다.

62
00:04:57,290 --> 00:04:59,970
이 작은 날짜 선택기 유형이 색상과 동일합니다.

63
00:05:00,270 --> 00:05:04,230
컬러 피커 에펠 (Eiffel) 파일을 얻습니다. 우리는 파일 피커 타입 Pickle 's 체크 박스를 얻습니다.

64
00:05:04,260 --> 00:05:05,680
우리는 체크 박스를 얻는다.

65
00:05:05,850 --> 00:05:11,110
따라서 실제로 엔디안을 검색하고 입력을 검색하려고합니다.

66
00:05:11,110 --> 00:05:20,970
그리고 내가 할 수있는 것처럼 유형 아래의 속성으로 스크롤 할 때 우리가 지정할 수있는 가능한 모든 유형의 목록이 있습니다.

67
00:05:21,550 --> 00:05:23,440
그리고 여기에 약 30 ~ 40 명이 있습니다.

68
00:05:23,790 --> 00:05:27,800
그리고 정직하게 여기에 당신이 아마 사용할 필요가 없을 것이 많습니다.

69
00:05:28,110 --> 00:05:30,810
그러나 당신이 항상 사용하는 몇 가지가 있습니다.

70
00:05:30,810 --> 00:05:32,660
그래서 우리는 그것들에 집중할 것입니다.

71
00:05:32,700 --> 00:05:40,750
그 (것)들은 원본 전자 우편 암호 날짜 단추 같이 것 그 때 색깔 같이 다른 사람의 어떤을 복종시킨다.

72
00:05:41,040 --> 00:05:43,830
당신은 전혀 자주 사용하지 않을 수도 있습니다.

73
00:05:43,830 --> 00:05:46,120
나는 우리가 컬러 사진을 찍을 기회가 더 있었으면 좋겠다.

74
00:05:46,130 --> 00:05:53,820
그것은 내가 좋아하는 입력이지만, 여기에 다양한 선택 사항이 있다는 것을 알고 싶기를 바랍니다.

75
00:05:53,820 --> 00:05:59,060
양식을 만들려면 양식 태그를 사용하고 일부 입력 태그로 양식을 채 웁니다.

76
00:05:59,160 --> 00:06:00,960
여기에 정말 간단한 예가 있습니다.

77
00:06:00,960 --> 00:06:02,230
우리는 두 가지 의견을 가지고 있습니다.

78
00:06:02,360 --> 00:06:06,830
텍스트 유형 Pickle의 암호와 같으므로 여기에 우리를 멋진 형식으로 만듭니다.

79
00:06:07,140 --> 00:06:12,190
그리고이 첫 번째 유형을 채우는 동안 정규 텍스트처럼 보이는 텍스트를 볼 수 있습니다.

80
00:06:12,280 --> 00:06:17,550
그리고 우리가 타입을 채우는 동안 패스워드는 그것이 숨겨진 패스워드 필드에 점을 찍었습니다.