[HTML] HTML 폼(Form) 요소

HTML 폼은 웹 페이지에서 사용자로부터 정보를 입력받는데 사용되며, 다양한 입력 요소들로 구성됩니다. 아래에는 주요 HTML 폼 요소들과 간단한 설명을 제시하겠습니다.

<form> 태그는 폼을 생성하는데 사용됩니다. 사용자 입력을 서버로 전송할 때 사용되며, action 속성과 method 속성을 통해 폼의 동작 방식을 설정할 수 있습니다.

<form action="/submit" method="post">
    <!-- 폼 요소들이 여기에 들어갑니다. -->
</form>

<input> 태그는 사용자로부터 데이터를 입력받는 데 사용되며, 다양한 타입의 입력 필드를 지원합니다.

1) 텍스트 입력 필드

<input type="text" name="username" placeholder="사용자 이름을 입력하세요">

2) 비밀번호 입력 필드

<input type="password" name="password" placeholder="비밀번호를 입력하세요">

3) 이메일 입력 필드

<input type="email" name="email" placeholder="이메일 주소를 입력하세요">

4) 숫자 입력 필드

<input type="number" name="age" placeholder="나이를 입력하세요">

5) 체크박스

<label>
    <input type="checkbox" name="subscribe" value="yes"> 구독하기
</label>

<textarea> 태그는 여러 줄의 텍스트를 입력받는 데 사용됩니다.

<textarea name="message" rows="4" cols="50" placeholder="메시지를 입력하세요"></textarea>

<select> 태그와 <option> 태그를 사용하여 드롭다운 목록을 만들 수 있습니다.

<select name="country">
    <option value="kr">한국</option>
    <option value="us">미국</option>
    <option value="jp">일본</option>
</select>

<button> 태그는 클릭 가능한 버튼을 생성하는데 사용됩니다.

<button type="submit">제출</button>
<button type="button">클릭하세요</button>

<label> 태그 (라벨)

<label> 태그는 폼 요소에 대한 라벨을 설정합니다. 화면에는 직접 보이지 않지만, 스크린 리더(Screen Reader)에서 접근성을 높이는 데 도움이 됩니다.

<label for="username">사용자 이름:</label>
<input type="text" name="username" id="username">

위에서는 주요 HTML 폼 요소들에 대해 간단한 예시를 포함하여 설명해보았습니다. 이러한 폼 요소들을 사용하여 사용자로부터 다양한 정보를 입력받고, 필요한 데이터를 서버로 전송하여 웹 애플리케이션과 상호작용하는 기능을 개발할 수 있습니다.