[꿀강] HTML5 input 속성들

HTML5에서는 input type 외에 input에 따로 속성을 지정해 줄 수 있다.

input 속성은 거의 모든 브라우저가 지원하기 때문에 아주 유용하게 사용할 수 있다.

그럼 어떤 속성들이 있는지 한번 알아보자.

 

속 성	설 명
autofocus	autofocus가 지정된 부분에 커서가 위치하게 된다.
form	form 외부에 있는 input 속성에 적용
datalist	지정된 값을 리스트 형식으로 보여줌
min and max	input 값의 최소, 최대값을 지정할 수 있다.
multiple	input 부분에 여러 개의 파일을 불러 올 수 있다.
pattern	지정된 패턴 값만 입력 가능하게 해 줌
placeholder	input 부분에 미리 입력된 값을 보여준다.
required	필수항목으로 지정하여 미 입력시 경고 메시지를 보여준다.
step	입력 받는 값을 단계별로 입력할 수 있게 한다.

 

 

1. autofocus

페이지가 처음 오픈되면 아래와 같이 입력 상자에 포커스가 위치하여 깜빡 거리게 된다.

소스는 아래와 같이 작성하면 된다.

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

 

 

 

2. form

input에 입력된 값을 서버로 넘겨야 할 경우 기본적으로 <form></form> 사이에 입력된 값을 서버로 전송하게 된다.

하지만 form 속성을 적용하면 form 외부에 위치해 있는 input 값이라도 서버로 값을 전달할 수 있다.

<form action="demo.php" id="form_main">

...

</form>

 

<input type="text" name="url" form="form_main">

 

 

 

3. datalist

input list와 함께 사용하는 속성으로 리스트와는 달리 값을 입력 받을 수도 있고 미리 설정된 값을 보여 줄 수도 있다.

 

 

아래와 같이 input list의 이름과 datalist의 id는 동일해야 한다.

 

 

 

4. min and max

min과 max 속성은 input 부분에 최소와 최대값을 지정하여 그 범위 내에서만 값을 입력 받는 것을 의미한다.

그림에서는 1~10까지 입력 받도록 되어 있다.

소스에서는 아래와 같이 작성하면 된다.

<input type="number" min="1" max="5">

 

 

 

 

 

5. multiple

multiple은 다중 파일 선택 속성 이다.

파일을 선택하지 않았을때는 "선택된 파일 없음" 이라고 나오고 파일을 하나만 선택했을 경우에는 아래와 같이 파일명이 표시되게 된다.

소스는 아래와 같이 작성하면 된다.

<input type="file" name="img" multiple>

 

 

 

파일을 여러개 선택했을 경우에는 아래와 같이 몇 개의 파일이 선택 되었는지 표시되게 된다.

 

 

 

하지만 다중파일을 선택하려면 한번에 여러개를 선택해야 하며

파일 선택 후 다시 파일선택을 통해 파일을 다시 선택하게 되면 나중에 선택한 파일로 대체되게 된다.

 

 

6. pattern

입력창에 패턴을 설정하여 패턴에 해당하지 않는 값은 입력되지 않게 처리할 수 있다.

이전에는 이 부분을 자바스크립트를 이용하여 처리해야만 했지만 HTML5에서는 pattern 속성으로 쉽게 처리할 수 있다.

패턴은 정규식이라고 인터넷에 검색하면 많이 나온다.

<input type="text" name="phonenumber" pattern="\d{3}[\-]\d{4}[\-]\d{4}" title="전화번호">

 

 

 

7. placeholder

placeholder는 입력창에 해당 패턴에 대한 예제를 미리 넣어두는 속성이다.

placeholder를 사용하면 어떤 값을 입력해야 하는지에 대한 예시를 줄 수 있어 input 앞 부분에 label을 추가로 사용할 필요가 없어진다.

이전에는 placeholder와 동일한 효과를 내기 위해 자바스크립트를 이용하였지만 HTML5에서는 placeholder 속성만 추가해 줌으로써 사용이 편리하다.

<input type="text" name="Nickname" placeholder="별명 입력">

 

 

 

8. required

반드시 입력해야 하는 필수 입력 항목에 적용할 수 있다.

input에 값을 입력하지 않고 submit 을 하게되면 공고 메시지가 나타나게 된다.

<input type="text" name="email" required>

 

 

 

9. step

step은 지정된 값의 등배수의 값을 입력 받을 수 있다.

아래 예제는 step="2"로 지정하여 ...-8 -6 -4 -2 0 2 4 6 8 의 2의 배수 값만 입력을 받을 수 있게 된다.

<input type="number" name="points" step="2">