[go: up one dir, main page]
Scribd
Upload
13 views3 pages

1 Introduction To React Forms 09f2e05ec5

This document provides an introduction to React Forms, detailing the structure of form and input components. It explains how to handle form submissions using action attributes and outlines common input properties and types. Additionally, it includes assignments for creating forms with various input types and event handlers.

Uploaded by

Lokesh Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views3 pages

1 Introduction To React Forms 09f2e05ec5

This document provides an introduction to React Forms, detailing the structure of form and input components. It explains how to handle form submissions using action attributes and outlines common input properties and types. Additionally, it includes assignments for creating forms with various input types and event handlers.

Uploaded by

Lokesh Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Introduction to React Forms

Table of Content
The form component

The input component

The form component


<form action={search}>
<input name="query" />
<button type="submit">Search</button>
</form>

: a URL or function. The form will behave like the HTML form
action

component when a URL is passed to the action.

When a function is passed to action the function will handle the form
submission. The function passed to action may be async and will be called
with a single argument containing the form data of the submitted form.

is an event attribute, meaning whatever JS is in it will be called on


onsubmit

the submit event.

The input component

Introduction to React Forms 1


<input name="myInput" />

Commonly used input props:

defaultChecked : A boolean. Specifies the initial value for the checkbox or radio

defaultValue : A string. Specifies the initial value for a text input.

value : The current value of the input.

disabled : A boolean, specifies

onChange: A callback function triggered when the input value changes.

placeholder: A short hint that describes the expected value of the input.

type: Specifies the type of input (e.g., text , password , email , number , etc.).

name: The name of the input, used when submitting a form.

Makes the input read-only (can't be edited, but can still be


readOnly:

focused).

minand max: Specifies the minimum and maximum values for numeric
inputs ( type="number" , type="date" , etc.).

pattern: Specifies a regular expression that the input's value must match.

and minLength specifies the maximum or minimum number of


maxLength

characters allowed in the input.

onBlur: A callback function triggered when the input loses focus.

onFocus: A callback function triggered when the input gains focus.

aria-* : Accessibility-related attributes for screen readers.

Common Input Types


text select

password date

email time

number range

submit color

Introduction to React Forms 2


reset checkbox

textarea radio

Assignments
Create a Form having all of the common input types mentioned above.

Use the following events on the input types:

onBlur

onFocus

onChange

Introduction to React Forms 3

You might also like