input element part1 - by. UXKM

password : <input type="password">

암호화된 내용을 입력할 수 있는 입력 필드를 정의합니다.
사용자가 안전하게 암호를 입력하는 방법을 제공합니다.
이 요소는 텍스트를 가려서 한 줄로 된 일반 텍스트 편집기 컨트롤로 제공됩니다.
이 컨트롤은 일반적으로 각 문자를 별표("*")나 점("•")으로 나타납니다. 이 문자는 사용자 에이전트 및 OS에 따라 다릅니다.
입력 프로세스가 어떻게 작동하는지에 대한 세부 사항은 브라우저마다 다를 수 있습니다.
예를 들어, 모바일 장치는 종종 사용자가 눌러야하는 키를 눌렀음을 확신 할 수 있도록 하기 위해 문자를 숨기기 전에 잠시 동안 입력된 문자를 표시합니다. 작은 크기의 키와 특히 가상 키보드에서 잘못된 키를 누를 수있는 용이성을 감안할 때 이것은 도움이됩니다.

요약 설명

암호(예 : 로그인 양식)와 같은 중요한 정보가 포함된 양식은 HTTPS를 통해 제공되어야합니다.

많은 브라우저가 안전하지 않은 로그인 양식을 경고하는 메커니즘을 구현합니다.

안전한 암호를 설정하는 방법은 안전하지 않은 암호 참조.

checkbox : <input type="checkbox">

체크박스(checkbox)를 정의합니다. 기본적으로 활성화 될 때 선택(체크)되는 사각형 상자로 렌더링됩니다.

요약 설명

참고 : 라디오 버튼은 확인란과 비슷하지만 중요한 것은 라디오 버튼이 한 번에 하나의 라디오 버튼만 선택할 수 있는 그룹으로 그룹화 되어있는 반면 체크 박스는 단일 값을 켜거나 끌 수 있습니다.
여러 컨트롤이 있는 경우 라디오 버튼을 사용하면 그 중 하나만 선택 가능하고 체크 박스를 사용하면 여러 값을 선택할 수 있습니다.

radio : <input type="radio">

라디오 버튼(radio button)을 정의합니다.
서로 연관된 옵션들의 집합을 보통 하나의 라디오 버튼 그룹으로 나타내며, 그룹 내의 라디오 버튼은 오직 하나만을 선택할 수 있습니다.
name의 값을 동일하게 주어 라디오 버튼을 하나의 그룹으로 묶을 수 있습니다.

file : <input type="file">

로드할 파일을 선택할 수 있는 입력 필드와 "파일 선택" 버튼을 정의합니다.
이 입력 필드를 통해 사용자는 자신의 저장소(storage)에서 파일을 선택할 수 있으며, multiple 속성이 명시되어 있으면 여러 개의 파일을 동시에 선택할 수도 있습니다.
이렇게 선택된 파일은 폼 제출을 통해 서버로 보내거나 자바스크립트 코드와 파일 API 등을 사용하여 조작할 수 있게 됩니다.

reset : <input type="reset">

리셋 버튼(reset button)을 정의합니다.
모든 양식 필드가 기본값으로 다시 설정됩니다. 양식 설정에 따라 필드가 지워지는 경우가 있습니다.

submit : <input type="submit">

서버의 폼 핸들러(form handler)로 폼 데이터(form date)를 전송하는 제출 버튼(submit button)을 정의합니다.
폼 핸들러는 일반적으로 입력된 데이터를 처리하는 스크립트를 포함하고 있는 서버 페이지이며, 이러한 폼 핸들러의 주소는 <form> 요소의 action 속성에 명시됩니다.

image : <input type="image" src="이미지 경로" alt="대체 텍스트">

제출 버튼(submit button)으로 사용될 이미지를 정의합니다.
이 속성값은 텍스트가 아닌 이미지 형태로 된 제출 버튼을 생성하며, 이때 해당 이미지의 경로는 src 속성에 명시됩니다.
이 속성값을 사용하면 이미지에 대한 alt 속성을 반드시 지정해야 합니다.

button : <input type="button" value="버튼명">

클릭할 수 있는 버튼을 정의합니다.
<input type="button">은 주로 자바스크립트와 함께 스크립트를 활성화시키기 위해 사용되는 버튼을 정의합니다.
이 속성값은 value 속성과 같이 명시됩니다.
button값은 submit값과 동일해 보이지만, 서로 다릅니다.
button값은 클릭 외의 어떠한 기능도 하지 않으며, 대부분의 경우 JavaScript와 함께 사용됩니다.

hidden : <input type="hidden">

사용자에게는 보이지 않는 숨겨진 입력 필드를 정의합니다.
숨겨진 입력 필드는 렌더링이 끝난 웹 페이지에서는 전혀 보이지 않으며, 페이지 콘텐츠 내에서 그것을 볼 수 있게 만드는 방법도 없습니다.
따라서 숨겨진 입력 필드는 폼 제출 시 사용자가 변경해서는 안 되는 데이터를 함께 보낼 때 유용하게 사용됩니다.
이러한 입력 필드는 업데이트 되어야 하는 데이터베이스의 레코드를 저장하거나, 고유한 보안 토큰 등을 서버로 보낼 때 주로 사용됩니다.

color : <input type="color" value="#000000">

