Bài tập

Form - Biểu mẫu trong CSS

avatar
Huy Erick
00:00 12/04/2024

Form CSS là gì? Nếu đã dùng CSS thẻ input thành thạo, giờ là lúc bạn nên học cách tạo biểu mẫu. Biểu mẫu web là thành phần phổ biến trong mọi thiết kế trang...

Form CSS là gì? Nếu đã dùng CSS thẻ input thành thạo, giờ là lúc bạn nên học cách tạo biểu mẫu.

Biểu mẫu web là thành phần phổ biến trong mọi thiết kế trang web. Nó xuất hiện dưới mọi hình thức, từ một trường biểu mẫu tìm kiếm tới biểu mẫu liên hệ và bộ lọc dữ liệu phức tạp. Biết cách dùng CSS để tạo kiểu và làm việc với những nhân tố này, bạn sẽ có các giải pháp tốt hơn cho những vấn đề thường gặp trong khi lập trình hàng ngày, và có thể cải thiện trải nghiệm người dùng cho web của bạn.

Hướng dẫn này bao gồm kiến thức cơ bản và ví dụ minh họa về biểu mẫu CSS hay form HTML đẹp cho web mà yêu cầu dữ liệu người dùng khác nhau. Về cơ bản, biểu mẫu sẽ dùng các trường văn bản, nút radio, ô tích, lựa chọn menu thả xuống, vùng văn bản và các nút gửi & reset. Bạn sẽ thiết kế cũng như tạo kiểu biểu mẫu cùng các thành phần của nó bằng cách thiết lập lại kiểu với thuộc tính appearance, thiết lập kiểu nhất quán riêng cho biểu mẫu, thêm vị trí cho câu trả lời và nhiều hơn thế nữa.

Xem thêm:

Định dạng các phần trong biểu mẫu

Trường nhập vào

Sử dụng thuộc tính width để xác định chiều rộng của trường nhập vào:

input {
  width: 100%;
}

Code này sẽ áp dụng với tất cả phần tử . Nếu bạn muốn định style cho một kiểu input cụ thể thì có thể sử dụng Attribute Selector:

  • input[type=text]: định kiểu cho tất cả các trường có thuộc tính type, giá trị text.
  • input[type=password]: định kiểu cho tất cả các trường có thuộc tính type, giá trị password.
  • input[type=number]: định kiểu cho tất cả các trường có thuộc tính type, giá trị number.

Thêm padding và margin cho trường nhập vào

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Sử dụng thuộc tính padding để không gian bên trong trường văn bản rộng rãi hơn. Bạn cũng nên sử dụng thêm margin để có không gian bên ngoài các trường, giúp các trường cách nhau một khoảng nhất định.

Form không có padding và margin:

Form có cả padding và margin:

Bổ sung thêm thuộc tính box-sizing:border-box để cho phép phần padding và đường viền của box nằm trọn trong kích thước phần tử đã được định sẵn.

Code đơn giản như này để bạn xem thêm, hãy thử thay đổi các giá trị để thấy sự khác biệt:

Định dạng Border

Sử dụng thuộc tính border để thay đổi kích cỡ và màu đường viền, kết hợp với thuộc tính border-radius để định dạng bo tròn góc cạnh.

input[type=text] {
  border: 2px solid purple;
  border-radius: 4px;
}

Ví dụ:

Nếu bạn chỉ muốn để khung chỉ có đường viền phía dưới thì sử dụng thuộc tính border-bottom:

input[type=text] {
  border: none;
  border-bottom: 2px solid purple;
}

Định dạng màu sắc

Sử dụng thuộc tính background-color để thêm màu nền cho trường nhập vào và thuộc tính color để thay đổi màu văn bản:

input[type=text] {
  background-color: #58257b;
  color: white;
}

Ví dụ:

Tạo ấn tượng cho trường nhập vào

Theo mặc định, một số trình duyệt sẽ thêm một đường viền màu xanh xung quanh trường nhập khi người dùng click vào để điền thông tin. Bạn có thể loại bỏ điều này bằng cách thêm thuộc tính outline:none.

Nên sử dụng selector :focus để tạo ấn tượng cho trường input, gây sự chú ý đến người dùng khi họ nhấp chuột vào ô:

Sử dụng background màu khác

Nhấn mạnh bằng đường viền border

input[type=text]:focus {
  background-color: lightblue;
}
input[type=text]:focus {
  border: 3px solid #555;
}

Ví dụ:

Thêm thuộc tính transition CSS để làm động màu đường viền (mất 0,5 giây để thay đổi màu khi click chuột vào).

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #e9d8f4;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}
input[type=text]:focus {
  border: 3px solid #58257b;
}

Trường nhập vào có icon/image

Bạn có thể thêm một icon hoặc hình ảnh vào trường input, thường thì đặt ở đầu để biểu bị mục đích của trường, sử dụng thuộc tính background-image và định vị nó bằng thuộc tính background-position. Lưu ý, đặt kích thước padding trái đủ rộng để có không gian cho biểu tượng. Ví dụ dễ thấy nhất là icon kính lúp trước mỗi thanh tìm kiếm trên các website:

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

Ví dụ:

Hiệu ứng cho ô tìm kiếm

Để tạo một điểm nhấn ở đây, hãy sử dụng thuộc tính transition CSS để tạo hiệu ứng, làm ô tìm kiếm kéo dài ra sau khi được người dùng click vào, nhìn khá đẹp mắt.

input[type=text] {
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

Ví dụ:

Định dạng hộp textarea

Sử dụng thuộc tính resize để cố định kích thước hộp textarea.

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Ví dụ:

Định dạng biểu mẫu dạng chọn

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Ví dụ:

Định dạng cho button

input[type=button] {
  background-color: #e9d8f4;
  border: none;
  color: #58257b;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
input[type=reset] {
  width: 50%;
  background-color: #db7093;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
input[type=submit] {
  width: 100%;
  background-color: #58257b;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Ví dụ:

Form kiểu mẫu

Thử thay đổi kích thước trình duyệt, khi màn hình có chiều rộng dưới 600px thì hai cột sẽ chồng lên nhau thay vì nằm cạnh nhau:

Bạn có thể copy từng ví dụ để tự mình thử định dạng từng phần một của biểu mẫu, hoặc lấy thẳng ví dụ kiểu mẫu cuối cùng để làm form cho website của chính mình.

Đầu vào không thể tùy biến

Tạo kiểu các thành phần biểu mẫu từ trước tới nay đã là một nhiệm vụ yêu cầu cao. Hiện người dùng có một số thành phần không có nhiều quyền kiểm soát khi tạo kiểu. Ví dụ:

  4. , ,

Những thành phần này được cung cấp bởi trình duyệt và được tạo kiểu dựa trên hệ điều hành. Cách duy nhất để tạo kiểu những thành phần này là dùng các điều khiển tùy biến, do những thành phần HTML tạo ra, chẳng hạn như div, span…

Các điều khiển tùy chỉnh cho những thành phần biểu mẫu được phát triển cho những thư viện JavaScript chính. Bạn có thể tìm thấy chúng trên GitHub.

Giờ bạn đã hiểu cách tạo kiểu những thành phần biểu mẫu đơn giản tới phức tạp và cách dùng các điều khiển tùy biến khi các trường input trên trình duyệt khó tạo kiểu.

Hi vọng bài viết giúp bạn nắm rõ về Form trong CSS. Chúc bạn học CSS thật vui!

Bài trước: Bộ chọn thuộc tính - Attribute Selector trong CSS

Bài tiếp: Bộ đếm - Counter trong CSS

BÀI LIÊN QUAN
1