<form>

Built-in browser <form> component, information submit செய்ய interactive controls உருவாக்க அனுமதிக்கிறது.

<form action={search}>
    <input name="query" />
    <button type="submit">தேடு</button>
</form>

Reference
- <form>
Usage

Reference

`<form>`

Information submit செய்ய interactive controls உருவாக்க, built-in browser <form> component-ஐ render செய்யவும்.

<form action={search}>
    <input name="query" />
    <button type="submit">தேடு</button>
</form>

கீழே மேலும் examples பார்க்கவும்.

Props

<form> அனைத்து common element props-ஐ support செய்கிறது.

action: URL அல்லது function. action-க்கு URL pass செய்தால் form HTML form component போல behave செய்யும். action-க்கு function pass செய்தால், Action prop pattern-ஐத் தொடர்ந்து Transition-இல் அந்த function form submission-ஐ handle செய்யும். action-க்கு pass செய்யப்பட்ட function async ஆக இருக்கலாம்; submitted form-ன் form data கொண்ட single argument உடன் call செய்யப்படும். <button>, <input type="submit">, அல்லது <input type="image"> component-இல் உள்ள formAction attribute மூலம் action prop override செய்யப்படலாம்.

Caveats

action அல்லது formAction-க்கு function pass செய்தால், method prop value எதுவாக இருந்தாலும் HTTP method POST ஆக இருக்கும்.

Usage

Client-இல் form submission handle செய்தல்

Form submit செய்யப்படும் போது function run ஆக, form-ன் action prop-க்கு function pass செய்யவும். formData, argument ஆக function-க்கு pass செய்யப்படும்; இதனால் form submit செய்த data-வை access செய்யலாம். இது URLs மட்டுமே ஏற்கும் conventional HTML action-இலிருந்து வேறுபடுகிறது. action function succeed ஆன பிறகு, form-இல் உள்ள எல்லா uncontrolled field elements reset செய்யப்படும்.

Fork

export default function Search() {
  function search(formData) {
    const query = formData.get("query");
    alert(`நீங்கள் '${query}' என்று தேடினீர்கள்`);
  }
  return (
    <form action={search}>
      <input name="query" />
      <button type="submit">தேடு</button>
    </form>
  );
}

Server Function உடன் form submission handle செய்தல்

Input மற்றும் submit button உடன் <form> render செய்யவும். Form submit செய்யப்படும் போது function run ஆக, form-ன் action prop-க்கு Server Function ('use server' கொண்டு mark செய்யப்பட்ட function) pass செய்யவும்.

Server Function-ஐ <form action>-க்கு pass செய்வது, JavaScript enabled இல்லாமலோ code load ஆகும்முன்னோ users forms submit செய்ய அனுமதிக்கிறது. Slow connection, device, அல்லது JavaScript disabled கொண்ட users-க்கு இது பயனுள்ளது; action prop-க்கு URL pass செய்யும்போது forms வேலை செய்வதைப் போன்றது.

<form>-ன் action-க்கு data வழங்க hidden form fields பயன்படுத்தலாம். Server Function hidden form field data-வை FormData instance ஆகப் பெற்று call செய்யப்படும்.

import { updateCart } from './lib.js';

function AddToCart({productId}) {
  async function addToCart(formData) {
    'use server'
    const productId = formData.get('productId')
    await updateCart(productId)
  }
  return (
    <form action={addToCart}>
        <input type="hidden" name="productId" value={productId} />
        <button type="submit">Cart-இல் சேர்க்கவும்</button>
    </form>

  );
}

Hidden form fields பயன்படுத்தி <form>-ன் action-க்கு data வழங்குவதற்கு பதிலாக, extra arguments supply செய்ய bind method call செய்யலாம். Function-க்கு argument ஆக pass செய்யப்படும் formData-க்கு கூடுதலாக, இது புதிய argument (productId)-ஐ function-க்கு bind செய்யும்.

import { updateCart } from './lib.js';

