ユーザ入力のさまざまなタイプを受信するための添加元素のHTML5の出現により、入力各種。10は、従来の入力コントロールである、ボタン、チェックボックス、ファイル、隠された、画像、パスワード、ラジオ、リセット、提出、テキスト、新色、日付、日時、日時、ローカル、電子メール、月、数があり、範囲、検索、TEL、時間、URL、週13の合計
従来のタイプ
単一行のテキスト入力フィールドが定義されている、ユーザーがテキストを入力することができます
パスワードは、パスワードフィールドを定義しました。フィールド内の文字がマスクされます
ファイル入力フィールドやファイルのアップロードのために、「参照」ボタンを定義します
ラジオ定義されたラジオボタン
定義チェックボックスのチェックボックス
隠された定義された隠された入力フィールド
ボタンは（ほとんどの場合、起動スクリプトのためのJavaScriptによって）クリック可能なボタンを定義します
フォームの画像を定義する画像は、ボタンを提出します
リセットリセットボタンを定義しました。リセットボタンは、フォーム内のすべてのデータが消去されます
送信ボタンを定義し提出します。フォームデータをサーバーに送信します[送信]ボタンを
テキスト
タイプ=「テキスト」は、埋め込まれたと一般的に長方形のフレーム、単一回線制御であるデフォルト入力タイプのテキスト入力ボックスを表します。
パスワード
タイプ=「パスワードは」パスワード入力ボックスを表し、それは、テキスト入力ボックスとほぼ同じですが、機能が異なるだけで、文字入力、ポイントの通常、一連の後に非表示になります
[]デフォルトのスタイル
chrome/safari/opera
padding: 1px 0px;
border: 2px inset;
firefox
padding: 2px;
border-width: 1px;
ie
padding: 2px 1px;
border-width: 1px;
[デフォルトの幅と高さ]
chrome
height: 14px;
width: 148px;
safari
height: 15px;
width: 148px;
firefox
height: 17px;
width: 137px;
IE9+
height: 14px;
width: 147px;
IE8-
height: 16px;
width: 149px;
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
[リセット]スタイル
padding: 0;
border: 1px solid;
注：ブラウザの設定の幅と高さ=「テキスト」やパディングとボーダーの幅と高さを備えた入力要素の「パスワード」を入力IE6
[ヒント]シミュレーションショーパスワード隠された機能
説明：今、ボックスの右側にあるソフトウェアコードの多くは小規模な目を持っているが、ショーや非表示のためのパスワードを設定します。入力要素タイプの属性を変更することによって達成することができます
<style>
body{
margin: 0;
font-size: 16px;
}
#show{
padding: 0;
border: 1px solid black;
height: 20px;
width: 200px;
line-height: 20px;
}
#set{
display: inline-block;
height: 22px;
background-color: rgba(0,0,0,0.5);
color: white;
line-height: 18px;
margin-left: -72px;
cursor: pointer;
}
</style>
</head>
<body>
<input id="show" type="password" maxlength="6">
<span id="set">显示密码</span>
<script>
set.onclick = function(){
if(this.innerHTML == '显示密码'){
this.innerHTML = '隐藏密码';
show.type="text";
}else{
this.innerHTML = '显示密码';
show.type="password";
}
}
</script>
ファイル
=「ファイル」入力フィールドを入力して、ファイルのアップロードのために使用される「参照」ボタンを定義します
[リセット]スタイル
padding: 0;
border: 0;
[デフォルトの幅と高さ]
chrome
height: 21px;
width: 238px;
safari
height: 21px;
width: 238px;
firefox
height: 27px;
width: 222px;
IE9+
height: 21px;
width: 220px;
IE8
height: 16px;
width: 214px;
IE7-
height: 15px;
width: 210px;
無線
タイプ=「ラジオ」が定義されているラジオボタンは、ユーザが選択したオプションの設定された数から選択することができます。ボタンの同じセットは、名前の値が一致している必要があります
注：（IE10-ブラウザを除く）パディングと境界を設定できません入力要素の無線タイプ
[]デフォルトのスタイル
chrome/safari/opera/firefox
margin: 3px 3px 0 5px;
box-sizing:border-box;
ie11
margin: 3px 3px 3px 4px;
box-sizing:border-box;
ie10-
padding: 3px;
box-sizing:border-box;
[デフォルトの幅と高さ]
chrome/safari/IE
height: 13px;
width: 13px;
firefox
height: 16px;
width: 16px;
[リセット]スタイル
padding: 0;
margin: 0;
border: 0;
チェックボックス
タイプ=「チェックボックス」が定義ラジオボタンは、ユーザが選択肢の所与の数の1つ以上のオプションを選択することを可能にします。ボタン、同じグループの値を名前が一致している必要があります
注：（IE10-ブラウザを除く）パディングと境界を設定できません入力要素のチェックボックスタイプ
[]デフォルトのスタイル
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
chrome/safari/opera/firefox/ie11
margin: 3px 3px 3px 4px;
box-sizing:border-box;
ie10-
padding: 3px;
box-sizing:border-box;
[デフォルトの幅と高さ]
chrome/safari/IE
height: 13px;
width: 13px;
firefox
height: 16px;
width: 16px;
[リセット]スタイル
padding: 0;
margin: 0;
border: 0;
タイプ=「ラジオ」または「チェックボックスは、」input要素の支持体の属性をチェックします
隠されました
タイプ=「隠れた」隠された入力タイプは、ユーザには見えない追加データを定義するために使用されるが、形で提出します
注：と無効属性タイプ=「隠された」input要素で使用することはできません
//点击提交按钮后，隐藏域的内容test=12会包含在URL中
<form name="form" action="#">
<input type="hidden" name="test" value="12">
<input type="submit">
</form>
ボタン
タイプ=「ボタン」の入力タイプは入力クリッカブルボタンを定義しますが、どんな行動を持っていない、多くの場合、プログラムを起動するために使用する場合はJavaScriptをユーザーがクリックします
[ボタン、提出し、既定のスタイルをリセット]
chrome/safari
padding: 1px 6px;
border: 2px outset buttonface;
box-sizing:border-box;
firefox
padding: 0 6px;
border: 3px outset;
box-sizing:border-box;
IE9+
padding: 3px 10px;
border: 1px outset;
box-sizing:border-box;
IE8
padding: 3px 10px;
border: 1px outset;
IE7-
padding: 1px 0.5px;
border: 1px outset;
注：IE8-ブラウザボックスのサイズ変更：コンテンツ・ボックス、他のブラウザは、箱サイズ：ボーダーボックス;
<input type="button" value="Click me" onclick="alert(1)" />
タイプ=「ボタン」入力タイプと入力ボタン要素は、特性の重複がたくさんありました
画像
これらの4つのプロパティALT、TYPE = submitボタン、指定されたタイプの幅、高さ、SRCで定義されたタイプの形式で入力された入力画像の「画像」
送信ボタン上の画像をクリックと同様に画像がname属性を持っている場合、送信側と調整しますので、サーバ側イメージマップで使用することができ、画像上のx、y座標に沿って送信されます
<form action="#">
<input name="test">
<input type="image" name="imagesubmit" src="https://demo.xiaohuochai.site/submit.jpg" width="99" height="99" alt="测试图片">
</form>
参加する
ボタンタイプ=フォームの送信を作成するために使用される入力の「提出」入力タイプ
リセット
ボタン型=リセット入力の入力フォームを作成するために使用されるタイプの「リセット」
<form action="#" method="get">
<input>
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</form>
ニュータイプ
カラーカスタムカラーパレット
TEL定義は、電話番号の入力フィールドが含まれています
入力フィールドが定義された電子メールの電子メールアドレスが含まれています
URLフィールド定義は、URLアドレスを含んで入力します
カスタム検索の検索ドメイン
値が含まれている番号定義されたフィールド
定義された範囲は、デジタル入力フィールド値範囲を含みます
日、月、年の入力フィールドに定義された日付を選択
選択した月次および年次入力フィールドの月の定義
入力フィールドに、定義された円周方向の週を選択
入力フィールドに定義された月の時間を選択します。
入力フィールド（UTC時間）の日時定義された選択時間、太陽と月、
datatimeローカル入力フィールドに（現地時間）、時間定義された選択、太陽と月
色
入力の種類=「色」入力タイプが色を選択するカラーパレットを作成し、進URLの色値を提出した後に値をコードしていました。黒の23％が＃をコードするURLとなっている23％百万に送信されるような
注：SafariとIEは、このタイプをサポートしていません。
[]デフォルトのスタイル
chrome
width:44px;
height:23px;
border: 1px solid rgb(169,169,169);
padding: 1px 2px;
firefox
width:46px;
height:17px;
border: 3px solid rgb(169,169,169);
padding: 6px 0;
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
TEL
タイプ=「TEL」セマンティックを示すための入力電話入力型入力フィールド、および入力入力のタイプ=「テキスト」タイプの外観の違いはありません、それは携帯電話側テンキーが表示されます
<form action="#">
<input type="tel" placeholder="请输入11位手机号码" pattern="\d{11}">
<input type="submit">
</form>
Eメール
タイプ=セマンティック検証値を示すための入力メールアドレス入力欄の「電子メール」の入力タイプフィールドを自動的に電子メールで送信し、タイプ=入力入力の「テキスト」タイプの外観の違いはありません、電話の呼び出しが終了します英語キーボード
input要素の属性のメールサポート、複数の種類
注：IE9-ブラウザとSafariブラウザがサポートしていません。
<form action="#" >
<input type="email" name="email" multiple>
<input type="submit">
</form>
URL
タイプ=セマンティックURLアドレスを指示するための入力型入力フィールドの「URL」入力、検証値自動的にURLフィールド、および入力入力のタイプ=「テキスト」タイプ外観に差がありません
注：IE9-ブラウザとSafariブラウザがサポートしていません。
<input type="url">
探す
TYPE =入力タイプ入力セマンティック検索ボックスを表示するための「検索」、および入力入力外観上の違いがないの=「テキスト」タイプを入力
<input type="search">
数
タイプ=「数」は、デジタル入力型入力を処理するために入力され、携帯電話側テンキーを呼び出すであろう
注意：IEはこのタイプをサポートしていません。
[]デフォルトのスタイル
chrome/safari
border: 2px inset;
padding-left: 1px;
firefox
border: 1px inset;
padding: 2px;
[プロパティ]
許可される最大所定の最大
所定の最小値minを可能にします
ステップは、法的な番号間隔を指定します
値が指定されたデフォルト値
注意：プロパティの値は、小数点することができ
<input type="number" min="0" max="10" step="0.5" value="6" />
範囲
デジタル入力タイプ=「範囲は、」入力タイプを処理するための入力=「番号」の入力タイプを入力と同様に、一定の範囲内に含まれます
注意：IE9-このタイプをサポートしていません。
[]デフォルトのスタイル
chrome/safari
margin: 2px;
firefox
border: 1px inset;
padding: 1px;
margin: 0 9.3px;
IE10+
padding: 17px 0 32px;
[プロパティ]
許可される最大所定の最大
所定の最小値minを可能にします
ステップは、法的な番号間隔を指定します
値が指定されたデフォルト値
注意：プロパティの値は、小数点することができ
<input type="range" min="0" max="10" step="0.5" value="6" />
注：最小と最大の属性、= 0、最大= 100デフォルトの分を設定していない場合
HTML5には、複数の日付と時刻を選択するための新しい入力タイプを持っています
日付
タイプ=入力の「日付」の入力タイプは、日付を選択するために使用され、月、年
月
=「月」が入力月、年の入力タイプを選択するために使用されるタイプ
週間
で、選択した入力型入力周辺機器のためにTYPE =「週」
時間
タイプ=「時間」が入力タイプ入力を選択するために使用される場合、点
日付時刻
ときタイプ=「日時」入力選択のための入力の種類、日、月、年（UTC時間）
日時、ローカル
ときタイプ=選択するための「日時・地域の」入力タイプ入力、日、月、年（現地時間）
注：IEと6種類のFirefoxの日付がサポートされていない、クロムは、日時の種類をサポートしていません。
[]デフォルトのスタイル
chrome/safari
border: 2px inset;
padding-left: 1px;
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
<input type="date"><br><br>
<input type="month"><br><br>
<input type="week"><br><br>
<input type="time"><br><br>
<input type="datetime"><br><br>
<input type="datetime-local">
日付と時刻コントロールをスケジュールするには、文字列でプロパティ値を設定することができます
[値]属性フォーマット
date YYYY-MM-DD
time hh:mm:ss.s
datetime YYYY-MM-DDThh:mm:ss:sZ
datetime-local YYYY-MM-DDThh:mm:ss:s
month YYYY-MM
week YYYY-Wnn
YYYY=年
MM=月
DD=日
hh=小时
mm=分钟
ss=秒
s=0.1秒
T=日期与时间之间的分隔符
Z=Zulu时间的时区
Wnn=W周数，从1月的第一周开始是1，直到52
属性フォーマットのtype属性の値は、時間スパンを作成するために、minとmaxで使用することができる。STEP移動スケールを設定するために使用することができます
注：クロムはステップのこのタイプをサポートしていないセットです。
<input type="week" value="2015-W36" step="2" min="2015-W25" max="2015-W40">
