> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/html/form/input.md).

# \<INPUT>

## Input tag

`<input>` 태그를 이용하면 웹에서 주로 사용하는 사용자 데이터를 입력 받을 수 있는 도구를 생성할 수 있다. 이를 통하여 데이터를 전달 받아 원하는 형태로의 사용이 가능하다.

{% embed url="<https://codepen.io/hiphop5782/pen/vYJXLPw>" %}

### type

`type` 속성을 통해 입력창의 형태를 결정할 수 있다. 사용자의 입력은 상황에 따라 다양하게 처리되어야 하므로 상황에 맞는 type을 선택하여야 한다.

<table><thead><tr><th width="167.9226923095382" align="center">type</th><th>설명</th></tr></thead><tbody><tr><td align="center">text</td><td>기본 한 줄 입력 도구</td></tr><tr><td align="center">password</td><td>입력한 값이 가려지는 도구</td></tr><tr><td align="center">date</td><td>연,월,일을 입력할 수 있는 도구</td></tr><tr><td align="center">time</td><td>시간을 선택할 수 있는 도구</td></tr><tr><td align="center">datetime</td><td>날짜와 시간을 선택할 수 있는 도구</td></tr><tr><td align="center">color</td><td>색상을 선택할 수 있는 도구</td></tr><tr><td align="center">file</td><td>파일을 지정할 수 있는 도구</td></tr><tr><td align="center">search</td><td>삭제 아이콘이 포함된 검색어 입력 도구</td></tr><tr><td align="center">number</td><td>스피너(Spinner)가 추가된 숫자 입력 도구</td></tr><tr><td align="center">checkbox</td><td>단일 항목을 선택하거나 해제할 수 있는 도구</td></tr><tr><td align="center">radio</td><td>여러개  중에서 하나의 값을 선택하게 하는 도구</td></tr><tr><td align="center">email</td><td>이메일 주소를 입력하는 도구</td></tr><tr><td align="center">tel</td><td>전화번호를 입력하는 도구</td></tr><tr><td align="center">hidden</td><td>숨김 처리하여 보이지 않는 입력 도구</td></tr><tr><td align="center">button</td><td>클릭하여 특정 기능을 실행할 수 있는 도구</td></tr><tr><td align="center">submit</td><td>form을 전송하는 버튼 도구</td></tr><tr><td align="center">reset</td><td>form의 입력창을 모두 초기화하는 도구</td></tr><tr><td align="center">range</td><td>범위 내의 값 중에서 선택할 수 있는 도구</td></tr></tbody></table>

{% embed url="<https://codepen.io/hiphop5782/pen/ZEJpWOx>" %}

브라우저마다 지원하는 입력 도구들이 다르며, 디자인 또한 다르다. 따라서 모든 홈페이지에서 공통인 입력형태를 유지하고 싶다면 별도의 디자인이나 프로그래밍 처리가 필요하다. 브라우저별로 지원하는 입력 도구들을 확인하고 싶다면 다음 사이트를 이용해볼 수 있다.

{% embed url="<https://caniuse.com/?search=input%3A+type%3D%22search%22>" %}
`<input type="search">` 에 대한 브라우저 지원 현황 보기
{% endembed %}

`그 외에도 submit`, `reset`, `image` 등은 `<form>` 태그와 같이 사용해야 하는 등 입력 도구마다 가지고 있는 다양한 특징들을 파악하여 적재적소에 사용하는 것이 중요하다.

### name

`name` 속성은 입력창이 포함된 `<form>`이 전송될 때 값에 부여될 식별자를 설정하는 데 사용한다.

```html
<input type="text" name="id">
```

위와 같은 입력창이 있을 때 입력창에 `testuser`라고 입력할 경우 전송되는 형태는 다음과 같다.

```
id=testuser
```

name이 같은 radio 버튼끼리는 항목을 동시에 선택할 수 없다.

{% embed url="<https://codepen.io/hiphop5782/pen/PoKGzmR>" %}

### value

`value` 속성은 입력창의 <mark style="color:blue;">초기 표시값</mark>을 의미한다. 입력에 대한 변동사항이 없을 경우 입력창이 포함된 \<form>이 전송될 때 지정된 name과 함께 전송할 값으로 처리된다. 입력에 변동이 있을 경우 변경된 입력값이 전송할 값으로 처리된다.

`button` 등에 value를 사용하면 입력창과 마찬가지로 버튼에 글자가 표시된다.

{% embed url="<https://codepen.io/hiphop5782/pen/NWvRrxz>" %}

{% hint style="info" %}
주의

파일 선택 도구에는 보안상의 이유로 value 속성을 지정할 수 없다. 만약 파일 선택 도구에 value를 지정할 수 있다면 시스템의 중요한 파일들을 임의의 기본값으로 지정할 수 있기 때문이다.

```markup
<input type="file" value="C:\Windows\system32\drivers\etc\hosts">
```

{% endhint %}

### placeholder

`placeholder` 속성은 입력창에 입력값이 없을 경우에 표시할 도움말을 설정한다.

{% embed url="<https://codepen.io/hiphop5782/pen/ZEJpOXz>" %}

{% hint style="info" %}
주의

`date`, `time`, `color` 등 지원하는 입력 형태가 있을 경우 `placeholder`는 표시되지 않는다. 다만 이를 지원하지 않는 브라우저에서는 text 형태로 표시되므로 `placeholder`에 작성된 내용이 도움말로 표시된다.
{% endhint %}

### required, readonly, disabled

required, readonly, disabled 와 같은 속성들은 속성의 이름과 값이 같은 형태를 가진다.

```markup
<input required="required">
<input disabled="disabled">
<input readonly="readonly">
```

이처럼 **속성명과 속성값이 같은 속성**들은 속성명만 작성하면 설정 처리가 완료된다.

* `required` - <mark style="color:blue;">\<form></mark> 제출 전 반드시 입력되어야 할 항목을 설정
* `readonly` - 수정이 불가능하지만 <mark style="color:blue;">\<form></mark> 제출 시 전송은 가능한 항목을 설정
* `disabled` - 비활성화된 입력창이며 <mark style="color:blue;">\<form></mark> 제출 시에도 전송이 이루어지지 않는 항목을 설정

{% embed url="<https://codepen.io/hiphop5782/pen/MWvjeGg>" %}