css表格字段排序_使用CSS3增强必填表格字段

css表格字段排序

View demo 查看演示 Download Source 下载源

Today I want to share a little subtle effect with you: enhancing required fields in a form. Many web forms are designed in a minimal way, i.e. by only collecting the most necessary data from users. Just think of sign up forms where you don’t want to make your potential customer leave because there are just too many things he has to fill out. But there are also many forms where additional information is asked and the user is actually willing to or needs to fill optional fields. You can think of an order form or a classifieds form.

今天，我想和您分享一些微妙的效果：增强表单中的必填字段。 许多Web表单都是以最小的方式设计的，即仅从用户那里收集最必要的数据。 只是想想不想让潜在客户离开的注册表格，因为他要填写的东西太多了。 但是，也有许多表格会询问其他信息，而用户实际上愿意或需要填写可选字段。 您可以考虑订购单或分类表。

Please note: this will only work as intended in browsers that support the respective CSS properties. 请注意：这仅在支持相应CSS属性的浏览器中按预期工作。

The idea is to allow the user to enhance only the required fields so that he has a notion about what fields are actually required. That’s normally done a little * or similar but we want to go a step further and create a little interactive effect for a better visualisation of required fields.

这个想法是允许用户仅增强必填字段，以便他对实际需要哪些字段有一个概念。 通常可以完成*或类似的操作，但是我们想更进一步，创建一点交互效果，以便更好地可视化所需字段。

For that we will wrap some form labels and inputs with two divisions that will allow us to apply a variety of effect. The outer wrapper will have an additional class if the field is required (af-required):

为此，我们将包装一些带有两个分隔的表单标签和输入，这将使我们能够应用多种效果。 如果需要该字段( af-required )，则外部包装器将具有一个附加类：

<form class="af-form" id="af-form" novalidate>
					
		<div class="af-outer">
			<div class="af-inner">
				<label>Title</label>
				<input type="text" name="title">
			</div>
		</div>
	
		<div class="af-outer af-required">
			<div class="af-inner">
				<label>Name</label>
				<input type="text" name="fullname" required>
			</div>
		</div>
	
	<!-- ... -->

</form>

We’ll take a look the style of Demo 2, which will scale down the non-required fields hence make them disappear. For that, we’ll decrease the height of the other wrapper while we scale down the inner one.

我们将看一下演示2的样式，该样式将缩小不需要的字段，从而使它们消失。 为此，我们将缩小另一个包装的高度，同时缩小内部包装的高度。

We’ll add a transition to the outer wrapper, define a fixed height and set the overflow to hidden because we don’t want the content to be visible when we decrease the height:

我们将添加一个过渡到外部包装器，定义一个固定的高度并将溢出设置为隐藏，因为我们不希望在降低高度时看到内容：

.af-outer {
	overflow: hidden;
	height: 70px;
	box-shadow: 0 1px 0 #f5f5f5 inset;
	transition: all 0.5s linear;
}

For the inner wrapper, we’ll set the transform origin to be “center top” so that we can still see it scaling while we decrease the height of the outer one. Initially the scale is set to 1 (you don’t really have to set that):

对于内部包装器，我们将转换原点设置为“中心顶部”，以便在减小外部包装器的高度时仍可以看到其缩放比例。 最初，小数位设置为1(您不必真正将其设置为)：

.af-inner {
	padding: 15px 20px 15px 20px;
	transform-origin: center top;
	transform: scale(1);
	transition: all 0.5s linear;
}

At the top of the form we have a little button (a checkbox) with the id af-showreq and when we check that button, we will scale down the optional fields. We can use the :not pseudo class to get to our desired elements but you could of course give classes to the optional fields instead and access them directly with the general sibling combinator.

在表单顶部，我们有一个带有ID af-showreq的小按钮(一个复选框)，当我们检查该按钮时，将按比例缩小可选字段。 我们可以使用：not伪类来获取所需的元素，但是您当然可以将类赋予可选字段，并使用通用的同级组合器直接访问它们。

So, we’ll decrease the height of the outer wrappers and scale down and fade out the inner ones:

因此，我们将减小外部包装的高度，并缩小并淡出内部包装：

#af-showreq:checked ~ .af-form .af-outer:not(.af-required) {
	height: 0px;
	visibility: hidden;
}
#af-showreq:checked ~ .af-form .af-outer:not(.af-required) .af-inner {
	transform: scale(0);
	opacity: 0;
}

Setting visibility to hidden will guarantee that we can tab through the resting fields without passing through the other ones. Here we can’t use display: none because otherwise our transition won’t work.

将可见性设置为“隐藏”将确保我们可以在不经过其他字段的情况下浏览其余字段。 在这里我们不能使用display：none，因为否则我们的过渡将无法进行。

Hope you enjoyed this tip!

希望您喜欢这个提示！

翻译自: https://tympanus.net/codrops/2012/05/02/enhance-required-form-fields-with-css3/

css表格字段排序