Bài 36: Forms – Biểu mẫu trong CSS

Giao diện của một biểu mẫu HTML có thể được cải thiện hơn với CSS:

Tạo kiểu cho các trường đầu vào

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

input {
  width: 100%;
}

Ví dụ trên áp dụng cho tất cả các phần tử input. Nếu bạn muốn tạo kiểu cho kiểu đầu vào xác định, bạn có thể sử dụng bộ chọn thuộc tính:

• input[type=text] – Sẽ chỉ chọn các trường văn bản
• input[type=password] – Sẽ chỉ chọn các trường mật khẩu
• input[type=number] – Sẽ chỉ chọn các trường số
• …

Định dạng padding cho trường đầu vào

Sử dụng thuộc tính padding để thêm khoảng trống bên trong trường văn bản.
Chú ý: Khi bạn có nhiều trường đầu vào khác nhau, bạn cũng muốn thêm margin, để thêm không gian bên ngoài của chúng:

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

Định dạng đường viền cho trường đầu vào

Sử dụng thuộc tính border để thay đổi kích thước và màu sắc đường viền, và sử dụng thuộc tính border-radius để bo góc tròn:

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

Nếu bạn chỉ muốn thêm đường viền dưới cùng, sử dụng thuộc tính border-bottom:

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

Định dạng màu cho trường đầu vào

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

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Tạo ấn tượng cho trường đầu vào

Mặc định, một số trình duyệt sẽ thêm đường viền màu xanh xung quanh trường đầu vào khi người dùng click chuột để nhập thông tin. Bạn có thể xóa trạng thái này bởi thêm outline: none; cho trường đầu vào.
Sử dụng bộ chọn :focus để làm điều gì đó với trường đầu vào khi click chuột để nhập thông tin:
Ví dụ 1:

input[type=text]:focus {
  background-color: lightblue;
}

Ví dụ 2:

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

Thêm biểu tượng/ảnh vào bên trong trường đầu vào

Nếu bạn muốn có icon bên trong trường đầu vào, sử dụng thuộc tính background-image và thuộc tính vị trí background-position. cũng chú ý thằng chúng ta thêm vùng đệm bên trái lớn để dành không gian cho biểu tượng:

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

Thêm hiệu ứng tìm kiếm cho trường đầu vào

Trong ví dụ này, chúng ta sử dụng thuộc tính transition trong CSS để tạo hiệu ứng chiều rộng cho trường tìm kiếm khi người dùng click chuột vào trường nhập vàn bản.

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

input[type=text]:focus {
  width: 100%;
}

Tạo kiểu cho Textareas

Chú ý: Sử dụng thuộc tính resize để ngăn các vùng văn bản bị thay đổi kích thước ( tắt “grabber” ở góc dưới cùng bên phải):

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

Định dạng menu chọn

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

Định dạng button

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

/* Chú ý: sử dụng width: 100% cho tối đa chiều dài button */

Responsive Form

Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng. Khi màn hình có chiều rộng dưới 600px, đặt hai cột chồng lên nhau thay vì cạnh nhau.