HTML 폼은 웹사이트와 사용자가 정보를 입력하여 상호 작용할 수 있도록 하는 웹의 기본적인 부분입니다. 간단한 검색창부터 복잡한 등록 페이지까지 다양하게 활용될 수 있습니다. 본 실습에서는 텍스트 필드, 레이블, 제출 버튼 추가 방법을 포함하여 HTML 폼 생성의 기본 사항을 배우게 됩니다. 단계별로 간단한 연락처 폼을 만들어 보겠습니다.
실습 환경에서는 이미 웹 서버가 시작되었습니다. index.html 파일에 HTML 코드를 작성하고, 왼쪽 상단 모서리에 있는 Web 8080 탭을 클릭하여 실시간 미리보기를 확인할 수 있습니다.
이 단계에서는 폼 요소들을 담을 컨테이너를 만드는 것부터 시작하겠습니다. <form> 태그는 사용자 입력을 위한 HTML 폼을 생성하는 데 사용됩니다. 텍스트 필드, 버튼, 체크박스와 같은 모든 폼 요소는 <form> 태그 안에 배치되어야 합니다.
action 속성은 폼이 제출될 때 폼 데이터를 어디로 보낼지 지정합니다. 본 실습에서는 백엔드 처리보다는 HTML 구조에 집중할 것이므로 비워두겠습니다.
왼쪽 파일 탐색기에서 index.html 파일을 열고 다음 코드를 추가해 주세요.
<form action=""></form>코드를 추가한 후 Web 8080 탭으로 전환하여 페이지를 미리 볼 수 있습니다. 현재 폼이 비어 있으므로 아무것도 보이지 않을 것입니다.
이 단계에서는 사용자가 텍스트를 입력할 필드를 추가하겠습니다. <input> 태그는 가장 많이 사용되는 폼 요소 중 하나입니다. type 속성에 따라 다양한 방식으로 표시될 수 있습니다.
한 줄 텍스트 입력 필드를 생성하려면 type="text"를 사용합니다. 이는 사용자 이름, 이름 또는 이메일 주소와 같은 항목에 완벽합니다.
이제 index.html 파일의 <form> 태그 안에 텍스트 입력 필드를 추가해 보겠습니다.
<form action="">
<input type="text" />
</form>파일을 저장하고 Web 8080 탭으로 전환하세요. 이제 페이지에 입력할 수 있는 작은 텍스트 상자가 표시될 것입니다.
이 단계에서는 사용자가 폼을 제출할 수 있도록 버튼을 추가하겠습니다. <input> 태그를 다시 사용하여 제출 버튼을 만들 수 있으며, 이번에는 type="submit"을 사용합니다.
사용자가 이 버튼을 클릭하면 폼의 데이터가 <form> 태그의 action 속성에 지정된 서버로 전송됩니다. 버튼에 표시될 텍스트는 value 속성을 사용하여 설정할 수 있습니다.
index.html 파일에서 폼에 제출 버튼을 추가해 보겠습니다.
<form action="">
<input type="text" />
<br /><br />
<input type="submit" value="Submit" />
</form>더 나은 레이아웃을 위해 텍스트 필드와 버튼 사이에 수직 공간을 만들기 위해 <br><br> 태그도 추가했습니다. 파일을 저장하고 Web 8080 탭에서 새로운 "Submit" 버튼을 확인하세요.
이 단계에서는 텍스트 필드에 레이블을 추가하겠습니다. <label> 태그는 많은 폼 요소에 대한 레이블을 정의합니다. 레이블을 클릭하면 해당 입력 필드에 포커스가 맞춰지므로 사용성과 접근성을 향상시킵니다.
<label>을 <input>에 연결하려면 <label>의 for 속성이 <input>의 id 속성과 동일해야 합니다.
index.html 파일에 텍스트 입력에 id를 추가하고 해당 <label>을 추가해 보겠습니다.
<form action="">
<label for="username">Name:</label><br />
<input type="text" id="username" name="username" />
<br /><br />
<input type="submit" value="Submit" />
</form>"Name:"에 대한 label을 추가하고 id="username" 및 for="username"을 사용하여 입력 필드와 연결했습니다. 또한 입력에 name 속성을 추가했는데, 이는 폼이 제출될 때 데이터를 식별하는 데 중요합니다.
파일을 저장하고 Web 8080 탭에서 변경 사항을 확인하세요. 이제 "Name:" 텍스트를 클릭하면 커서가 자동으로 텍스트 상자로 이동합니다.
이 단계에서는 사용자가 메시지를 작성할 수 있는 더 큰 텍스트 영역을 추가하겠습니다. <input type="text">가 한 줄 텍스트용인 반면, <textarea> 태그는 여러 줄 입력을 위해 사용됩니다.
<textarea>의 크기는 각각 보이는 줄 수와 줄당 문자 수를 지정하는 rows 및 cols 속성으로 제어할 수 있습니다.
자체 <label>과 함께 메시지를 위한 <textarea>를 폼에 추가해 보겠습니다. index.html 파일을 아래의 최종 코드로 업데이트하세요.
<form action="">
<label for="username">Name:</label><br />
<input type="text" id="username" name="username" />
<br /><br />
<label for="message">Message:</label><br />
<textarea id="message" name="message" rows="4" cols="30"></textarea>
<br /><br />
<input type="submit" value="Submit" />
</form>이제 우리 폼에는 이름 필드와 메시지 영역이 있습니다. 파일을 저장하고 Web 8080 탭에서 완성된 폼을 살펴보세요. 이제 기능적이고 잘 구조화된 HTML 폼이 완성되었습니다.
축하합니다! 기본적인 HTML 폼을 성공적으로 구축했습니다. 이 실습에서는 다음을 배웠습니다.
<form> 태그 사용하기<input type="text">로 한 줄 텍스트 필드 만들기<input type="submit">로 제출 버튼 만들기for 및 id 속성을 사용하여 <label>을 입력 필드와 연결하여 접근성 및 사용성 향상시키기<textarea> 태그로 여러 줄 텍스트 영역 추가하기이것들은 웹에서 상호작용하는 폼을 만드는 기초적인 구성 요소입니다. 이제 다른 입력 유형과 폼 속성을 탐색하여 더 복잡하고 강력한 폼을 만들 수 있습니다.
