[HTML] 사용자 입력 데이터 유형 (input type, label )

 

HTML에서는 다양한 타입의 form형태를 통해 input 요소를 이용하여 사용자로부터 입력을 받을 수 있다.

 

input유형은 닫는 태그가 없으며 type, value, name속성이 있다.

 

type : input 태그의 유형

vlaue : 사용자 세팅 초기값

id(name) : 서버에 전송될 input요소의 이름이며 이 요소가 있어야 브라우저가 해당 요소를 인식할 수 있다.

 

input 유형 종류(input-type)

대표적인 HTML input type은 다음과 같다.

 

 

1.Text

 

<input type = "text">  / 텍스트로 입력받을 수 있음

 

2.Radio

<input type = "radio"> / 단일 선택 체크박스

 

 

3.Checkbox

<input type = "checkbox"> / 다중 선택 체크박스

 

4.Submit

<input type = "submit"> / 폼 양식을 서버에 전송

 

5.Button

<input type = "button"> / 버튼

 

6.Reset

<input type = "reset"> / 폼 초기화

 

 

7.File

<input type = "file"> / 파일 업로드

 

 

8.date

<input type = "date"> / 날짜 정보 입력

 

 

9.number

<input type = "number"> / 숫자 정보 입력

 

 

10.Email

<input type = "email"> / 이메일 형식 입력

 

 

11.Color

<input type = "color"> / 색상 입력

 

 

12.Range

<input type = "range" min="0" max="50"> / 범위 입력

 

 

13.Search

<input type = "search"> / 검색 인풋 요소

 

14.Select-box

HTML CSS JAVASCRIPT

<form>
  
  <select>
    <option>HTML</option>
    <option>CSS</option>
    <option>JAVASCRIPT</option>
  </select>
  
</form>

option태그를 select로 감싼 형태이다.

---

<label>

label 태그는 input 요소에 이름을 붙일 수 있다.

 

형식

<label for="value">

이때 브라우저의 인식을 위해(서버에 전송을 위해)

for 속성은 input요소의 id(name)속성과 일치시켜 연결시켜주어야 한다.

 

*id는 중복이 안되며 name은 중복이 된다는 점에서 다르다.

자바스크립트에서는 중복이 되지 않는 id를 사용함

 

예시

<label for="id">ID:</label><br/>
<input type="text" id="id"/><br/>
<label for="password">PASSWORD:</label><br/>
<input type="text" id="password"/>

ID:PASSWORD:

(action은 데이터가 제출될 때 서버에서 수행할 작업을 정의한다.)

 

 

 <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
 <label for="vehicle1"> I have a bike</label><br>
 <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
 <label for="vehicle2"> I have a car</label><br>
 <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
 <label for="vehicle3"> I have a boat</label>

 

이 코드가 브라우저로 출력될 때는 아래와 같이 표현된다.

 

I have a bike

 

I have a car

 

I have a boat