웹사이트를 위한 웹 폼 만들기 (실전 튜토리얼)

이 곳에서는 수강 과정의 내용과 기대할 수 있는 것에 대해 알 수 있습니다.

왜 HTML 양식을 사용해야 하며 일반적으로 어떻게 하는 건가요?

이곳에서 프로젝트를 생성하고 첫 번째 양식을 통합합니다.

당신은 첫 번째 간단한 양식을 작성하고 기본 구조를 배우게 됩니다.

우리는 웹 애플리케이션에서 HTML 양식의 다양한 활용 가능성을 살펴봅니다.

사용자가 입력한 데이터를 JavaScript로 읽고 처리하는 방법을 배우게 됩니다.

나는 양식의 디자인 옵션에 대해 이야기하고 다양한 입력 필드를 소개할 것이다.

간단한 이메일 유효성 검사를 구현하여 입력된 데이터가 이메일 형식에 부합하는지 확인합니다.

우리는 숫자 입력 및 가능한 값의 제한에 대한 관련 속성들을 다룹니다.

입력 필드 내용을 변경할 때 JS 이벤트를 캐치하는 방법을 배우게 됩니다.

우리는 이벤트 처리 주제를 심화하고 더 유연한 반응을 위해 addEventListener를 사용합니다.

다양한 input- 유형 및 그들의 특성에 대한 포괄적 요약.

입력 필드의 동작을 제어하는 주요 속성을 설명합니다.

정규 표현식 및 required- 속성을 사용하여 복잡한 유효성 검사를 수행하는 방법을 학습합니다.

귀하는 양식에서 맞춤법 검사를 활성화하거나 비활성화하는 방법을 안내해 드립니다.

비밀번호 필드를 만드는 방법을 알게 됩니다.

우리는 체크 박스의 기초와 사용 가능성에 대해 시작합니다.

자바스크립트를 사용하여 체크 상자의 상태를 읽고 설정하는 방법을 배우게 됩니다.

체크박스의 모양을 다양하게 변경하는 여러 방법을 보여드립니다.

라디오버튼의 작동 방식과 어떻게 폼에서 사용하는지 설명합니다.

사용자가 파일을 업로드할 수 있도록 허용하는 방법을 배웁니다.

당신은 파일 업로드에 대한 지식을 더 쌓고 JavaScript로 선택한 파일을 어떻게 처리할 수 있는지 배우게 됩니다.

나는 추가 정보를 전송하기 위해 숨겨진 입력 필드를 사용하는 것에 대해 설명하겠습니다.

우리는 숫자를 입력하는 다양한 방법을 요약합니다.

Range-Sliders를 사용하여 특정 범위의 값을 선택하고 슬라이더를 구현하는 방법을 배우게 됩니다.

당신에게 어떻게 양식에 날짜와 시간을 입력하는 지 보여줄게.

우리는 이메일 주소와 URL을 위한 특별한 입력 필드에 집중합니다.

색을 색상 선택 패널을 통해 선택하는 방법을 배우게 됩니다.

검색어와 전화번호를 입력할 수 있는 필드를 제공합니다.

다중 행 텍스트 입력을 textarea 요소를 사용하여 구현하는 방법을 배웁니다.

나는 select 요소로 선택 가능한 목록을 만드는 방법을 설명할 것이다.

옵션을 선택 목록에서 그룹화하는 방법을 배우게 됩니다.

입력 필드를위한 제안 목록을 만드는 방법을 보여줄게.

입력 자동 완성을 활성화하는 방법을 배우게 됩니다.

당신이 fieldset 요소로 양식을 구조화하는 방법을 설명하겠습니다.

Javascript를 사용한 클라이언트 측 폼 유효성 검사에 대한 포괄적인 소개.

Node.js  와 Express를 사용하여 서버에서 전송된 폼 데이터를 받는 방법을 보여 드립니다.

GET 메서드를 사용하여 양식 데이터를 받는 방법을 배우게 됩니다.

POST 방식으로 양식 데이터를 받는 방법에 대해 설명하겠습니다.

리액트 프로젝트를 시작하고 폼을 통합하는 것으로 시작합니다.

리액트에서 다양한 입력 요소를 사용하는 방법을 배우게 됩니다.

리액트에서 select- 및 textarea- 요소를 살펴봅니다.

저는 당신에게 JavaScript 프레임 워크 Alpine.js로 양식을 다루는 방법을 보여줄 겁니다.

나는 당신에게 Vue.js 애플리케이션에 양식을 통합하는 방법을 설명하겠습니다.