폼 빌더

코드와 예제를 통해 폼을 구축하세요.

레이아웃

!Input Creator를 사용하여 필드를 추가할 수 있습니다.

First name
Last name
Email
Mobile number
Title
Developer

코드

!폼을 수정하는 동안 코드 섹션이 업데이트되며, 코드를 복사할 수도 있습니다.

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>
  );
}

Next-gen form builder

Build the next-generation forms with modern technology and best in class user experience and accessibility.

Generate code for React/Vanilla JS
GUI with drag and drop
Improved accessibility by default
Support dynamic field array
End-to-end integration with submission
User behaviour analytic
and many more features

Try it now

더 알아보기

React Hook Form 문서를 확인하고 API에 대해 모두 알아보세요.

Edit