コンテンツへスキップ

フォームビルダー

コードとサンプルでフォームを作成します。

レイアウト

!入力クリエーターでフィールドを追加できます。

  • 名
  • 姓
  • メール
  • 携帯番号
  • タイトル
  • 開発者

入力クリエーター

!このフォームでは、入力を作成および更新できます。[フォームを生成]ボタンをクリックすると、更新された新しいフォームが作成されます。

または

コード

!フォームに変更を加えると、コードセクションが更新され、コードをコピーすることもできます。

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についてすべて学びましょう。

編集