带有消息框的多个表单上的HTML5浮动提交按钮？

Question

我的单页应用程序中有多个表单。每个表单都有不同数量的元素，其中一些需要用户滚动。最初我的提交按钮位于表单的最底部。一些用户询问此按钮是否可以浮动且始终可见。因此，我正在寻找适用于所有表格的一般解决方案。其中一个问题是每个表单右上角都有“清除表单”按钮。第二个问题是某些表单可能在Clear Form旁边有一个按钮。所以我不确定放置提交按钮的最佳位置是什么？此外，按钮旁边还有一条消息，如果“记录”已成功保存，将通知用户。＆＃39;或者＆＃39;记录已成功更新。＆＃39; 。如果有人可以帮助或提出一些示例什么是最佳解决方案，请告诉我！提前致谢。以下是我的应用中其中一个表单的示例：

＆＃13;

＆＃13;

div.submitBox {
	position:fixed;
	top:40px;
	left:330px;
}
.required:before {
    content: '*';
    color: red;
    margin-right: 5px;
}
form.frmLayout {
	max-width: 1200px;
  height: 450px;
}
form.frmLayout fieldset {
	border: #ccc 2px solid;
	margin: 10px;
	border-radius:3px;
}
form.frmLayout legend {
	font-weight: bold;
	background-color: #c8e2db;
	border-radius:3px;
	padding: 3px;
	border: #ccc 2px solid;
}
form.frmLayout label {
	float: left;
  font-weight: bold;
  display: block;
  width: 100px;
}
form.frmLayout input[type=text] { 
	text-align: left;
}
form.frmLayout input[readonly="readonly"] {
    background-color: #E0DBDD;
}

＆＃13;

<form name="demoForm" id="demoForm" method="POST" action="#" class="frmLayout">
		<fieldset>
			<legend>Demographic</legend>
			<div>
				<div style="float:right;">
					<span><input type="button" name="clearForm" id="clearDemo" value="Clear Form"></span>
				</div>
			</div>
			<div class="formItem">
				<span style="color:red;">* <b>Required Fields</b></span>
			</div>
			<div class="formItem">
				<label for="last_name" class="required">Last Name:</label>
				<input type="text" name="frm_lname" id="frm_lname" value="" size="20" maxlength="30" required />
			</div>
			<div class="formItem">
				<label for="first_name" class="required">First Name:</label>
				<input type="text" name="frm_fname" id="frm_fname" value="" size="20" maxlength="30" required />
			</div>
			<div class="formItem">
				<label for="dob" class="required">DOB:</label>
				<input type="text" name="frm_dob" id="frm_dob" value="" size="10" maxlength="10" placeholder="MM/DD/YYYY" required />
			</div>
			<div class="formItem">
				<label for="gender" class="required">Gender:</label>
				<input type="text" name="frm_gender" id="frm_gender" value="" size="1" maxlength="1" title="F = Female; M = Male" pattern="[MmFf]" required />
			</div>
			<div class="submitBox">
				<span><input type="submit" name="frmSubmit" id="frmSubmit" value="Submit" /></span>
				<span style="float:right;" id="MsgDemoForm"></span>
			</div>
		</fieldset>
	</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

所以，你可以让提交区域“坚持”。到可视区域的底部。这样就可以使提交按钮始终存在，当它通常不存在时，但当它处于视图中时返回其原始位置。

神奇的是stickIt()功能。它会检查.submitBox的顶部是否大于.testArea可查看区域的高度。如果它是.submitBox绝对位于可视区域的底部。

您希望对所有内容进行样式处理，因此当它位于其他元素上方时，它会看起来更漂亮，而不是标签和输入顶部的无样式按钮。从UI / UX的角度来看（我不是专家）我不认为这是最佳解决方案，但却是用户要求的解决方案。我这样说是因为您希望用户滚动浏览所有必填字段并提交。如果您事先提交了提交按钮，他们可能会认为该字段已经完成了＃34;并试图提交一份不完整的表格。

您可以将提交区域定位在右上角，与清除表单按钮位于同一区域，并禁用该按钮，直到填写完所有必需的表单。这是两个世界中最好的，因为按钮始终可见但在满足要求之前仍然无法使用。

＆＃13;

＆＃13;

$('.testArea').on('scroll', stickIt);
stickIt();

function stickIt() {

  var submitBox = $('.submitBox'),
    testArea = $('.testArea'),
    offset = 25;

  if (submitBox.offset().top > $(this).scrollTop() + offset) {
    submitBox.addClass('sticky').css('bottom', testArea.height() + submitBox.height());
  } else {
    submitBox.removeClass('sticky');
  }

}

＆＃13;

.testArea {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: scroll;
}

div.submitBox {
  width: 100%;
}

div.submitBox.sticky {
  position: absolute;
  bottom: 0;
}

.frmLayout {
  position: relative;
}

.required:before {
  content: '*';
  color: red;
  margin-right: 5px;
}

form.frmLayout {
  max-width: 1200px;
  min-height: 300px;
}

form.frmLayout fieldset {
  border: #ccc 2px solid;
  margin: 10px;
  border-radius: 3px;
}

form.frmLayout legend {
  font-weight: bold;
  background-color: #c8e2db;
  border-radius: 3px;
  padding: 3px;
  border: #ccc 2px solid;
}

form.frmLayout label {
  float: left;
  font-weight: bold;
  display: block;
  width: 100px;
}

form.frmLayout input[type=text] {
  text-align: left;
}

form.frmLayout input[readonly="readonly"] {
  background-color: #E0DBDD;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testArea">

  <form name="demoForm" id="demoForm" method="POST" action="#" class="frmLayout">
    <fieldset>
      <legend>Demographic</legend>
      <div>
        <div style="float:right;">
          <span><input type="button" name="clearForm" id="clearDemo" value="Clear Form"></span>
        </div>
      </div>
      <div class="formItem">
        <span style="color:red;">* <b>Required Fields</b></span>
      </div>
      <div class="formItem">
        <label for="last_name" class="required">Last Name:</label>
        <input type="text" name="frm_lname" id="frm_lname" value="" size="20" maxlength="30" required />
      </div>
      <div class="formItem">
        <label for="first_name" class="required">First Name:</label>
        <input type="text" name="frm_fname" id="frm_fname" value="" size="20" maxlength="30" required />
      </div>
      <div class="formItem">
        <label for="dob" class="required">DOB:</label>
        <input type="text" name="frm_dob" id="frm_dob" value="" size="10" maxlength="10" placeholder="MM/DD/YYYY" required />
      </div>
      <div class="formItem">
        <label for="gender" class="required">Gender:</label>
        <input type="text" name="frm_gender" id="frm_gender" value="" size="1" maxlength="1" title="F = Female; M = Male" pattern="[MmFf]" required />
      </div>
      <div class="submitBox">
        <span><input type="submit" name="frmSubmit" id="frmSubmit" value="Submit" /></span>
        <span style="float:right;" id="MsgDemoForm"></span>
      </div>
    </fieldset>
  </form>

</div>

＆＃13;

＆＃13;

＆＃13;