input element part3 - by. UXKM

요약 설명

input part3 에서는 <input>의 속성 중
[autofocus, list, max, min, maxlength, minlength, step, multiple, pattern, dirname, form, formaction, formenctype, formmethod, formnovalidate, formtarget]에 대한 내용을 다루고 있습니다.

9.3.1. input 속성

[autofocus] <input autofocus>

<input> 태그의 autofocus 속성은 페이지가 로드될 때 자동으로 포커스(focus)가 <input> 요소로 이동됨을 명시합니다.

autofocus 속성은 불리언(boolean) 속성입니다.
불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.

[list] <input list="datalist id">

<input> 요소에서 사용하기 위해 미리 정의해 놓은 옵션들을 포함하고 있는 <datalist> 요소를 명시합니다.

[max] <input type="date | datetime | datetime-local | month | number | range | time | week" max="숫자|날짜">

<input> 요소의 max 속성은 <input> 요소의 최대값을 명시합니다.
max 속성은 min 속성과 함께 <input> 요소에서 입력값의 허용 범위를 설정하는데 사용됩니다.
min 속성과 max 속성이 제대로 동작하는 <input> 요소의 type 속성값은 다음과 같습니다.
date, datetime, datetime-local, month, number, range, time, week

  1. 숫자

    허용되는 최대값을 명시합니다.

  2. 날짜

    허용되는 최대 날짜를 명시합니다.

[min] <input type="date | datetime | datetime-local | month | number | range | time | week" max="숫자|날짜">

min 속성은 <input> 요소의 최소값을 명시합니다.
max 속성은 min 속성과 함께 <input> 요소에서 입력값의 허용 범위를 설정하는데 사용됩니다.
min 속성과 max 속성이 제대로 동작하는 <input> 요소의 type 속성값은 다음과 같습니다.
date, datetime, datetime-local, month, number, range, time, week

  1. 숫자

    허용되는 최소값을 명시합니다.

  2. 날짜

    허용되는 최소 날짜를 명시합니다.

[maxlength] <input maxlength="숫자">

<input> 요소에서 허용되는 최대 문자수를 명시합니다(기본값은 524,288).

[minlength] <input minlength="숫자">

<input> 요소에서 허용되는 최소 문자수를 명시합니다.

[step] <input type="date | datetime | datetime-local | month | number | range | time | week" step="숫자">

<input> 태그의 step 속성은 <input> 요소에 입력할 수 있는 숫자들 사이의 간격을 명시합니다.
만약 step 속성값이 2라면, <input> 요소에 입력할 수 있는 숫자는 ..., -4, -2, 0, 2, 4, ... 등이 됩니다.
step 속성은 min, max 속성과 함께 <input> 요소에 입력할 수 있는 유효한 값의 범위를 설정하는데 사용할 수 있습니다.
step 속성이 제대로 동작하는 <input> 요소의 type 속성값은 다음과 같습니다.
date, datetime, datetime-local, month, number, range, time, week

[multiple] <input type="email | file" multiple>

<input> 요소의 multiple 속성은 <input> 요소에 사용자가 둘 이상의 값을 입력할 수 있음을 명시합니다.
multiple 속성이 제대로 동작하는 type 속성에는 email, file이 있습니다.
<input> 요소의 type 속성값이 "email"인 경우에는 전자 메일 사이에 콤마(,)를 추가하여 여러 전자 메일 주소를 동시에 입력할 수 있으며, type 속성값이 "file"인 경우에는 CTRL이나 SHIFT키를 사용하여 여러 파일을 동시에 선택할 수 있습니다.

multiple 속성은 불리언(boolean) 속성입니다.
불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.

[pattern] <input pattern="정규 표현식">

pattern 속성은 폼 제출 시 <input> 요소의 값을 검사할 때 사용될 정규 표현식(regular expression)을 명시합니다.
이때 전역 속성인 title 속성을 사용하여 정규 표현식에 간단한 설명을 추가함으로써 사용자가 정확한 값을 입력할 수 있도록 도움을 줄 수 있습니다.
<input> 요소의 pattern속성을 사용하면 JavaScript를 사용하지 않고도 기본 데이터 유효성 검사를 추가 할 수 있습니다.
(단, 정규 표현식(regular expression)을 명시해야 합니다.)
정규 표현식 패턴을 정의하는 문자의 정형화 된 문자열입니다. 예를 들어 [a-zA-Z0-9]+ 문자열에 소문자(a-z), 대문자(A-Z) 또는 숫자(0-9)만 포함되어 있으면 길이에 관계없이 문자열과 일치하는 패턴이 있습니다.

  1. Match [a-zA-Z0-9]+

    htmlcodetutorial

    Mississippi

    12BuckleMyShoe34

    8675309

  2. Do not match [a-zA-Z0-9]+

    https://html.com

    Mrs. Ippi

    1, 2, Buckle My Shoe!

    (321) 867-4309

