【第七章】Foundation之自定义表单和开关

作者：Terry2014.08.01来源：Web前端之家浏览：16510评论:0

QQ截图20140707102009.png

难得今天事情不多，一口气整理了几篇关于Foundation的教程了，难得啊，再接再厉，继续搞起啊。上节主要学习了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  
<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属性。