registration form

온라인 등록 양식

이 프로젝트는 Team Treehouse의 프론트 엔드 개발 과정의 세 번째 프로젝트입니다.

이 프로젝트에서는 다양한 HTML 양식 입력 유형 및 속성을 사용하여 반응 형 모바일 친화적 인 등록 양식을 구축합니다. 제공된 모형 파일을 사용하면 미디어 쿼리를 사용하여 모바일 및 데스크탑 버전의 양식 및 "모바일 우선"접근 방식을 구축합니다.

이 프로젝트의 라이브 링크는 여기에서 찾을 수 있습니다

스크린 샷

지침

1. 모바일 첫 번째 디자인을 사용하여 레이아웃을 구축하십시오.

• HTML 파일에 문서 헤드에 뷰포트 메타 태그가 포함되어 있는지 확인하고 뷰포트 구성을 참조 하여이 태그를 추가하는 이유와 방법을 이해하십시오.
• 제공된 mockup (mobile-form.png)을보고 index.html 파일에 동일한 내용을 추가하십시오.

2. 양식 구조 만들기 : 하나의 <form> 태그 만 사용하십시오. <form> 태그에는 모든 양식 요소가 포함되어야합니다. 다음 섹션 각각에 대한 fieldset 및 legend 추가하십시오.

• 페이지의 "연락처 정보"섹션
• 페이지의 "뉴스 레터"섹션

3. 다음 양식 필드 유형을 포함해야합니다.

• 텍스트 입력
• 이메일 입력
• 전화 입력
• 메뉴를 선택하십시오
• 확인란
• 라디오 버튼
• Textarea
• 제출 버튼

4. 양식 필드는 다음 속성을 포함해야합니다.

• input : id , type 및 name 속성이 포함되어야합니다.
• select and textarea : id 및 name 속성을 포함해야합니다.

5. HTML <label> 태그를 사용하여 각 양식 요소에 레이블을 추가하십시오. 레이블 내부의 텍스트는 모형의 양식 필드의 이름과 일치해야합니다.

• for 속성을 통해 각 <label> 요소를 해당 양식 제어와 올바르게 페어링해야합니다. 예를 들어 위의 링크를 참조하십시오. 그리고 Textarea 요소를 잊지 마십시오. 기능적 레이블도 필요합니다.

6. 입력 필드의 placeholder 속성을 사용하여 다음에 "필요한"텍스트를 추가하십시오.

• 전체 이름 필드
• 이메일 주소 필드

7. 모바일 레이아웃을 위해 모든 것이 제자리에 있으면 미디어 쿼리를 사용하여 중단 점을 추가하여 더 넓은 태블릿 및 데스크톱 스크린의 레이아웃을 조정하십시오.

• Desktop-Form.png Mockup을 사용하여 폭 768px 폭의 태블릿 또는 데스크탑에서 디자인을 일치시킵니다.
• CSS의 min-width 을 사용하여 미디어 쿼리를 작성하여 모바일 우선 접근 방식을 사용하십시오.

8. 모든 중단 점이 제자리에 있으면 레이아웃이 두 ​​모형을 두 번 확인하십시오.

• 레이블 텍스트 위치가 두 모형과 일치하는지 확인하십시오.
  • 모바일 : 텍스트는 양식 필드 위에 있어야합니다.
  • 데스크탑 : 텍스트는 양식 필드의 왼쪽에 있어야합니다.

9. 텍스트에 Google 글꼴을 사용하십시오

10. 추가 :focus 춥니 다.

11. HTML 및 CSS 유효성 검사기를 통해 코드를 실행하여 코드가 유효한지 확인하십시오.

• 유효성 검사기에 대한 링크는 프로젝트 리소스에서 찾을 수 있습니다. 이렇게하면 코드에있을 수있는 오류를 발견하는 데 도움이됩니다.
• 수정할 필요가없는 몇 가지 예외가 있습니다.
  • 경고에 대해 걱정하지 마십시오. 그곳에있을 수있는 오류를 확인해야합니다.
  • CSS 유효성 검사기가 Calc를 사용하는 경우 공급 업체 접두사 또는 의사 요소/의사 클래스이 오류는 무시해야합니다.
  • HTML Validator 플래그가 Google 글꼴 링크/URL에서 파이프 사용 ( '|')을 사용하면이 오류도 무시할 수 있습니다.