初学Foundation之自定义表单和开关

本文由大漠根据Matt Pilott的《Foundation for Beginners: Custom Forms and Switches》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/foundation-for-beginners-getting-started/，以及作者相关信息

——作者：Matt Pilott

——译者：大漠

上节主要学习了Zurb Foundation的按钮制作，现在让我们看看自定义表单和表单开关制作。在本教程中我们主要以联系表单作为一个练习，您可以添加到您的项目或者只是拿来玩玩。一旦我们创建了这样的表单，我们将来可以直接搬到项目表单中使用。

表单，至少对于我来说，一直是比较烦人的，特别是想当他们融入到我的设计中之时。Foundation通过JavaScript定制表单插件使整个过程变得容易了许多。这是非常简单的设置，使您能够轻松地定制你的表单元素需要的CSS。

为了能顺利得到自定义表单功能，你需要加载foundation.form.js。同时你要确保在表单插件上面加载zepto.js和foundation.js。

插件会将每个表单元素本身隐藏，同时会生成更多的视觉可控的元素，比如像div和a这样的标签。然后它通过交互隐藏原来的元素，这意味着表单需要函数来支持。接下来让我们看看这是如何准备工作的。

联系表单

对于网站而言，联系表单是最常见表单之一。在这个练习中，你将看到一些标准的输入框。在你的项目中你也可以添加一个或两个对你有用的不同例子。

推荐你使用标准的<form>标签。开始使用自定义表单插件，我们需要添加一个类名custom，像这样<form class="custom">。我们现在就有自己自定义的表单。

假设你的表单中包含了两列，就像这样：

<form class="custom">
    <div class="row">
        <div class="large-6 columns">
        </div>
        <div class="large-6 columns">
        </div>
    </div>
</form>

现在我们先从左列开始，在这个例子中，我使用了一个下拉选择框制作称呼，紧跟着是一个输入框用来制作姓名。在行的标准标签中我们都添加了一个collapse的类名。我们接下放置了一个邮箱的字段和下“如何找到我们的”下接选择项。

<div class="row collapse">
    <div class="large-3 small-3 columns">
        <select>
            <option>Mr.</option>
            <option>Mrs.</option>
            <option>Miss.</option>
            <option>Ms.</option>
            <option>Dr.</option>
        </select>
    </div>
    <div class="large-9 small-9 columns">
        <input type="text" placeholder="Name" />
    </div>
</div>
<input type="email" placeholder="Email" />
<select id="contactDropdown">
    <option DISABLED>How did you find us?</option>
    <option>Google</option>
    <option>A friend told me</option>
    <option>Not sure, where am I?</option>
</select>

你需要确认你选择元素有一个id，但是除了这样之外你可以从模板中直接找到元素。所以我们先来看看表单代码的合并，你需要将它们放在第一个命名为large-6的div里。

接下来看第二列中的元素。它包括了文本域textarea，一个spam me的复选框和一个切换的单选按钮，最后是一个提交按钮。

<textarea placeholder="Message"></textarea>
<div class="row">
    <div class="large-6 small-6 columns">
        <label>Send me spam&nbsp;&nbsp;
            <input type="checkbox" CHECKED style="display:none" />
        </label>
    </div>
    <div class="large-3 small-3 columns">
        <label>CC me?</label>
    </div>
    <div class="large-3 small-3 columns end">
        <div class="switch tiny">
            <input id="x" name="switch-x" type="radio" checked>
            <label for="x" onclick="">No</label>
            <input id="x1" name="switch-x" type="radio">
            <label for="x1" onclick="">yes</label>
            <span></span>
        </div>
    </div>
</div>
<input class="button small large-12" type="submit" value="Send Message" />

单选按钮切换

我们还没有覆盖单选按钮切换，所以现在我们来做。

单选按钮切换是一个强大的input效果。其结构放在一个div标签中，并且命名为switch，紧跟着是尺寸的类名。这尺寸的类名主要包括tiny，small和large。你也可以给单选按钮切换设置一个类名rounded实现圆角。这个结构包含了两个input，用于单选按钮切换的状态。它们都有自己各自的标签，Foundation用来实现切换状态的文本。这里的input需要设置id名，并且label必须设置for属性。

<div class="switch tiny">
    <input id="x" name="switch-x" type="radio" checked>
    <label for="x" onclick="">No</label>

这几乎涵盖了我们一个小的联系方式，你可以只是做做玩，也可以将它用到你的下一个项目中。

其他表单元素

你在一个Web表单中还有什么可能需要用到呢？比如设置为未选择的radio，并表给他们设置了相同的样式display:none;。

注意：我知道使用内联样式是多么可怕的一件事情，但建议在这种情况下，还是不要将这样式写到样式表中。

<input name="radio1" type="radio" style="display:none;" CHECKED />
<input name="radio1" type="radio" style="display:none;" />
<input name="radio1" type="radio" disabled style="display:none;">

这些自定义表单快速通过元素创建起来是多么美好的事情。用这种方式显示什么已经存在，或暗示什么用的用户交互是必需的。

下面你可以看到我们有一个span元素，并且设置了prefix类名，其次紧跟了一个下接选择项。你仍然需要把这些元素放在一个带有prefix和postfix类名的列结构中，用来防止元素分离。你也可以充分利用postfix类名加在一个对象上，如一个搜索框。即你的文本输入框后紧跟一个按钮。

<div class="row collapse">
    <div class="large-9 small-9 columns">
        <span class="prefix">http://webdesign.tutsplus</span>
    </div>
    <div class="large-3 small-3 columns">
        <select>
            <option>.com</option>
            <option>.co</option>
            <option>.ca</option>
        </select>
    </div>
</div>

错误信息

大多数表单至少会有一个必须的字段或者表单无法正常提交的属性。Foundation为了实现这些验证状态使用了error类。简单的将它添加到任何input,label,small标签或列中，就可以看到这些元素呈现红色的风格。

<form>
    <div class="row">
        <div class="large-6 columns">
            <label class="error">Error</label>
            <input type="text" class="error" />
            <small class="error">Invalid entry</small>
        </div>
        <div class="large-6 columns error">
            <label>Another Error</label>
            <input type="text" />
            <small>Invalid entry</small>
        </div>
    </div>
    <textarea class="error" placeholder="Message..."></textarea>
    <small class="error">Invalid entry</small>
</form>     

需要真正验证是否有效，你需要使用jQuery Validate插件和使用所需的参数。当用户输入信息不正确的时候就会显示这些效果。

有用的工具

在Foundation中涉及到颜色的选择，在没有设计师的帮助下并不是件容易的事。令人高兴的是,Colourco.de为大家提供了整套的颜色文案查询。移动你的鼠标，向左或向右改变颜色的色相，向上或向下改变颜色的亮度。提供菜单让你选择不同的配色方案。

结论

表单是每个网站的重要组成部分，Foundation在表单的基础上增加了一些不错的功能，让你的表单更加强大。如果你有足够的好奇心，为什么不看看Zurb关于表单的其他开发实验，包括他们的AjAX图像上传。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载，烦请注明出处：

英文原文：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/foundation-for-beginners-custom-forms-and-switches/

中文译文：http://www.w3cplus.com/css/foundation-for-beginners-custom-forms-and-switches.html