01 HTML 개요, 기본 구문 및 구조_5. 입력 요소로 간단한 양식 만들기

  ● 다양한 유형의 입력 요소 및 용도(텍스트, 이메일, 비밀번호 등)

  - 텍스트 입력: 사용자가 한 줄의 텍스트를 입력할 수 있습니다. 이 유형의 입력은 일반적으로 이름, 이메일 주소 및 전화번호와 같은 항목에 사용됩니다. <input type="text">
  - 비밀번호 입력 : 텍스트 입력과 유사하나 사용자가 입력함에 따라 텍스트가 마스킹(숨김)되어 비밀번호나 기타 민감한 정보를 다른 사람에게 보이지 않고 입력할 수 있습니다. <input type="password">
  - 이메일 입력: 사용자가 이메일 주소를 입력할 수 있습니다. 이 유형의 입력에는 입력한 값이 올바른 형식의 이메일 주소인지 확인하는 유효성 검사가 포함될 수 있습니다. <input type="email">
  - 숫자 입력: 사용자가 숫자를 입력할 수 있습니다. 이 유형의 입력에는 입력한 값이 지정된 범위 내의 숫자인지 확인하는 유효성 검사가 포함될 수 있습니다. <input type="number">
  - 확인란 입력: 사용자가 선택 목록에서 하나 이상의 옵션을 선택할 수 있습니다. 이 유형의 입력은 일반적으로 이용 약관에 동의하거나 목록에서 여러 항목을 선택하는 것과 같은 작업에 사용됩니다. <input type="checkbox" name="example" value="example">
  - 라디오 버튼 입력: 사용자가 선택 목록에서 하나의 옵션을 선택할 수 있습니다. 이 유형의 입력은 일반적으로 하나의 옵션만 선택해야 할 때 사용됩니다. <input type="radio">
  - 드롭다운 선택: 사용자가 드롭다운 목록에서 하나의 옵션을 선택할 수 있습니다. 이 유형의 입력은 일반적으로 선택할 수 있는 옵션이 많을 때 사용됩니다.

<label for="example">예시:</label>
<select id="example" name="example">
  <option value="value1">값 1</option>
  <option value="value2">값 2</option>
  <option value="value3">값 3</option>
</select>

  - 텍스트 영역: 사용자가 여러 줄의 텍스트를 입력할 수 있습니다. 이 유형의 입력은 일반적으로 더 긴 메시지나 댓글에 사용됩니다. <textarea id="example" name="example"></textarea>

  - 날짜 입력: <input type="date">
  - 시간 입력: <input type="time">
  - 파일 입력: <input type="file">
  - 제출 버튼: <input type="submit">
  - 리셋 버튼: <input type="reset">

  - 체크박스 입력: <input type="checkbox">

이는 HTML에서 사용할 수 있는 다양한 유형의 입력 요소에 대한 몇 가지 예일 뿐이며 각 요소는 특정 요구 사항을 충족하기 위해 추가 특성 및 스타일을 사용하여 추가로 사용자 정의할 수 있습니다.

  ● 레이블을 사용하여 입력 요소를 해당 설명과 연결하는 방법

레이블(label) 요소는 폼 컨트롤(form control)과 관련된 설명을 제공하기 위해 사용됩니다. 레이블 요소는 폼 컨트롤과 연결되어 있어서, 레이블을 클릭하면 해당 폼 컨트롤이 활성화됩니다.
레이블 요소는 일반적으로 입력 요소와 함께 사용됩니다. 이를 위해서는 레이블 요소의 for 속성에 연결할 입력 요소의 id 값을 지정해줍니다. 또는, 레이블 요소를 입력 요소를 감싸는 방법으로 연결할 수 있습니다.
아래는 레이블을 사용한 입력 요소 예시입니다.

<label for="username">Username:</label>
<input type="text" id="username" name="username">

<label>
  Password:
  <input type="password" name="password">
</label>

위 예시에서 첫 번째 레이블은 for 속성을 사용하여 username 입력 요소와 연결되었습니다. 두 번째 레이블은 입력 요소를 감싸는 방법으로 연결되었습니다. 이렇게 함으로써 스크린 리더 사용자는 레이블에 의해 입력 요소와 연결된 설명을 쉽게 이해할 수 있게 됩니다.

  ● 제출 버튼과 양식 데이터를 서버로 보내는 역할

HTML 폼에서 제출 버튼을 클릭하면, 사용자가 입력한 양식 데이터가 웹 브라우저에서 서버로 전송됩니다. 이때 제출 버튼을 클릭하면 form 요소의 action 속성에 지정된 URL로 데이터가 전송되고, method 속성에 지정된 방식으로 데이터가 전송됩니다.
method 속성에는 GET과 POST 두 가지 방식이 있으며, GET 방식은 URL 뒤에 데이터가 추가되어 전송되고, POST 방식은 HTTP 요청 본문에 데이터가 포함되어 전송됩니다.
서버는 전송된 데이터를 받아서 처리하고, 처리 결과를 클라이언트에게 전송합니다. 이때 처리 결과는 웹 페이지로 표시되거나, 파일로 다운로드되는 등의 방식으로 표시될 수 있습니다.
이를테면, 회원가입 양식에서 사용자가 입력한 정보를 서버로 전송하면, 서버는 이를 저장하고, 이메일 등의 방식으로 사용자에게 회원가입 완료 안내 메시지를 보내주는 등의 처리가 가능합니다.