Hướng dẫn form css

Form - biểu mẫu là một phần không thể thiếu trong bất kì loại website nào. Ở bài viết này, Quantrimang.com sẽ hướng dẫn bạn cách xây dựng phần giao diện hiển thị của một biểu mẫu cơ bản. Giao diện này có thể được làm khá đẹp mắt với CSS, dạng như này:

Đị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:

  Tên
  
  Họ và tên
  

Đị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ụ:

  Tên
  
  Họ và Tên đệm
  

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ụ:

  Họ
  
  Tên đệm
  

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; }
input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 1px solid #58257b; outline: none; } input[type=text]:focus { background-color: #e9d8f4; }	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;
}

  
    Vietnam
    Laos
    Cambodia
  

Định dạng cho button

Form kiểu mẫu

  

  

    

      Họ và tên
    

    

      
    

  

  

    

    Quốc gia
    

    

      
        Vietnam
        Laos
        Cambodia
      
    

  

  

    

      Góp ý
    

    

            style="height:200px">
    

  

  

      
  

  

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.

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