본문 바로가기

HTML&CSS

HTML+CSS 기초 강의 - 18. 폼만들기 기초 7 - <input> 태그 고급 속성




사용빈도가 낮은 <input> 태그 고급 속성들


특정 타입(type) 전용으로만 사용하는 속성(attribute)들과, HTML5 표준 <input> 속성으로 정의되어 있지만 실무에서는 많이 사용하지 않는 속성들입니다.

초보자라면 참고삼아 이해정도만하고 일단 넘어가고 사용할 일이 있을 때나 해당 속성을 보게되면 참조삼아 아래표를 봐가면서 사용하면 됩니다.


속성 

사용값 

설명 

accept

audio/*, 

video/*, 

image/*, 

.gif, .jpg, .png, .xls 등 파일확장자

<input> 태그를 파일 선택자로 사용할 경우, 미디어 타입, 또는 파일 확장자(.포함)를 지정하면 해당 종류의 파일만 파일 선택 대화상자의 기본 필터 조건으로 적용됩니다.


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

<input type="file" name="img2" accept=".jpg,.png"> 


여러개의 파일 확장자를 쉼표로 구분해 지정할 수도 있습니다.

예를 들어 .jpg 를 accept 조건으로 지정하면



이렇게 파일 대화상자 기본 선택 필터로 적용되어 보여집니다.


dirname

텍스트

입력필드 또는, 파일선택자 등으로 파일 선택시 입력된 텍스트 내용의 방향을 알려주는 추가 필드의 이름을 지정합니다.

폼 전송시 서버단에는 "dirname"에 입력한 이름의 필드가 추가로 전송된 것으로 보여지며 이 필드에는 ltr(왼쪽에서 오른쪽으로 읽기), rtl(오른쪽에서 왼쪽으로 읽기) 와 같은 값이 입력 언어권에 따라 자동으로 지정되어 전송됩니다.


예를들어

<input type="text" name="username" value="입력값" dirname="usernamedirection">

이런 필드를 가진 폼을 서버로 전송하면 전송값은 다음과 같이


"username=입력값&usernamedirection=ltr"


usernamedirection 필드에 방향값(ltr/rtl)을 가진 추가 필드가 자동으로 전송됩니다.

form

폼ID

<input> 태그가 속한 한개 이상의 폼 ID를 지정합니다.

폼 외부에 <input> 태그를 생성할 필요가 있는 경우 이 속성을 이용하면 해당 요소가 폼에 속한 필드인 것처럼 처리할 수 있습니다.

폼 전송시에도 함께 전송됩니다.

단, 인터넷익스플로러에서는 지원되지 않습니다. 주의해야하고, 가능하면 사용하지 않을 것을 권장합니다.

formaction

URL

summit 버튼에 사용하는 속성으로 클릭시 서버에서 전송된 폼 내용/파일 을 처리하는 URL을 지정합니다. formaction URL을 지정할 경우 <form> 태그에 지정한 action URL을 덮어쓰게 됩니다.

하나의 폼을 조건에 따라 2개 이상의 서버 경로에서 처리할 필요가 있을 경우 폼안에 submit 버튼 타입을 2개 이상 만들어 분기시키기 위해 주로 사용합니다.


<form action="/fileproc.php">

  Upload Image <input type="file" name="fname">

  <input type="submit" value="Submit">

  <input type="submit" formaction="/thumbproc.php" value="다른경로에서 업로드한 이미지 처리">

</form>

formenctype

application/x-www-form-urlencoded

multipart/form-data

text/plain

이미지 타입과 submit 타입에 사용하는 속성으로 데이터가 서버로 전송될 때 데이터가 인코딩 되는 타입을 결정합니다.

반드시 3가지중 한가지 값이어야 하며, 없을 경우 text/plain이 기본값입니다.

파일 업로드를 할 경우 반드시 multipart/form-data 로 지정해야 합니다.

formaction 속성과 마찬가지로 submit 버튼 타입에 사용할 경우 <form> 태그의 enctype 속성을 덮어씁니다.

하나의 폼으로 파일첨부가 있는 경우와 없는 경우를 하나의 폼에 혼용해 쓸 필요가 있을때 유용합니다.

하지만, 실무에서 이런식으로는 쓰지 않습니다. 보통은 multipart/form-data 로 폼 enctype 속성을 지정해서 폼을 전송하고 서버에서 적당히 처리를 하는 식으로 구현합니다.

formmethod

"get" 또는 "post"

submit 타입이나 이미지 타입에 사용가능합니다. <form> 태그의 method 속성과 동일한 역할을 합니다. 폼 데이터를 get 방식으로 보낼지 post 방식으로 보낼지를 지정합니다.

formnovalidate

formnovalidate

철자에 주의해야 하는데 no validate 입니다. 속성이 있을 경우 전송하는 폼의 값체크를 하지 않습니다.

하지만 폼 전송 후 처리는 어디까지나 서버단의 몫이기 때문에 서버에서 처리할 때 이 속성을 무시할 수는 있습니다.

<form> 전역으로 사용하려면 <form> 태그에 novalidate 속성을 사용하면 됩니다.

formtarget

_blank

_self

_parent

_top

프레임명

submit 버튼, 또는 이미지 타입에 사용하며, 폼 전송 후 응답페이지를 표시할 창을 지정합니다.

_blank - 새창/새탭

_self - 기본값, 현재창/현재탭/현재프레임

_parent - 바로 위 부모프레임

_top - 최상위 프레임

프레임명 - 해당 프레임에 결과 페이지 표시


<form> 태그의 target 속성과 동일하며, formtarget 속성 지정시 덮어쓰기 됩니다.


<form action="/action_proc.php" method="post" target="_blank">

  이름: <input type="text" placeholder="이름">

  이메일: <input type="email" placeholder="이메일">

  <input type="submit" value="Submit" formtarget="_parent">

</form>

list

데이터리스트ID

쌍으로 사용하는 <datalist> 옵션리스트 태그 참조를 위해 데이터리스트 ID를 입력


<input list="browsers" placeholder="웹브라우저 선택/입력">

<datalist id="browsers">

  <option value="크롬">

  <option value="사파리">

  <option value="엣지">

  <option value="인터넷익스플로러">

  <option value="파이어폭스">

</datalist>

min

숫자,날짜

요소의 최소값을 지정. 타입이 날짜인 경우 최소 날짜 지정 가능.
date 타입은 인터넷익스플로러에서는 지원되지 않습니다.



max

숫자,날짜

요소의 최대값을 지정. 타입이 날짜인 경우 마지막 날짜 지정 가능.
date 타입은 인터넷익스플로러에서는 지원되지 않습니다.



maxlength

숫자

타입이 텍스트인 경우 최대 입력 가능한 글자수(한글기준) 지정. 일반적으로 size 속성과 함께 사용해 텍스트 입력 필드의 크기와 최대 입력 글자수를 지정.

pattern

정규표현식

정규표현식으로 입력 요소의 입력 가능한 값을 한정합니다. 입력 가능한 값이 아닌 경우 경고메시지가 표시되고 폼이 전송되지 않습니다.


얘를 들어


    <form action="/search.php">

      우편번호: <input type="text" name="postal_code" 

      pattern="[0-9]{5}" title="5자리 숫자만 입력" size=5>

      <input type="submit" value="주소찾기">

    </form>


이런 폼이 있을 경우 정규표현식 제약과 일치하지 않을 경우 폼이 전송되지 않고 아래와 같은 경고 메시지를 표시합니다.
경고메시지 안내로 title 속성에 문구를 넣을 수 있습니다.


단, 정규표현식 작성시 공백 체크까지 하지 않을 경우 미입력 체크가 되지 않으므로 required 와 함께 사용할 것을 추천합니다.


step

숫자

<input> 태그의 타입이 number 인 경우에만 적용됩니다. 

다른 입력 타입에는 지정해도 적용되지 않습니다. 

step 으로 입력한 숫자(정수, 실수 모두 가능)의 배수 단위 숫자만 입력할 수 있도록 제한합니다.

숫자(number) 입력 필드에 입력 포커스가 되면 오른쪽에 업/다운 화살표가 표시되는데, 업/다운 화살표 클릭시 가장 인접한 배수단위 숫자로 바뀝니다. 배수 단위값으로 입력을 제한하는 것이 step 속성입니다. 이 속성이 없을 경우 간격은 1이 됩니다.

배수 단위에 맞는 숫자값이 아닌 경우 경고 메시지가 표시되고 폼은 전송되지 않습니다.

예를 들어 step 값으로 1.5 를 입력한 경우 0, 1.5, 3, 4.5 이렇게 step 의 배수 단위값만 사용할 수 있게 제한됩니다.





* "form" 으로 시작하는 고급 속성들(formaction, formenctype ...)은 대부분 <form> 태그에 동일한 속성들이 존재합니다.

폼을 전송할 서버쪽 처리 URL을 구분해 전송 버튼을 2개 이상 꼭 사용하는 경우가 아니면 구지 사용할 필요가 없습니다. 

가능하면 <form> 태그에 해당 속성을 정의해 사용하는 것이 가독성이나 유지보수 측면에서 훨씬 좋습니다.


** pattern, step 등과 같은 입력 필드의 값을 한정하는 속성의 경우 자바스크립트/제이쿼리를 이용해 폼 필드를 전처리후 전송하는 경우 한정 속성이 정상적으로 동작하지 않을 수 있습니다. 자바스크립트로 폼 전송전 체크를 할 경우 HTML 속성, 또는 자바스크립트 중 한가지만 사용할 것을 권장합니다.


< 이전강의 다음강의 >



닫기