HTML form_html/css_WEB-ITnose の input 要素の 30 個の要素属性を理解する

ディレクトリの従来の属性

名前の種類 受け入れる alt チェック 無効 読み取り専用 maxlength サイズ src 値

新しい属性

オートコンプリート オートフォーカス novalidate 高さ 幅 リスト 最小 最大 ステップ 複数のパターン プレースホルダーが必要 formaction formenctype formmethod formnovalidate formtarget

前の単語

form 要素は単なるデータ取得要素のコンテナであり、コンテナ内の要素はフォーム コントロールと呼ばれます。最も一般的に使用されるフォームコントロールはinput要素です

accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、valueの11個の属性がinput要素の伝統的な要素属性です

Autocomplete 、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width の 19 個の属性は、HTML5 の新しい要素属性です

従来の属性

name

name属性は、入力要素の名前を指定するために使用され、サーバーに送信された後にフォームデータを識別するために使用され、またはクライアント上のJavaScriptを通じてフォームデータを参照するために使用されます

[注意] ] name 属性が設定されたフォーム要素のみがフォーム送信時に値を渡します

type

type 属性は、input 要素の型を指定するために使用されます

【注意】input 要素がtype 属性が設定されていないか、設定された値がブラウザでサポートされていない場合、入力タイプは type="text" に変更されます

accept

accept 属性は、ファイルのアップロードを通じて送信できるファイルの種類を指定するために使用されます。理論的には、アップロードされるファイルの種類を制限するために使用できますが、これは建設的なものであり、無視される可能性が高く、カンマ区切りの MIME タイプを受け入れます

[注] この属性は、type="file" でのみ使用できます

<input type="file" accept="image/gif,image/jpeg,image/jpg">

alt

alt 属性は、画像入力の代替テキストを指定します。その機能は、ユーザーが何らかの理由で画像を表示できない場合に代替情報を提供します。 ] alt 属性は type でのみ使用できます 「image」の input 要素は

<input type="image" src="#" alt="测试图片">

checked

と一緒に使用されます

checked 属性は、ページの読み込み時に事前に選択される必要がある input 要素を指定します。ページがロードされた後に JavaScript を通じて設定することもできます

[Note The ]checked 属性は、type="radio" または type="checkbox" の input 要素でのみ使用できます

<input type="radio" name="radio" value="1" checked><input type="radio" name="radio" value="2"><input type="checkbox" name="checkbox" value="1"><input type="checkbox" name="checkbox" value="2"><script>var oInput = document.getElementsByTagName('input');for(var i = 0,len = oInput.length; i < len; i++){    oInput[i].onmouseover = function(){        this.checked = 'checked';    }}    </script>

disabled

The disabled 属性は、入力要素を無効にすることを指定します。無効なフィールドは変更できず、Tab キーを使用してフィールドに切り替えることもできませんが、そのテキストを選択またはコピーすることはできます

[注 1]無効な属性は、type="hidden" の input 要素では使用できません

[注2] IE7の場合 - ブラウザはdisabled="disabled"に設定する必要があり、disabledを直接設定することはできません。そうしないと、javascriptを使用して制御する場合に無効になります

<button id="btn1">输入域可用</button><button id="btn2">输入域不可用</button><input id="test" disabled value="内容"><script>btn1.onclick = function(){    test.removeAttribute('disabled');}    btn2.onclick = function(){    test.setAttribute('disabled','disabled');}    </script>

readonly

readonly属性は、入力フィールドが読み取り専用であること。読み取り専用フィールドは変更できませんが、ユーザーはタブ キーを使用してフィールドに切り替えることができ、そのテキストを選択またはコピーすることもできます

readonly 属性は、type="text" または"password"

[ Note] IE7-browser doesn't support the use of javascript to control the readonly 属性

<button id="btn1">输入域只读</button><button id="btn2">输入域可读写</button><input id="test" value="内容" readonly><script>btn1.onclick = function(){    test.setAttribute('readonly','readonly');}btn2.onclick = function(){    test.removeAttribute('readonly');}    </script>

maxlength

maxlength 属性は、入力フィールドの最大長を数値で指定しますofcharacters

[Note] This Attribute can only be used with type=" Text" or type="password" input elements are used together

<input maxlength="6"><input type="password" maxlength="6">

size

size 属性は、表示される文字数です。 type="text" または "password" の input 要素; 他のタイプの場合は、ピクセル単位の入力フィールド幅です

[注] size 属性は視覚的なデザイン属性であるため、代わりに CSS を使用することをお勧めします

<input size="1"><input type="password" size="2">

src

src属性は送信ボタンで表示される画像のURLとなります

[注意] src属性はtype="image"のinput要素でのみ使用できます

<form action="#">    <input name="test">    <input type="image" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/submit.jpg" width="99" height="99" alt="测试图片"></form>

value

value属性はinput要素の値を設定します。入力タイプが異なると、value 属性の使用法も異なります。

Type="button"、"reset"、"submit" は、ボタンに表示されるテキストを定義するために使用されます

　　type="text"、"password"、"hidden"用于定义输入字段的初始值

　　type="checkbox"、"radio"、"image"用于定义与输入相关联的值

　　[注意1]type="checkbox"或"radio"必须设置value属性

　　[注意2]value属性无法与type="file"的input元素一起使用

<button id="btn1">1</button><button id="btn2">2</button><input id="test"><script>btn1.onclick = btn2.onclick =function(){    test.value=this.innerHTML;}    </script>

 

