Bootstrap - Form Controls: A Comprehensive Guide for Beginners

Xin chào các bạn future web developers! Tôi rất vui mừng được bắt đầu hành trình này cùng các bạn khi chúng ta khám phá thế giới tuyệt vời của Bootstrap form controls. Như một người đã dạy khoa học máy tính hơn một thập kỷ, tôi có thể đảm bảo với các bạn rằng việc thành thạo những khái niệm này sẽ là một bước ngoặt trong sự nghiệp phát triển web của bạn. Hãy cùng nhau bước vào!

Introduction to Bootstrap Form Controls

Trước khi chúng ta bắt đầu, hãy để tôi chia sẻ một câu chuyện nhanh. Tôi từng có một học sinh gặp khó khăn trong việc tạo form. Anh ấy đã花费几个小时试图 căn chỉnh các input và làm cho chúng trông đẹp mắt. Sau đó, anh ấy khám phá ra Bootstrap form controls, và đó như thể một ánh sáng sáng lên trên đầu anh ấy! Đó là sức mạnh của Bootstrap - nó biến cái phức tạp thành đơn giản.

Bootstrap form controls là các yếu tố được thiết kế trước cho phép người dùng nhập dữ liệu trên trang web của bạn. Chúng linh hoạt, dễ tùy chỉnh và vô cùng dễ sử dụng. Hãy cùng khám phá từng loại chi tiết.

Sizing

Một trong những điều đầu tiên bạn muốn học là cách thay đổi kích thước của các form controls. Bootstrap cung cấp ba kích thước: nhỏ, mặc định và lớn.

<input class="form-control form-control-lg" type="text" placeholder="Large input">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder="Small input">

Trong ví dụ này, chúng ta đã tạo ba trường input có kích thước khác nhau. Lớp form-control là lớp cơ bản cho tất cả các form controls trong Bootstrap. Thêm form-control-lg làm cho nó lớn, trong khi form-control-sm làm cho nó nhỏ.

Form Text

Đôi khi, bạn cần cung cấp thêm thông tin về một trường form. Đó là lúc form text trở nên hữu ích.

<label for="inputPassword5" class="form-label">Mật khẩu</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Mật khẩu của bạn phải từ 8-20 ký tự, chứa chữ cái và số, và không chứa khoảng trống, ký tự đặc biệt hoặc emoji.
</div>

Ở đây, chúng ta đã thêm một đoạn văn bản hữu ích bên dưới trường mật khẩu. Lớp form-text định dạng đoạn văn bản này một cách phù hợp, làm cho nó nổi bật như một thông tin bổ sung.

Disabled

Có thể có những tình huống bạn muốn vô hiệu hóa một số form controls. Bootstrap làm điều này rất dễ dàng:

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<textarea class="form-control" placeholder="Disabled textarea" aria-label="Disabled textarea example" disabled></textarea>

Bằng cách thêm thuộc tính disabled, chúng ta đã làm cho các form controls không thể chỉnh sửa. Chúng sẽ xuất hiện với màu xám, cho biết người dùng không thể sửa đổi chúng.

Readonly

Các input chỉ đọc tương tự như các input bị vô hiệu hóa, nhưng chúng vẫn có thể được聚焦 và chọn.

<input class="form-control" type="text" value="Input chỉ đọc ở đây..." aria-label="readonly input example" readonly>

Thuộc tính readonly làm cho input không thể chỉnh sửa nhưng vẫn có thể được聚焦.

Readonly Plain Text

Đôi khi, bạn muốn hiển thị thông tin như một phần của form mà không làm cho nó thành một trường có thể chỉnh sửa. Đó là lúc readonly plain text được sử dụng:

<div class="mb-3 row">
  <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
  </div>
</div>

Lớp form-control-plaintext loại bỏ định dạng mặc định của trường form, làm cho nó xuất hiện như văn bản thô.

File Input

Các input tệp cho phép người dùng tải lên tệp. Dưới đây là cách bạn có thể tạo một cái:

<div class="mb-3">
  <label for="formFile" class="form-label">Ví dụ input tệp mặc định</label>
  <input class="form-control" type="file" id="formFile">
</div>

Điều này tạo ra một trường input tệp được thiết kế nhất quán với các form controls khác của Bootstrap.

File Input Using Sizes

Tương tự như các form controls khác, các input tệp có thể được thay đổi kích thước:

<div class="mb-3">
  <label for="formFileSm" class="form-label">Ví dụ input tệp nhỏ</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
  <label for="formFileLg" class="form-label">Ví dụ input tệp lớn</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

Chúng ta sử dụng các lớp sizing alike form-control-sm và form-control-lg.

File Input Using Attribute

Bạn cũng có thể tùy chỉnh các input tệp bằng các thuộc tính:

<div class="mb-3">
  <label for="formFileMultiple" class="form-label">Ví dụ input tệp nhiều</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>

Thuộc tính multiple cho phép người dùng chọn nhiều tệp.

Color

Bootstrap thậm chí còn hỗ trợ input màu:

<label for="exampleColorInput" class="form-label">Chọn màu</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Chọn màu của bạn">

Điều này tạo ra một input chọn màu được thiết kế nhất quán với các form controls khác của Bootstrap.

Datalists

Datalists cung cấp một danh sách các tùy chọn đã xác định cho một trường input:

<label for="exampleDataList" class="form-label">Ví dụ datalist</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Gõ để tìm kiếm...">
<datalist id="datalistOptions">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>

Điều này tạo ra một trường input với các gợi ý tự động từ datalist.

Summary of Bootstrap Form Control Methods

Dưới đây là bảng tóm tắt các phương pháp chúng ta đã xem xét:

Phương pháp	Mô tả
Sizing	Điều chỉnh kích thước của form controls bằng các lớp như form-control-lg và form-control-sm
Form text	Thêm văn bản bổ sung vào form controls bằng lớp form-text
Disabled	Làm cho form controls không thể chỉnh sửa bằng thuộc tính disabled
Readonly	Làm cho form controls không thể chỉnh sửa nhưng vẫn có thể聚焦 bằng thuộc tính readonly
Readonly plain text	Hiển thị thông tin dưới dạng văn bản thô bằng lớp form-control-plaintext
File input	Tạo input tải lên tệp bằng type="file"
File input sizing	Điều chỉnh kích thước của input tệp bằng các lớp sizing
File input attributes	Tùy chỉnh input tệp bằng các thuộc tính như multiple
Color	Tạo input chọn màu bằng type="color"
Datalists	Cung cấp gợi ý tự động bằng phần tử <datalist>

Và thế là bạn đã học được những kiến thức cơ bản về Bootstrap form controls. Nhớ rằng, thực hành là cách tốt nhất để thành thạo. Hãy thử tích hợp các yếu tố này vào dự án của riêng bạn, và sớm bạn sẽ tạo ra các form đẹp mắt, linh hoạt một cách dễ dàng.

Chúc các bạn may mắn trong việc编码, các bạn future web developers!

Credits: Image by storyset