正文

学会表单设计，从掌握这些模板库开始：轻松搭建高效表单体验

/0 浏览量
0601

在设计表单时，我们总是追求高效和用户体验的完美结合。一个好的表单设计不仅能够收集到准确的数据，还能让用户在使用过程中感到舒适和愉悦。以下是一些流行的表单模板库，它们可以帮助你轻松搭建高效的表单体验。

1. Bootstrap Forms

Bootstrap 是一个流行的前端框架，它提供了一套丰富的表单组件，可以帮助你快速搭建响应式的表单。Bootstrap 的表单组件包括文本框、选择框、单选框、复选框等，并且支持丰富的样式定制。

<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>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

2. Materialize CSS

Materialize CSS 是一个基于 Material Design 的前端框架，它提供了丰富的表单组件和样式。Materialize CSS 的表单组件包括输入框、选择框、日期选择器等，并且支持丰富的动画效果。

<div class="input-field">
  <input id="email" type="email">
  <label for="email">Email</label>
</div>
<div class="input-field">
  <input id="password" type="password" />
  <label for="password">Password</label>
</div>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
  <i class="material-icons right">send</i>
</button>

3. jQuery Validation

jQuery Validation 是一个轻量级的表单验证插件，它可以与 jQuery 一起使用，为表单添加验证功能。jQuery Validation 支持丰富的验证规则，如必填、邮箱、密码强度等。

$(document).ready(function() {
  $("#myForm").validate({
    rules: {
      email: "required",
      password: {
        required: true,
        minlength: 5
      }
    },
    messages: {
      email: "Please enter your email",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      }
    },
    submitHandler: function(form) {
      form.submit();
    }
  });
});

4. Formik

Formik 是一个 React 表单状态管理和验证库，它可以帮助你轻松搭建复杂的表单。Formik 提供了丰富的表单组件和验证规则，并且支持 React Hooks。

import { useFormik } from 'formik';

const initialValues = {
  email: '',
  password: '',
};

const formik = useFormik({
  initialValues,
  validate,
  onSubmit: values => {
    alert(JSON.stringify(values, null, 2));
  },
});

function 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';
  }
  if (!values.password) {
    errors.password = 'Required';
  }
  return errors;
}

return (
  <form onSubmit={formik.handleSubmit}>
    <input
      type="email"
      name="email"
      onChange={formik.handleChange}
      value={formik.values.email}
    />
    {formik.touched.email && formik.errors.email ? (
      <div>{formik.errors.email}</div>
    ) : null}
    <input
      type="password"
      name="password"
      onChange={formik.handleChange}
      value={formik.values.password}
    />
    {formik.touched.password && formik.errors.password ? (
      <div>{formik.errors.password}</div>
    ) : null}
    <button type="submit">Submit</button>
  </form>
);

总结

通过掌握这些模板库，你可以轻松搭建高效的表单体验。在实际应用中，可以根据具体需求选择合适的库，并根据自己的设计风格进行调整。希望这篇文章对你有所帮助！

-- 展开阅读全文 --