新增属性

autocomplete

　　autocomplete属性可以在个别元素或整个表单上开启或关闭浏览器的自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，显示出在字段中填写的选项

　　autocomplete属性适用form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color

　　[注意]IE浏览器不支持该属性，只有元素拥有name属性，该属性才有效

<input name="test1" autocomplete="on"><input name="test2" autocomplete="off">    

　　详细情况移步至此

autofocus

　　autofocus属性规定在页面加载时，域自动地获得焦点

　　autofous属性适用于button、input、keygen、select和textarea元素

<input name="test1"><input name="test2" autofocus>

novalidate

　　novalidate属性规定在提交表单时不验证form或input域

　　novalidate属性适用于form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color

　　[注意]IE9-浏览器不支持

　　详细情况移步至此

height

　　height属性用于规定image类型的input标签的图像高度

　　[注意]该属性只适用于image类型的input标签

width

　　width属性用于规定image类型的input标签的图像宽度

　　[注意]该属性只适用于image类型的input标签

//http://127.0.0.1/form.html?test=123&x=38&y=57#<form action="#">    <input name="test">    <input type="image" src="submit.jpg" width="99" height="99"></form>

list

　　大多数输入类型包含一个属性list，它和一个新元素datalist结合使用，这个元素定义当在表单控件输入数据时可用的一个选项列表。datalist元素自身不会在页面显示，而是为其他元素的list属性提供数据

　　list属性适用于form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color

　　[注意]IE9-浏览器及safari浏览器不支持

　　详细情况移步至此

min

　　min属性规定输入域所允许的最大值 

max

　　max属性规定输入域所允许的最小值

step

　　step属性为输入域规定合法的数字间隔

　　min、max、step属性适用于以下类型的input元素:date pickers、number、range

<input type="number" min="0" max="10" step="0.5" value="6" />

<input type="range" min="0" max="10" step="0.5" value="6" />

multiple

　　multiple属性规定按住ctrl按键，输入字段可以选择多个值

　　该属性适用于type="email"和"file"的input元素

　　[注意]该属性IE9-浏览器不支持

<button id="btn1">打开文件多选</button><button id="btn2">关闭文件多选</button><br><br><input id="test" type="file" multiple><script>btn1.onclick = function(){    test.setAttribute('multiple','');};btn2.onclick = function(){    test.removeAttribute('multiple');};</script>

pattern

　　pattern属性规定用于验证input域的模式。模型pattern是正则表达式

　　pattern属性适用于以下类型的input元素：text、search、url、tel、email、password

　　[注意]IE9-浏览器及safari浏览器不支持

<form action="#">    <input pattern="\d{3}">        <input type="submit"></form>

placeholder

　　placeholder属性提供占位符文字，描述输入域所期待的值。占位符会在输入域为空时显示出现，在输入域获得焦点时消失

　　placeholder属性适用于以下类型的input元素:text、search、url、tel、email、password

　　[注意]IE9-浏览器不支持

<form action="#">    <input type="tel" placeholder="请输入数字" pattern="\d{11}">        <input type="submit"></form>

required

　　required属性规定必须在提交之前填写输入域(不能为空)

　　required属性适用于以下类型的input元素：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file

　　[注意]IE9-浏览器及safari浏览器不支持

<form action="#">    <input required>        <input type="submit"></form>

form

　　form属性规定输入域所属的一个或多个表单，form属性必须和所属表单的id

　　form属性适用于所有input标签的类型，若需要引用一个以上的表单时，用空格分隔

　　[注意]IE浏览器不支持该属性，只有元素拥有name属性，该属性才有效

<form id="form" action="#">    <input type="submit"></form><input name="test" form="form">

表单重写属性

　　表单重写属性允许重写form元素的某些属性设定。其中，formnovalidate适用于button或input元素，而其他属性适用于submit或reset的button或input元素

formaction

　　重写表单的action属性

　　关于action的详细信息移步至此

<form action="#" >First name: <input type="text" name="fname" /><br />Last name: <input type="text" name="lname" /><br /><input type="submit" value="提交" /><br /><input type="submit" formaction="#" value="以管理员身份提交" /></form>

formenctype

　　重写表单的enctype属性

　　关于enctype的详细信息移步至此

<form action="#" method="post">  First name: <input type="text" name="fname" /><br />  <input type="submit" value="提交" />  <input type="submit" formenctype="multipart/form-data" value="以multipart/form-data编码提交" /></form>

formmethod

　　重写表单的method属性

　　关于method的详细信息移步至此

<form action="#" method="get">  First name: <input type="text" name="fname" /><br />  Last name: <input type="text" name="lname" /><br /><input type="submit" value="提交" /><input type="submit" formmethod="post" formaction="#" value="使用POST提交" /></form>

formnovalidate

　　重写表单的novalidate属性

　　关于novalidate的详细信息移步至此

<form action="#" method="get">E-mail: <input type="email" name="userid" /><br /><input type="submit" value="提交" /><br /><input type="submit" formnovalidate="formnovalidate" value="进行没有验证的提交" /></form>

formtarget

　　重写表单的target属性

　　关于target的详细信息移步至此

<form action="#">  First name: <input type="text" name="fname" /><br />  Last name: <input type="text" name="lname" /><br /><input type="submit" value="提交" /><input type="submit" formtarget="_blank" value="提交到新窗口/选项卡" /></form>