input element part-2 - by. UXKM

[value] <input value="텍스트">

입력 필드의 초기값 또는 기본 선택을 명시합니다.
value 속성은 <input> 요소의 type 속성값에 따라 다른 용도로 사용됩니다.
"button", "reset", "submit" : 버튼 내의 텍스트를 정의합니다.
"hidden", "password", "text" : 입력 필드의 초기값을 정의합니다.
"checkbox", "image", "radio" : 해당 입력 필드를 선택 시 서버로 제출되는 값을 정의합니다.
또한, <input> 요소의 type 속성값이 "file"인 경우에는 value 속성을 사용할 수 없습니다.

[checked] <input type="checkbox|radio" checked>

기본적으로 checked 속성은 boolean attribute(불리언 속성) 입니다.
<input> 요소의 checked 속성은 페이지가 로드될 때 미리 선택될 <input> 요소를 명시합니다.
checked 속성은 페이지가 로드된 후에도 자바스크립트를 사용하여 설정할 수 있습니다.
불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.
이 속성은 <input> 요소의 type 속성값이 "checkbox" 또는 "radio"인 경우에만 사용할 수 있습니다.
XHTML에서는 속성값을 생략할 수 없으므로, 다음과 같이 속성명과 속성값을 모두 명시해야만 합니다.
XHTML에서는 <input checked="checked" />, HTML5에서는 <input checked>속성으로 정의되어야 합니다.

[disabled] <input disabled>

<input> 요소의 disabled 속성은 해당 <input> 요소가 비활성화됨을 명시합니다.
disabled 속성이 명시된 <input> 요소는 사용할 수 없으며, 사용자가 클릭할 수도 없습니다.
또한, 폼 데이터가 제출될 때도 disabled 속성이 명시된 <input> 요소의 데이터는 제출되지 않습니다.
따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 입력 필드를 클릭할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 disabled 속성값을 삭제하여 사용자가 입력 필드를 다시 사용할 수 있도록 조절할 수 있습니다.

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

[readonly] <input readonly>

<input> 요소의 readonly 속성은 <input> 요소의 입력 필드가 읽기 전용임을 명시합니다.
읽기 전용으로 설정된 입력 필드는 사용자가 수정할 수는 없지만, 해당 내용을 하이라이트하거나 복사할 수는 있습니다.
따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 입력 필드의 내용을 수정할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 readonly 속성값을 삭제하여 사용자가 입력 필드를 수정할 수 있도록 조절할 수 있습니다.
disabled 속성이 명시된 입력 필드의 값은 서버로 제출되지 않지만, readonly 속성이 명시된 입력 필드의 값은 서버로 제출됩니다.

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

[size] <input type="email | password | search|tel | text|url" size="숫자">

<input> 요소의 size 속성은 <input> 요소의 너비를 문자수(in characters) 단위로 명시합니다.
maxlength 속성을 사용하면, <input> 요소에서 입력이 허용되는 최대 문자수를 명시할 수도 있습니다.
size 속성이 제대로 동작하는 <input> 요소의 type 속성값은 다음과 같습니다.
email, password, search, tel, text, url

[src] <input type="image" src="이미지 URL" alt="대체 텍스트">

제출 버튼(submit button)으로 사용될 이미지의 URL을 명시합니다.
(단, <input> 요소의 type 속성값이 "image"인 경우에만 사용할 수 있음)

이 속성은 <input> 요소의 type 속성값이 "image"인 경우에만 사용할 수 있습니다.

[alt] <input type="image" src="이미지 URL" alt="대체 텍스트">

alt 속성은 이미지를 위한 대체 텍스트를 명시합니다.
이러한 alt 속성은 사용자가 느린 네트워크 환경이나 src 속성값의 오류, 시각 장애인용 스크린 리더의 사용 등 어떤 이유로든 사용자가 이미지를 직접 확인이 불가능한 경우 이미지 대신 제공할 대체 정보를 제공합니다.

이 속성은 <input> 요소의 type 속성값이 "image"인 경우에만 사용할 수 있습니다.

[placeholder] <input type="email | password | search|tel | text | url" placeholder="텍스트">

