반응형
HTML 폼은 웹 페이지에서 사용자로부터 정보를 입력받는데 사용되며, 다양한 입력 요소들로 구성됩니다. 아래에는 주요 HTML 폼 요소들과 간단한 설명을 제시하겠습니다.
<form> 태그 (폼 생성)
<form> 태그는 폼을 생성하는데 사용됩니다. 사용자 입력을 서버로 전송할 때 사용되며, action 속성과 method 속성을 통해 폼의 동작 방식을 설정할 수 있습니다.
<form action="/submit" method="post">
<!-- 폼 요소들이 여기에 들어갑니다. -->
</form>
<input> 태그 (입력 필드)
<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> 태그는 여러 줄의 텍스트를 입력받는 데 사용됩니다.
<textarea name="message" rows="4" cols="50" placeholder="메시지를 입력하세요"></textarea>
<select> 태그와 <option> 태그 (드롭다운 목록)
<select> 태그와 <option> 태그를 사용하여 드롭다운 목록을 만들 수 있습니다.
<select name="country">
<option value="kr">한국</option>
<option value="us">미국</option>
<option value="jp">일본</option>
</select>
<button> 태그 (버튼)
<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 폼 요소들에 대해 간단한 예시를 포함하여 설명해보았습니다. 이러한 폼 요소들을 사용하여 사용자로부터 다양한 정보를 입력받고, 필요한 데이터를 서버로 전송하여 웹 애플리케이션과 상호작용하는 기능을 개발할 수 있습니다.
반응형
'Mark Up > HTML' 카테고리의 다른 글
[HTML] 테이블 생성과 활용 (0) | 2023.07.19 |
---|---|
[HTML] 이미지와 멀티미디어 (2) | 2023.07.19 |
[HTML] 하이퍼링크와 앵커 태그 (<a> 태그) (0) | 2023.07.19 |
[HTML] 주요 HTML 태그 (0) | 2023.07.19 |
[HTML] HTML 소개 및 기본 구조 (0) | 2023.07.19 |