HTML5の新機能のcontentEditable属性は、動的なフォームを実装する方が簡単です

HTML5は、プロパティの新機能を紹介：
のcontentEditableグローバルスコープを。タグのすべてのブロックは、例えばすることができますスパン、P、DIVは、他のラベルをtdの。
ただし、ラベルの範囲<BR/>種類はできません。

contentEditable role属性を入力することができるフォーカスを取得するためにラベルをできるようにすることです。
HTML5の前に：
私たちは、フォーム、およびケースに入ることができる内容のテーブルのフォームを作成する場合。TDタグを動的に完全な入力ボックスを生成するために入力されるとjsはクリックイベントを選択する現在の入力でのTDが割り当てられ、TD上記ラベル領域に現在の値が表示されます。そして、入力が消えます。
あなたはHTML5を持っていたら、限り、我々はすべてのtdタグやラベルに加えてデータのcontentEditable入力操作の=「真」をブロックするようにして達成することができます。それは非常に便利ではありません。
シナリオ：
私たちは、生成されたダイナミックなフォルムを実現するためのcontentEditable属性テーブル領域HTML5フィッティング操作を使用することができます。限りのcontentEditable =「真」のボックスtdの割り当てを入力する必要があるとして、タイトルボックスの割り当てはのcontentEditable =「偽」またはないそれを書きます。
または、ユーザは、あなたが運営する権利を所有し、フォームの種類を望んでいるように、私たちは、テンプレートを保存することができます、空白のテーブル、行と列が自動的にフォームを追加することができます。
可能性のある問題が発生しました：
舞台裏どのようにデータを保存するには、どのようにテンプレート情報フォアグラウンドショー、ユーザーがどのように制限コンテンツ処理上の入力を持っている必要があります、例えば：セックスの内容について何が唯一のオスとメスのドロップダウンボックスを選択するか、無線処理を使用することができます。ユーザーの場合データベース内の情報を処理する方法、統計情報を必要としていました。これは、考慮される必要がある実用的な、使いやすい動的なフォームを達成することです。しかし、これらも解決することができます。小さなパートナーのダイナミックなフォルムを行う必要がある場合は、我々は今、これらの問題について慎重に検討します。私はこの記事はあなたを助けることができると思います。

ここでは単純な例です
ソースコードの例は：

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>タイトル</ タイトル> 
    < スタイルタイプ= "テキスト/ cssの" > 
        TD { 
            行の高さ：2EM 。
            最小幅：200pxの。
            国境：1pxの固体＃1 d4d4d4 ; 
            パディング：5pxの;
            パディングトップ：7px ; 
            パディング下：7px ; 
            垂直整列：トップ。

        } 
    </ スタイル> 
</ ヘッド> 
< ボディ> 
< テーブルCELLSPACING = "0" スタイル= "ボーダー崩壊：崩壊;" > 
    < THEAD > 
    < TR > < 番目COLSPAN = "4" >个人信息</ 番目> </ TR > 
    <
    < TBODY > < TR > 
        < TD のcontentEditable = "false"のスタイル= "テキスト整列：右;" >姓名：</ TD > < TD のcontentEditable = "true"を> </ TD > 
        < TD のcontentEditable = "false"のスタイル= "テキスト整列：右;" >性别：</ TD > < TD のcontentEditable = "true"を> </ TD > </ TR > 
    < TR >
        =「false」のスタイル=「テキスト整列：右;」>出生日期：</ TD > < TD のcontentEditable = "true"を> </ TD > 
        < TD のcontentEditable = "false"のスタイル= "テキスト整列：右;" >身份证号：</ TD > < TD のcontentEditable = "真" > </ TD > </ TR > 
    </ TBODY > 
</ テーブル> 
</ ボディ> 
<

注意：

CELLSPACING =「0」TDプロセスとの間のギャップ。

スタイル=「ボーダー崩壊：崩壊は、」重畳表示処理は、より厚い境界をtdの。

私たちは、の効果を見て：

HTML5の新機能のcontentEditable属性は、動的なフォームを実装する方が簡単です

おすすめ