前言
在现代网站和应用程序中，表单是非常重要的。它们是用户和网站之间的主要交互方式。因此，构建一个易于使用且美观的交互式表单至关重要。在这篇文章中，我们将介绍利用 Material Design Lite 构建交互式表单的方法，并提供示例代码。
Material Design Lite 简介
Material Design Lite（简称 MDL）是一个开源的前端框架，旨在实现谷歌 Material Design 设计语言的各种组件和样式。它由谷歌开发并在 GitHub 上公开发布，包括了丰富的 UI 组件，例如按钮、文本框、滑块和卡片等，相较于传统的前端框架，MDL 拥有更加美观、简单、易于定制的设计语言。
构建交互式表单
现在，我们将介绍使用 MDL 构建交互式表单的步骤，以及如何添加验证和提交表单。
步骤1：前期准备
首先，你需要在你的项目中添加 Material Design Lite 。你可以在官方网站 https://getmdl.io/ 下载 MDL，或者使用以下命令安装 MDL：
<!-- CSS --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <!-- JS --> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
步骤2：创建基本表单
为了创建基本表单，我们需要一些基本的 HTML 元素。在这里，我们将创建一个包含输入框、下拉框和提交按钮的表单。下面是我们的 HTML 代码。
-- -------------------- ---- -------
----- -----------
---- -------------------- ---------------- -------------------------------
------ ---------------------------- ----------- ----------
------ ---------------------------- --------------- ------------
------
---- ----------------- ------------- ----------------------
------- ------------------------- ------------
------- ------------------
------- -----------------------
------- -------------------------
---------
------ ------------------------- ---------------------------
------
------- ----------------- ------------- ------------------ -------------------- ------------------- --------------
------
---------
-------以上代码创建了一个简单的表单，包含一个带有浮动标签的输入框和一个下拉框。我们还创建了一个按钮，用于提交表单。现在，我们需要用 CSS 样式表使表单变得美观。
步骤3：添加 MDL 样式
Material Design Lite 使用 CSS 类、JavaScript 和 HTML 代码创建定义良好的、开放式的设计系统，我们可以选择其中的各种类让我们的组件看起来符合谷歌的 Material Design 规范。例如，在我们的输入框中，我们将使用 mdl-js-textfield 类，这会将输入框变成 Material Design 风格的 />
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="name"> <label class="mdl-textfield__label" for="name">Your Name</label> </div>
我们还可以用 mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent 类为提交按钮应用 Material Design 样式。同样，我们可以使用 mdl-select mdl-js-select mdl-js-ripple-effect 类带有下拉式菜单的输入框应用 Material Design 样式。
<div class="mdl-select mdl-js-select mdl-js-ripple-effect">
<select class="mdl-select__input" id="gender">
<option value=""></option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<label class="mdl-select__label" for="gender">Gender</label>
</div>步骤4：添加验证
表单验证是一项必不可少的功能。 Material Design Lite 提供了一些有用的验证类，我们可以使用这些类来验证表单中的各种输入类型，如电子邮件地址、URL、数字等等。这些类都在JS里进行声明。
-- -------------------- ---- -------
-------- -------------------- -
--- -- - ---------------
------ ---------------
-
-------- -------------- -
--- ---- - ---------------------------------------
--- ----- - ----------------------------------------
-- ----- -- --- -
----------- ---- -- ------ ------
------ ------
- ---- -- ----------------------- -
------------ -- --- --------
------ ------
-
-步骤5：提交表单
最后一步是提交表单。MDL 框架可以用 document.querySelector('form').addEventListener('submit', function (e) {}); 在验证过程中来拒绝表单的默认提交。
-- -------------------- ---- -------
--------------------------------------------------------- -------- --- -
-------------------
-- ---------------- -
----------- --------- ---------------
-------------------------------------- - ---
---------------------------------------- - ---
-
---
示例代码
接下来，我们将展示 MDL 构建交互式表单的示例代码。
- HTML 代码：
-- -------------------- ---- -------
----- -----------
---- -------------------- ---------------- -------------------------------
------ ---------------------------- ----------- ----------
------ ---------------------------- --------------- ------------
------
---- ----------------- ------------- ----------------------
------- ------------------------- ------------
------- ------------------
------- -----------------------
------- -------------------------
---------
------ ------------------------- ---------------------------
------
------- ----------------- ------------- ------------------ -------------------- ------------------- --------------
------
---------
-------- JavaScript 代码：
-- -------------------- ---- -------
-------- -------------------- -
--- -- - ---------------
------ ---------------
-
-------- -------------- -
--- ---- - ---------------------------------------
--- ----- - ----------------------------------------
-- ----- -- --- -
----------- ---- -- ------ ------
------ ------
- ---- -- ----------------------- -
------------ -- --- --------
------ ------
-
-
--------------------------------------------------------- -------- --- -
-------------------
-- ---------------- -
----------- --------- ---------------
-------------------------------------- - ---
---------------------------------------- - ---
-
---总结
在这篇文章中，我们学习了如何使用 Material Design Lite 构建交互式表单。我们首先介绍了 Material Design Lite 的概述，然后确定了如何创建一个基本表单并添加验证和提交表单的步骤。我相信这篇文章会对在前端领域工作的初学者特别有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f9a9b980a9b385b90152b