HTML 입력 유형
- 이전 페이지 HTML 형식 요소
- 다음 페이지 HTML 입력 속성
이 장에서 <input> 요소의 입력 유형을 설명합니다.
입력 유형: text
<input type="text"> 제공된텍스트 입력의 단一行 입력 필드:
예제
<form> First name:<br> <input type="text" name="firstname"> <br> Last name:<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"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
위 HTML 코드는 브라우저에서 이렇게 보일 것입니다:
如果您省略了提交按钮的 value 属性，那么该按钮将获得默认文本：
예제
<form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit"> </form>
Input Type: radio
<input type="radio"> 定义单选按钮。
Radio buttons let a user select ONLY ONE of a limited number of choices:
예제
<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"> 定义复选框。
복选框允许用户在有限数量的选项中选择零个或多个选项。
예제
<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> Add your homepage: <input type="url" name="homepage"> </form>
- 이전 페이지 HTML 형식 요소
- 다음 페이지 HTML 입력 속성
