HTML에서는 폼을 만들기 위한 다양한 태그들을 제공한다. 폼의 경우 로그인, 등록, 검색, 예약, 쇼핑 등의 다양한 웹 서비스에서 사용자의 입력을 받기 위해 사용된다.
<form>태그 기본 형식
- <form name="" action="" method=""></form>
name 속성은 폼의 이름을 지정하는 것으로 자바스크립트에서 사용되며, action속성은 폼 데이터를 처리할 목적지를 지정한다. method속성은 폼 데이터를 웹 서버로 전송하는 형식을 설정하는데 삭제(delete), 추가(post, put), 변경(patch), 색인(get) 등의 속성이 있으나 대표적인 방식은 get 과 post 이다. get의 경우 url의 마지막에 정보가 작성이 되며, 개방적이기 때문에 주의 해야한다. post의 경우에는 get보다 담을 수 있는 데이터 용량이 크다. post의 경우 무거운 파일을 전송할 때 사용한다.
<form>의 요소
폼 요소들은 <form> 태그 없이 사용할 수도 있으나 이런 경우는 주로 웹 서버에 전송하지 않고 자바스크립트 코드에서 사용자의 입력을 받는 목적으로만 사용한다. 사용자의 입력을 받는 목적이라면 <form>태그를 필요로 한다.
| 폼 요소 | 설명 |
| <input type="text"> | 한 줄 텍스트 입력 창 |
| <input type="password"> | 암호 입력을 위한 한줄 텍스트 입력 창 (입력 시 보이지 않게 입력됨) |
| <input type="checkbox"> | 체크박스 |
| <input type="radio"> | 라디오박스 |
| <select> | 드롭다운 리스트를 가진 콤보박스 |
| <input type="month|week|date|time|datetime-local"> | 년, 월, 일, 시간 등의 시간 정보 입력 창 |
| <input type="number|range"> | 스핀 버튼과 슬라이드바로 편리한 숫자 입력 창 |
| <input type="color"> | 색 입력을 쉽게 하는 컬러 다이얼로그 |
| <input type="email|url|tel|search"> | 이메일, url, 전화번호, 검색키워드 등 형식 검사 기능을 가진 텍스트 입력 창 |
| <input type="file"> | 로컬 컴퓨터의 파일을 선택하는 폼 요소 |
| <textarea> | 여러 줄의 텍스트 입력 창 |
| <input type="hidden"> | 서버형 데이터를 전달하기 위해서 사용함, 사용자가 데이터를 수정하지 못하도록 하기 위해서 사용함. |
출처 : HTML5+CSS3+Javascript 웹 프로그래밍, 황기태
아이디랑 비밀번호를 입력 받는 폼 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="postjoin.html" method="get">
<label for="id">ID</label> <input type="text" name="id" id="id"><br>
<label for="pw">PW</label> <input type="password" name="pw" id="pw"><br>
<button type="submit">가입하기</button> <button type="reset">취소하기</button>
</form>
</body>
</html>
ID와 PW을 적은 다음 취소하기를 누르면 내용이 전부 삭제되는 모습이 보이고, 가입하기를 누르면 url 창에 ID와 PW가 전달되는 모습을 볼 수 있다.
'Frontend > HTML' 카테고리의 다른 글
| HTML의 진행률을 알아보는 태그(<progress>, <meter>태그) (0) | 2024.07.01 |
|---|---|
| HTML에서 버튼을 만들어보자 (1) | 2024.06.30 |
| HTML에서 폼 요소를 사용해서 선택형 입력, 드롭다운 목록을 만들어보자 (0) | 2024.06.30 |
| HTML의 폼 요소를 사용해보자 (0) | 2024.06.30 |
| HTML 페이지 내에 다른 HTML을 출력해보자 (<iframe>태그) (0) | 2024.06.28 |
| HTML에서 표(table)를 만들어보자 (0) | 2024.06.27 |
| HTML의 <a>태그에 대해 알아보자 (0) | 2024.06.27 |
| HTML 이미지 삽입을 할 수 있는 <img>태그에 대해 알아보자 (0) | 2024.06.27 |