Lesson – 61 : เชตเซ‡เชฌ เชชเซ‡เชœเซ‡เชธเชฎเชพเช‚ เชตเชชเชฐเชพเชคเชพ เชตเชฟเชตเชฟเชง เช•เชจเซเชŸเซเชฐเซ‹เชฒเซเชธเชจเซ€ เช•เชฒเซเชชเชจเชพเช“

เชตเซ‡เชฌ เชชเซ‡เชœ เชฌเชจเชพเชตเชตเชพเชจเซเช‚ เชฎเซเช–เซเชฏ เช‰เชฆเซเชฆเซ‡เชถเซเชฏ เชฏเซ‚เชเชฐเชจเซ‡ เชธเชพเชฐเซ‹ เช…เชจเซเชญเชต เช†เชชเชตเชพเชจเซ‹ เช›เซ‡. เชตเซ‡เชฌ เชชเซ‡เชœ เชชเชฐ เชฏเซ‚เชเชฐ เชธเชพเชฅเซ‡ เชˆเชจเซเชŸเชฐเซ‡เช•เซเชŸ เช•เชฐเชตเชพ เชฎเชพเชŸเซ‡ เชตเชฟเชตเชฟเชง เชชเซเชฐเช•เชพเชฐเชจเชพ เช•เชจเซเชŸเซเชฐเซ‹เชฒเซเชธ (Controls) เชจเซ‹ เช‰เชชเชฏเซ‹เช— เชฅเชพเชฏ เช›เซ‡. เช† เช•เชจเซเชŸเซเชฐเซ‹เชฒเซเชธเชจเซ€ เชฎเชฆเชฆเชฅเซ€ เชฏเซ‚เชเชฐ เชฎเชพเชนเชฟเชคเซ€ เชฆเชพเช–เชฒ เช•เชฐเซ€ เชถเช•เซ‡ เช›เซ‡, เชชเชธเช‚เชฆเช—เซ€ เช•เชฐเซ€ เชถเช•เซ‡ เช›เซ‡, เชซเซ‹เชฐเซเชฎ เชธเชฌเชฎเชฟเชŸ เช•เชฐเซ€ เชถเช•เซ‡ เช›เซ‡ เช…เชจเซ‡ เชตเซ‡เชฌเชธเชพเช‡เชŸเชจเซ‡ เชตเชงเซ เช‰เชชเชฏเซ‹เช—เซ€ เชฌเชจเชพเชตเซ€ เชถเช•เซ‡ เช›เซ‡.

form controls


๐Ÿ”น 1. Text Box (เชŸเซ‡เช•เซเชธเซเชŸ เชฌเซ‹เช•เซเชธ)

เชŸเซ‡เช•เซเชธเซเชŸ เชฌเซ‹เช•เซเชธเชจเซ‹ เช‰เชชเชฏเซ‹เช— เชฏเซ‚เชเชฐ เชชเชพเชธเซ‡เชฅเซ€ เชŸเซ‡เช•เซเชธเซเชŸ เช‡เชจเซเชกเชชเซเชŸ เชฎเซ‡เชณเชตเชตเชพ เชฎเชพเชŸเซ‡ เชฅเชพเชฏ เช›เซ‡.
เช‰เชฆเชพเชนเชฐเชฃ: เชจเชพเชฎ, เชธเชฐเชจเชพเชฎเซเช‚, เช‡เชฎเซ‡เชฒ เชตเช—เซ‡เชฐเซ‡.

<input type="text" placeholder="Enter your name">

๐Ÿ”น 2. Password Box (เชชเชพเชธเชตเชฐเซเชก เชฌเซ‹เช•เซเชธ)

เชชเชพเชธเชตเชฐเซเชก เชฆเชพเช–เชฒ เช•เชฐเชตเชพ เชฎเชพเชŸเซ‡ เชตเชชเชฐเชพเชคเซ‹ เช•เชจเซเชŸเซเชฐเซ‹เชฒ เช›เซ‡. เช†เชฎเชพเช‚ เชฆเชพเช–เชฒ เชฅเชˆ เชฐเชนเซ‡เชฒเซ‹ เชŸเซ‡เช•เซเชธเซเชŸ เชฆเซƒเชถเซเชฏเชฎเชพเชจ เชจเชฅเซ€ เชฅเชคเซ‹.

<input type="password" placeholder="Enter Password">

๐Ÿ”น 3. Radio Button (เชฐเซ‡เชกเชฟเชฏเซ‹ เชฌเชŸเชจ)

เชเช• เชธเชฎเชฏเซ‡ เชฎเชพเชคเซเชฐ เชเช• เชœ เชตเชฟเช•เชฒเซเชช เชชเชธเช‚เชฆ เช•เชฐเชตเชพ เชฎเชพเชŸเซ‡ เชตเชชเชฐเชพเชฏ เช›เซ‡.

<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female

๐Ÿ”น 4. Check Box (เชšเซ‡เช•เชฌเซ‹เช•เซเชธ)

เชเช• เช•เชฐเชคเชพเช‚ เชตเชงเซ เชตเชฟเช•เชฒเซเชชเซ‹ เชชเชธเช‚เชฆ เช•เชฐเชตเชพ เชฎเชพเชŸเซ‡ เชตเชชเชฐเชพเชฏ เช›เซ‡.

