Forms
Bootstrap Forms
Bootstrap ផ្តល់នូវ form styles ស្អាតនិង responsive ជាមួយនឹង classes ជាច្រើនសម្រាប់ inputs, labels, validation និង layouts។
📝 Form Structure Basics
| Component | Class | Purpose | Required? |
|---|---|---|---|
| Form Group | .mb-3 |
Wraps label + input with bottom margin | ⭐ Recommended |
| Label | .form-label |
Styled label for inputs | ⭐ Recommended |
| Text Input | .form-control |
Styled text input, textarea, select | ✅ Always |
| Checkbox/Radio | .form-check-input |
Styled checkbox or radio button | ✅ For checkboxes/radios |
| Checkbox/Radio Label | .form-check-label |
Label for checkbox/radio | ⭐ Recommended |
| Checkbox/Radio Wrapper | .form-check |
Wraps checkbox/radio + label | ✅ For checkboxes/radios |
🔤 Input Types & Classes
| Input Type | HTML Type | Class | Example |
|---|---|---|---|
| Text | type="text" |
.form-control |
Name, username, etc. |
type="email" |
.form-control |
Email address (validates format) | |
| Password | type="password" |
.form-control |
Hidden text (••••) |
| Number | type="number" |
.form-control |
Age, quantity (with spinners) |
| Textarea | <textarea> |
.form-control |
Multi-line text (messages, comments) |
| Select | <select> |
.form-select |
Dropdown choices |
| File | type="file" |
.form-control |
File upload |
| Range | type="range" |
.form-range |
Slider (volume, price range) |
| Checkbox | type="checkbox" |
.form-check-input |
Multiple selections |
| Radio | type="radio" |
.form-check-input |
Single selection from group |
📏 Form Sizing
| Size | Class | Height | Use Case |
|---|---|---|---|
| Small | .form-control-sm / .form-select-sm |
~31px | Compact forms, tables |
| Default | .form-control / .form-select |
~38px | Standard forms (most common) |
| Large | .form-control-lg / .form-select-lg |
~48px | Prominent forms, touch interfaces |
Form Controls & Select
Bootstrap ផ្តល់ styles សម្រាប់ select dropdowns, checkboxes, radios, range sliders និង file inputs។
📂 Select Dropdown Options
| Feature | Attribute/Class | Effect |
|---|---|---|
| Basic Select | <select class="form-select"> |
Standard dropdown menu |
| Multiple Select | multiple attribute |
Allow selecting multiple options (Ctrl+Click) |
| Size Attribute | size="3" |
Show 3 options at once (scrollable list) |
| Disabled | disabled attribute |
Grayed out, not interactive |
☑️ Checkbox & Radio Features
| Feature | Implementation | Notes |
|---|---|---|
| Basic Checkbox | <input type="checkbox" class="form-check-input"> |
Can check multiple options |
| Basic Radio | <input type="radio" name="group" class="form-check-input"> |
Same name groups radios (only one selectable) |
| Inline Checkboxes | .form-check-inline |
Display checkboxes/radios horizontally |
| Switches | .form-switch on wrapper |
Toggle switch style (iOS-like) |
| Checked by Default | checked attribute |
Pre-selected on page load |
📊 Range & File Inputs
| Input Type | Class | Attributes | Purpose |
|---|---|---|---|
| Range Slider | .form-range |
min, max, step |
Select value within range (e.g., volume, price) |
| File Upload | .form-control |
accept=".jpg,.png", multiple |
Upload files (images, documents, etc.) |
Form Validation
Bootstrap ផ្តល់ validation styles សម្រាប់បង្ហាញ valid/invalid states និង feedback messages។
✅ Validation States
| State | Class on Input | Feedback Class | Visual |
|---|---|---|---|
| Valid (Success) | .is-valid |
.valid-feedback |
Green border, checkmark icon |
| Invalid (Error) | .is-invalid |
.invalid-feedback |
Red border, X icon |
| Valid Tooltip | .is-valid |
.valid-tooltip |
Green tooltip (requires positioning) |
| Invalid Tooltip | .is-invalid |
.invalid-tooltip |
Red tooltip (requires positioning) |
🔍 Validation Methods
| Method | Implementation | When to Use |
|---|---|---|
| HTML5 Validation | Use required, pattern, min, max attributes |
Built-in browser validation (simple forms) |
| Custom Validation | Add .was-validated to <form> after submit |
Bootstrap validation styles (recommended) |
| Manual Classes | Add .is-valid or .is-invalid via JavaScript |
Real-time validation as user types |
| Server-side Validation | Add classes based on server response | After form submission to backend |
🛡️ Validation Best Practices
| ✅ DO | ❌ DON'T |
|---|---|
| Validate on submit (not while typing) | Show errors immediately (frustrating) |
| Provide clear, helpful error messages | Use generic "Invalid input" messages |
| Mark required fields with asterisk (*) | Hide which fields are required |
| Use both client and server validation | Rely only on client-side validation |
| Disable submit button while processing | Allow multiple form submissions |
| Show success state after valid input | Only show error states |