function AddToCart({productId}) {
  async function addToCart(productId, formData) {
    "use server";
    await updateCart(productId)
  }
  const addProductToCart = addToCart.bind(null, productId);
  return (
    <form action={addProductToCart}>
      <button type="submit">Cart-இல் சேர்க்கவும்</button>
    </form>
  );
}

<form> Server Component மூலம் render செய்யப்படும் போது, மேலும் Server Function <form>-ன் action prop-க்கு pass செய்யப்படும் போது, form progressively enhanced ஆகும்.

Form submission போது pending state காட்டுதல்

Form submit ஆகும் போது pending state display செய்ய, <form>-இல் render செய்யப்படும் component ஒன்றில் useFormStatus Hook call செய்து, return செய்யப்படும் pending property-ஐ read செய்யலாம்.

இங்கே, form submitting ஆகிறது என்பதை indicate செய்ய pending property பயன்படுத்துகிறோம்.

Fork

import { useFormStatus } from "react-dom";
import { submitForm } from "./actions.js";

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "சமர்ப்பிக்கிறது..." : "சமர்ப்பி"}
    </button>
  );
}

function Form({ action }) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

export default function App() {
  return <Form action={submitForm} />;
}

useFormStatus Hook பற்றி மேலும் அறிய reference documentation-ஐ பார்க்கவும்.

Form data-வை optimistically update செய்தல்

useOptimistic Hook, network request போன்ற background operation முடிவதற்கு முன் user interface-ஐ optimistically update செய்யும் வழி வழங்குகிறது. Forms context-இல், இந்த technique apps மேலும் responsive ஆக உணர உதவுகிறது. User form submit செய்தால், changes reflect செய்ய server response காத்திருக்காமல், expected outcome உடன் interface உடனடியாக update செய்யப்படும்.

உதாரணமாக, user form-இல் message type செய்து “Send” button அழுத்தும்போது, message உண்மையில் server-க்கு அனுப்பப்படுவதற்கு முன்பே, useOptimistic Hook அந்த message-ஐ “Sending…” label உடன் list-இல் உடனடியாக காட்ட அனுமதிக்கிறது. இந்த “optimistic” approach வேகம் மற்றும் responsiveness உணர்வை தருகிறது. பின்னர் form background-இல் message-ஐ உண்மையில் send செய்ய முயற்சிக்கும். Server message receive செய்ததை confirm செய்ததும், “Sending…” label remove செய்யப்படும்.

Fork

import { useOptimistic, useState, useRef } from "react";
import { deliverMessage } from "./actions.js";

function Thread({ messages, sendMessage }) {
  const formRef = useRef();
  async function formAction(formData) {
    addOptimisticMessage(formData.get("message"));
    formRef.current.reset();
    await sendMessage(formData);
  }
  const [optimisticMessages, addOptimisticMessage] = useOptimistic(
    messages,
    (state, newMessage) => [
      ...state,
      {
        text: newMessage,
        sending: true
      }
    ]
  );

  return (
    <>
      {optimisticMessages.map((message, index) => (
        <div key={index}>
          {message.text}
          {!!message.sending && <small> (அனுப்புகிறது...)</small>}
        </div>
      ))}
      <form action={formAction} ref={formRef}>
        <input type="text" name="message" placeholder="வணக்கம்!" />
        <button type="submit">அனுப்பு</button>
      </form>
    </>
  );
}

export default function App() {
  const [messages, setMessages] = useState([
    { text: "வணக்கம்!", sending: false, key: 1 }
  ]);
  async function sendMessage(formData) {
    const sentMessage = await deliverMessage(formData.get("message"));
    setMessages((messages) => [...messages, { text: sentMessage }]);
  }
  return <Thread messages={messages} sendMessage={sendMessage} />;
}

Form submission errors handle செய்தல்

சில cases-இல் <form>-ன் action prop call செய்யும் function error throw செய்யும். <form>-ஐ Error Boundary-இல் wrap செய்வதன் மூலம் இந்த errors handle செய்யலாம். <form>-ன் action prop call செய்யும் function error throw செய்தால், error boundary-ன் fallback display செய்யப்படும்.