<input> 요소의 placeholder 속성은 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 명시합니다.
이러한 도움말은 사용자가 입력할 수 있는 값에 대한 견본값이나 입력 형식에 대한 간단한 설명 등이 사용되며, 사용자가 입력하기 전까지 입력 필드에 표시되다가 사용자가 입력을 시작하면 사라집니다.
placeholder 속성이 제대로 동작하는 <input> 요소의 type 속성값은 다음과 같습니다.
email, password, search, tel, text, url

[required] <input type="checkbox | date | email | file | number | password | pickers | radio | search | tel | text | url" required>

<input> 태그의 required 속성은 폼 데이터(form data)가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 명시합니다.
required 속성이 제대로 동작하는 <input> 요소의 type 속성값은 다음과 같습니다.
checkbox, date, email, file, number, password, pickers, radio, search, tel, text, url

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

[width], [height] <input type="image" src="이미지 URL" width="픽셀" height="픽셀" alt="대체 텍스트">

요소의 너비를 픽셀 단위(in pixels)로 명시합니다.
이 속성은 <input> 요소의 type 속성값이 "image"인 경우에만 사용할 수 있습니다.
이미지의 height 속성과 width 속성은 언제나 명시하는 것이 좋습니다.
이 속성들이 명시되어 있으면 웹 페이지가 로드될 때 브라우저가 해당 이미지를 위한 적절한 공간을 남겨둘 수 있지만, 이 속성들이 명시되어 있지 않으면 브라우저는 이미지의 크기를 알 수 없어 필요한 공간을 남겨둘 수 없게 됩니다.
따라서 이미지가 로딩되는 순간 페이지의 레이아웃이 비정상적으로 출력되는 결과를 초래할 수 있습니다.

[accept] <input type="file" accept="파일 확장자 | audio/* | video/* | image/* | 미디어 타입">

<input> 요소의 accept 속성은 서버로 업로드할 수 있는 파일의 타입을 명시합니다.
accept 속성에 하나 이상의 속성값을 명시할 경우에는 콤마(,)를 사용하여 구분합니다.
이러한 accept 속성을 유효성 검사를 도구로 사용해서는 안 되며, 업로드된 파일은 서버에서 검증되어야 합니다.
이 속성은 <input> 요소의 type 속성값이 "file"인 경우에만 사용할 수 있습니다.
UI에서 바로 해당 파일 목록만 접근해주는 장점이 있습니다. 예를 들어 이미지로 설정된 경우 탐색기 또는 모바일 파일 검색 시 이미지로 필터링이 적용됩니다.
위 속성은 IE 10 이상에서 가능합니다. 또한 HTML 4.01과 HTML5와의 값의 차이가 있습니다.

[accesskey] <element accesskey="character(항목을 활성화/포커스 하기위한 키보드 숏컷키)">

요소를 활성화 / 포커스 하기 위한 단축키를 지정합니다.
HTML5에서는 accesskey 속성을 모든 HTML 요소에서 사용할 수 있습니다(HTML 요소에서 유효성을 검사하지만 반드시 유용한 것은 아닙니다).
HTML 4.01에서 accesskey 속성은 <a>, <area>, <button>, <input>, <label>, <legend> 및 <textarea>와 함께 사용할 수 있습니다.
바로 가기 키에 액세스하는 방법은 브라우저 및 OS에 따라 다릅니다. 그러나 대부분의 브라우저에서 바로 가기를 다른 키 조합으로 설정할 수 있습니다.
둘 이상의 요소에 동일한 액세스 키가 있는 경우 동작이 다릅니다.
IE, Firefox : 액세스 키를 누르면 다음 요소가 활성화됩니다.
Chrome, Safari : 액세스 키를 누른 마지막 요소가 활성화됩니다.
Opera : 액세스 키를 누른 첫 번째 요소가 활성화됩니다.

[autocomplete] <input type="color | datepickers | email | password | range | search | tel | text" autocomplete="on | off">

<input> 요소의 autocomplete 속성은 <input> 요소에서 자동 완성 기능을 사용할 지 여부를 명시합니다.
autocomplete 속성값을 on으로 명시하면, 브라우저는 사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과 비슷한 값들을 드롭다운 옵션으로 보여줍니다.
autocomplete 속성이 제대로 동작하는 <input> 요소의 type 속성값은 다음과 같습니다.
color, datepickers, email, password, range, search, tel, text