[HTML5] input 속성 알아보기

지난 글에서 HTML5의 input type을 알아보았습니다.

 

HTML5 input에는 속성을 지정해 줄 수 있습니다.

이글에서는 속성에 대해 알아봅시다.

 

---

1.input 속성 소개

input 속성	설명
autofocus	autofocus가 지정된 부분의 커서가 깜박인다.
form	input에 form 속성을 적용하여 form외부에 있는 input 속성을 지정한다.
datalist	미리 지정된 값을 리스트 형식으로 불러온다.
min and max	input 값의 최솟값과 최댓값을 지정한다. range나 number type에 시용된다.
multiple	input 부분에 여러 개의 파일을 불러 올 수 있게 한다.
pattern	지정된 패턴 값만 입력 가능하게 한다. ex) 010-1234-1234 등
placeholder	input 부분에 미리 값 또는 입력 예를 보여준다.
required	필수 항목으로 지정, 따라서 이 부분에 값이 없을 경우 경고 메시지를 나오게 한다.
step	값을 단계별로 입력한다. 숫자 또는 날짜 등의 등배수만 입력 가능

 

아래의 예시를 하나씩 보면서 설명할게요.

 

1) autofocus

 <input type="text" autofocus />

autofocus를 속성으로 지정하면 자동으로 커서가 input창으로 갑니다.

 

2) datalist

<div>
      <span>datalist</span>
      <input type="text" list="list" />
      <datalist id="list">
        <option value="1번메뉴"></option>
        <option value="2번메뉴"></option>
        <option value="3번메뉴"></option>
        <option value="4번메뉴"></option>
      </datalist>
    </div>

datalist는 input에 list 속성을 적고 list안의 값과 같은 값을 datalist의 id에 적어 주어야 합니다.

실행화면

datalist의 input 태그를 누르면 option 안의 값들이 순서대로 나오게 됩니다.

 

3) min and max

<div>
      <span>min and max</span>
      <input type="number" min="1" max="10" />
    </div>

min and max는 의미대로 최솟값과 최댓값을 지정합니다.

지정 범위를 벗어나면 경고창이 나옵니다.

 

4) multiple

    <div>
      <span>multiple</span>
      <input type="file" multiple />
    </div>

multiple 속성을 적용하면 다중 파일 선택이 가능해집니다.

아래와 같이 파일 선택을 할 수 있습니다.

파일을 여러개 선택하면 선택한 파일의 개수가 나옵니다.

 

5) pattern 과 placehoder

        <span>pattern 과 placeholder</span>
        <input
          pattern="\d{3}[\-]\d{4}[\-]\d{4}"
          placeholder="예)010-1234-1324"
        />

pattern 안의 정규식을 넣으면 넣은 정규식의 형태의 문자열만 입력할 수 있습니다.

placehoder은 input안에 예제 값을 입력하거나, 예시 값을 줄 수 있습니다.

위에서는 pattern을 전화번호 형식으로 입력받고 예시에는 전화번호를 적어주었습니다.

 

6) required

 required은 필수로 입력해야 하는 값이 있을 때 적어주는 속성입니다.

 아무것도 입력하지 않고 확인 버튼을 누를 시 아래와 같은 경고 창이 나오게 됩니다.

 

 

---

input창에서 사용하는 속성들을 알아보았습니다.

HTML5에서는 input에 다양한 속성들이 추가되어 자바스크립트 없이 쉽게 코딩할 수 있게 되었습니다.

 

이 글은

백견불여일타 HTML5&CSS3 라는 책을 공부하고 정리한 내용을 요약하여 적었습니다!!!