<input type="checkbox"> I agree

๐Ÿ”น 5. Drop-Down List / Select Box (เชกเซเชฐเซ‹เชช-เชกเชพเช‰เชจ เชฒเชฟเชธเซเชŸ)

เชฏเซ‚เชเชฐเชจเซ‡ เชตเชฟเช•เชฒเซเชชเซ‹เชจเซ€ เชฏเชพเชฆเซ€เชฎเชพเช‚เชฅเซ€ เชเช• เชชเชธเช‚เชฆ เช•เชฐเชตเชพเชจเซ€ เชคเช• เช†เชชเซ‡ เช›เซ‡.

<select>
<option>India</option>
<option>USA</option>
<option>UK</option>
</select>

๐Ÿ”น 6. Button (เชฌเชŸเชจ)

เชซเซ‹เชฐเซเชฎ เชธเชฌเชฎเชฟเชŸ เช•เชฐเชตเชพ, เชฐเซ€เชธเซ‡เชŸ เช•เชฐเชตเชพ เช…เชฅเชตเชพ เช•เซ‹เชˆ เช•เซเชฐเชฟเชฏเชพ เช•เชฐเชตเชพ เชฎเชพเชŸเซ‡ เชตเชชเชฐเชพเชฏ เช›เซ‡.

<button>Submit</button>

๐Ÿ”น 7. Text Area (เชŸเซ‡เช•เซเชธเซเชŸ เชเชฐเชฟเชฏเชพ)

เชฒเชพเช‚เชฌเซ€ เชฎเชพเชนเชฟเชคเซ€ (เชœเซ‡เชฎ เช•เซ‡ Feedback, Address) เชฆเชพเช–เชฒ เช•เชฐเชตเชพ เชฎเชพเชŸเซ‡.

<textarea rows="4" cols="30"></textarea>

๐Ÿ”น 8. File Upload Control (เชซเชพเช‡เชฒ เช…เชชเชฒเซ‹เชก เช•เชจเซเชŸเซเชฐเซ‹เชฒ)

เชฏเซ‚เชเชฐเชจเซ‡ เชซเชพเช‡เชฒ เช…เชชเชฒเซ‹เชก เช•เชฐเชตเชพเชจเซ€ เชฎเช‚เชœเซ‚เชฐเซ€ เช†เชชเซ‡ เช›เซ‡.

<input type="file">

๐Ÿ”น 9. Image Control (เช‡เชฎเซ‡เชœ เช•เชจเซเชŸเซเชฐเซ‹เชฒ)

เชตเซ‡เชฌ เชชเซ‡เชœเชฎเชพเช‚ เชšเชฟเชคเซเชฐ เชฎเซ‚เช•เชตเชพ เชฎเชพเชŸเซ‡ เชตเชชเชฐเชพเชฏ เช›เซ‡.

<img src="image.jpg" alt="Sample Image">

๐Ÿ”น 10. Date, Time and Number Controls

เช† HTML5 เชฆเซเชตเชพเชฐเชพ เช‰เชฎเซ‡เชฐเชพเชฏเซ‡เชฒเชพ เช†เชงเซเชจเชฟเช• เช•เชจเซเชŸเซเชฐเซ‹เชฒเซเชธ เช›เซ‡.

  • Date Picker

<input type="date">
  • Time Picker

<input type="time">
  • Number Box

<input type="number" min="1" max="10">

เชตเซ‡เชฌ เชกเซ‡เชตเชฒเชชเชฎเซ‡เชจเซเชŸเชฎเชพเช‚ เช•เชจเซเชŸเซเชฐเซ‹เชฒเซเชธเชจเซ‹ เช‰เชชเชฏเซ‹เช— เช–เซ‚เชฌ เชœ เชฎเชนเชคเซเชตเชจเซ‹ เช›เซ‡ เช•เชพเชฐเชฃ เช•เซ‡ เชคเซ‡เช“ เชตเซ‡เชฌ เชชเซ‡เชœเชจเซ‡ เช‡เชจเซเชŸเชฐเซ‡เช•เซเชŸเชฟเชต เช…เชจเซ‡ เชฏเซเชเชฐ-เชซเซเชฐเซ‡เชจเซเชกเชฒเซ€ เชฌเชจเชพเชตเซ‡ เช›เซ‡. เชฆเชฐเซ‡เช• เช•เชจเซเชŸเซเชฐเซ‹เชฒ เชเช• เชตเชฟเชถเชฟเชทเซเชŸ เช•เชพเชฐเซเชฏ เชฎเชพเชŸเซ‡ เชฌเชจเซ‡เชฒเซ‹ เชนเซ‹เชฏ เช›เซ‡ เช…เชจเซ‡ เชฏเซ‹เช—เซเชฏ เช•เชจเซเชŸเซเชฐเซ‹เชฒ เชชเชธเช‚เชฆ เช•เชฐเชตเชพเชฅเซ€ เชตเซ‡เชฌเชธเชพเช‡เชŸเชจเซเช‚ เชฏเซเชเชฐ เชเช•เซเชธเซเชชเซ€เชฐเชฟเช…เชจเซเชธ เชชเชฃ เชตเชงเชพเชฐเซ‡ เชธเชพเชฐเซ‹ เชฌเชจเซ‡ เช›เซ‡.