예
두 개의 서로 다른 입력 유형을 가진 HTML 양식; 텍스트 및 제출
<form action="demo_form.asp">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>
»그것을 자신을 시도 자세한 내용은 아래 예 "자신을보십시오."
정의 및 사용
type 속성의 유형을 지정 <input> 표시 할 요소를.
기본 유형은 다음과 같습니다 text .
팁 :이 필수 속성 아니지만, 우리는 당신이 그것을 항상 포함한다고 생각합니다.
브라우저 지원
| 속성 | |||||
|---|---|---|---|---|---|
| type | 예 | 예 | 예 | 예 | 예 |
주 : type 속성은 모든 주요 브라우저에서 작동합니다. 그러나, 모든 다른 입력 유형은 모든 주요 브라우저에서 작동합니다.
각 입력 유형에 대한 브라우저 지원을 보려면 아래 봐.
HTML 4.01과 HTML5의 차이점
: HTML5는 다음과 같은 새로운 입력 유형이 color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 및 url .
통사론
<input type="value">
속성 값
| 값 | 기술 |
|---|---|
| button | 클릭 가능한 버튼 (주로 자바 스크립트와 함께 사용 스크립트를 활성화)을 정의 |
| checkbox | 체크 박스를 정의 |
| color | 색상 선택기를 정의 |
| date | 날짜 제어를 정의 (년, 월, 일 (짧은 시간)) |
| datetime | 입력 형식은 HTML 날짜 표준에서 제거되었다. 대신 날짜 로컬 사용합니다. |
| datetime-local | ) 제 (NO 시간대의 날짜 및 시간을 제어 (년, 월, 일, 시간 초, 분, 및 분획을 정의 |
| 이메일 주소 필드를 정의 | |
| file | (파일 업로드) 파일 - 선택 필드와 "찾아보기 ..."버튼을 정의합니다 |
| hidden | 숨겨진 입력 필드를 정의합니다 |
| image | 제출 버튼으로 이미지를 정의 |
| month | 달과 해 제어를 정의합니다 (시간 영역 없음) |
| number | 숫자를 입력하는 필드를 정의 |
| password | 암호 필드를 (문자 마스크이다) 정의 |
| radio | 라디오 버튼을 정의 |
| range | (a 슬라이더 제어와 같은) 그 정확한 값의 숫자를 입력하기위한 제어가 중요하지 않은 정의 |
| reset | 리셋 버튼 (기본값으로 모든 양식 값을 다시 설정) 정의 |
| search | 검색 문자열을 입력하기위한 텍스트 필드를 정의합니다 |
| submit | 제출 버튼을 정의 |
| tel | 전화 번호를 입력하기위한 필드를 정의 |
| text | 태만. 한 줄의 텍스트 필드를 정의합니다 (기본 너비는 20 자) |
| time | 시간을 입력하기위한 컨트롤을 정의 (어떤 시간대 없음) |
| url | URL을 입력하는 필드를 정의 |
| week | 일주일 년 제어를 정의합니다 (시간 영역 없음) |
예
입력 유형 : button
예
그것을 클릭하면 자바 스크립트를 활성화시키는 클릭 버튼 :
<input type="button" value="Click me" onclick="msg()">
»그것을 자신을 시도 입력 유형 : checkbox
예
체크 박스는 사용자가 제한된 개수의 선택 중 하나 이상을 선택하자
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
»그것을 자신을 시도 입력 유형 : color
입력 유형 : date
입력 유형 : datetime
예
(시간대)와 날짜 및 시간 제어를 정의합니다 :
Birthday (date and time): <input type="datetime" name="bdaytime"> »그것을 자신을 시도 입력 형식은 HTML 날짜 표준에서 제거되었다. 대신 날짜 로컬 사용합니다.
입력 유형 : datetime-local
예
날짜 및 시간 제어 (NO 시간대)를 정의 :
Birthday (date and time): <input type="datetime-local" name="bdaytime"> »그것을 자신을 시도 입력 유형 : email
팁 : 아이폰에 사파리 이메일 유형을 인식하고, 일치하는 온 스크린 키보드를 변경 (@ 및 .COM 옵션을 추가합니다).
입력 유형 : file
예
파일 - 선택 필드 (파일 업로드 용) "찾아보기 ..."버튼을 정의합니다 :
Select a file: <input type="file" name="img">
»그것을 자신을 시도 입력 유형 : hidden
예
숨겨진 필드 (사용자에게 보이지 않는)를 정의합니다.
숨겨진 필드는 종종 기본 값을 저장, 또는 그 값은 자바 스크립트에 의해 변경 될 수 있습니다
<input type="hidden" name="country" value="Norway">
»그것을 자신을 시도 입력 유형 : image
입력 유형 : month
예
달과 해 제어 (아무 시간대) 정의 :
Birthday (month and year): <input type="month" name="bdaymonth"> »그것을 자신을 시도 입력 유형 : number
예
(당신은 또한 허용하는 어떤 숫자에 제한을 설정할 수 있습니다) 숫자를 입력하는 필드를 정의합니다 :
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5"> »그것을 자신을 시도 사용 following 제한을 지정하는 속성 :
입력 유형 : password
입력 유형 : radio
예
라디오 버튼은 사용자가 제한된 개수의 선택 중 하나만 선택하자
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other">
Other
»그것을 자신을 시도 입력 유형 : range
예
그 정확한 값 (슬라이더 컨트롤 같이) 중요하지 않은 숫자를 입력하기위한 제어를 정의한다. 또한 번호를 허용하는 것에 제한을 설정할 수 있습니다 :
<input type="range" name="points" min="0" max="10"> »그것을 자신을 시도 사용 following 제한을 지정하는 속성 :
입력 유형 : reset
팁 : 신중하게 리셋 버튼을 사용!그것은 실수로 리셋 버튼을 활성화 사용자를위한 성가신 수 있습니다.
입력 유형 : search
예
(사이트 검색 또는 Google 검색 등) 검색 필드를 정의합니다 :
Search Google: <input type="search" name="googlesearch"> »그것을 자신을 시도 입력 유형 : submit
입력 유형 : tel
입력 유형 : text
예
사용자에 텍스트를 입력 할 수있는 두 개의 단일 줄 텍스트 필드를 정의합니다 :
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
»그것을 자신을 시도 입력 유형 : time
입력 유형 : url
팁 : iPhone의 Safari는 URL을 입력 유형을 인식하고 (.COM 옵션을 추가합니다)에 맞게 온 스크린 키보드를 변경합니다.