ブラウザでHTMLフォームをカスタマイズする方法

Question

私は、テキストボックス、labele、checkboxe、ドロップダウンなどの入力フィールドを含むHTMLフォームを持っています。このフォームはUIでレンダリングされています。ウェブページ自体のこのウェブフォームおよびその結果の変更は、次の訪問時にユーザがカスタマイズされたフォームを見ることができるように保存されるべきである。

注：私は既にWebフォームを持っており、同じものをカスタマイズする必要があります。フォームを最初から作成する必要はありません。

アップデート：このリンクを参照してください ：以下は私のサンプルWebページのフォームでは、コントロールまたは要素をドラッグアンドドロップする

form class="form-inline"> 
<div class="form-group"> 
    <label for="email">Email:</label> 
    <input type="email" class="form-control" id="email" placeholder="Enter email"> 
</div> 
<div class="form-group"> 
    <label for="pwd">Password:</label> 
    <input type="password" class="form-control" id="pwd" placeholder="Enter password"> 
</div> 
<div class="checkbox"> 
    <label><input type="checkbox"> Remember me</label> 
</div> 
<button type="submit" class="btn btn-default">Submit</button> 

Answer 1

だからここが始まりです。入力フィールドは、サイズ変更可能なdivにラップされ、幅のサイズ変更ハンドルがあります。 2016年以降、これはテキストフィールドのサイズを変更するための最良の選択肢と思われます。そのリサイズハンドルが解放されると、単にフィールド名と更新されたサイズをピクセル単位で報告するイベントリスナーを追加しました。

私はフィールド幅をlocalStorageのオブジェクトに保存するプロトタイプを作成しました。これはAJAXなどを使用してバックエンドに簡単に行うことができますが、オブジェクトを保存するとそのデータを渡す方法と思われます。

サンドボックスには制限があるため（localStorageにアクセスできないため）、実際にはここでは実行されないことに注意してください。この作業を確認するには、fiddleです。

私が行ったことは、サイズを調整できることだけです。実際にどこから始めるべきかを知りませんでした。

// Uncomment the following line to reset the field widths. 
 
//localStorage.clear() 
 

 
// If we don't have a customFormSettings saved, create some defaults. 
 
if (!localStorage.getItem("myCustomFormSettings")) { 
 
    var myDefaultFormSettings = { 'email': '250px', 'pwd': '250px'} 
 
    localStorage.setItem("myCustomFormSettings", JSON.stringify(myDefaultFormSettings)); 
 
}; 
 

 
// Whether they are custom or default, load the settings so we can 
 
// set the widths. 
 
var myCustomFormSettings = JSON.parse(localStorage.getItem("myCustomFormSettings")); 
 

 
// Go through the myCustomFormSettings object, and use each property 
 
// to set the field width. 
 
for (var property in myCustomFormSettings){ 
 
    $("#"+property).parent().css("width", myCustomFormSettings[property]); 
 
} 
 

 
/***** 
 
* When the field is resized, we need to update the object we've saved 
 
* to localStorage with the field name and the new width. This same 
 
* JSON object could be just as easily stored on a back-end or what 
 
* have you. 
 
*****/ 
 
$(".resizable-input > span").on("mouseup", function(){ 
 
    // First, get the field name and width values 
 
    var fieldName = $(this).siblings(".form-control:first").attr("id"); 
 
    var fieldWidth = $(this).parent().width()+"px"; 
 
    
 
    // Update the object we'll be saving with the new data. 
 
    myCustomFormSettings[fieldName] = [fieldWidth]; 
 
    
 
    // And either save it to localStorage, or send it to the server. 
 
    localStorage.setItem("myCustomFormSettings", JSON.stringify(myCustomFormSettings)); 
 
    
 
    console.log(myCustomFormSettings); 
 

 
})

.resizable-input { 
 
    /* make resizable */ 
 
    overflow-x: hidden; 
 
    resize: horizontal; 
 
    display: inline-block; 
 

 
    /* no extra spaces */ 
 
    padding: 0; 
 
    margin: 0; 
 
    white-space: nowrap; 
 
    
 
    /* default widths */ 
 
    width: 10em; 
 
    min-width: 2em; 
 
    max-width: 30em; 
 
} 
 

 
/* let <input> assume the size of the wrapper */ 
 
.resizable-input > input { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
} 
 

 
/* add a visible handle */ 
 
.resizable-input > span { 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
    margin-left: -16px; 
 
    width: 16px; 
 
    height: 16px; 
 
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAJUlEQVR4AcXJRwEAIBAAIPuXxgiOW3xZYzi1Q3Nqh+bUDk1yD9sQaUG/4ehuEAAAAABJRU5ErkJggg=="); 
 
    cursor: ew-resize; 
 
}

<div class="form-group"> 
 
    <label for="email">Email:</label> 
 
    <span class="resizable-input"><input type="email" class="form-control" id="email" placeholder="Enter email"><span></span></span> 
 
</div> 
 
<div class="form-group"> 
 
    <label for="pwd">Password:</label> 
 
    <span class="resizable-input"><input type="password" class="form-control" id="pwd" placeholder="Enter password"><span></span></span> 
 
</div> 
 
<div class="checkbox"> 
 
    <label><input type="checkbox"> Remember me</label> 
 
</div> 
 
<button type="submit" class="btn btn-default">Submit</button>

Answer 2

使用するクライアント側のスクリプト、（jQueryの例）：あるhttp://jqueryui.com/draggable/ https://jqueryui.com/resizable/

DBでは、各ユーザーの特定のコントロールの親コントロール名とX、Y座標またはCSS情報を保存します。

ユーザーのログインによってdbから座標とcss情報がロードされ、それに応じてページにロードされます。