Latest web development tutorials

HTML 형식의 입력 특성

HTML 입력 태그 참조 HTML <INPUT> 태그

두 개의 서로 다른 입력 유형, 텍스트 및 제출와 HTML 양식 :

<form action="demo-form.php">
用户名: <input type="text" name="usrname"><br>
<input type="submit" value="提交">

»시도
(자세한 예제는이 페이지 하단 참조)

브라우저 지원

Internet ExplorerFirefoxOperaGoogle ChromeSafari

모든 주요 브라우저는 type 속성을 지원합니다. 그러나, 모든 주요 브라우저는 모든 다른 입력 유형은 모든 주요 브라우저에서 작동 할 수 있습니다 지원합니다.

브라우저 지원의 각 입력 유형은 아래를 참조하십시오.


정의 및 사용

<입력> type 속성은 표시 할 요소의 유형을 지정합니다.

기본 유형은 다음과 같습니다 텍스트입니다.

참고 :이 속성이 필요하지만, 우리는 당신이 항상 그것을 사용한다고 생각하지 않습니다.


HTML 4.01과 HTML5의 차이점

다음 입력 유형은 HTML5 형식에 새로운 : 색상, 날짜, 날짜, 날짜 로컬, 월, 주, 시간, 이메일, 숫자, 범위, 검색, 전화 및 URL입니다.


문법

<input type="value">

속성 값

描述
button 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。
checkbox 定义复选框。
color New 定义拾色器。
date New 定义 date 控件(包括年、月、日,不包括时间)。
datetime New 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。
datetime-local New 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。
email New 定义用于 e-mail 地址的字段。
file 定义文件选择字段和 "浏览..." 按钮,供文件上传。
hidden 定义隐藏输入字段。
image 定义图像作为提交按钮。
month New 定义 month 和 year 控件(不带时区)。
number New 定义用于输入数字的字段。
password 定义密码字段(字段中的字符会被遮蔽)。
radio 定义单选按钮。
range New 定义用于精确值不重要的输入数字的控件(比如 slider 控件)。
reset 定义重置按钮(重置所有的表单值为默认值)。
search New 定义用于输入搜索字符串的文本字段。
submit 定义提交按钮。
tel New 定义用于输入电话号码的字段。
text 默认。定义一个单行的文本字段(默认宽度为 20 个字符)。
time New 定义用于输入时间的控件(不带时区)。
url New 定义用于输入 URL 的字段。
week New 定义 week 和 year 控件(不带时区)。


입력 유형 : 버튼

OperaSafariChromeFirefoxInternet Explorer

사용자가 자바 스크립트의 기간을 시작하는 버튼을 클릭 클릭 버튼의 정의 :

<input type="button" value="点我" onclick="msg()">

»시도


입력 유형 : 확인란

OperaSafariChromeFirefoxInternet Explorer

상자는 사용자가 선택할 수있는 하나 이상의 옵션을 선택할 수 있습니다 :

<input type="checkbox" name="vehicle[]" value="Bike"> 我有一辆自行车<br>
<input type="checkbox" name="vehicle[]" value="Car"> 我有一辆小轿车<br>
<input type="checkbox" name="vehicle[]" value="Boat"> 我有一艘船<br>

»시도


입력 유형 : 색상

OperaSafariChromeFirefoxInternet Explorer

색상 선택기에서 색상을 선택합니다 :

选择你喜欢的颜色: <input type="color" name="favcolor"><br>

»시도


입력 유형 : 날짜

OperaSafariChromeFirefoxInternet Explorer

정의 날짜 컨트롤 :

生日: <input type="date" name="bday">

»시도


입력 유형 : 날짜

OperaSafariChromeFirefoxInternet Explorer

(시간대)와 날짜 및 시간 컨트롤을 정의합니다 :

生日 (日期和时间): <input type="datetime" name="bdaytime">

»시도


입력 유형 : 날짜 로컬

OperaSafariChromeFirefoxInternet Explorer

(시간대)없이 날짜와 시간 제어를 정의합니다 :

生日 (日期和时间):<input type="datetime-local" name="bdaytime">

»시도


입력 유형 : 이메일

OperaSafariChromeFirefoxInternet Explorer

(형태가 확인 이메일 필드의 값을 자동적으로 제출) 이메일 주소 필드에 정의 :

E-mail: <input type="email" name="usremail">

»시도

팁 : 아이폰 사파리 브라우저는 다음 (@ 및 .COM 옵션을 추가) 그것에 적응하기 위해 터치 스크린 키보드를 변경, 이메일 입력 형식을 인식합니다.


입력 유형 : 파일

