HTML 공부하기 (4) 폼 요소 태그

폼 요소 태그 (form)

폼(form)은 사용자가 입력한 데이터를 웹서버로 전달하기 위한 구조

로그인, 회원가입, 검색창, 설문조사 같은 곳에서 항상 쓰임

​

<form action="전송 할 주소" method="post">

</form>

속성	의미	예시
action	데이터를 보낼 서버 주소	action="join.php"
method	전송 방식 (get 또는 post)	method="post"

• get: 주소창에 데이터가 보임 → 검색창 등
• post: 보이지 않음 → 로그인, 회원가입 등

​

​

입력 요소 <input>

(1)텍스트 입력

<input type="text" placeholder="이름을 입력하세요">

​

(2)아이디 / 비밀번호 입력

아이디 <input type="text" name="id">

한 줄짜리 텍스트 입력 (아이디)

​

name 속성이 중요

데이터를 서버에 보낼 때 id=입력값 형식으로 전송

​

비밀번호<input type="password">

<input type="password" placeholder="비밀번호">

입력 내용이 ●●● 로 가려짐

​

​

(3) 이메일/ 숫자 / 날짜 등

<input type="email" placeholder="이메일 주소">

<input type="number" min="1" max="10">

<input type="date">

​

선택 요소

(1)라디오 버튼 (하나만 선택)

<label><input type="radio" name="gender" value="male"> 남자</label>

<label><input type="radio" name="gender" value="female"> 여자</label>

​

name이 같아야 한 그룹으로 묶임

​

(1)체크박스 (여러 개 선택 가능)

<label><input type="checkbox" name="agree1"> 이용약관 동의</label>

<label><input type="checkbox" name="agree2"> 개인정보 수집 동의</label>

​

드롭다운 목록 <select>

<select name="태어난 년도">

<option value="2025">2025</option>

<option value="2025">2024</option>

<option value="2025">2023</option>

<option value="2025">2022</option>

</select>

​

<select>

<option>2023</option>

<option>2022</option>

<option>2021</option>

<option selected>2020</option>

<option>2019</option>

</select>

​

2020년도가 처음 선택되어있게

​

텍스트 영역 <textarea>

여러 줄 입력할 때 (메모, 자기소개 등)

​

<textarea rows="5" cols="40" placeholder="내용을 입력하세요"></textarea>

​

파일 업로드 <input type="file">

​

<input type="file" name="upload">

➡ 사용자가 컴퓨터에서 파일을 선택해 업로드 가능

​

전송 버튼

(1) 기본 버튼

<input type="submit" value="전송하기">

​

(2) 이미지 버튼

<input type="image" src="send.png" alt="전송">

​

(3) 일반 버튼

<button type="button">그냥 버튼</button>

​

​

​

기타 속성들

속성	설명	예시
name	서버로 전달될 데이터 이름	<input name="user_id">
value	기본값	<input value="기본값">
placeholder	안내 문구	<input placeholder="입력하세요">
required	필수 입력	<input required>
disabled	비활성화	<input disabled>
readonly	읽기 전용	<input readonly>
checked	기본 선택 (radio, checkbox)	<input type="radio" checked>