layui多步骤表单_建⽴多步骤表单界⾯
layui多步骤表单
表单可⽤性是Web设计中⼀个⾮常重要的主题。 作为提供给⽤户的主要输⼊界⾯之⼀，表单的可⽤性对于良好的⽤户体验⾄关重要。
今天，我们将构建⼀个包含验证和动画功能的多部分表单。 我们会覆盖很多地⾯，所以要系好安全带！
形成⾼级最佳实践
表单界⾯设计是可⽤性障碍的⼀部分。 在开始之前，让我们先讨论⼀些表单最佳实践。
不要让您的⽤户想得太硬
形式通常不是⿎励独特互动的地⽅。 好的表格提供了明显的导航技术和完全的透明度。 好的表格标签明确，易于浏览。
不要太花哨
重要的是不要偏离默认的表单⾏为。 有⼀些标准是表单默认⾏为的基础。 违反这些标准可能会对可访问
性产⽣负⾯影响，因此请考虑尽可能保留这些默认样式。
请记住，⽤户不必停留
您表单的⽤户不必停留。 他们选择留下。 填写表格⽐较⿇烦，因此请放轻松。 （如果可能，请使其有趣！）请勿混淆或要求⽤户； ⽽是围绕表单提出的问题建⽴对话。 要有礼貌。
何时使⽤多节技术
有时，多节形式肯定是个好技术。 对于“我应该分解表格之前需要多少输⼊”，没有⼀个唯⼀的答案。 取⽽代之的是，始终考虑将表格分为⼏个部分是有助于还是阻碍可⽤性。 其次，考虑它是否有助于或阻碍交互设计的其他⽅⾯。
如果您的表单具有截然不同的部分，则可能值得将其分为多个部分。 结帐流程是这种情况的常见⽰例。 （个⼈信息，运输信息，付款信息和确认信息⾮常不同，通常都是实质性的部分。）
计划互动
我们将创建⼀个包含任意字段的注册表单。 我们需要知道当前正在哪个部分，因此我们需要在表单顶部添加⼀个指⽰器。 我们要⽔平转换表单部分，从右向左滑动。 为此，我们将不同的部分设置为在“
窗⼝”元素中具有绝对位置。 我们还希望有两个按钮； ⼀个是普通的提交按钮。 另⼀个是“下⼀部分”按钮。
标记
这是我们的表格：
<form id="signup" action="somewhere" method="POST">
<ul id="section-tabs">
<li class="current active"><span>1.</span> Creds</li>
<li><span>2.</span> Deets</li>
<li><span>3.</span> Settings</li>
<li><span>4.</span> Last Words</li>
</ul>
<div id="fieldsets">
<fieldset class="current">
<label for="email">Email:</label>
<input name="email" type="email" class="required email" />
<label name="password" for="password">Password:</label>
<input type="password" minlength="10" class="required">
</fieldset>
<fieldset class="next">
<label for="username">Username:</label>
<input name="username" type="text">
<label for="bio">Short Bio:</label>
<textarea name="bio" class="required"></textarea>
</fieldset>
<fieldset class="next">
<label for="interests">Basic Interests:</label>
<textarea name="bio"></textarea>
<p>Receive newsletter?<br>
<input type="radio" name="newsletter" value="yes"><label for="newsletter">yes</label>
<input type="radio" name="newsletter" value="no"><label for="newsletter">no</label>
</p>
</fieldset>
<fieldset class="next">borderbox
<label for="referrer">Referred by:</label>
<input type="text" name="referrer">
<label for="phone">Daytime Phone:</label>
<input type="tel" name="phone">
</fieldset>
<a class="btn" id="next">Next Section ▷</a>
<input type="submit" class="btn">
</div>
</form>
标记⾮常简单，但让我们谈谈其中的⼀些内容。
字段集：字段集是⽤于对输⼊进⾏分组的语义元素； 这⾮常适合我们的情况。
类名： 使⽤类来定义内置类型。 我们将在⼀分钟内看到其⼯作原理。
字段是任意的。 我们将单选输⼊包装在⼀个段落标签中，以简化格式设置。
提交和下⼀个按钮：带有⼀类按钮的锚标记将⽤于转到下⼀部分。 提交输⼊将在适当时通过JavaScript显⽰。
样式（⽆味）
这很长，准备好..
@import url(leapis/css?family=Merriweather+Sans:300);
@import url(leapis/css?family=Merriweather+Sans:700);
body {
background: url(farm5.staticflickr/4139/4825532997\_7a7cd3d640\_b.jpg);
background-size: cover;
height: 100%;
font-family: 'Merriweather Sans', sans-serif;
color: #666;
}
#signup {
width: 600px;
height: auto;
padding: 20px;
background: #fff;
margin: 80px auto;
position: relative;
min-height: 300px;
}
#fieldsets {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
}
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
textarea {
display: block;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
box-sizing: border-box;
border: 1px solid #ddd;
padding: 8px;
margin-bottom: 8px;
position: relative;
&:focus {
outline: none;
border: 1px solid darken(#2cbab2,10%);  }
}
input[type=radio]{
margin: 6px;
display: inline-block;
}
fieldset {
border: none;
position: absolute;
left: -640px;
width: 600px;
padding: 10px 0;
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
opacity: 0;
&.current {
left: 20px;
opacity: 1;
}
&.next {
left: 640px;
}
}
input[type=submit] {
display: none;
border: none;
}
#section-tabs {
font-size: 0.8em;
height: 50px;
position: relative;
margin-top: -50px;
margin-bottom: 50px;
padding: 0;
font-weight: bold;
list-style: none;
text-transform: uppercase;
li {
color: #a7a7a7;
span {
color: #bababa;
}
cursor: not-allowed;
&.active {
color: #444;
cursor: pointer;
}
border-left: 1px solid #aaa;
text-decoration: none;
padding: 0 6px;
float: left;
width: 25%;
box-sizing: border-box;
text-align: center;
font-weight: bold;
line-height: 30px;
background: #ddd;
position: relative;
&:after {
content: "";
display: block;
margin-left: 0;
position: absolute;
left: 0;
top: 0;
}
&.current {
opacity: 1;
background: #fff;
z-index: 999;
border-left: none;
&:after {
border: 15px solid transparent;        border-left: 15px solid #2cbab2;      }
}
}
}
.error {
color: #bf2424;
display: block;
}
<, {
border-color: #bf2424;
&:focus {
border-color: #bf2424;
}
}
< {
margin-bottom: 20px;
}
input.valid {
color: green;
}
label.valid {
position: absolute;
right: 20px;
}
input+.valid, textarea+.valid {
display: none;
}
.valid+.valid {
display: inline;
position: absolute;
right: 10px;
margin-top: -36px;
color: green;
}
.btn {
border: none;
padding: 8px;
background: #2cbab2;
cursor: pointer;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
&:hover {
background: darken(#2cbab2, 6%);
}
color: #fff;
position: absolute;
bottom: 20px;
right: 20px;
font-family: 'Merriweather Sans', sans-serif;
}
让我们来看⼀下样式的重要部分。
总览
表单本⾝设置为特定宽度，以margin: 0 auto为中⼼，然后设置为position:relative 。 这种定位允许⼦
元素的absolute positioning ，以相对于包含形式绝对地放置它们。 包含表单包含三种主要类型的元素：区域选项卡和字段集“窗⼝”以及按钮。
区域选项卡相对于包含元素放置，并以负的上边距“拉起”。 我们⽤相等的边距底部补偿对布局其余部分的影响。
字段集“窗⼝”设置为相对于⽗表单元素绝对定位。 宽度和⾼度都设置为100％。 此窗⼝的⽬的是保存元素，然后在元素落⼊带
有overflow: hidden的边缘时隐藏它们overflow: hidden 。 我们⽆法在表单上执⾏此操作，因为我们要保留指标标签。
最后，将按钮元素（锚标记和提交输⼊）的样式设置为绝对位于表单的右下⾓，从底部和右侧偏移20个像素。 我们还向按钮元素添加了⼀个简单CSS过渡，以使悬停时的背景变暗。
更多注意事项
字段集设置为position: absolute 。 我们有两个⽤于两个状态的类，⼀个是默认状态。 默认状态将字段集拉到窗体的左侧。 .current类将.current放在表单的可见区域中，最后.next类将.current推到表单的右侧。
当前类的不透明度为1； 默认状态（⾃然是.next）的不透明度为0。
我们使⽤简单CSS过渡为这些类之间的字段集设置动画。
.error和.valid类将有助于验证样式。 我们正在使⽤ ，⼀种可通过Google Webfonts免费使⽤的字体。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。