[HTML - 7] input의 type 속성값

input

HTML에서는 input의 다양한 타입을 사용하여 사용자로부터 입력을 받을 수 있습니다.
HTML에서 사용할 수 있는 대표적인 input 요소의 type 속성은 다음과 같습니다.

 

1. 텍스트 입력(text)

2. 비밀번호 입력(password)

3. 라디오 버튼(radio)

4. 체크박스(checkbox)

5. 파일 선택(file)

 

---

type = "text"

<input>태그의 type 속성값을 "text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있습니다.

<input type="text" name="search">

---

type = "password"

<input>태그의 type 속성값을 "password"로 설정하면, 사용자로부터 비밀번호를 입력받을 수 있습니다.

비밀번호를 입력받기 때문에 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시됩니다.

<input type="password" name="password">

---

type = "radio"

<input>태그의 type 속성값을 "radio"로 설정하면,

사용자로부터 여러 개의 옵션(option) 중에서 단 하나의 옵션만을 입력받을 수 있습니다.
이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 합니다.

<form>
    <input type="radio" name="lecture" value="html" checked> HTML <br>
    <input type="radio" name="lecture" value="css"> CSS <br>
    <input type="radio" name="lecture" value="java"> JAVA <br>
    <input type="radio" name="lecture" value="cpp"> C++
</form>

재강조! 정확한 입력값 전송을 위해서 radio 타입의 모든 input 요소가 반드시 같은 name 속성을 가지고 있어야 합니다.

추가로! checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있습니다.

---

type = "checkbox"

<input>태그의 type 속성값을 "checkbox"로 설정하면, 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있습니다.
체크박스는 라디오 버튼과는 달리 여러 개의 옵션을 한 번에 입력받을 수 있습니다.
이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 합니다.

<form>
    <input type="checkbox" name="lecture" value="html" checked> HTML <br>
    <input type="checkbox" name="lecture" value="css"> CSS <br>
    <input type="checkbox" name="lecture" value="java"> JAVA <br>
    <input type="checkbox" name="lecture" value="cpp"> C++
</form>

checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있습니다.
또한, disabled 속성을 이용하여 해당 옵션을 선택할 수 없게 설정할 수도 있습니다.

---

type = "file"

<input>태그의 type 속성값을 "checkbox"로 설정하면, 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있습니다.
체크박스는 라디오 버튼과는 달리 여러 개의 옵션을 한 번에 입력받을 수 있습니다.
이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 합니다.

<form>
    <input type="file" name="upload_file" accept="image/*">
</form>

accept 속성을 이용하여 입력받을 수 있는 파일의 확장자 및 종류를 명시할 수 있습니다.

---

HTML5에서 추가된 input 요소의 타입

1. 숫자 입력(number)
2. 입력 범위 지정(range)
3. 색상 입력(color)
4. 날짜 입력(date)
5. 시간 입력(time)
6. 날짜와 시간 입력(datetime-local)
7. 연도와 월 입력(month)
8. 연도와 주 입력(week)
9. 이메일 입력(email)
10. URL 주소 입력(url)
11. 전화번호 입력(tel)
12. 검색어 입력(search)

 

이에 관련한 내용은 아래 홈페이지에서 확인이 가능합니다!

http://www.tcpschool.com/html/html5_element_inputtype

코딩교육 티씨피스쿨