正文

学会这5款Web表单开发框架，让你的表单设计更轻松高效

/0 浏览量
0609

在现代Web开发中，表单是用户与网站互动的重要接口。一个设计良好的表单不仅能提高用户体验，还能提升数据收集的效率。以下介绍五款流行的Web表单开发框架，帮助你轻松高效地设计表单。

1. Bootstrap Forms

Bootstrap 是一个流行的前端框架，以其简洁、响应式和功能强大著称。Bootstrap Forms 利用 Bootstrap 的网格系统，使得创建表单元素变得异常简单。

使用方法：

  • 使用 <form> 标签创建表单容器。
  • 使用 form-group 类包裹输入元素和标签。
  • 使用网格系统布局表单元素。

代码示例：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

2. jQuery Validation

jQuery Validation 是一个基于 jQuery 的插件，提供了强大的表单验证功能。它支持各种验证规则，如电子邮件、数字、URL等，并且可以自定义验证消息。

使用方法：

  • 引入 jQuery 和 jQuery Validation 插件。
  • 在 <form> 标签中添加 novalidate 属性，禁用浏览器默认验证。
  • 使用 class 为输入元素添加验证规则。

代码示例：

<form id="myForm">
  <input type="text" class="required" placeholder="Name">
  <button type="submit">Submit</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
<script>
  $("#myForm").validate();
</script>

3. Materialize CSS

Materialize CSS 是一个基于 Material Design 的前端框架。它提供了一套美观、现代的表单元素，使得创建漂亮的表单变得轻松。

使用方法：

  • 引入 Materialize CSS 文件。
  • 使用 Materialize 提供的表单元素类，如 input-field、button 等。

代码示例：

<form class="col s12">
  <div class="row">
    <div class="input-field col s12">
      <input id="first_name" type="text" class="validate">
      <label class="label-icon" for="first_name"><i class="material-icons left">account_circle</i>First Name</label>
    </div>
  </div>
</form>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

4. Semantic UI

Semantic UI 是一个灵活、人性化的前端框架，其表单元素设计简洁、易于使用。

使用方法：

  • 引入 Semantic UI CSS 文件。
  • 使用 Semantic UI 提供的表单元素类，如 ui form、ui input 等。

代码示例：

<form class="ui form">
  <div class="field">
    <label>Name</label>
    <input type="text" name="name">
  </div>
  <div class="field">
    <label>Email</label>
    <input type="email" name="email">
  </div>
  <button class="ui button">Submit</button>
</form>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

5. React Formik

React Formik 是一个 React 表单管理库，它提供了一套简洁的 API 来处理表单状态、验证和提交逻辑。

使用方法：

  • 在 React 项目中安装 Formik 和 Yup。
  • 使用 Formik 组件和 Yup 验证规则创建表单。

代码示例：

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(8, 'Password must be at least 8 characters').required('Required'),
});

function MyForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      validationSchema={validationSchema}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="email" name="email" />
          <ErrorMessage name="email" component="div" />
          <Field type="password" name="password" />
          <ErrorMessage name="password" component="div" />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
}

export default MyForm;

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

通过学习这五款 Web 表单开发框架，你可以轻松地设计出美观、高效的表单。希望这些工具能帮助你提升工作效率，创造出更好的用户体验。

-- 展开阅读全文 --