input label 태그 연결

 

---

 

html에서 사용자 데이터를 입력 받을 때 input 태그를 사용 합니다.

 

1. input 속성들

type="text" : 문자를 입력

type="password" : 비밀번호 입력

type="button" : 버튼

type="submit" : form 데이터를 제출시

type="reset" : form 데이터 초기화

type="radio" : 라디오 버튼 입력시

type="checkbox" : 체크박스 입력시

type="file" :  파일 업로드 시

type="hidden" : 화면에 보이지 않는 숨겨진 요소

 

2. name 속성

name 속성은 서버로 보내질 이름을 입력 합니다.

 

3. input 태그와 함께 쓰이는 label 태그

input 태그는 label 태그와 함께 쓰여 input 의 설명을 보충 합니다.

label 태그 말고도 다른 태그로 쓸수 있지만, label 태그가 웹 표준 입니다.

label 의 'for' 속성과 input 의 'id' 속성을 같은 값으로 입력하여

두 태그를 연결 할 수 있습니다.

<label for="name">name : </label>
<input type="text" id="name" name="person">

또한 'for' 과 'id' 를 사용하지 않아도

label 태그로 input 태그를 감싸면 연결되는 효과를 볼 수 있습니다.

하지만 이보다 웹표준인 위에 방식을 따르는 것이 더 좋습니다.

<label>
	name : 
	<input type="text" name="person">
</label>

 

4. select 태그와 option 태그

input 태그로는 드롭 박스 와 같은 '선택 리스트' 입력 창을 만들기 어렵습니다.

select 태그와 option 태그로 만들 수 있습니다.

<select>
	<option value="apple">apple</option>
	<option value="banana">banana</option>
	<option value="orange">orange</option>
</select>