form 태그

✒️ 2025-05-16 11:09 내용 수정

참고 자료 : TCHSchool input forms, mdn web docs your first form, mdn web docs form

웹 페이지에서 사용자로부터 입력을 받거나, 사용자가 입력한 데이터를 서버로 보낼 때 사용하는 태그다.
form 태그로 받은 데이터를 서버 등으로 전송하기 위해 input 태그에 name 속성을 사용한다.
- 선택자(Selector) 참고.

<form action="/handling-form-page" method="post">
	<input type="text" name="name">
	<textarea name="message"></textarea>
</form>

속성	옵션	설명
`method`		form 요소의 전달 방식 선택
	`GET`	서버에 데이터를 요청 시 사용 form 데이터가 `action` URL에 `?` 구분자와 함께 첨부됨
	`POST`	데이터 전송을 기반으로 하는 요청 메소드로 서버로 데이터 제출 시 사용 URL에 데이터가 노출되지 않음
`name`		form 태그 내의 `<input>` 등의 태그에서 데이터를 전송할 양식을 지정 form의 이름을 지정하여 스크립트나 스타일에서 참조 가능
`enctype`		`method="post"`일 때 인코딩 타입 지정 - `application/x-www-form-urlencoded` : 기본값 - `multipart/form-data` : `<input type="file">`을 포함할 때 파일 인코딩 추가 - `text/plain` : 디버그 목적으로 사용
`action`		데이터를 서버로 전송할 때 해당 데이터를 직접 처리할 서버 측 Script 파일이나 서버의 엔드 포인트 지정
`target`		제출 결과를 표시할 위치 지정
	`_blank`	새 창 또는 새 탭
	`_self`	현재 창에서 열림
	`_parent`	부모 프레임에서 열림
	`_top`	현재 프레임의 최상위 창에서 열림
`novalidate`		form이 제출될 때 유효성 검사를 진행하지 않음
`autocomplete`		브라우저의 자동완성 기능 사용

자주 사용하는 컴포넌트 태그

form 태그에는 다양한 input 태그 요소를 넣어 사용자로부터 입력을 받아 정보를 수집하고, 서버로 데이터를 전송할 수 있다.
input 태그 참고.

태그	설명
`<input>`	사용자로부터 데이터를 입력받는 다양한 필드 `type` 속성에 따라 텍스트, 체크박스, 라디오 등으로 동작
`<textarea>`	여러 줄의 텍스트를 입력 받는 필드. 메모장처럼 사용 가능
`<button>`	버튼을 생성 `type` 속성에 따라 `submit`, `reset`, `button` 역할 수행
`<select>`	드롭다운 리스트를 생성 여러 옵션 중 하나를 선택하게 함
`<option>`	`<select>` 안에서 선택 가능한 항목을 정의
`<label>`	폼 요소에 대한 설명을 제공하고, 연결된 입력 필드를 클릭할 수 있도록 돕는 역할 검색 최적화(SEO)와 접근성 향상에 중요
`<fieldset>`	관련 폼 요소들을 그룹화하는 데 사용 시각적 구분과 구조화에 도움
`<legend>`	`<fieldset>`의 제목 역할 그룹의 설명을 제공
`<datalist>`	`<input>` 요소에 자동 완성 가능한 옵션 리스트를 제공 사용자가 입력 도중 선택 가능

