htmlフォームの13種類のフォームコントロール

18048 ワード
Html
目次
一、概説
二、伝統的なコントロール
三、新しいコントロール
一、概説
inputラベルのほか、htmlには8つの従来のフォームコントロールと5つのhtml 5の新しいフォームコントロールがあります.
二、伝統的なコントロール
button        
select          
option              
optgroup       ，      
textarea             
fieldset            
legend      fieldset     
label       input

buttonラベル
ボタンを定義します.ラベルの内部には、テキスト、画像、または他のマルチメディアコンテンツを配置できます.マウスとキーボードに敏感な動作がフォームボタンの動作を妨げるため、使用を禁止する唯一の要素は画像マッピングです.
常にbuttonラベルにtypeプロパティを設定し、ie 7以降のブラウザのデフォルトタイプはbuttonであり、他のブラウザのデフォルトタイプはsubmitである.
ie 7および次のバージョンのブラウザはbuttonラベル間のテキストをコミットし、他のブラウザはvalueプロパティ値をコミットします.
buttonラベルはinputラベルよりもスタイル化しやすく、emラベル、strongラベル、imgラベルなどのインラインhtmlコンテンツを追加できます.複雑なレンダリングは、afterおよびbefore擬似要素を使用して実行できます.
buttonラベルの特性値は以下の通りです.
autofocus                 
disabled        
form                 （    form   id）
formaction      form   action  
formenctype      form   enctype  
formmethod      form   method  
formnovaliadate      form   novalidate  
formtarget      form   target  
name           
type           
value            

     ：

     ：




       form    ，

select
以下に示すように、任意の数のoptionラベルとoptgroupラベルを含むドロップダウンリストを定義します.
autofocus               
disabled        
form                    
multiple        
name             
size                  ,size   0,   1

optionラベル
ドロップダウンリストのオプションを定義します.optionラベルには2つのアプリケーションシーンがあり、1つのドロップダウンリストselect、2つのオプションリストdatalistがあります.ラベルの特性は以下の通りです.
disabled                   
label         optgroup       ,  option    ,firefox   label  
selected                         
value

valueプロパティを設定すると、サーバはvalueプロパティ値をコミットします.そうしないと、サーバにコミットされるのはoptionラベルのテキスト内容です.注意、optionではmargin、padding、borderなどのボックスモデルスタイルを設定できません.
optgroupラベル
オプショングループを定義し、オプションを組み合わせます.注意、optgroupではmargin、padding、borderなどのボックスモデルスタイルを設定できません.ラベルの特性は以下の通りです.
label            (  )
disabled            (  )







    


    


    
        



    var select = document.getElementById('select');
    btn1a.onclick = function(){
        select.removeAttribute('disabled');
    }    
    btn1b.onclick = function(){
        select.setAttribute('disabled','');
    }
    btn2a.onclick = function(){
        select.setAttribute('multiple','');
    }
    btn2b.onclick = function(){
        select.removeAttribute('multiple');
    }
    btn3a.onclick = function(){
        select.setAttribute('size','1');
    }
    btn3b.onclick = function(){
        select.setAttribute('size','2');
    }
    btn3c.onclick = function(){
        select.setAttribute('size','3');
    }
    btn3d.onclick = function(){
        select.removeAttribute('size');
    }

textareaラベル
無限数のテキストを収容できる複数行のテキスト入力コントロールを定義します.ブラウザではtextareaネストtextareaは許可されていません.ラベルの特性は以下の通りです.
name            
value           
disabled                
readonly

なお、ie 7以降のブラウザではsetAttribute('disabled',')による書き方はサポートされておらず、setAttribute('disabled','disabled')に設定する必要があります.ie 7以降のブラウザでは、JSによるreadonlyプロパティの設定はサポートされていません.






    btn1.onclick = function(){
        test.setAttribute('disabled','');
    };
    btn2.onclick = function(){
        test.removeAttribute('disabled');
    };    
    btn3.onclick = function(){
        test.setAttribute('readonly','readonly');
    };
    btn4.onclick = function(){
        test.removeAttribute('readonly');
    };

form                    ，IE         
autofous                      ，IE9-         
required              ，IE9-    safari         
placeholder                    ，IE9-
Inputタイプがfileの場合、chrome、FF、IE 8のfakepath問題の処理方法
C#の読み書きおよびファイル操作(File,FileMode)