A single form can have multiple buttons that perform different actions. [React](/courses/reactjs) supports this through the button's `formAction` prop. This is useful when several operations use the same form fields. ### Example Scenario An article editor may have: ```text Save Draft Publish ``` Both buttons use the same title and content fields but perform different operations. ### Server Actions ```javascript 'use server'; export async function saveDraft(formData) { const title = formData.get('title'); await saveArticle({ title, status: 'draft' }); } export async function publishArticle(formData) { const title = formData.get('title'); await saveArticle({ title, status: 'published' }); } ``` ### Form ```jsx ``` The action attached to the clicked button determines which server operation runs. ### Why Is This Better Than Separate Forms? Without `formAction`, you might duplicate the same fields: ```text Form 1 → Save Draft Form 2 → Publish ``` That would be unnecessary when both operations need the same input values. ### Alternative: One Action with an Intent Field Another valid design is: ```jsx ``` Then the server reads: ```javascript const intent = formData.get('intent'); ``` ### Which Approach Should You Use? Separate actions are useful when the operations have substantially different authorization, validation, or business logic. An intent field can be appropriate when both operations are closely related and share most logic. ### Interview-Ready Answer [React](/courses/reactjs) forms can use the `formAction` prop on individual submit buttons so the same form can trigger different Server Actions. This is useful for interfaces such as Save Draft versus Publish. Another option is submitting an intent value to one action when the workflows mostly share the same logic.