부트캠프 주니어 3강 - Form (폼)

안녕하세요!

 

HTML 강의 시리즈의 세 번째 시간에 오신 것을 환영해요! 이번 시간에는 폼 (form)에 대해 알아보겠습니다.

 

폼은 웹 페이지에서 사용자로부터 정보를 수집하는 데 사용되는 요소입니다. 사용자로부터 입력을 받는 텍스트 상자, 체크박스, 라디오 버튼 등을 포함할 수 있습니다. 폼은 웹 페이지의 상호작용성을 높여주는 중요한 요소이지요.

 

폼을 생성하기 위해서는 <form> 태그를 사용합니다. 폼 안에는 다양한 입력 요소가 들어갈 수 있습니다. 입력 요소는 <input> 태그를 사용하여 추가합니다. <input> 태그는 다양한 종류의 입력 필드를 생성할 수 있으며, type 속성을 통해 어떤 종류의 입력 필드를 만들 것인지 지정합니다.

 

<form>
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">

  <label for="email">이메일:</label>
  <input type="email" id="email" name="email">

  <input type="submit" value="제출">
</form>

 

위의 코드는 이름과 이메일을 입력받는 폼을 예시로 보여줍니다. <label> 태그는 입력 필드와 관련된 텍스트를 표시하기 위해 사용되요. for 속성을 사용하여 레이블을 연결할 입력 필드의 id 값을 지정합니다. 이말은 즉슨 id와 for이 값이 "name"처럼 같다면 <label>과 <input> 두개가 서로 연결이 되요. 연결이 되면 뭐가 좋냐구요? 레이블인 "이름:"을 클릭해도 자동으로 input에 포커스가 가기 때문에 웹페이지 사용자에서 편리성을 제공해 주게 됩니다!

 

<input> 태그의 type 속성은 텍스트 필드(text)와 이메일 필드(email)를 생성하도록 지정하였습니다. 마지막으로, type="submit"인 입력 필드는 폼을 제출할 때 사용됩니다.

 

폼을 제출하면 사용자가 입력한 정보는 서버로 전송되거나 JavaScript를 사용하여 동적으로 처리할 수 있습니다. 폼은 웹 페이지에서 데이터 수집, 회원가입, 검색 기능 등을 구현하는 데에 널리 사용구요. 사용자와의 상호작용을 강화하기 위해 폼을 적절하게 활용해보세요!

 

다음 시간에는 CSS(Cascading Style Sheets)에 대해 알아보도록 하겠습니다. 그럼 다음 시간에 뵙겠습니다!