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

使用客户端脚本来拖放控件或元素（例如：Jquery）请参阅此链接：http://jqueryui.com/draggable/ https://jqueryui.com/resizable/

在DB中，为每个用户保存父控件名称和特定控件的X，Y坐标或css信息。

每当用户登录时，从db加载坐标和css信息并将其相应地加载到页面中。

Answer 2

所以这是一个开始。输入字段包含在一个可调整大小的div中，带有一个宽度调整大小的句柄。截至2016年，这似乎是调整文本字段大小的最佳选择。当释放调整大小句柄时，我添加了一个事件监听器，它只报告字段名称和更新后的大小（以像素为单位）。

因此，您可以看到一种可能的解决方案，我已将原型宽度保存到localStorage中的对象。这可以通过AJAX或其他方式轻松地对后端进行，但在我看来，保存对象将是传递该数据的方式。

请注意，这实际上并没有在这里运行，因为沙箱存在限制（无法访问localStorage）。要查看此信息，请执行以下操作： fiddle 。

另请注意，我所做的只是允许调整大小。甚至不知道从哪里开始整体调整位置＆＃39;的事情。

＆＃13;

// 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);

})

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如何在浏览器上自定义HTML表单

2 个答案: