그래서이 비디오에서 우리는이 등록 양식을위한 해결책을 만들어 낼 것입니다.
그래서 나는 그것을 저장할 새로운 파일을 가지고있다.
나는이 등록 양식을 HDMI라고 부르겠다. 나는 숭고한 지름길을 사용하고 보일러 보일러 판을 사용하게 될 것이다.
그래서 우리가 이와 같은 프로젝트에 직면했을 때 우리가 시작할 수있는 장소가 꽤 있습니다.
그리고 제가 할 일은 Tagen 양식을 추가하는 것입니다. 그리고 나서이 H1을 여기에 추가하고 Louis는 등록부를 추가 할 것입니다.
이제 등록 양식을 열어서 옮깁시다.
좋아, 아직 거기에 있지만 적어도 또는 각 하나는 좋아 보인다.
그러니 숭고한 것으로 돌아가서 가장 간단한 것으로 시작하자.이 최고 수준의 투입물이어야한다.
이름과 성.
먼저 입력부터 시작하겠습니다.
그리고 그것들은 텍스트 형식과 같습니다.
John이 또 다른 placeholder Smith를하고 나서 두 개의 레이블을 줄 필요가있는 것처럼 보이는 자리 표시자를 제공합시다.
그래서 우리는 레이블을위한 구문을 사용할 수 있습니다.
나는 4 가지를 사용할 것이다.
먼저 이것을 호출하고 ID와 ID를 먼저 비교해 보겠습니다.
그리고 나서이 레이블은 우리에게 그것을주는 첫 번째 이름 콜론을 말할 것이고 똑같은 것을 할 필요가 있습니다.
마지막으로 콜론을 말한 다음 마지막으로이 ID를 부여해야합니다.
그럼 체크인해서 우리가 가진 것을 보자.
여태까지는 그런대로 잘됐다.
우리가 누락 된 하나의 작은 것이 있습니다. 우리는 이러한 입력에 이름을 부여하지 않았으므로 이름을 먼저 지정하고 마지막 이름을 큰 이름으로 지정합니다.
여기에있는 다음 덩어리로 넘어 갑시다.
우리가 실제로 실증하고있는 것은 유효성 검사입니다.
그래서 우리가 여기에있는 동안 이름과 성이 비어 있지 않아야한다는 것을 기억하십시오.
그래서 간단히하기 위해 필요한 입력에 필수 속성을 추가하고 그 값을 true로 설정합니다.
그래서 우리가 작업하고있는 것을 좀 더 명확하게 볼 수 있도록이 것을 확장하고 확장 할 것입니다.
따라서 여기에서 양식을 참고하면 성별 라디오 버튼이됩니다.
그래서 세 개의 라디오 버튼이 필요합니다.
따라서 입력 유형은 라디오와 동일합니다.
그 중 세 명.
그리고 우리가 그걸 가지고 살펴 본다면, 여러분이 보게 될 것입니다. 여러분이 보게 될 것입니다. 여러분이 보게 될 것입니다. 실제로 제가 여러분에게 준 형태가 아닌 것처럼 보이는 다른 요소들과 일치합니다.
그래서 우리는 행동을 취할 수있는 몇 가지 옵션을 가지고 있습니다.
우리는 이것들을 단락에 넣을 수 있습니다.
이제 우리는 그것들을 별도의 줄에 넣습니다.
여기서 div를 사용하려고합니다.
거기에서 당신은 div에 들어갑니다.
같은 간격을 가지고 있지 않습니다.
단락은 C S S 비디오에 실제로 그 간격이 무엇인지에 대해 이야기 할 것입니다.
이제 우리는 레이블을 추가하거나 레이블을 붙일 필요가 있습니다. 그렇게하기 전에 실제로 이름을 붙이기 시작합니다. 그래서 이름은 여기 성별이 될 것입니다.
계속 진행해 보겠습니다. 여기서는 여러 커서를 클릭하여 명령을 내릴 수 있도록 내 지름길을 사용 했어야합니다. 그래서 교차성에 이름을 부여하고 각각에 가치를 부여하겠습니다.
그래서 첫 번째 값은 남성 일 것입니다.
두 번째는 여성이 될 것입니다.
마지막 하나는 새로 고침과 새로 고침 중 하나입니다.
그것이 바로 뒤에 있기 때문에 우리는 물론 그 중 어떤 것도 보지 못합니다.
그래서 우리가해야 할 일은 우리의 레이블을 추가하는 것입니다.
그래서 우리는 세 개의 라벨을 원할 것입니다.
처음에는 레이블 4를 말하려고합니다. 그리고 우리는이 남성을 우리가 여기에서 te te라고 부를 것입니다.
콜론은 우편이 아니기 때문에 우편물과 똑같습니다.
같은 것.
여기 또 다른 레이블.
이 사람은 여성이 될 것입니다.
그리고 나서 우리는 당신을 위해 이드가 여성이라고 주장하고 싶습니다.
그리고 나서 당신은 여성이되는 신분증을 말합니다.
그래서이 양식들을 만들면서 볼 수 있듯이 때때로 약간 지루합니다.
당신은 많은 라벨과 많은 엉망진창을 가지고 있습니다. 당신은 모든 것을 올바르게 대응하고 있다는 점에주의를 기울여야합니다.
그래서 우리는 다른 것을 원합니다. 나는 우리가 ID를 동일하게하고 싶다는 것을 의미합니다.
그럼 여기에 우리가 가진 것을 보도록하겠습니다.
괜찮아.
잘됐다.
우리가 원하는 것만 선택할 수 있습니다.
다음 단계로 넘어 가서 우리가 여기있는 동안 끝에 제출 버튼을 추가하십시오.
그래서 이것은 입력 유형이 submit이 될 것입니다.
유효성 검사가 제대로 작동하는지 확인해 봅시다.
예, 좋은 모양으로 훌륭합니다.
다음은 전자 메일과 암호 필드가 있습니다.
그리고 그것들은 새로운 라인에도 있습니다.
이제 다른 div를 추가하고 입력을 수행하고 이번에는 유형이 전자 메일과 같아 지도록하겠습니다.
그것은 단지 텍스트가 아니며 자리 표시자는 여기에 가장 적합한 자리 표시 자 텍스트가 아닌 귀하의 전자 메일이지만 우리는 그 이미지를 고수해야합니다.
따라서 입력 유형은 전자 메일 자리 표시 자이며 전자 메일은 암호이며 다른 입력은 두 가지입니다.
다음에 우리는 이름을 가지고 갈 수 있습니다. 이름이 혼란 스러울 때를 대비하여 이름은 여기 전자 메일 회원입니다.
이 이름은 순수하게 배후에서 요청의 데이터를 보내야하는 데이터를 보내는 방법을 파악하는 데 사용됩니다.
그래서이 경우 우리가이 필드에 입력하는 것은 무엇이든 전자 메일이라고 불릴 것입니다.
그래서 우리는 어떤 경우에도 영향을 보지 못합니다.
나는 이것이 매우 시각적이지 않기 때문에 이것이 더 혼란스러운 부분 중 하나라고 생각한다.
그래서이 사람은 이름이 비밀 번호라고 말하고 그 다음에 레이블을 추가하거나 추가하겠습니다.
그래서 여기에서 섞어서 레이블의 다른 유형을 사용합니다. 레이블의 다른 유형은 레이블 자체의 데이터를 중첩하는 곳입니다.
따라서 4 개와 ID 구문보다는 전자 메일 콜론을 사용합니다.
그들은 전자 메일과 암호를 사용하는 것과 같은 방식으로 작동합니다.
매우 정확 해지자.
양쪽에 콜론이 있습니다.
큰.
그러나 그것을 저장하십시오. 우리가 살펴보고 봐야 할 다른 하나가 있습니다. 유효성 검사가이 부분을 채우고 있습니다.
아니.
그래서 우리가 놓친 한가지는 이메일을 요구할 필요가 있다는 것입니다.
그래서 우리는 우리 전자 메일에 가서 추가 할 필요가 있습니다.
유효하지 않은 전자 메일을 입력하면 전자 메일을 비워 둡니다.
이 오류가 발생합니다.
큰.
그래서 지금까지 모든 것이 잘 어울립니다.
우리는 거기에 가기 전에 마지막에 보너스 패스워드 검증으로 돌아갈 것입니다.
생일 선택으로 넘어 갑시다.
그래서 세 가지 드롭 다운 메뉴.
그래서 다시 다른 div를 추가 할 수 있으며 이번에는 3 개의 다른 select를 추가 할 것입니다.
그래서 1 2 3.
4 개월 후 첫 번째 레이블부터 시작해 보겠습니다.
모든 것에 대해 단 하나의 라벨이 있습니다.
그래서 당신은이 레이블을 좋아하고 3 개의 주제를 모두 안에 넣었고이 레이블은 생일을 말할 것입니다. 그리고 그것은 그렇게 보일 것입니다.
따라서 우리가 얻는 것을 볼 때 세 개의 입력은 세 개의 레이블이며 우리가해야 할 일은 올바른 데이터를 내부에 추가하는 것입니다.
그래서 이것은 많은 선택 사항입니다.
그래서 첫 번째 것은 앞으로 나아가고 저는 여기에 두세 가지를 할 것입니다. 그래서 이것은 몇 달 동안있을 것입니다.
그래서 우리는 1 월과 3 월을 할 것입니다.
다음은 똑같은 일을합니다.
몇 가지 옵션 만 있으면 하루 동안 사용할 수 있습니다.
그래서 우리는 시작할 것입니다.
10 11과 12에서 두자리 수를합시다.
그리고 마지막 한 해가 될 것입니다.
다시 3 번 해보고 1999 2000 2001 해보자.
큰.
그리고 우리는 우리가 여기에 떨어지는 것을 볼 수 있습니다.
하나의 작은 차이점이 있습니다. 바로 그것이 우리가 1 월과 숫자 및 연도로 즉시 시작한다는 것입니다.
하지만 내가 줬던 사람은 일년에 한 달에 시작합니다.
그래서 몇 가지 방법이 있습니다.
가장 단순한 것은 가장 먼저 옵션을 월과 일이라고 말하면서 HDMI가 폼을 선택하면 초기 값을 결정합니다.
그래서 그렇게하는 것이 가장 일반적인 방법입니다.
이제 우리 회사는 꽤 좋아 보인다.
우리는 최종 조건이 필요합니다. 약관에 동의 함 확인란을 선택하면 여기에 또 다른 div를 추가 할 수 있습니다. 그러면이 태그 대신 올바른 div가 표시됩니다. 이번에는 레이블로 시작하겠습니다. 이번에는 4 개를 호출하고 동의하라고하자.
나는 계약 조건에 동의했다. 그리고 나서 우리가 필요로하는 다음 일은 우리가 동의하고 이름을 짓고 또한 동의했기 때문에 입력 테이프 호출 체크 박스에 ID를 부여하자.
그게 우리가 잘하는 것입니다.
그래서 select 태그에 추가해야 할 한 가지는 이름입니다.
그러니 이번 달에 전화를하고이 중 하나를 여기에 올리십시오.
그리고 만약 우리가 1 월과 3 월과 3 월에 실제로 원하던대로 보내지기를 원하지 않는다면, 숫자와 같은 다른 값을 원한다면 여기에 값을 넣을 것입니다.
따라서 Jan의 경우이 경우 값 1을 넣을 수 있습니다.
거기에 얀이있는 것만으로도 괜찮습니다.
나는 그것이 어떻게 행동해야 하는지를 명시하지 않았다.
그래서 우리는 여기에 다시 와서 꽤 좋아 보인다.
모든 것이 똑같아 보입니다.
마지막으로 논의해야 할 것은 실제 암호 유효성 검사입니다.
그래서 그걸 발견하는 방법을 보여 드리고자합니다.
그래서 HMO 길이 유효성 검사를 열어 보겠습니다.
보시다시피 저는 이미 실제로 여기에 왔습니다.
이것은 내가 최근에 찾아야 만했던 것처럼 보입니다.
이전에 이것을 보지 않았다면 Stack Overflow가 될 것입니다.
이렇게하면 누군가가 질문을 제기 할 수 있습니다.
거기에 어떤 다른 속성이 있습니까 나이가 필드에 대한 가치의 길이를 설정할 수 있습니다 도움이 그를 밖으로 나이.
그런 다음 사람들이 답변을 제공하고 가장 높은 투표 응답이 우선 나타납니다.
그래서이 대답은 필요한 속성이 필요한 패턴 속성을 사용할 수 있다고 말합니다.
그렇지 않으면 빈 값이있는 입력 필드가 제한 조건 유효성 검사에서 제외됩니다.
승인.
그래서 우리 모두가 필요로하는 것처럼 보입니다.
그래서 이것은 우리가 그것을주는 입력입니다 패턴이 이상한 찾고 물건 같습니다.
그런 다음이 제목이 필요합니다.
그래서 우리는 심지어 이것이 무엇을하는지, 그리고이 다섯 가지 공통점이 무엇인지 묻습니다.
어디 보자.
암호를 찾으러 가자. 그러면 많은 것이있다.
개발자가되는 것은 여러 가지를 복사하여 붙여 넣거나 코드를 찾아 수정하는 것입니다.
그래서 우리는 우리가 가지고있는 것을이 이름에 맞게 만들 필요가 있습니다. 왜냐하면 입력 이름은 암호이기 때문에 암호 유형입니다.
그래서이 세 가지 특성을 복사 할 것입니다.
이제 암호 패턴이 5 개에서 10 개가 필요합니다.
제목은 5 ~ 10 자입니다.
그래서 이것이 그 것을 새롭게하는 것을 보자.
다른 모든 것들을 채워야합니다.
제출을 클릭하면이 필드를 작성하십시오.
5-10 자, 유형 2 및 유형 3, 유형 10 이상은 작동하지 않습니다.
그러나 5 또는 6을 타이핑하면 효과가 있습니다.
그럼 조금 더 살펴 보겠습니다.
여기에서 시작해 보겠습니다.
이걸로 바꾸자.
비밀번호는 5 ~ 10 자 사이 여야하며 새로 고침해야합니다.
우리가이 오류를 얻을 수 있도록 다른 모든 것을 채우도록하십시오.
제출을 클릭하면 암호를 설정 한 메시지가 5 자에서 10 자 사이 여야합니다.
이것이 바로이 제목이하는 일입니다.
기본적으로 표시되는 오류 메시지입니다.
그래서 다른 새로운 부분은이 패턴입니다. 이것은 조금 이상하지만이 구문을 사용하여이 입력에 허용되는 길이의 전체 길이를 정의하는 것입니다.
따라서 이것을 2-3 세로 변경하면 용인 할 수없는 용인 할 수없는 것을 제출하지만 2 개는 받아 들일 수 있습니다.
그래서 이것은 단지 우리가 따라야 할 범위 나 패턴을 정의하는 것입니다.
그래서 최소한 길이 나 길이의 범위 외에도 다른 일을 할 수있는 것이 분명히 있습니다.하지만 여기에서 찾을 필요가 있습니다.
당신이 그것을 당황하게하지 않는 것을 발견 할 수 없다면 그것은 아직 아주 이른 것입니다.
그러나 당신이 그런 것들을 시도 할 수있는 더 많은 기회가있을 것입니다.
그래서 나는 완전한 하루와 1 년 및 1 개월 단위의 입력을 가지고 있고 그것이 엉망이라고 생각할 수있는 완전한 해결책을 가지고 있습니다.
나는이 글을 손으로 쓴 적이 없으며, 당신이 이것을 손으로 써 줄 것을 기대하지도 않았다.
따라서 실제로 나중에이 클래스를 생성하는 방법을 살펴 보겠습니다.
당신은 실제로 이것을 쓰지 않아도되도록 자바 스크립트를 사용할 수 있습니다.
솔루션을 살펴보십시오.