[HTML] 폼(Form)태그, input 태그(1)

폼(Form)

• 입력 양식, 입력 컨트롤
• 클라이언트(사용자)로부터 입력장치(키보드, 마우스, 터치 등)을 통해서 데이터를 입력받는 역할
• 입력 데이터 → 서버로 전송 → 업무 활용 or 데이터베이스 저장 등..
  ex) 텍스트 박스, 버튼, 체크 박스, 라디오 버튼 등..
• <form> + <form>의 자식 태그들..

<form method="GET" action="ex18_server.jsp">
	 	나이: <input type="text" name="age">
	 	<br>
	 	<input type="submit" value="보내기">
</form>

 

form 태그

• 모든 입력 컨트롤을 감싸는 컨테이너
• 스스로는 랜더링 결과가 없다. (출력X)
• 입력한 값을 서버로 전송하는 역할(★★★★★)

 

form 태그의 속성

form.method

• 데이터를 전송하는 방식
• 택배(일반 우편 | 등기 우편)

1. POST
   • ex18_server.jsp
   • 데이터를 상자 안에 담아서 전송
   • 데이터가 노출X → 보안O
   • 전송하는 데이터의 최대 길이 제한 → 무제한
2. GET
   • ex18_server.jsp?age=20
   • 데이터를 송장에 붙여서 전송
   • 전송되는 데이터가 노출(주소창) → 보안X
   • 전송하는 데이터의 최대 길이 제한 → 256자 → 8,000 바이트
   • 긴 데이터는 전송X

주소창에 내가 보낸 데이터의 이름과 값이 추가된다.

 

보통 네트워크에서 데이터를 주고 받을 때 ex)‘홍길동입니다.’를 잘게 쪼개서 데이터를 담는 상자(패킷)에 나눠 담은 후, 최종적으로 데이터를 받을 때 상자 번호에 맞춰서 각 데이터들을 합친다.

 

form.action

• 데이터를 수신하는 서버측 URL
• 받는 사람 주소
• 서버측 동작하고 있는 프로그램 주소 → JSP, Servlet, Spring 주소

 

---

 

input 태그

• 인라인 태그
• 단독 태그

 

input 태그의 속성

• input.type: 입력 컨트롤 종류 지정
• input.name: 식별자. HTML에서 사용. 서버측과 연동할 때 사용
• input.id: 식별자. CSS, JavaScript에서 사용
• input.class: 식별자. CSS, JavaScript에서 사용
• input.size: 길이(글자수)
• input.maxlength: 최대 입력 길이(글자수) + 유효성 검사(서버에서 받아서 DB에 넣을 때(컬럼의길이제한에 맞춰서))
• input.value: 컨트롤의 입력값(현재 입력값)
• input.readonly: 읽기 전용(flag type)(전원 ON) → 서버로 전송이 가능
• input.disabled: 비활성화(전원 OFF) → 서버로 전송이 불가능
• input.accesskey: 바로가기(Alt + 조합키)
• input.autofocus: 자동 포커스
• input.autocomplete: 자동 완성 끄기

 

input.type의 속성값 :: 텍스트박스(단일 라인)

• <input type="text">

<input type="text" name="txt1" id="txt1" class="txt" size="30" value="Hong" accesskey="s" autofocus autocomplete="off">

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

input.type의 속성값 :: 텍스트박스(다중 라인)

• <textarea></textarea>
• 쌍태그
• 대부분의 속성은 텍스트 박스와 유사
• maxlength 속성이 없다. → 많은 양의 텍스트를 입력 받는 컨트롤이기 때문에
• value 속성이 없다. → 초기 값은 PCDATA(쌍태그 안에)로 입력한다.
• size → cols, rows로 조절(브라우저 기능으로 크기 조절 창이 보이는것은 style="resize:none;"설정으로 없애기 가능)

<textarea cols="50" rows="5" style="resize:none;">초기값</textarea>

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

input.type의 속성값 :: 텍스트 박스(암호)

• <input type="password">
• 암호 상자, Password Box, Masked Text Box
• 모든 속성이 텍스트 박스와 동일
• value 속성은 사용 금지!!! → 보안 때문에 (집을 나오면서 열쇠를 현관에 꽂아놓고 나온거나 다름 없다!)

<input type="password">

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

input.type의 속성값 :: 체크박스