pattern 속성이 제대로 동작하는 <input> 요소의 type 속성값은 다음과 같습니다.
date, email, password, search, tel, text, url

[dirname] <input name="이름" dirname="이름.dir">

<input> 요소의 dirname 속성은 폼 데이터(form data)가 서버로 제출될 때 서버로 보낼 입력 필드의 텍스트 방향성(text directionality)을 저장할 이름을 명시합니다.
dirname 속성값은 언제나 <input> 요소의 name 속성값 뒤에 “.dir”를 추가한 값이 됩니다.

[form] <input form="form id">

해당 <input> 요소가 포함될 하나 이상의 <form> 요소를 명시합니다.
이 속성값은 같은 문서 내에 위치하는 <form> 요소의 id 값이어야만 합니다.

[formaction] <input type="submit | image" formaction="URL">

폼 데이터(form data)가 서버로 제출될 때 입력 데이터를 처리할 파일의 URL을 명시합니다.
(단, <input> 요소의 type 속성값이 "submit" 또는 "image"인 경우에만 사용 가능)
formaction 속성은 <form> 요소의 action 속성값을 재정의(overriding)합니다.

[formenctype] <input type="submit | image" formenctype="속성값">

폼 데이터(form data)가 서버로 제출될 때 해당 데이터가 인코딩(encoding)되는 방식을 명시합니다.
이 속성은 <input> 요소의 type 속성값이 "submit" 또는 "image"이면서, <form> 요소의 method 속성값이 "post"인 경우에만 사용할 수 있습니다.
formenctype 속성은 <form> 요소의 enctype 속성값을 재정의(overriding)합니다.

사용되는 값은 다음과 같습니다.

  1. application/x-www-form-urlencoded

    기본값으로, 모든 문자들은 서버로 보내기 전에 인코딩됨을 명시합니다.

  2. multipart/form-data

    모든 문자를 인코딩하지 않음을 명시합니다. 이 방식은 <form> 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용합니다.

  3. text/plain

    공백 문자(space)는 "+" 기호로 변환하지만, 나머지 문자는 모두 인코딩되지 않음을 명시합니다.

[formmethod] <input type="submit | image" formenctype="get | post">

폼 데이터(form data)가 서버로 제출될 때 사용할 HTTP 메소드를 명시합니다.
이 속성은 <input> 요소의 type 속성값이 "submit" 또는 "image"인 경우에만 사용할 수 있으며, <form> 요소의 method 속성값을 재정의(overriding)합니다.

formmethod 속성의 속성값으로 GET과 POST 두 가지 중 하나를 선택할 수 있습니다.
GET 방식은 URL에 폼 데이터를 추가하여 서버로 전달하는 방식입니다.
GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어(cached) 저장됩니다.
또한, GET 방식은 보통 쿼리 문자열(query string)에 포함되어 전송되므로, 길이의 제한이 있습니다.
따라서 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청하는 것이 좋습니다.

POST 방식은 폼 데이터를 별도로 첨부하여 서버로 전달하는 방식입니다.
POST 방식의 HTTP 요청은 브라우저에 의해 캐시되지 않으므로, 브라우저 히스토리에도 남지 않습니다.
또한, POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송됩니다.
따라서 데이터의 길이에 대한 제한도 없으며, GET 방식보다 보안성이 높습니다.

사용되는 값은 다음과 같습니다.

  1. get

    기본값으로, 폼 데이터를 HTTP GET 메소드로 전송합니다.
    ex) URL?name=value&name=value&...

  2. post

    폼 데이터를 HTTP POST 메소드로 전송합니다.

[formnovalidate] <input type="submit" formnovalidate>

폼 데이터(form data)가 서버로 제출될 때 해당 데이터의 유효성 검사를 하지 않음을 명시합니다.
(단, <input> 요소의 type 속성값이 "submit"인 경우에만 사용할 수 있으며, <form> 요소의 novalidate 속성값을 재정의(overriding)합니다.)

formnovalidate 속성은 불리언(boolean) 속성입니다.
불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.

[formtarget] <input formtarget="_blank | _self | _parent | _top | 프레임 이름">

폼 데이터(form data)가 서버로 제출된 후 받는 응답(response) 데이터를 어디에 표시할 지를 명시합니다.
(단, <input> 요소의 type 속성값이 "submit" 또는 "image"인 경우에만 사용 가능)