跳至内容

表单构建器

使用代码和示例构建您的表单。

布局

!您可以使用输入创建器开始添加字段。

  • 姓
  • 名
  • 邮箱
  • 手机号码
  • 标题
  • 开发者

输入创建器

!此表单允许您创建和更新输入。生成表单按钮将使用更新创建一个新表单。

或

代码

!当您对表单进行更改时，代码部分将更新，您也可以复制代码。

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


export default function App() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  console.log(errors);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="First name" {...register("First name", {required: true, maxLength: 80})} />
      <input type="text" placeholder="Last name" {...register("Last name", {required: true, maxLength: 100})} />
      <input type="text" placeholder="Email" {...register("Email", {required: true, pattern: /^\S+@\S+$/i})} />
      <input type="tel" placeholder="Mobile number" {...register("Mobile number", {required: true, minLength: 6, maxLength: 12})} />
      <select {...register("Title", { required: true })}>
        <option value="Mr">Mr</option>
        <option value="Mrs">Mrs</option>
        <option value="Miss">Miss</option>
        <option value="Dr">Dr</option>
      </select>


      <input {...register("Developer", { required: true })} type="radio" value="Yes" />
      <input {...register("Developer", { required: true })} type="radio" value="No" />


      <input type="submit" />
    </form>
  );
}
BEEKAI Form builder

下一代表单构建器

使用现代技术和一流的用户体验和可访问性构建下一代表单。

  • 生成 React/Vanilla JS 代码

  • 拖放式 GUI

  • 默认情况下提高可访问性

  • 支持动态字段数组

  • 与提交的端到端集成

  • 用户行为分析

  • 以及更多功能

立即尝试

想要了解更多？

查看 React Hook Form 文档，了解有关 API 的所有信息。

编辑