입력 폼 기초 (Basic Forms)
웹사이트에 회원가입을 하거나 로그인을 할 때, 아이디를 입력하고 버튼을 누르죠? 이처럼 사용자로부터 정보를 입력받아 서버(데이터베이스)로 전송하기 위한 "설문조사 양식지"를 Form이라고 부릅니다.
📦 우체국 소포 상자 배송 과정
<form> 상자
input (아이디 내용물)
input (비밀번호 내용물)
submit 버튼 (배송 출발!)
🚚
method="POST"
🗄️
서버 (도착지)
action="/submit"
action="/submit"
🏷️ 라벨(Label)의 중요성
작은 체크박스나 동그란 라디오 버튼을 마우스로 클릭하거나 스마트폰에서 터치하기 힘들었던 적 있으신가요? <label> 태그를 이용해 글자("아이디" 등)와 입력창을 서로 짝지어(연결해) 주면, 글자만 클릭해도 입력창에 커서가 깜빡이거나 체크가 됩니다. 사용자의 편의성을 대폭 올려주는 꿀팁입니다!
| 태그명 | 주요 속성 | 설명 |
|---|---|---|
<form> | - | 설문지 종이 그 자체입니다. 안에 있는 입력창들을 묶어서 서버로 묶음 배송(전송)하는 역할을 합니다. |
action, method | 데이터를 전송할 목적지 주소(action)와 전송 방식(method: 빠르고 투명한 GET, 안전하게 숨긴 POST)을 지정합니다. | |
<input> | - | 사용자로부터 데이터를 직접 입력받는 빈칸 핵심 태그입니다. (닫는 태그 없음) |
type, name | 어떤 형태(text, password, checkbox 등)로 입력받을지와 이 데이터의 고유한 이름표(name)를 지정합니다. | |
<label> | - | 입력 창의 이름(라벨)을 정의합니다. 글자를 클릭해도 연결된 입력창이 선택되어 편의성이 높아집니다. |
for | 연결할 <input> 태그의 id 값과 동일하게 맞추어 짝을 지어줍니다. | |
<button> | - | 사용자가 누를 수 있는 클릭 버튼을 생성합니다. |
type | submit(서버로 양식 전송), reset(입력 초기화), button(단순 클릭 버튼용) 중 역할을 지정합니다. |
<form action="/submit-login" method="POST">
<h3>로그인</h3>
<div>
<label for="userId">아이디</label><br>
<input type="text" id="userId" name="userId" placeholder="아이디를 입력하세요" required>
</div>
<br>
<div>
<label for="userPw">비밀번호</label><br>
<input type="password" id="userPw" name="userPw" placeholder="비밀번호를 입력하세요" required>
</div>
<br>
<button type="button" onclick="alert('로그인 버튼 클릭됨!')">
로그인 하기
</button>
</form>