• <input type="checkbox">
• 논리값 입력
• 다중 선택 컨트롤
• <label> 처리 시 해당 라벨을 눌러도 체크 박스가 선택되도록 설정 가능

<h3>취미 선택</h3>
<input type="checkbox" id="cb1" checked> <label for="cb1">독서</label>
<input type="checkbox" id="cb2"> <label for="cb2">달리기</label>
<label><input type="checkbox"> 영화보기</label>

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

 

input.type의 속성값 :: 라디오 버튼

• <input type="radio">
• 체크 박스와 유사
• 단일 선택 컨트롤(하나의 그룹으로 묶으면 유일하게 1개만 선택하도록 설정 가능) → <name> 속성 사용

<input type="radio" name="rbGender"> 남자
<input type="radio" name="rbGender"> 여자
<input type="radio" name="rbGender" checked> 선택안함

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

셀렉트 박스

• <select></select>
• 콤보 박스(Combo)
• 드랍 다운 리스트(Drop Down List)
• 단일 선택 컨트롤 & 다중 선택 컨트롤
• <optgroup>  + label 속성 사용 시, 항목 분류 가능
• <multiple> 속성 사용 시, 다중 선택 가능(드래그 또는 Shift + 선택)
• <size="n"> 속성 사용 시, n개의 option을 보여주도록 크기 설정 가능

셀렉트 박스:
<select size="5"> <!-- 5개의 option을 보여주는 크기로 만들어라 -->
	 	<option>강아지</option>
	 	<option>고양이</option>
	 	<option>병아리</option>
</select>
	 
<hr>

셀렉트 박스:
<select size="5" multiple> <!-- 다중 선택 > 드래그 or shift + 선택 -->
	 	<option>강아지</option>
	 	<option>고양이</option>
	 	<option>병아리</option>
</select>
	 
<hr>
 
셀렉트 박스:
<select>
		<optgroup label="자바">
		<option>클래스</option>
		<option>메소드</option>
		<option>배열</option>
		</optgroup>
		
		<optgroup label="오라클">
		<option>테이블</option>
		<option>서브쿼리</option>
		<option>조인</option>
		<option>프로시저</option>
		</optgroup>
		
		<optgroup label="HTML">
		<option>태그</option>
		<option>엔티티</option>
		<option>PCDATA</option>
		</optgroup>
</select>

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

input.type의 속성값 :: 파일 업로드

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

input.type의 속성값 :: 히든 태그

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

각종 버튼들

input.type의 속성값 :: 전송 버튼

• <input type="submit">
• form 안에 있는 내용을 서버쪽으로 전달하는 역할
• value값 미 설정 시, 기본 텍스트는 브라우저마다 다르다.

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

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

input.type의 속성값 :: 취소 버튼

• <input type="reset">

취소 버튼: <input type="reset" value="초기화">

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

 

input.type의 속성값 :: 이미지 버튼

• <input type="image">

이미지 버튼: <input type="image" src="images/radio-button.png">

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

input.type의 속성값 :: 버튼

• <input type="button">
• 단독 태그
• 속성값이기 때문에 'Enter', 이미지 등을 버튼에 추가할 수 없음. 텍스트만 가능
• 아무 기능이 없기 때문에 이 버튼을 가장 많이 사용!(기능을 JavaScript로 우리가 정의해서 사용할 수 있기 때문)

버튼: <input type="button" value="버튼" onclick="location.href='http://naver.com';">

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

button(버튼) 태그

• <button></button>
• 쌍태그
• 버튼의 라벨을 PCDATA로 넣기 때문에 내부에 태그 작성 가능 → 이미지 등 추가 가능

버튼: <button type="button">버튼</button>

 

See the Pen Untitled by 박나래 (@kdzhfgez-the-selector) on CodePen.

 

2가지 타입의 버튼이 잔존하는 이유?
: 쌍태그 버튼이 단독 태그 버튼보다 뒤늦게 만들어졌기 때문에 현재 둘 다 존재하고 있다.

 

 

+ 현재 HTML5에는 input 태그 속성으로 위에서 설명한 것 외에 더 여러가지가 있습니다. 다다음 포스트에서 HTML5에 대해 기술하며 추가 속성에 대해 언급할 예정입니다!

 

*글 작성에 참고한 내용: 학원 쌤의 열정적인 수업