form-lable for와 input id

1. input 태그 type속성

 

 

 

2. 텍스트,비밀번호 필드에서 사용하는 주요속성

1, size

텍스트와 비밀번호 필드의 길이를 말한다.

즉 화면에 몇글자가 보이도록 할것인지 지저한다.

예) 최대한 입력할 수있는 글자수가 10인데 size속성값을 5로 지정하면 필드크기는 5개 글자 크기에 맞추고 나머지 5개글자는 화면에 보이지 않게 된다.

 

2. value

텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용이다.

이 속성을 사용하지 않으면 빈 텍스트 필드가 표시된다. 비밀번호 필드에서 사용하지 않는 속성이다.

 

3. maxlength

텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정한다. 

//

 

input type =""search" 일때 

웹브라우저 화면으로 볼때는 텍스트 필드와 똑같지만, 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식된다.

크롬이나 엣지 브라우저를 비롯해 모바일 기기의 웹 브라우저에서는 이 필드에 검색어를 입력하면 오른쪽에 X가 표시되어 검색어를 손쉽게 지울 수 있다.

 

3. labe for 와 input id는같아야한다.

 <label>태그의 for속성과 폼요소의 id속성을 이용해 서로 연결이 되어진다.

폼 요소의 id속성값을 <label>태그의 for속성에게 알려주는 방법을 사용한다.

 

 

 

 

 

// 팀원 질문

" size는 문자의 수를 말함을 얘기했는데 30자가 넘어가도 입력이 된다. "

책에서는

<label>아이디

                <input type="text" id="user_id" size="30" maxlength="10">

</label>

 

검색해보니size는 문자수를 입력하는 필드의 가로길이를 얘기한다.

문자수를 제한하고 싶을 경우는 maxlength를 이용해야 한다.

(책이 헷갈리게 써놓았군.!) 

 

 

경우에 따라서 label에 for를 넣는 경우도 있고, 아닌 경우도 있다. 왜요?

 

그럼 아래같은 경우는 왜 label for를 안썼을까?

 

label안에 input이 있다.

ex.

<label for="user_name">이름:</label>
<input type="text" id="user_name">

에서, 이것은 "이름"이라는 라벨을 클릭하면 id가 "user_name"인 입력 필드로 포커스가 이동될 수 있도록 연결된 것입니다.

 

비교

label요소의 for속성은 일반적으로 라벨과 연결된 입력 요소를 가리킨다.

 이 경우에는 <label>요소 안에 <input>요소가 직접 포함되어 있으므로 for속성을 사용하지 않고도 라벨과 입력요소가 연결된다.
<label>요소 안에 있는 <input>요소는 라벨의 자식요소로 포함되어 있기 때문에 사용자가 라벨을 클릭하면 연결된 입력 요소에 대한 동작이 발생한다.