自定义登录表单样式

View demo 查看演示 Download Source 下载源

Hi guys! I’m back with another CSS tutorial! After button switches and drop-down lists, let’s create some forms. In particular, we will be creating login forms. Nowadays, almost every web service, application, game etc. allows (or even requires) user subscription, which means they all need some kind of form for users to register and sign in. With this in mind, I tried to create a few different login forms, some of which are inspired by design concepts on the web. The aim was to give some particularity to each of them.

嗨，大家好！ 我回来了另一个CSS教程！ 在按钮切换和下拉列表之后，让我们创建一些表单。 特别是，我们将创建登录表单。 如今，几乎每个Web服务，应用程序，游戏等都允许(甚至要求)用户订阅，这意味着他们都需要某种形式的用户注册和登录。为此，我尝试创建一些不同的形式。登录表单，其中一些是受Web设计概念启发的。 目的是给他们每个人一些特殊性。

A few things before starting:

开始之前的几件事：

• You won’t see any vendor prefixes in the CSS snippets, but you will, of course, find them in the files.
  您不会在CSS片段中看到任何供应商前缀，但是您当然会在文件中找到它们。
• The goal of the tutorial is to show the potential of CSS, particularly CSS3, that’s why the rendering could be altered on IE8-. If you plan to support these browsers, be sure to make fallbacks.
  本教程的目的是展示CSS的潜力，尤其是CSS3，这就是为什么可以在IE8-上更改渲染的原因。 如果您打算支持这些浏览器，请确保进行回退。

• I didn’t use any attribute on the form tag as action, method since I’m focusing on the design.

  因为我专注于设计，所以我没有在form标签上使用任何属性作为action和method 。

