正文

从零开始，学会这5款热门Web表单开发框架

/0 浏览量
0504

在Web开发的世界里，表单是用户与网站交互的关键组成部分。一个设计良好、易于使用的表单可以提高用户体验，同时收集到有价值的数据。随着前端技术的发展，出现了许多优秀的Web表单开发框架，它们可以帮助开发者快速构建复杂的表单。下面，我们将从零开始，介绍5款热门的Web表单开发框架，并学习如何使用它们。

1. Bootstrap

Bootstrap是由Twitter推出的一个开源的HTML、CSS和JavaScript框架，用于开发响应式、移动设备优先的Web项目。Bootstrap提供了丰富的表单组件，可以帮助你快速搭建表单。

使用Bootstrap创建表单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap表单示例</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">邮箱地址</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入邮箱地址">
                <small id="emailHelp" class="form-text text-muted">我们不会分享您的邮箱地址</small>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
            </div>
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                <label class="form-check-label" for="exampleCheck1">记住我</label>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

2. Materialize

Materialize是一个基于Material Design的CSS框架，它提供了丰富的表单组件和样式，可以帮助你创建美观、实用的表单。

使用Materialize创建表单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Materialize表单示例</title>
    <link href="https://cdn.staticfile.org/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <form>
            <div class="input-field">
                <input id="email" type="email" class="validate">
                <label for="email">邮箱地址</label>
            </div>
            <div class="input-field">
                <input id="password" type="password" class="validate">
                <label for="password">密码</label>
            </div>
            <button class="btn waves-effect waves-light" type="submit">提交</button>
        </form>
    </div>
    <script src="https://cdn.staticfile.org/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

3. Semantic UI

Semantic UI是一个基于自然语言的前端框架，它提供了一组易于使用的UI组件，包括丰富的表单元素。

使用Semantic UI创建表单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic UI表单示例</title>
    <link href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <form class="ui form">
            <div class="field">
                <div class="ui left icon input">
                    <i class="user icon"></i>
                    <input type="text" placeholder="用户名">
                </div>
            </div>
            <div class="field">
                <div class="ui left icon input">
                    <i class="lock icon"></i>
                    <input type="password" placeholder="密码">
                </div>
            </div>
            <div class="field">
                <div class="ui checkbox">
                    <input type="checkbox" tabindex="0" class="hidden">
                    <label>记住我</label>
                </div>
            </div>
            <button class="ui button">登录</button>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</body>
</html>

4. jQuery Validation

jQuery Validation是一个基于jQuery的插件，它可以帮助你轻松实现表单验证功能。

使用jQuery Validation创建表单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Validation表单示例</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-validate/1.19.5/jquery.validate.min.js"></script>
</head>
<body>
    <form id="myForm">
        <div class="form-group">
            <label for="email">邮箱地址</label>
            <input type="email" class="form-control" id="email" required>
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" required>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
    <script>
        $(document).ready(function() {
            $('#myForm').validate({
                rules: {
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 5
                    }
                },
                messages: {
                    email: {
                        required: "请输入邮箱地址",
                        email: "请输入有效的邮箱地址"
                    },
                    password: {
                        required: "请输入密码",
                        minlength: "密码长度不能少于5个字符"
                    }
                }
            });
        });
    </script>
</body>
</html>

5. React Hook Form

React Hook Form是一个基于React Hooks的表单管理库，它提供了简洁、易用的API，可以帮助你轻松实现表单状态管理和验证。

使用React Hook Form创建表单

import React from 'react';
import { useForm } from 'react-hook-form';

const MyForm = () => {
    const { register, handleSubmit, formState: { errors } } = useForm();

    const onSubmit = data => {
        console.log(data);
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <div>
                <label>邮箱地址</label>
                <input type="email" {...register("email", { required: true, pattern: /^\S+@\S+\.\S+$/i })} />
                {errors.email && <p>This field is required</p>}
            </div>
            <div>
                <label>密码</label>
                <input type="password" {...register("password", { required: true, minLength: 5 })} />
                {errors.password && <p>This field is required</p>}
            </div>
            <button type="submit">提交</button>
        </form>
    );
};

export default MyForm;

通过以上5款热门的Web表单开发框架，你可以轻松创建各种类型的表单。希望这篇文章能帮助你从零开始，掌握这些框架的使用方法。

-- 展开阅读全文 --