ホームページ > 記事 > ウェブフロントエンド > HTML の 23 種類の入力要素を理解する Forms_html/css_WEB-ITnose
HTML の 23 種類の入力要素を理解する Forms_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:57:352181ブラウズ
ディレクトリの従来型
textpasswordfileradiocheckboxhiddenbuttonimageresetsubmit
新しい型前の単語
HTML5 の出現により、多くの新しい型が入力に追加されました要素、さまざまなタイプのユーザー入力を受け入れます。このうち、ボタン、チェックボックス、ファイル、非表示、画像、パスワード、ラジオ、リセット、送信、テキストの 10 個は従来の入力コントロールであり、新しいものは色、日付、日時、ローカル日時、電子メール、月、数値、範囲です。 、検索、電話番号、時間、URL、週、合計 13 種類
従来のタイプ
テキストは、ユーザーがテキストを入力できる 1 行の入力フィールドを定義します
パスワードはパスワードフィールドを定義します。フィールド内の文字はマスクされます
ファイルは入力フィールドとファイルアップロードの「参照」ボタンを定義します
ラジオはラジオボタンを定義します
チェックボックスはチェックボックスを定義します
非表示非表示の入力フィールドを定義します
ボタン クリック可能なボタンを定義します (ほとんどの場合、JavaScript 経由でスクリプトを起動するために使用されます)
イメージ 画像の形式で送信ボタンを定義します
reset はリセット ボタンを定義します。リセット ボタンは、
submit という形式のデータをすべてクリアします。submit ボタンは送信ボタンを定義します。送信ボタンはフォーム データをサーバーに送信します
text
type="text" はテキスト入力ボックスを表します。これはデフォルトの入力タイプであり、通常は 1 行のコントロールです。インラインボックスのある四角形
password
type="password" はパスワード入力ボックスを表します。これはテキスト入力ボックスとほぼ同じです。機能の唯一の違いは次のとおりです。文字を入力すると非表示になります。通常はドットの連続です。
【デフォルトのスタイル】
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;
【リセット】 style】
padding: 0;border: 1px solid;
【注意】IE6 ブラウザで設定される type="text" または "password" の input 要素の幅と高さは、パディングとボーダーを含んだ幅と高さです
dd39b8086d3a793621d628dce02a4367 下の対応するボタンをクリックしてください。デモが利用可能です
【ヒント】パスワードの表示と非表示の機能をシミュレートします
注: 現在、多くのソフトウェアには右側に小さな目が付いていますパスワードボックスの、パスワードの表示/非表示を設定するために使用されます。これは、input 要素の type 属性を変更することで実現されます。
<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> file
type="file" は、ファイルアップロード用の入力フィールドと「参照」ボタンを定義します
【 スタイルのリセット 】
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;
[注意] IE8 ブラウザでは、type="file" の入力要素の幅と高さが設定されます。パディングと境界線の幅と高さを含める
このタイプの入力要素は、accept 属性と multiple 属性をサポートします
accept 属性に関する詳細情報はここに移動します
複数の属性に関する詳細情報はここに移動します ここでのステップ
radio
type="radio" は、ユーザーが指定された数の選択肢からオプションを選択できるようにするラジオ ボタンを定義します。同じグループのボタンについては、名前の値が一貫している必要があります
[注] ラジオ タイプの入力要素にはパディングと境界線を設定できません (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;
checkbox
type="checkbox" は、複数選択ボタン。ユーザーは、指定された数の選択肢から 1 つ以上のオプションを選択できます。同じグループ内のボタンの場合、名前の値は一貫している必要があります
[注] チェックボックス タイプの入力要素にはパディングとボーダーを設定できません (IE10 ブラウザーを除く)
[デフォルト スタイル]
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;
type="radio" または "checkbox" の入力要素をサポートチェックされた属性
チェックされた属性の詳細はここに移動します
hidden
type="hidden" は、非表示の入力タイプをユーザーには表示されないが必須のフォーム 送信された追加データ
[注] 無効な属性は、type="hidden" の入力要素では使用できません
//点击提交按钮后，隐藏域的内容test=12会包含在URL中<form name="form" action="#"> <input type="hidden" name="test" value="12"> <input type="submit"></form>
button
type="button" の入力 入力タイプはクリック可能なボタンを定義しますが、ユーザーが
をクリックしたときに 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 ブラウザーの box-sizing:content-box; 他のブラウザーの box-sizing:border-box;
<input type="button" value="Click me" onclick="alert(1)" />
type="button" input 入力タイプはボタン要素と重複する部分が多くあります。 機能
ボタン要素の詳細については、こちらを参照してください
画像
入力 入力タイプtype="image" の場合、画像の形式で送信ボタンを定義します。このタイプでは、width、height、src、alt の 4 つの属性を設定できます。
画像を送信ボタンとして使用すると、x が送信されます。画像をクリックしたときの y 座標も一緒に送信されます。画像に name 属性がある場合は、座標
<form action="#"> <input name="test"> <input type="image" name="imagesubmit" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/submit.jpg" width="99" height="99" alt="测试图片"></form>
も送信されます。 submit
フォームを送信するボタンの作成には、type="submit" の入力タイプが使用されます。
reset
type="reset" の入力タイプが使用されますフォームをリセットするボタンを作成します
<form action="#" method="get"> <input> <input type="reset" value="Reset" /> <input type="submit" value="Submit" /></form>
新增类型
color定义调色板
tel定义包含电话号码的输入域
email定义包含email地址的输入域
url定义包含URL地址的输入域
search定义搜索域
number定义包含数值的输入域
range定义包含一定范围内数字值的输入域
date定义选取日、月、年的输入域
month定义选取月、年的输入域
week定义选取周、年的输入域
time定义选取月、年的输入域
datetime定义选取时间、日 月、年的输入域(UTC时间)
datatime-local
定义选取时间、日 月、年的输入域(本地时间)
color
type="color"的input输入类型会创建一个调色板用来选择颜色，颜色值以URL编码后的十六进制数值提交。如黑色会以%23000000发送，其中%23是#的URL编码
[注意]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;
<input type="color">
tel
type="tel"的input输入类型用于表示语义上的电话输入域，外观上与type="text"的input输入类型没有差异
<form action="#"> <input type="tel" placeholder="请输入11位手机号码" pattern="\d{11}"> <input type="submit"></form> type="email"的input输入类型用于表示语义上的e-mail地址输入域，会自动验证email域的值，外观上与type="text"的input输入类型没有差异
email类型的input元素支持multiple属性
[注意]IE9-浏览器及safari浏览器不支持
<form action="#" > <input type="email" name="email" multiple> <input type="submit"></form>
url
type="url"的input输入类型用于表示语义上的url地址的输入域，会自动验证url域的值，外观上与type="text"的input输入类型没有差异
[注意]IE9-浏览器及safari浏览器不支持
<input type="url">
search
type="search"的input输入类型用于表示语义上的搜索框，外观上与type="text"的input输入类型没有差异
<input type="search">
number
type="number"的input输入类型用于处理数字输入
[注意]IE不支持该类型
【默认样式】
chrome/safari border: 2px inset; padding-left: 1px;firefox border: 1px inset; padding: 2px;
【属性】
max规定允许的最大值
min规定允许的最小值
step规定合法的数字间隔
value规定默认值
[注意]属性的取值可为小数
<input type="number" min="0" max="10" step="0.5" value="6" />
range
type="range"的input输入类型用于处理包含在一定范围内的数字输入，类似于type="number"的input类型
[注意]IE9-不支持该类型
【默认样式】
chrome/safari margin: 2px;firefox border: 1px inset; padding: 1px; margin: 0 9.3px;IE10+ padding: 17px 0 32px;
【属性】
max规定允许的最大值
min规定允许的最小值
step规定合法的数字间隔
value规定默认值
[注意]属性的取值可为小数
<input type="range" min="0" max="10" step="0.5" value="6" />
HTML5拥有多个可供选取日期和时间的新输入类型
date
type="date"的input输入类型用于选取日、月、年
month
type="month"的input输入类型用于选取月、年
week
type="week"的input输入类型用于选取周、年
time
type="time"的input输入类型用于选取时、分
datetime
type="datetime"的input输入类型用于选取时、日、月、年(UTC时间)
datetime-local
type="datetime-local"的input输入类型用于选取时、日、月、年(本地时间)
[注意]IE和firefox这6种日期类型都不支持，chrome不支持datetime类型
【默认样式】
chrome/safari border: 2px inset; padding-left: 1px;
<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">
要预设控件的日期和时间，可以用字符串设置value属性
【value属性格式】
date YYYY-MM-DDtime hh:mm:ss.sdatetime YYYY-MM-DDThh:mm:ss:sZdatetime-local YYYY-MM-DDThh:mm:ss:smonth YYYY-MMweek YYYY-Wnn
YYYY=年MM=月DD=日hh=小时mm=分钟ss=秒s=0.1秒T=日期与时间之间的分隔符Z=Zulu时间的时区Wnn=W周数，从1月的第一周开始是1，直到52
该类型的value属性格式还可以用在min和max的属性里，用来创建时间跨度；step可以用来设置移动的刻度
[注意]chrome不支持该类型的step设置
<input type="week" value="2015-W36" step="2" min="2015-W25" max="2015-W40">