OperaSafariChromeFirefoxInternet Explorer

파일 업로드 파일 선택 필드와 "찾아보기 ..."버튼을 정의하려면

选择一个文件: <input type="file" name="img">

»시도


입력 유형 : 숨겨진

OperaSafariChromeFirefoxInternet Explorer

숨겨진 필드의 정의, 숨겨진 필드는 사용자에게 표시되지 않습니다. 숨겨진 필드들은 디폴트 값을 저장하거나, 자바 스크립트에 의해 그 값을 변경

<input type="hidden" name="country" value="Norway">

»시도


입력 유형 : 이미지

OperaSafariChromeFirefoxInternet Explorer

제출 버튼으로 사용자 이미지 :

<input type="image" src="img_submit.gif" alt="Submit">

»시도


입력 유형 : 달

OperaSafariChromeFirefoxInternet Explorer

(시간대)없이 월과 연도 제어를 정의합니다 :

生日 ( 月和年 ): <input type="month" name="bdaymonth">

»시도


입력 유형 : 번호

OperaSafariChromeFirefoxInternet Explorer

(당신이 허용 한도 번호를 설정할 수)의 필드를 정의하는 번호를 입력 :

数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">

»시도

제한을 지정하려면 다음 속성을 사용하십시오 :

  • MAX - 규정에서 허용하는 최대.
  • - 규정에 의해 허용되는 최소.
  • STEP - 법적 디지털 간격 요구 사항에 대해 설명합니다.
  • 가치 - 지정된 기본.

입력 유형 : 암호

OperaSafariChromeFirefoxInternet Explorer

(암호 필드가 마스크 문자입니다) 암호 필드를 정의합니다 :

<input type="password" name="pwd">

»시도


입력 유형 : 무선

OperaSafariChromeFirefoxInternet Explorer

또한 선택할 수있는 옵션을 사용자가 선택할 수 :

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="女"> 女

»시도


입력 유형 : 범위

OperaSafariChromeFirefoxInternet Explorer

그것은 정확한 값 (예 : 슬라이더 컨트롤과 같은) 중요한 입력 디지털 제어하지 않습니다 정의합니다. 또한 제한을 허용 번호를 설정할 수 있습니다 :

<input type="range" name="points" min="1" max="10">

»시도

제한을 지정하려면 다음 속성을 사용하십시오 :

  • MAX - 규정에서 허용하는 최대.
  • - 규정에 의해 허용되는 최소.
  • STEP - 법적 디지털 간격 요구 사항에 대해 설명합니다.
  • 가치 - 지정된 기본.

입력 유형 : 재설정

OperaSafariChromeFirefoxInternet Explorer

리셋 버튼 (모든 양식이 기본입니다 재설정)을 정의합니다 :

<input type="reset">

»시도

팁 : 리셋 버튼을 사용하여 조심!리셋 버튼은 매우 성가신 일에 사용자의 실수로 클릭했습니다.


입력 유형 : 검색

OperaSafariChromeFirefoxInternet Explorer

정의 검색 필드 (예를 들어, 사이트 검색 또는 Google 검색 등) :

Search Google: <input type="search" name="googlesearch">

»시도


입력 유형 : 제출

OperaSafariChromeFirefoxInternet Explorer

제출 버튼을 정의합니다 :

<input type="submit">

»시도


입력 유형 : 전화

OperaSafariChromeFirefoxInternet Explorer

전화 번호를 입력하기위한 정의 필드 :

电话号码: <input type="tel" name="usrtel">

»시도


입력 유형 : 텍스트

OperaSafariChromeFirefoxInternet Explorer

사용자가 텍스트 필드에 한 줄의 텍스트를 입력 할 두 가지를 정의 할 수 있습니다 :

First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>

»시도


입력 유형 : 시간

OperaSafariChromeFirefoxInternet Explorer

(시간대)없이 사용되는 제어의 정의시 입력 :

选择时间: <input type="time" name="usr_time">

»시도


입력 유형 : 홈페이지

OperaSafariChromeFirefoxInternet Explorer

URL의 입력 필드를 정의합니다 :

添加你的主页: <input type="url" name="homepage">

»시도

팁 : 아이폰 사파리 브라우저는 다음 (.COM 옵션을 추가) 그것에 적응하는 터치 스크린 키보드를 변경, URL 입력 형식을 인식합니다.


입력 유형 : 주

OperaSafariChromeFirefoxInternet Explorer

주 및 (시간대 제외) 해 컨트롤의 정의 :

选择周: <input type="week" name="week_year">

»시도


HTML 입력 태그 참조 HTML <INPUT> 태그