HTML 입력 유형
- 이전 페이지 HTML 양식 요소
- 다음 페이지 HTML Input 속성
이 장에서는 <input> 요소의 입력 유형을 설명합니다.
입력 유형: text
<input type="text"> 제공되는텍스트 입력의 단一行 입력 필드:
예제
<form> 이름:<br> <input type="text" name="firstname"> <br> 성:<br> <input type="text" name="lastname"> </form>
위 HTML 코드는 브라우저에서 이렇게 보입니다:
입력 유형: password
<input type="password"> 정의비밀번호 필드：
예제
<form> 사용자 이름:<br> <input type="text" name="username"> <br> 사용자 비밀번호:<br> <input type="password" name="psw"> </form>
위 HTML 코드는 브라우저에서 이렇게 보입니다:
주의사항:password 필드의 문자는 마스킹 처리됩니다(별號나 실체 원으로 표시됩니다).
입력 유형: submit
<input type="submit"> 정의제출폼 데이터를폼 처리 프로그램의 버튼.
폼 처리 프로그램(form-handler)은 입력 데이터를 처리하는 스크립트를 포함한 서버 페이지입니다.
폼의 action 속성에서 폼 처리 프로그램(form-handler)을 지정합니다:
예제
<form action="action_page.php"> 이름:<br> <input type="text" name="firstname" value="Mickey"> <br> 성:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
위 HTML 코드는 브라우저에서 이렇게 보입니다:
提交 버튼의 value 속성을 생략하면, 버튼에 기본 텍스트가 적용됩니다:
예제
<form action="action_page.php"> 이름:<br> <input type="text" name="firstname" value="Mickey"> <br> 성:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit"> </form>
Input Type: radio
<input type="radio"> 라디오 버튼 정의
라디오 버튼은 사용자가 제한된 수의 선택 중 하나만 선택할 수 있도록 합니다:
예제
<form> <input type="radio" name="sex" value="male" checked>남성 <br> <input type="radio" name="sex" value="female">여성 </form>
위 HTML 코드는 브라우저에서 이렇게 보입니다:
Input Type: checkbox
<input type="checkbox"> 체크박스 정의
체크박스는 사용자가 제한된 수의 옵션 중에서 0개나 많이 선택할 수 있도록 합니다。
예제
<form> <input type="checkbox" name="vehicle" value="Bike">저는 자전거가 있습니다 <br> <input type="checkbox" name="vehicle" value="Car">저는 차가 있습니다 </form>
위 HTML 코드는 브라우저에서 이렇게 보입니다:
Input Type: button
<input type="button"> 정의버튼。
예제
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
위 HTML 코드는 브라우저에서 이렇게 보입니다:
HTML5 입력 유형
HTML5는 여러 가지 새로운 입력 유형을 추가했습니다:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
주의사항:오래된 웹 브라우저는 지원하지 않는 입력 유형이 있으며, 입력 유형 text로 간주됩니다.
입력 유형: number
<input type="number"> 숫자 값을 포함하는 입력 필드에 사용됩니다.
숫자에 제한을 설정할 수 있습니다.
브라우저의 지원에 따라 입력 필드에 제한을 적용할 수 있습니다.
예제
<form> 수량(1에서 5 사이): <input type="number" name="quantity" min="1" max="5"> </form>
입력 제한
일반적으로 사용되는 입력 제한 사항을 나열했습니다(중요한 것은 HTML5에서 추가된 것입니다):
| 속성 | 설명 |
|---|---|
| disabled | 입력 필드가 비활성화되어야 합니다. |
| max | 입력 필드의 최대 값을 정의합니다. |
| maxlength | 입력 필드의 최대 문자 수를 정의합니다. |
| min | 입력 필드의 최소 값을 정의합니다. |
| pattern | 입력 값을 확인하는 정규 표현식을 정의합니다. |
| readonly | 입력 필드가 읽기 전용입니다(수정할 수 없습니다). |
| required | 입력 필드가 필수입니다(필수 입력). |
| size | 입력 필드의 너비(문자로 계산)를 정의합니다. |
| step | 입력 필드의 유효한 숫자 간격을 정의합니다. |
| value | 입력 필드의 기본 값을 정의합니다. |
다음 장에서 입력 제한에 대해 더 알아보겠습니다.
예제
<form> 수량: <input type="number" name="points" min="0" max="100" step="10" value="30"> </form>
입력 유형: date
<input type="date"> 날짜가 포함된 입력 필드에 사용됩니다.
브라우저의 지원에 따라, 날짜 선택기가 입력 필드에 표시됩니다.
예제
<form> 생일: <input type="date" name="bday"> </form>
입력에 제한을 추가할 수 있습니다:
예제
<form> 1980-01-01 이전의 날짜를 입력하세요: <input type="date" name="bday" max="1979-12-31"><br> 2000-01-01 이후의 날짜를 입력하세요: Enter a date after 2000-01-01:<br> </form>
입력 유형: color
<input type="color"> 색상을 포함해야 하는 입력 필드에 사용됩니다.
브라우저의 지원에 따라, 색상 선택기가 입력 필드에 표시됩니다.
예제
<form> 귀하의 취향을 선택하세요: <input type="color" name="favcolor"> </form>
입력 유형: range
<input type="range"> 특정 범위의 값을 포함해야 하는 입력 필드에 사용됩니다.
브라우저의 지원에 따라, 입력 필드가 슬라이더 컨트롤로 표시될 수 있습니다.
예제
<form> <input type="range" name="points" min="0" max="10"> </form>
min, max, step, value와 같은 속성을 사용하여 제한을 설정할 수 있습니다.
입력 유형: month
<input type="month"> 사용자가 월과 연도를 선택할 수 있습니다.
브라우저의 지원에 따라, 날짜 선택기가 입력 필드에 표시됩니다.
예제
<form> 생일 (월과 연도): <input type="month" name="bdaymonth"> </form>
입력 유형: week
<input type="week"> 사용자가 주와 연도를 선택할 수 있습니다.
브라우저의 지원에 따라, 날짜 선택기가 입력 필드에 표시됩니다.
예제
<form> 주를 선택하세요: <input type="week" name="week_year"> </form>
입력 유형: time
<input type="time"> 사용자가 시간을 선택할 수 있습니다(시간대 없음).
브라우저의 지원에 따라, 시간 선택기가 입력 필드에 표시됩니다.
예제
<form> 시간을 선택하세요: <input type="time" name="usr_time"> </form>
입력 유형: datetime
<input type="datetime"> 사용자가 날짜와 시간을 선택할 수 있습니다(시간대 포함).
브라우저의 지원에 따라, 날짜 선택기가 입력 필드에 표시됩니다.
예제
<form> 생일 (날짜와 시간): <input type="datetime" name="bdaytime"> </form>
입력 유형: datetime-local
<input type="datetime-local"> 사용자가 날짜와 시간을 선택할 수 있습니다(시간대 없음).
브라우저의 지원에 따라, 날짜 선택기가 입력 필드에 표시됩니다.
예제
<form> 생일 (날짜와 시간): <input type="datetime-local" name="bdaytime"> </form>
입력 유형: email
<input type="email"> 이메일 주소를 포함해야 하는 입력 필드를 사용합니다.
브라우저 지원에 따라 제출 시 자동으로 이메일 주소를 검증할 수 있습니다.
일부 스마트폰은 이메일 유형을 인식하고 키보드에 ".com"을 추가하여 이메일 입력을 일치시킵니다.
예제
<form> 이메일: <input type="email" name="email"> </form>
입력 유형: search
<input type="search"> 검색 필드(검색 필드는 일반 텍스트 필드와 유사하게 표현됩니다).
예제
<form> Google 검색: <input type="search" name="googlesearch"> </form>
입력 유형: tel
<input type="tel"> 전화번호를 포함해야 하는 입력 필드를 사용합니다.
현재 Safari 8 만 tel 유형을 지원합니다.
예제
<form> 전화번호: <input type="tel" name="usrtel"> </form>
입력 유형: url
<input type="url"> URL 주소를 포함해야 하는 입력 필드를 사용합니다.
브라우저 지원에 따라 제출 시 자동으로 URL 필드를 검증할 수 있습니다.
일부 스마트폰은 URL 유형을 인식하고 키보드에 ".com"을 추가하여 URL 입력을 일치시킵니다.
예제
<form> 홈페이지 추가: <input type="url" name="homepage"> </form>
- 이전 페이지 HTML 양식 요소
- 다음 페이지 HTML Input 속성