• I personally use the box-model where [width] = [element-width] + [padding] + [borders]. I activate it with the following snippet:
  我个人使用[[width] = [element-width] + [padding] + [borders]的盒子模型。 我使用以下代码段激活它：

	*,
	*:after,
	*:before {
		box-sizing: border-box;
	}

关于用户友好性(A word about user-friendliness)

You need forms for many occasions where interaction between the user and your application or website is necessary: login, comments, contact, feedback, and more. If you mess with a form, you mess with your user. With that in mind, there are a couple things you can do to make your forms better, more user-friendly. Let’s make a little round up together, shall we?

在许多需要用户与您的应用程序或网站进行交互的场合，您需要使用表单：登录，评论，联系方式，反馈等等。 如果您搞砸了表单，那么您就和您的用户搞混了。 考虑到这一点，您可以做一些事情来使您的表单更好，更友好。 让我们一起凑一下吧？

• Labels: Labels are important. I am not talking about the label tag, I am talking about an indication about the point of a field. Let’s make things clear: all fields are the same. It is because they have labels the user knows what to write in which field. Use labels, or icons, or whatever is needed to make the user understand what he has to do.

  标签：标签很重要。 我不是在谈论标签，而是在谈论关于某个领域的观点。 让我们澄清一下：所有字段都相同。 这是因为它们具有标签，用户知道在哪个字段中写什么。 使用标签或图标，或使用户了解自己所需要做的一切。

• Fields:: The nicer your inputs are, the more pleasant they are to look at, the happier your user will be. Make space around and in your inputs. Don’t make the field wedge its content. Inputs should be big enough to show their average whole content. Don’t make tiny little fields forcing users to navigate in them with arrow keys.

  字段：：您的输入越好，输入越令人愉悦，您的用户就会越快乐。 在输入周围和内部留出空间。 不要让字段限制其内容。 输入内容应足够大以显示其平均整体内容。 不要在很小的小字段中强迫用户使用箭头键在其中导航。

• Labels + fields: Make links between the inputs and their label. Use the for attribute on labels. Clicking on a textarea is easy, even on a mobile device. Clicking on a checkbox however can be tricky, especially when it comes to mobile navigation. Making the label clickable makes your user’s life easier. Use it. Make inputs large enough for the mobile view, where the label might not be clickable.

  标签+字段：在输入及其标签之间建立链接。 在标签上使用for属性。 即使在移动设备上，单击文本区域也很容易。 但是，单击复选框可能会很棘手，尤其是在移动导航方面。 使标签可点击可简化用户的生活。 用它。 使输入足够大以用于移动视图，在该视图中可能无法单击标签。

• States: CSS allows the targeting of an element according to its current state: hovered, focused, active, default, etc. It’s important to show the user he’s hovering something clickable, or focusing something he can fill.

  状态： CSS允许根据元素的当前状态(悬停，已聚焦，活动，默认等)来定位元素。向用户显示他正在悬停可单击的内容或集中其可填充的内容非常重要。

• Submit button: The submit button is the last step for your user to complete the form and interact with your application. It should be visible. Remember “call-to-action”. Don’t use the default style for a submit button, make something pretty! And don’t never ever use “Submit”. It’s indistinct. If it’s a login form, use “Sign in” or “Log in”. If it’s a comment form, use something like “Post comment”. Tell the user what action will be performed.

  提交按钮：提交按钮是用户完成表单并与您的应用程序进行交互的最后一步。 它应该是可见的。 记住“号召性用语”。 不要为提交按钮使用默认样式，做一些漂亮的事情！ 而且永远不要使用“提交”。 不清楚。 如果是登录表单，请使用“登录”或“登录”。 如果是评论表单，请使用“发表评论”之类的内容。 告诉用户将要执行的操作。

• HTML5 inputs and attributes: HTML5 provides a lot of useful new attributes and inputs in order to make forms nicer and easier to fill. Use those attributes and inputs when needed, with fallbacks of course. More about this on Wufoo.

  HTML5输入和属性： HTML5提供了许多有用的新属性和输入，以使表单更美观，更容易填写。 在需要时使用这些属性和输入，当然还有备用。 关于Wufoo的更多信息。

Now we have covered the basics, let’s create some forms my friends!

现在我们已经介绍了基础知识，让我们为我的朋友们创建一些表格！

例子1 (Example 1)

As I said earlier, I tried to make every form different from the others with its own particularity. This one relies on its submit button, kind of “out of the screen”, and rounded.

就像我之前说的，我试图使每种形式都有自己的特殊性。 这依赖于它的“提交”按钮，有点像“屏幕外”，并且四舍五入。

标记 (The Markup)

<form class="form-1">
	<p class="field">
		<input type="text" name="login" placeholder="Username or email">
		<i class="icon-user icon-large"></i>
	</p>
		<p class="field">
  		<input type="password" name="password" placeholder="Password">
  		<i class="icon-lock icon-large"></i>
	</p>        
	<p class="submit">
    	<button type="submit" name="submit"><i class="icon-arrow-right icon-large"></i></button>
	</p>
</form>

Okay, so this first example is pretty minimal, meaning we won’t use any labels. But, we of course need to tell our user what they have to write in those fields, so we use … icons. Those are the little <i/> tags. Note: as usual, I will not cover here how to use an icon font like FontAwesome. If you’d like to learn more about it, you can check out the examples on their website. Basically, we have two containers wrapping an input and an icon. The submit button is in its own container, and we use a <button/> instead of an <input/> with an icon inside. We will also employ placeholders to make things even more clear for supported browsers. More information on the browser support for the placeholder attribute can be found on CanIUse.com.

好的，因此第一个示例非常少，这意味着我们将不使用任何标签。 但是，我们当然需要告诉我们的用户他们在这些字段中必须写什么，因此我们使用…图标。 这些是小<i/>标签。 注意：和往常一样，我不会在这里介绍如何使用诸如FontAwesome之类的图标字体。 如果您想了解更多信息，可以在其网站上查看示例。 基本上，我们有两个包装输入和图标的容器。 提交按钮位于其自己的容器中，我们使用<button/>而不是带有图标的<input/> 。 我们还将聘用占位符，以使支持的浏览器更加清晰。 可以在CanIUse.com上找到有关占位符属性的浏览器支持的更多信息。

CSS (The CSS)

We will start by giving some styles to the form element itself. The form is the main wrapper for our demos, so we give it a width and center it with the margin declaration.

我们将从为表单元素本身提供一些样式开始。 表单是演示的主要包装器，因此我们给它一个宽度，并用margin声明居中。

.form-1 {
    /* Size & position */
    width: 300px;
    margin: 60px auto 30px;
    padding: 10px;
    position: relative; /* For the submit button positioning */

    /* Styles */
    box-shadow: 
        0 0 1px rgba(0, 0, 0, 0.3), 
        0 3px 7px rgba(0, 0, 0, 0.3), 
        inset 0 1px rgba(255,255,255,1),
        inset 0 -3px 2px rgba(0,0,0,0.25);
    border-radius: 5px;
    background: linear-gradient(#eeefef, #ffffff 10%);
}

.form-1 .field {
    position: relative; /* For the icon positioning */
}

Important: we set it to position relative in order to place the submit button absolutely. We do the same for the .field containers to place the icons absolutely as well. Speaking of icons, let’s deal with it now.

重要提示：我们将其设置为相对位置，以便绝对放置“提交”按钮。 我们对.field容器也进行同样的操作，以完全放置图标。 说到图标，让我们现在处理它。

.form-1 .field i {
    /* Size and position */
    left: 0px;
    top: 0px;
    position: absolute;
    height: 36px;
    width: 36px;

    /* Line */
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);

    /* Styles */
    color: #777777;
    text-align: center;
    line-height: 42px;
    transition: all 0.3s ease-out;
    pointer-events: none;
}

We add a subtle line on the right side of the icon by setting a right border and a box shadow. Since we are going to play with their color for the :hover and :focus states