সাধারণ html ফর্মে, ফর্ম উপাদানগুলি অভ্যন্তরীণভাবে এটির সাথে মান রাখে এবং ফর্ম জমা দেওয়ার বোতামে জমা দেয়৷
উদাহরণ
<!DOCTYPE html> <html> <head> <title>Form Example</title> </head> <body> <form> <label> User Name: <input type="text" name="username" /> </label> <input type="submit" value="Submit Form" /> </form> </body> </html>
উপরের উদাহরণে, আমাদের কাছে একটি সাধারণ ইনপুট রয়েছে যার নাম ব্যবহারকারীর নাম এবং আমরা ফর্ম জমা দেওয়ার সময় এর মান পেতে পারি। html ফর্মের ডিফল্ট আচরণ হল নতুন পৃষ্ঠায় নেভিগেট করা, যেমন পোস্ট ফর্ম জমা দেওয়া পৃষ্ঠা৷
তবে এটি আরও সুবিধা দিতে পারে যদি আমাদের কাছে একটি ফর্ম জমা হ্যান্ডলার জাভাস্ক্রিপ্ট ফাংশন থাকে যা ফর্ম ডেটাও যাচাই করতে পারে। বৈধতা ব্যবহারকারীকে প্রাসঙ্গিক প্রতিক্রিয়া দেবে।
প্রতিক্রিয়ার ফর্ম জমা দেওয়ার জন্য একটি কৌশল রয়েছে যাকে নিয়ন্ত্রিত উপাদান বলা হয়।
এইচটিএমএল-এর মতো, ইনপুট, টেক্সটেরিয়া ইত্যাদি উপাদানগুলি ব্যবহারকারীর কর্মের উপর ভিত্তি করে তাদের নিজস্ব অবস্থা এবং আপডেট রাখে। প্রতিক্রিয়ায় পরিবর্তনযোগ্য ক্ষেত্রগুলিকে রাষ্ট্রীয় বস্তুর সাথে রাখা হয়।
নিয়ন্ত্রিত উপাদান -
এর প্রতিক্রিয়ার পদ্ধতিতে ব্যবহারকারীর নাম ক্ষেত্র পরিচালনা করাclass UserForm extends React.Component {
constructor(props) {
super(props);
this.state = {username: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({username: event.target.value});
}
handleFormSubmit(event) {
console.log('username: ' + this.state.username);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
Name:
<input type="text" value={this.state.username} onChange={this.handleUsernameChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
} স্টেট ফিল্ড ইউজারনেম আপডেট করার জন্য এখানে আমাদের অনচেঞ্জ হ্যান্ডলার ফাংশন আছে।
ফর্মসাবমিটে আমরা জমা দেওয়া ব্যবহারকারীর নাম প্রদর্শন করতে ব্রাউজারে কনসোল লগ ইন দেখাচ্ছি৷
অন্যান্য নিয়ন্ত্রিত ধরনের উপাদান হল textarea, ট্যাগ নির্বাচন করুন, রেডিও বোতাম ইত্যাদি।
ফাইল টাইপের মত কিছু অনিয়ন্ত্রিত কম্পোনেন্ট আছে যেগুলো শুধুমাত্র প্রকৃতিতে পঠিত হয় এবং শুধুমাত্র ফর্ম জমা দিলেই এর মূল্য পাওয়া যায়।
একক JS ফাংশন -
সহ একাধিক ফর্ম ইনপুট পরিচালনা করাhandleInputChange(event) {
const value = event.target.value;
const name = event.target.name;
this.setState({
[name]: value
});
} ক্ষেত্রগুলির জন্য শূন্য মান সহ নিয়ন্ত্রিত ইনপুট রাষ্ট্রীয় সূচনা ব্যবহার করে ক্ষেত্রগুলির জন্য একটি ডিফল্ট মান প্রদান করে এড়ানো উচিত৷
ফর্মিকের মতো তৃতীয় পক্ষের লাইব্রেরিগুলি ব্যবহার করে প্রতিক্রিয়াতে ফর্ম পরিচালনার সম্পূর্ণ স্কেল সমাধানের জন্য করা যেতে পারে। এটি বৈধকরণ, ব্যবহারকারীর প্রতিক্রিয়া এবং আরও অনেক কিছু ব্যবহার করা সহজ৷
৷