문의 양식의 통합은 웹사이트 디자인에 없어서는 안 될 요소로, 방문자가 사용자 친화적인 인터페이스를 통해 사이트 관리자에게 직접 문의, 의견 및 요구 사항을 전달할 수 있도록 합니다.

이 기사에서는 웹 사이트에 대한 기본 문의 양식을 만드는 기술에 대해 살펴 보겠습니다. 프로젝트 수립부터 시작하여 양식 유효성 검사를 통합하고 스타일로 장식하여 궁극적으로 완벽하게 작동하고 시각적으로 매력적인 문의 양식으로 마무리합니다.

프로젝트 설정하기

코딩을 시작하기 전에 개발 환경이 설정되어 있는지 확인하세요. 선호하는 텍스트 편집기 또는 Visual Studio Code 또는 Sublime Text 과 같은 권장 통합 개발 환경(IDE) 중 하나를 엽니다.

잘 구조화된 프로젝트 디렉토리를 설정하는 것은 HTML 및 CSS 문서를 질서정연하게 배열하기 위해 적극 권장됩니다.

하나는 HTML 마크업(index.html 파일로 지정)을 위한 것이고, 다른 하나는 스타일 사양이 포함된 스타일시트(style.css로 식별)를 위한 것입니다. 궁극적으로 시각적 요소를 일관성 있게 표시하려면 HTML 문서의 헤드 영역(`` 및 `` 태그로 표시)에서 연결된 스타일시트(`` 태그)로 하이퍼텍스트 참조를 통합하는 것이 필수적입니다.

HTML 구조 만들기

제대로 작동하는 문의 양식을 구축하려면 기본적인 HTML 아키텍처를 올바르게 구성하는 것이 필수적입니다. 이후 진행 과정에서는 문의 양식을 성공적으로 실행하는 데 필수적인 HTML 구성 요소를 효과적으로 설계하고 구현할 수 있는 프로세스를 설명합니다.

 <main>
     <h1>Welcome to my Form</h1>
     <form id="form">
       <div class="input__container">
         <label for="name">Name</label>
           <!-- The 'required' prop ensures a filled field before submission -->
         <input type="text" id="name" name="name" required />
       </div>
       <div class="input__container">
         <label for="email">Email</label>
         <input type="email" id="email" name="email" required />
       </div>
       <div class="input__container">
         <label for="message">Message</label>
         <textarea id="message" name="message" rows="4" required></textarea>
       </div>
       <button>Submit</button>
     </form>
</main> 

제공된 HTML 코드는 다양한 입력 요소를 포함하는 양식 구성 요소를 구성하며, 이는 사용자가 문의 양식의 컨텍스트 내에서 정보를 제공할 수 있는 인터페이스 역할을 합니다.

현재 문의 양식의 모양은 다음과 같습니다:

문의 양식 스타일 지정

시각적으로 매력적이고 직관적인 문의 양식은 전반적인 사용자 경험을 크게 향상시킬 수 있습니다. 이를 위해 제공된 CSS 코드는 Flexbox와 패딩 및 여백과 같은 다양한 CSS 상자 모델 속성을 활용하여 미적 감각과 기능성을 모두 만족하는 방식으로 문의 양식의 스타일을 효과적으로 지정합니다.

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 font-size: 62.5%;
}

body {
 font-family: "Mulish", sans-serif;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

main {
 width: 40rem;
 box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
 margin: 0 auto;
 height: 45rem;
 border-radius: 2rem;
 padding: 2rem;
}

h1 {
 text-align: center;
 font-size: 3rem;
 padding: 1rem 2rem;
}

form {
 margin: 3rem 0;
 display: flex;
 flex-direction: column;
 row-gap: 2rem;
}

.input__container {
 display: flex;
 flex-direction: column;
 row-gap: 0.5rem;
}

.input__container label { font-size: 1.6rem; }

.input__container input,
textarea {
 padding: 1rem 2rem;
 border-radius: 5px;
 border: 1px solid #555;
 resize: none;
}

button {
 align-self: flex-start;
 padding: 1rem 2rem;
 border-radius: 5px;
 border: none;
 background: #333;
 color: #fff;
 cursor: pointer;
} 

문의 양식의 모양이 다음과 같은 미관을 나타내도록 업데이트되었습니다.

양식 유효성 검사 구현

사용자가 제공한 데이터의 정확성과 포괄성을 보장하는 것이 가장 중요합니다. 이 목표를 달성하기 위한 신뢰할 수 있는 방법은 클라이언트 측에서 양식 유효성 검사를 위해 JavaScript를 사용하는 것입니다. 이 프로세스를 시작하려면 HTML 문서의 끝 부분에 스크립트 태그를 추가하여 양식 요소를 가리키도록 합니다.

 <script>
 "use strict";
    const form = document.getElementById("form");
</script> 

사용자가 정보를 제출하고 데이터베이스에 저장할 수 있는 양식을 만들려면 HTML의 `

 form.addEventListener("submit", function (event) { }); 

 form.addEventListener("submit", function (event) {
    // Prevent page reload on submit
    event.preventDefault(); 
    // Selecting the email value filled by the user
    const email = document.getElementById("email").value;
}); 

 form.addEventListener("submit", function (event) {
    // Preventing page reload on submit
    event.preventDefault(); 

    // Selecting the email value filled by the user
    const email = document.getElementById("email").value;

    // Checking for valid email using a simple regex pattern
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!emailPattern.test(email)) {
      alert("Wrong email format");
      return;
    }

    // If everything passes, show success message
    alert("Form submitted successfully");
});