안녕하세요. 오늘은 HTML에 중요한 요소 중 하나인 폼(Form)에 대해 알아볼게요.
Form(폼)
폼은 사용자가 웹 사이트로 정보를 보낼 수 있는 요소로
텍스트 필드, 체크박스, 라디오 버튼, 송신버튼 등 다양한 유형의 입력요소를 위한 컨테이너예요.
화면에 표시된 아이디와 비밀번호, 로그인 버튼, 회원 가입 등이 있어요.
폼의 동작 방식
# 로그인 기준
// 사용자가 아이디/비밀번호 입력 후 [로그인]버튼 클릭
// -> 입력한 정보가 웹 서버로 전송
// -> 서버는 자신이 가진 데이터베이스에서
// 입력 받은 아이디와 비밀번호가 일치하는지 확인
// -> 그 결과를 웹 브라우저에 전송
폼 태그
<!--기본형-->
<form [속성="속성값"]>여러 폼 요소</form>폼 태그는 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지
서버에서 어떤 프로그램을 이용해 처리할 것인지 지정해요.
폼 속성
| 종류 | 설명 |
| method | 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정 속성값 : get, post - get : 데이터를 256 ~ 4,096byte 까지만 서버로 전송 가능 / 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남(보안성이 낮다.) - post : 입력한 내용의 길이에 제한❌, 사용자가 입력한 내용도 드러나지❌ |
| action | <form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정 |
| target | action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 지정 |
+) autocomplete 속성
자동완성 기능을 나타내는 속성으로 기본 속성값은 "on"이에요.
즉 자동완성이 기본으로 켜져 있어요.
<form action="" autocomplete="off">
/* 여러 폼 요소 */
</form>코드 예시로 자동완성기능을 끄기를 설정할 수 있는 걸 볼 수 있어요.
<fieldset>, <legend> 태그
두 가지의 요소의 공통점은 폼 요소를 그룹으로 묶는 태그예요.
<fieldset> 태그는 하나의 폼 안에서 여러 구역을 나누여 표시할 수 있고,
<legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙이는 태그예요.
<fieldset [속성="속성값"]> </fieldset>
<fieldset>
<legend>그룹 이름</legend>
</fieldset>
다음은 상품선택과 배송정보를 예시로 만든 <form> 태그예요.
<body>
<h3>롯데 자이언츠 티켓 예매</h3>
<form action="">
<fieldset>
<legend>날짜 선택</legend>
</fieldset>
<fieldset>
<legend>좌석 선택</legend>
</fieldset>
</form>
</body>
<label> 태그
<label> 태그는 <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용하고,
입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트예요.
<label> 태그 사용 시 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저가 인식함으로
사용자가 입력 요소에 초점을 맞추면 화면 판독기가 라벨을 크게 읽기 때문에 스크린 판독기 사용자에게 유용해져요.
<label> 태그 사용방법
1. 태그 안에 폼 요소 삽입
<!--기본형-->
<label>레이블명<input/></label>
<label>아이디(6자 이상)<input type="text"/></label>
2. <label> 태그와 폼 요소를 때로 사용하고 <label> 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결
<!--기본형-->
<label for="id명">레이블명<input id="id명"/></label>
<label for="user-id">아이디(6자 이상)</label>
<input type="text" id="user-id"/>+) 폼 요소의 id속성값을 <label> 태그의 for 속성에게 알려주는 방법으로
<label> 태그를 사용한 레이블과 사용자 정보를 입력받는 <input> 태그가 떨어져 있더라도
둘 사이를 쉽게 연결할 수 있다는 장점이 있어요.
여기까지 HTML Form 요소에 알아봤는데요.
제가 회원가입과 로그인 입력란이 Form 요소가 들어갔다는 게
참 재밌고 흥미로운 공부였어요.
'Frontend > HTML' 카테고리의 다른 글
| HTML - TEXT (1) | 2025.09.15 |
|---|---|
| HTML Element (0) | 2025.09.13 |
| HTML (0) | 2025.09.11 |