初学者linux基础知识
在查看 Zurb's Foundation 中的按钮之后,现在让我们看一下自定义窗体和开关。 在本教程中,我们将进行练习。 您可以将其添加到您的项目中或一起玩的联系表。 构建完这些之后,我们将移至其他表单元素。
至少对于我来说,形式总是让人有些痛苦,尤其是在使它们适合我过于雄心勃勃的设计时。 Foundation通过包含JavaScript自定义表单插件,使整个过程变得更加容易。 设置非常简单,并且使您能够使用CSS轻松自定义表单元素。
为了使自定义表单起作用,您需要包括foundation.forms.js。 您还需要确保在表单插件上方包含zepto.js和foundation.js。
该插件的工作原理是隐藏每个表单元素本身,然后吐出更多可视觉控制的元素,例如div和anchor标签。 然后,它将任何交互传递给原始的隐藏元素,这意味着表单仍将按预期运行。 让我们看看它是如何工作的。
联络表格
就网站而言,最常见的表单类型可能一直是联系表单。 在本练习中,我们将采用您可能希望看到的标准输入,以及一个或两个以上对您的项目可能有用的不寻常示例。
以您的标准<form>
标记。 要启动自定义表单插件,我们需要添加一个“ custom”类,如下所示: <form class="custom">
,完成。 现在,我们有了自定义表格。
要开始,您将需要带有两列行的form标记,如下所示:
<form class="custom">
<div class="row">
<div class="large-6 columns">
</div>
<div class="large-6 columns">
</div>
</div>
</form>
现在我们从左列开始; 在示例中,我使用了下拉菜单来选择称呼,然后是名称的输入框。 它们在行上使用带有“折叠”类的标准标签。 我们在此之后是电子邮件字段和“您如何找到我们”的下拉列表。
<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>
您需要确保您的select元素具有id,但是除此之外,标记确实很简单。 因此,要将其与我们首先看过的表单代码合并,您需要将其与“ large-6”类一起放在第一格中。
接下来是第二列的元素。 其中包括文本区域,“向我发送垃圾邮件”复选框和一个开关,最后是提交按钮。
<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" />
开关
我们尚未涉及开关 ,所以现在就开始做。
开关是一种视觉上切换输入的好方法。 它们的结构包括一个带有“ switch”类的div,然后是您选择的大小。 这些大小包括“小”,“小”和“大”。 您还可以使用“四舍五入”类将开关设置为四舍五入。 结构本身具有两个输入,每个开关状态一个。 它们具有各自的标签,Foundation在每个州内将其用于文本。 输入需要id,标签需要同时使用“ for”属性。
<div class="switch tiny">
<input id="x" name="switch-x" type="radio" checked>
<label for="x" onclick="">No</label>
几乎涵盖了我们的联系表格,您可以使用它并进行使用,也可以在下一个项目中使用它。
其他表单元素
您还需要Web表单吗? 首先,我们有一些不错的旧收音机,每个收音机都必须具有相同的名称和“ 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>
错误讯息
大多数表单至少有一个必填字段,否则表单将无法正确提交。 基金会使用“错误”类满足这些验证情况。 只需将其添加到任何输入,标签,小标签或列中,然后观察这些元素采用红色错误样式即可。
<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图像上传器 ?
初学者linux基础知识