HTML <INPUT> 총정리

1. input 속성

속성
type	입력태그의 유형
value	입력태그의 초기값을 말하며 사용자가 변경가능
name	서버로 전달되는 이름
id	page에서 중복사용X , 자바스크립트에서 다루기위해 지정

id와 name의 차이 

< input type="text" id="title" name="title">

1. id 속성 (id="title")

• document.all.id.value
• id.value
• document.getElementById("폼 id").value

id 속성은 page 안에서 중복으로 사용할 수 없으며, 주로 JavaScript에서 다루기 위해 지정한다.

name 속성으로도 JavaScript를 통해 속성이나 값을 변경할 수 있는데, 중복 값을 가질 수 있어 id 속성의 값으로 주로 접근한다.

document.getElementById(id)를 통해서 해당 엘리먼트 Object를 가져올 수 있다.

id 속성으로 설정된 값은 Server단의 파라미터값으로 넘어가지 않기 때문에, Server단에서 접근이 불가능하다.

2. name 속성 (name="title")

• document.폼 객체명.폼 원소명.value
• document.getElementsByName("name")

name 속성은 page 영역에서 중복되어 사용이 가능하며, action에 해당하는 페이지에 전달할 수 있는 파라미터로 사용한다.

GET/POST 방식으로 값을 전달하고 싶은 tag에 사용한다. 예를 들어 Form 객체(input, radio, checkbox, ...)에서 전송되는 파라미터의 Key 값으로 사용한다.

태그의 name 값이 키(Key)로 해서 값(Value)가 전송된다.
즉, request에 값이 전달될 때 Map과 마찬가지로 Key와 Value 쌍의 형식으로 데이터가 저장된다.

Server단에서 request.getParameter(parameterName) 으로 값을 가져온다.

 

input name태그의 value를 서버로 보냄

 

2. input type 속성

 

<span>과일이름선택</span>  //label대신 사용 ? 왜?
<input type="hidden" name="fruit-nm">
<select type="select" name="fruits">	
	<option value="banana">바나나</option>
    <option value="apple">사과</option>
    <option value="grape">포도</option>
</select>

• hidden
  
  • 화면상에는 표시되지 않지만 서버에 입력 form을 전송시 함께 전송되는 요소입니다.
  • 예로 select를 활용해서 한글로 select하면 hidden태그로 사용된 input value를 전달하는 방식을 사용한다
• search
  
  • 검색 상자를 만드는 텍스트 필드입니다. 일반 텍스트 상자와 거의 동일하며 뒤쪽에 x로 입력 내용을 한번에 지울 수 있습니다.
• url
  • 웹 주소를 입력하기 위한 유형입니다. 반드시 http://로 시작하는 사이트 주소를 입력해야 합니다.
• radio / checkbox
  • 객관식처럼 제한된 범위내에서 사용자가 선택할 수 있도록 도와주는 유형. checkbox는 여러개 radio는 한개만 선택 가능합니다. label태그와 같이 사용 

<label><input type="checkbox" name="korean" value="국어">국어</label>
<label><input type="checkbox" name="english" value="영어">영어</label>
<label><input type="checkbox" name="math" value="수학">수학</label>

<label><input type="radio" name="swim" value="수영">수영</label>
<label><input type="radio" name="soccer" value="축구">축구</label>

• file
  • 사용자가 파일을 첨부하고 싶을 때 화면에 표시되는 유형입니다.
• submit
  • 사용자가 입력한 내용을 웹 서버에 제출하기 위한 유형입니다. 모든 form태그는 submit 유형을 하나 이상 포함해야 합니다. 
• reset
  • 사용자가 입력한 모든 정보를 지울 수 있습니다. form의 내용을 처음부터 입력하고 싶을때 활용됩니다.