[HTML] form 태그

[개요]

<form>태그는 웹 페이지에서의 입력 양식을 의미합니다. 로그인 창이나, 회원가입 폼 등이 이에 해당됩니다.

텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 벡엔드 서버에 양식이 전달되어 정보를 처리하게 됩니다.

 

[속성]

• name : 폼의 이름
• action : 폼 데이터가 전송되는 백엔드 URL
• method : 폼 전송방식(GET / POST)

 

[개요 - input태그]

<form>태그는 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그입니다. 실제로 사용자가 양식을 입력하기 위한 태그는 <input>태그 등이 사용됩니다.

type 속성을 통해 종류를 나타내며, name을 통해 데이터의 이름, value를 통해 기본값을 지정합니다.

 

[type - 속성]

text : 일반문자

password : 비밀번호

button : 버튼

submit : 양식 제출용 버튼

reset : 양식 초기화용 버튼

radio : 한개만 선택할 수 있는 컴포넌트

checkbox : 다수를 선택할 수 있는 컴포넌트 

file : 파일 업로드

hidden : 사용자에게 보이지 않는 숨은 요소

 

위와 같은 유형이 있으며, HTML5에서는 더 다양한 종류의 input 속성이 있습니다.

 

[사용법]

<form>
	<p>
		<strong>아이디</strong>
		<input type="text" name="name" value="아이디 입력">
	</p>
	<p>
		<strong>비밀번호</strong>
		<input type="password" name="password" value="비밀번호 입력">
	</p>
	<p>
		<strong>성별</strong>
		<input type="radio" name="gender" value="M">남자
		<input type="radio" name="gender" value="F">여자
	</p>
	<p>
		<strong>응시분야</strong>
		<input type="checkbox" name="part" value="eng">영어
		<input type="checkbox" name="part" value="math">수학
	</p>
	<p>
		<input type="submit" value="제출">
	</p>
</form>

[HTML 입력]

[결과]