HTML 탐구생활 : input 태그와 그 외의 태그들

 

1. input 태그

input태그는 입력요소로 사용자로부터 입력값을 받을 수 있다. 

input태그는 type의 속성값에 따라 동작방식이 달라진다.

 

텍스트 관련 type

(1) type = "text" 디폴트 값으로 한 줄의 텍스트 필드를 생성한다. (2) type = "password" 값이 가려진 한 줄의 텍스트 필드를 생성한다.(비밀번호를 입력값으로 받을 때) (3) type = "search" 검색을 위한 한 줄의 텍스트 필드를 생성한다. (4) type = "tel" 전화번호를 입력할 수 있는 한 줄의 필드를 생성

 

이 4가지는 텍스트 관련 type 속성값으로 필요하다면 minlength(최소 길이), maxlength(최대 길이), placeholder(input창 안의 글씨) 등의 속성을 사용할 수 있다.

 

숫자 관련 type

(1) type = "number" 숫자를 입력할 수 있는 입력창을 생성한다(숫자가 아닌 다른 문자를 입력하면 입력이 되지 않는다) (2) type = "range" 값이 가려진 숫자를 입력하는 범위 위젯을 생성한다(보통 자바스크립트와 함께 사용) (3) type = "date" 연도와 월,일을 입력할 수 있는 입력창을 생성한다. 브라우저에 따라 달력을 열 수 있게 해서 날짜를 선택할 수 있다.

 

이 3가지는 숫자 관련 type의 속성값으로 필요하다면 min(최소치), max(최대치), step(숫자 간격)등의 속성을 사용할 수 있다.

 

체크 관련 type

(1) type = "checkbox" 값을 선택하거나 해체할 수 있는 체크박스를 생성한다. (2) type = "radio" 같은 name속성값을 가진 여러개의 선택 중 하나를 선택할 수 있는 라디오 버튼을 생성한다.

이 2가지는 체크 관련 type의 속성값으로 필요하다면 checked(체크됨 여부), name(input의 이름, 그룹화를 위해 필요함), value(서버로 넘길 실제 값)등의 속성을 사용할 수 있다.

 

기타 type

(1) type = "file" 파일을 지정할 수 있는 input창을 만든다. accept 속성을 이용하여 속성값으로 확장자명을 적으면 해당 확장자의 파일만 받는다. multiple속성을 사용하면 파일을 여러개 첨부할 수 있도록 해준다. (2) type = "hidden" 사용자들은 볼 필요가 없으나 submit할 때 같이 보낼경우 사용한다. (3) type = "email" 이메일 주소를 입력할 수 있는 필드를 생성한다. 얼핏보면 텍스트 필드처럼 보일 수 있지만 이메일 형식 유효성 검사를 한다는 점에서 차이가 있다.

 

** 대부분의 input이 사용가능한 속성 **

- value(기본적으로 input에 쓰여질 값)

- autofocus(페이지가 로딩될 때 input창 자동으로 포커스됨)

- readonly(사용자로 부터 입력값을 받지않고 읽기 전용)

- required(양식이 전송되기 위해 필수로 입력해야 하는 입력창)

- disabled(사용자가 입력을 할 수 없음)

 

 

2. label 태그와 button 태그

label 태그는 input태그의 이름이다. for속성을 이용해 어떤 input의 label인지 알 수 있다. 속성값으로 input의 id값이 들어간다.  for 속성을 적어준 경우 label을 클릭하더라도 input이 클릭된다(클릭 영역 확장)

 

button 태그는 말그대로 button을 생성하는 태그인데 type을 속성으로 가지고 속성값으로는 "button", "submit", "reset"을 가진다.

 

"button"은 아무런 기능을 수행하지 않고 "submit"의 경우 사용자로 부터 받은 입력값을 서버로 보내는 역할을 하고  "reset"은 입력받은 값을 초기화 한다. 

 

 

3. select 태그와 option태그

select 태그는 옵션을 선택할 수 있는 창(드롭다운 형식)을 생성한다.

먼저 form태그안에 select태그를 작성하고 select태그 내부에 option태그를 작성한다.

어떤 값이 페이지가 로딩 되었을 때 처음으로 뜨는 값으로 설정하고 싶다면 selected속성을 사용하면 된다.

 

ex)

<form>
   <label for="fruits">과일 목록</label>
   <select id="fruits">
     <option value="apple">사과</option>
     <option value="grape">포도</option>
     <option value="orange" selected>오렌지</option>
   </select>
</form>

 

** option 태그의 그룹화 **

option태그들을 그룹화 해줄때에는 optgroup이라는 태그를 사용해 그룹화 해줄 수 있다. label속성을 이용해 그룹의 이름을 지정해 줄 수 있다.

 

 

4. datalist 태그

 

datalist태그는 input태그와 연결할 수 있는 태그로 input창을 클릭했을 때 추천하는 값들을 드롭다운 형식으로 보여준다.

input의 list속성에 속성값으로 datalist의 id값을 적어주면 input과 datalist가 연결된다. datalist태그 내부에는 option태그를 적어주는데 value속성을 이용해 속성값으로 추천하는 값들을 적어준다(이 때 option태그는 닫는 태그가 없음)

 

ex)

<form>
  <label for="country">나라</label>
  <input type="text" id="country" list="country-list" />
  <datalist id="country-list">
    <option value="Korea">
    <option value="UK">
    <option value="Germany">
   </datalist>
</form>