如何在浏览器上自定义 HTML 表单 [关闭]

Question

我有一个 HTML 表单，其中包含一些输入字段，如文本框、标签、复选框、下拉列表等。此表单正在 UI 中呈现，我们希望提供一个选项，用户可以在网页本身和应保存生成的更改，以便下次访问用户可以看到自定义表单。

注意：我已经有 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 信息并相应地将其加载到页面中。