初学者linux基础知识_初学者基础：自定义表单和开关

最新推荐文章于 2025-11-13 11:35:46 发布

翻译最新推荐文章于 2025-11-13 11:35:46 发布 · 220 阅读

文章标签：

#java #python #html #css #大数据

本文介绍如何在Zurb's Foundation框架中使用自定义表单和开关，包括表单元素的设置、样式调整及错误处理。通过示例展示如何创建联系表单、开关和其他表单组件。

初学者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&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" />

开关

我们尚未涉及开关，所以现在就开始做。

开关是一种视觉上切换输入的好方法。它们的结构包括一个带有“ 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图像上传器？

翻译自: https://webdesign.tutsplus.com/articles/foundation-for-beginners-custom-forms-and-switches--webdesign-13109

初学者linux基础知识