색을 선택할 수 있는 입력 필드(color picker)를 정의합니다.
value 속성과 같이 사용되며, value의 입력 필드의 기본값은 "#000000"으로 검정색을 나타내며, 반드시 해시 문자(#)로 시작하는 총 7자리의 16진수의 값(#000000 ~ #FFFFFF)이 와야 합니다.

email : <input type="email" multiple>

전자 메일 주소를 입력할 수 있는 입력 필드를 정의합니다.
이 속성값은 입력받은 값이 유효한 전자 메일 주소인지를 자동으로 검증하는 입력 필드를 생성합니다.
또한, 여러 전자 메일 주소 입력을 허용하는 multiple 속성을 명시하여 여러 개의 전자 메일 주소를 동시 입력도 가능합니다.
multiple 속성이 지정된 경우에만 값은 쉼표로 구분된 올바른 형식의 전자 메일 주소 목록이 될 수 있습니다. 뒤따르는 선행 공백은 목록의 각 주소에서 제거됩니다.

number : <input type="number">

숫자를 입력할 수 있는 입력 필드를 정의합니다.
이 속성값은 다음 속성들과 함께 사용하여 그 범위를 제한할 수 있습니다.

range : <input type="range">

슬라이드 바를 조정하여 범위 내의 숫자를 선택할 수 있는 입력 필드를 정의합니다.
기본 범위는 0부터 100까지이지만, 다음 속성들과 함께 사용하면 그 범위를 설정할 수 있습니다.

search : <input type="search" name="q">

검색어를 입력할 수 있는 텍스트 필드를 정의합니다.
검색 필드는 텍스트("text") 필드와 기능적으로는 완전히 똑같지만, 브라우저에 의해 다르게 표현될 수 있습니다.
검색 필드에는 반드시 name 속성을 설정해야 하며, name 속성이 설정되어 있지 않으면 서버로 제출되지 않을 것입니다.
이때 가장 자주 사용되는 대표적인 name 속성값은 'q'입니다.

tel : <input type="tel">

전화번호를 입력할 수 있는 입력 필드를 정의합니다.
이 속성값을 지원하지 않는 브라우저는 해당 입력 필드가 일반적인 텍스트 필드로 표시될 것입니다.
<input type="email"> 및 <input type="url">과 달리 입력값은 양식을 제출하기 전에 특정 형식으로 자동 유효성이 검사되지 않습니다.
<input type="tel">의 주요 장점 중 하나는 모바일 브라우저가 전화 번호 입력을 위한 특수 키보드를 표시한다는 것입니다.

url : <input type="url">

URL 주소를 입력할 수 있는 입력 필드를 정의합니다.
이 입력 필드는 폼 데이터를 제출하기 전 입력된 값이 유효한 URL 주소인지 여부를 자동으로 검증합니다.

유효성 검사를 통과할 수 있는 세 가지 값 형식이 있습니다.

time : <input type="time">

시간을 선택할 수 있는 입력 필드를 정의합니다.(hour, minute)
이 속성값은 자동으로 입력 내용을 검증하는 텍스트 필드를 통해 시간을 직접 입력하거나, 시간을 선택할 수 있는 특별한 입력기(time picker)를 사용하여 시간을 입력할 수 있는 입력 필드를 생성합니다.
이 속성값에는 시(time)와 분(minute)이 포함되며, 오전/오후를 반드시 선택해야만 입력 필드의 유효성 검사를 통과할 수 있습니다.
time 입력값은 항상 hh:mm 또는 hh:mm:ss 형식으로 정규화됩니다.

date : <input type="date">

날짜를 선택할 수 있는 입력 필드를 정의합니다.(year, month, day)
이 속성값은 자동으로 입력 내용을 검증하는 텍스트 필드를 통해 날짜를 직접 입력하거나, 날짜를 선택할 수 있는 특별한 입력기(date picker)를 사용하여 날짜를 입력할 수 있는 입력 필드를 생성합니다.
입력 결과에는 년도(year), 월(month), 일(day)이 포함되지만, 시간은 포함되지 않습니다.

datetime-local : <input type="datetime-local">

날짜와 시간을 선택할 수 있는 입력 필드를 정의합니다.(year, month, day, hour, minute)
이 속성값은 자동으로 입력 내용을 검증하는 텍스트 필드를 통해 날짜와 시간을 직접 입력하거나, 날짜를 선택할 수 있는 특별한 입력기(date picker)를 사용하여 날짜를 입력할 수 있는 입력 필드를 생성합니다.
이 속성값에는 년도(year), 월(month), 일(day)과 시간(hour, minute)이 포함됩니다.
단, 시간을 입력할 때는 오전/오후를 반드시 선택해야만 입력 필드의 유효성 검사를 통과할 수 있습니다.

month : <input type="month">

날짜를 선택할 수 있는 입력 필드를 정의합니다.(year, month)
이 속성값은 자동으로 입력 내용을 검증하는 텍스트 필드를 통해 날짜를 직접 입력하거나, 날짜를 선택할 수 있는 특별한 입력기(date picker)를 사용하여 날짜를 입력할 수 있는 입력 필드를 생성합니다.
입력 결과는 4자리 숫자의 년도(year)와 2자리 숫자인 월(month)을 나타내는 "YYYY-MM" 형식의 문자열이 되며, 일(day)과 시간은 포함되지 않습니다.

week : <input type="week">

날짜를 선택할 수 있는 입력 필드를 정의합니다.(year, week)
이 속성값은 자동으로 입력 내용을 검증하는 텍스트 필드를 통해 날짜를 직접 입력하거나, 날짜를 선택할 수 있는 특별한 입력기(date picker)를 사용하여 날짜를 입력할 수 있는 입력 필드를 생성합니다.
입력 결과에는 년도(year)와 주(week)가 포함되며, 이때 주(week) 앞에는 ‘W’ 문자가 추가되어 제출됩니다.
week 입력으로 실제 값은 항상 yyyy-Www 형식으로 정규화됩니다.
브라우저가 일반 텍스트 입력으로 돌아 가면 사용자가 입력 형식을 올바르게 지정하도록 유도 할 수있는 방법이 없습니다 (물론 직관적이지는 않습니다).

"week" 값을 쓸 수있는 여러 가지 방법