正文

告别编程烦恼，快速搭建表单利器：五大Web表单开发框架大盘点

/0 浏览量
0430

在互联网的今天，表单是网站与用户交互的重要方式，无论是用户注册、留言反馈还是在线购物，表单无处不在。然而，编写复杂的表单代码对于新手开发者来说往往是一项挑战。幸运的是，随着Web表单开发框架的兴起，开发者们可以快速搭建出功能丰富、美观大方的表单，而无需从头开始编写每一行代码。下面，我们就来盘点一下目前市面上五大最受欢迎的Web表单开发框架。

1. Bootstrap

Bootstrap 是一个前端框架，它为网站开发提供了丰富的工具和组件，其中就包括表单开发。Bootstrap 提供了一系列预定义的表单样式和布局，使得开发者可以轻松地创建响应式和美观的表单。

使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap Form Example</title>
</head>
<body>
    <form>
        <div class="mb-3">
            <label for="inputEmail" class="form-label">Email address</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="name@example.com">
        </div>
        <div class="mb-3">
            <label for="inputPassword" class="form-label">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</body>
</html>

2. jQuery UI

jQuery UI 是基于 jQuery 的一个扩展库，它提供了一系列丰富的UI组件和交互效果。其中的表单组件可以帮助开发者快速实现具有高级交互功能的表单。

使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <title>jQuery UI Form Example</title>
</head>
<body>
    <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <br>
        <label for="email">Email:</label>
        <input type="text" id="email" name="email">
        <br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

3. Materialize CSS

Materialize CSS 是一个基于 Material Design 的前端框架，它提供了一系列响应式和美观的组件。在表单方面，Materialize CSS 也提供了丰富的样式和布局选项。

使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <title>Materialize CSS Form Example</title>
</head>
<body>
    <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">account_circle</i></label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <input id="email" type="email" class="validate">
                <label class="label-icon" for="email"><i class="material-icons">email</i></label>
            </div>
        </div>
        <button class="btn waves-effect waves-light" type="submit" name="action">Submit
            <i class="material-icons right">send</i>
        </button>
    </form>
</body>
</html>

4. Formik

Formik 是一个用于React的表单管理库，它提供了一套易于使用的API来处理表单状态、验证和提交逻辑。对于React开发者来说，Formik可以大大简化表单的开发过程。

使用示例：

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

const MyForm = () => {
    const initialValues = {
        email: '',
        password: '',
    };

    const validationSchema = Yup.object().shape({
        email: Yup.string()
            .email('Invalid email')
            .required('Required'),
        password: Yup.string()
            .min(4, 'Too Short!')
            .required('Required'),
    });

    return (
        <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={(values, { setSubmitting }) => {
                setTimeout(() => {
                    alert(JSON.stringify(values, null, 2));
                    setSubmitting(false);
                }, 400);
            }}
        >
            {({ isSubmitting }) => (
                <Form>
                    <div className="form-group">
                        <label htmlFor="email">Email</label>
                        <Field type="email" name="email" className="form-control" />
                        <div className="text-danger">{errors.email}</div>
                    </div>
                    <div className="form-group">
                        <label htmlFor="password">Password</label>
                        <Field type="password" name="password" className="form-control" />
                        <div className="text-danger">{errors.password}</div>
                    </div>
                    <button type="submit" disabled={isSubmitting}>
                        Submit
                    </button>
                </Form>
            )}
        </Formik>
    );
};

export default MyForm;

5. Final Form

Final Form 是另一个流行的React表单库，它专注于简洁和易用性。Final Form 提供了强大的表单管理功能，包括验证、提交处理和状态跟踪。

使用示例：

import React from 'react';
import { Field, Form, ErrorMessage } from 'react-final-form';

const validate = values => {
    const errors = {};
    if (!values.email) {
        errors.email = 'Required';
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
        errors.email = 'Invalid email address';
    }
    return errors;
};

const MyForm = () => {
    return (
        <Form
            onSubmit={(values, { setSubmitting }) => {
                setTimeout(() => {
                    alert(JSON.stringify(values, null, 2));
                    setSubmitting(false);
                }, 400);
            }}
            validate={validate}
        >
            <div>
                <Field name="email" component="input" type="email" />
                <ErrorMessage name="email" component="div" />
            </div>
            <div>
                <button type="submit" disabled={submitting}>
                    Submit
                </button>
            </div>
        </Form>
    );
};

export default MyForm;

通过上述五大框架，开发者可以根据自己的需求和喜好选择合适的工具来构建表单。无论是响应式设计、高级交互还是复杂的验证逻辑，这些框架都能提供强大的支持。希望本文能够帮助到那些正在寻找快速搭建表单利器的开发者们。

-- 展开阅读全文 --