HTML Forms ও Inputs

HTML Form

ব্যবহারকারীর কাছ থেকে ডেটা নিতে form ব্যবহার করা হয়।

<form action="/submit" method="POST">
    <label for="name">নাম:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">ইমেইল:</label>
    <input type="email" id="email" name="email" required>

    <button type="submit">সাবমিট</button>
</form>

Form Attributes

• action — কোথায় ডেটা পাঠানো হবে (URL)
• method — GET (URL-এ দেখাবে) বা POST (নিরাপদ)
• enctype — multipart/form-data (file upload এর জন্য)

Input Types

<input type="text">          <!-- সাধারণ টেক্সট -->
<input type="password">      <!-- পাসওয়ার্ড -->
<input type="email">         <!-- ইমেইল validation -->
<input type="number" min="1" max="100">
<input type="tel">           <!-- ফোন -->
<input type="url">           <!-- URL -->
<input type="date">          <!-- তারিখ picker -->
<input type="time">          <!-- সময় -->
<input type="color">         <!-- রং picker -->
<input type="range" min="0" max="100">
<input type="file" accept="image/*">
<input type="checkbox">      <!-- একাধিক বাছাই -->
<input type="radio" name="gender">  <!-- একটি বাছাই -->
<input type="hidden" value="42">     <!-- লুকানো -->
<input type="submit" value="পাঠান">

Textarea, Select, Option

<label for="msg">বার্তা:</label>
<textarea id="msg" name="message" rows="4" cols="50"></textarea>

<label for="city">শহর:</label>
<select id="city" name="city">
    <option value="">-- বাছাই করুন --</option>
    <option value="dhaka">ঢাকা</option>
    <option value="ctg" selected>চট্টগ্রাম</option>
    <option value="syl">সিলেট</option>
</select>

Form Validation Attributes

<input type="text" required>             <!-- আবশ্যক -->
<input type="text" minlength="3" maxlength="20">
<input type="number" min="1" max="100">
<input type="text" pattern="[A-Za-z]{3,}">  <!-- regex -->
<input type="text" placeholder="প্লেসহোল্ডার">
<input type="text" readonly>             <!-- পড়া যায় কিন্তু পরিবর্তন নয় -->
<input type="text" disabled>             <!-- ব্যবহারযোগ্য নয় -->
<input type="text" autofocus>            <!-- পেজ লোড হলে ফোকাস -->

fieldset ও legend

<fieldset>
    <legend>ব্যক্তিগত তথ্য</legend>
    <label>নাম: <input type="text" name="name"></label>
    <label>বয়স: <input type="number" name="age"></label>
</fieldset>