빈 입력을 알려주는 신청 폼 만들기

빈 항목을 안내하고, 연습 정보를 선택하면 확인 메시지를 보여주는 신청 폼을 만들었습니다.

1. Codex에서 새 작업을 열고 아래 제작 프롬프트를 그대로 붙여 넣습니다. 2. 완성된 demo.html을 브라우저에서 엽니다. 3. 입력 확인을 눌러 빈 상태를 보고, 이름과 연락 방법을 하나씩 넣어 각 누락 안내를 비교합니다. 마지막에 두 항목을 채워 확인했어요가 보이는지 살펴봅니다.

이름과 연락 방법을 적는 연습용 신청 화면을 만들어줘. 이름이 비어 있거나 연락 방법을 고르지 않은 채 누르면 무엇이 빠졌는지 화면에 알려줘. 둘 다 넣으면 완료 대신 “확인했어요”만 보여줘. 실제 전송이나 저장은 하지 말고 그 사실을 화면에 적어줘. 나는 코딩을 처음 해. 어려운 말은 짧게 풀어 설명하고, 먼저 현재 상황을 확인한 뒤 요청한 범위만 진행해줘. 확인할 수 없는 내용은 추측하지 말고 알려줘. 내 실제 데이터나 비밀값을 사용하지 말고, 새 유료 서비스나 외부 API를 추가하지 마. 작업을 마치면 내가 직접 확인할 순서와 실행하지 못한 부분을 나누어 알려줘.

두 항목을 비우면 이름과 연락 방법 안내가 함께 나왔다. 이름만 넣으면 연락 방법 안내가, 연락 방법만 고르면 이름 안내가 나왔다. 연습 이름과 이메일을 선택하면 확인했어요가 표시됐다. 폼 전송 요소가 없고 조작 중 추가 요청도 관측되지 않았다. 같은 동작을 390×844에서도 다시 확인했고, 가로 넘침 없이 모든 조작 요소가 화면에 들어왔다.

빈 입력이 통과한다면 어떤 조건이 빠졌는지 확인하고, 두 누락 경우와 유효 입력을 다시 시험해줘.

요청 조건을 읽고 제작·검사한 예제입니다. 문장만 넣은 독립적인 1회 생성 실험은 아닙니다. VibeAZ 자체 제작 · 확인한 예제 파일과 환경에서의 결과입니다. Chrome 한 버전과 1280×900·390×844 화면에서 확인했습니다. 별도 기기, 다른 브라우저나 코딩 도구에서의 동작은 확인하지 않았습니다.