<form action="/submit" method="post">
	<!-- 텍스트 입력 -->
	<label for="username">사용자 이름:</label>
	<input type="text" id="username" name="username" required>
	<br><br>
	
	<!-- 비밀번호 입력 -->
	<label for="password">비밀번호:</label>
	<input type="password" id="password" name="password" required>
	<br><br>
	
	<!-- 이메일 입력 -->
	<label for="email">이메일:</label>
	<input type="email" id="email" name="email">
	<br><br>
	
	<!-- 라디오 버튼 -->
	<p>성별:</p>
	<input type="radio" id="male" name="gender" value="male">
	<label for="male">남성</label>
	<input type="radio" id="female" name="gender" value="female">
	<label for="female">여성</label>
	<br><br>
	
	<!-- 체크박스 -->
	<p>관심 분야:</p>
	<input type="checkbox" id="html" name="interest" value="HTML">
	<label for="html">HTML</label>
	<input type="checkbox" id="css" name="interest" value="CSS">
	<label for="css">CSS</label>
	<input type="checkbox" id="js" name="interest" value="JavaScript">
	<label for="js">JavaScript</label>
	<br><br>
	
	<!-- 드롭다운 목록 -->
	<label for="country">국가:</label>
	<select id="country" name="country">
		<option value="kr">대한민국</option>
		<option value="us">미국</option>
		<option value="jp">일본</option>
	</select>
	<br><br>
	
	<!-- 텍스트 영역 -->
	<label for="message">메시지:</label><br>
	<textarea id="message" name="message" rows="4" cols="50"></textarea>
	<br><br>
	
	<!-- 데이터 목록 -->
	<label for="browser">브라우저 선택:</label>
	<input list="browsers" id="browser" name="browser">
	<datalist id="browsers">
		<option value="Chrome">
		<option value="Firefox">
		<option value="Safari">
		<option value="Edge">
		<option value="Opera">
	</datalist>
	<br><br>
	
	<!-- 파일 업로드 -->
	<label for="resume">이력서 업로드:</label>
	<input type="file" id="resume" name="resume">
	<br><br>
	
	<!-- 제출 및 초기화 버튼 -->
	<button type="submit">제출</button>
	<button type="reset">초기화</button>
</form>

예제 코드

function check1() {
	var f = document.forms[0]; // form 객체들 중 1번
	
	// form 태그 내 각각의 name 속성을 가진 input 태그의 value 접근
	var myID = f.m_id.value;
	var myPWD = f.m_password.value;
	var myAge = f.m_age.value;
	
	// 유효성 검사
	if (myID == '') {
		alert('아이디를 입력해주세요');
		return;
	}
	
	if (myAge == '') {
		alert('나이를 입력해주세요');
		return;
	}
	
	if (myPWD == '') {
		alert('비밀번호를 입력해주세요');
		return;
	}
	
	// form 태그에서 서버로 데이터 전송
	f.method = "GET";

	// 데이터를 전달할 페이지를 설정
	f.action = "login.html";
	
	// 입력된 데이터를 전송
	f.submit();
	
}

// name 속성을 가진 form 태그 정보 전송
function check2() {
	var f = document.f;
	var month = f.month;
	f.submit();
}

// 함수로 form 태그 정보를 전달받아 전송
function check3(f) {
	var email = f.m_email;
	f.submit();
}

<form>
	<table border="1">
		<tr>
			<td>ID : </td>
			<td><input name="m_id" placeholder="아이디를 입력해주세요"></td>
		</tr>
		<tr>
			<td>AGE : </td>
			<td><input name="m_age" placeholder="나이를 입력해주세요"></td>
		</tr>
		<tr>
			<td>PW : </td>
			<td><input name="m_password" type="password" 
			placeholder="비밀번호를 입력해주세요"></td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<input type="button" value="전송" onclick="check1()">
			</td>
		</tr>
	</table>
</form>

<form name="f" method="POST" action="calendar.jsp">
	<table border="1">
		<tr>
			<td colspan="2" align="center">
				<input name="m_month" type="month">
				<input type="button" value="전송" onclick="check2()">
			</td>
		</tr>
	</table>
</form>

<form action="email.html" method="GET">
	<table border="1">
		<tr>
			<td>
				<input name="m_email" type="email" 
				placeholder="이메일을 입력해주세요">
				<input type="button" value="전송" 
				onclick="check3(this.form)">
			</td>
		</tr>
	</table>
</form>

form 1.png