Fork

import { ErrorBoundary } from "react-error-boundary";

export default function Search() {
  function search() {
    throw new Error("search error");
  }
  return (
    <ErrorBoundary
      fallback={<p>Form submit செய்யும் போது error ஏற்பட்டது</p>}
    >
      <form action={search}>
        <input name="query" />
        <button type="submit">தேடு</button>
      </form>
    </ErrorBoundary>
  );
}

JavaScript இல்லாமல் form submission error காட்டுதல்

Progressive enhancement-க்காக JavaScript bundle load ஆகும்முன் form submission error message display செய்ய வேண்டிய requirements:

<form> Client Component மூலம் render செய்யப்பட வேண்டும்
<form>-ன் action prop-க்கு pass செய்யப்படும் function Server Function ஆக இருக்க வேண்டும்
Error message display செய்ய useActionState Hook பயன்படுத்தப்பட வேண்டும்

useActionState இரண்டு parameters ஏற்கிறது: Server Function மற்றும் initial state. useActionState இரண்டு values return செய்கிறது: state variable மற்றும் action. useActionState return செய்யும் action, form-ன் action prop-க்கு pass செய்யப்பட வேண்டும். useActionState return செய்யும் state variable error message display செய்ய பயன்படுத்தலாம். useActionState-க்கு pass செய்யப்பட்ட Server Function return செய்யும் value, state variable update செய்ய பயன்படுத்தப்படும்.

Fork

import { useActionState } from "react";
import { signUpNewUser } from "./api";

export default function Page() {
  async function signup(prevState, formData) {
    "use server";
    const email = formData.get("email");
    try {
      await signUpNewUser(email);
      alert(`"${email}" சேர்க்கப்பட்டது`);
    } catch (err) {
      return err.toString();
    }
  }
  const [message, signupAction] = useActionState(signup, null);
  return (
    <>
      <h1>என் newsletter-க்கு sign up செய்யுங்கள்</h1>
      <p>Error பார்க்க அதே email-ஐ இருமுறை sign up செய்யுங்கள்</p>
      <form action={signupAction} id="signup-form">
        <label htmlFor="email">Email: </label>
        <input name="email" id="email" placeholder="react@example.com" />
        <button>Sign up</button>
        {!!message && <p>{message}</p>}
      </form>
    </>
  );
}

Form action-இலிருந்து state update செய்வது பற்றி மேலும் அறிய useActionState docs-ஐ பார்க்கவும்

Multiple submission types handle செய்தல்

User அழுத்தும் button அடிப்படையில் multiple submission actions handle செய்ய forms design செய்யலாம். Form உள்ளே உள்ள ஒவ்வொரு button-யும், formAction prop set செய்வதன் மூலம் தனித்த action அல்லது behavior உடன் associate செய்யப்படலாம்.

User குறிப்பிட்ட button tap செய்தால், form submit செய்யப்படும்; அந்த button-ன் attributes மற்றும் action மூலம் define செய்யப்பட்ட corresponding action execute செய்யப்படும். உதாரணமாக, form default ஆக article-ஐ review-க்கு submit செய்யலாம்; ஆனால் article-ஐ draft ஆக save செய்ய formAction set செய்யப்பட்ட தனி button வைத்திருக்கலாம்.

Fork

export default function Search() {
  function publish(formData) {
    const content = formData.get("content");
    const button = formData.get("button");
    alert(`'${content}' '${button}' button மூலம் publish செய்யப்பட்டது`);
  }

  function save(formData) {
    const content = formData.get("content");
    alert(`'${content}' பற்றிய உங்கள் draft save செய்யப்பட்டது!`);
  }

  return (
    <form action={publish}>
      <textarea name="content" rows={4} cols={40} />
      <br />
      <button type="submit" name="button" value="submit">Publish</button>
      <button formAction={save}>Draft save செய்</button>
    </form>
  );
}

PreviousCommon (e.g. <div>)

Next<input>