Biểu mẫu CSS
Giao diện của biểu mẫu HTML có thể được cải thiện đáng kể bằng CSS:
Tạo kiểu cho trường nhập liệu
Sử dụng thuộc tính width để xác định độ rộng của trường đầu vào:
Ví dụ trên áp dụng cho tất cả phần tử <input>. Nếu bạn chỉ muốn tạo kiểu cho một loại đầu vào cụ thể, 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ố - vân vân..
Đầu vào có đệm
Sử dụng thuộc tính padding để thêm khoảng trắng bên trong trường văn bản.
Mẹo: Khi bạn có nhiều đầu vào nối tiếp nhau, bạn cũng có thể muốn thêm một margin để thêm khoảng trống bên ngoài chúng:
Ví dụ
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
} Hãy tự mình thử » Lưu ý rằng chúng tôi đã đặt thuộc tính box-sizing thành border-box . Điều này đảm bảo rằng phần đệm và đường viền cuối cùng được bao gồm trong tổng chiều rộng và chiều cao của các phần tử.
Đọc thêm về thuộc tính box-sizing trong chương Định cỡ hộp CSS của chúng tôi.
Đầu vào có viền
Sử dụng thuộc tính border để thay đổi kích thước và màu sắc của đường viền, đồng thời sử dụng thuộc tính border-radius để thêm các góc tròn:
Nếu bạn chỉ muốn có đường viền dưới cùng, hãy sử dụng thuộc tính border-bottom :
Đầu vào màu
Sử dụng thuộc tính background-color để thêm màu nền vào đầu vào và thuộc tính color để thay đổi màu văn bản:
Đầu vào tập trung
Theo mặc định, một số trình duyệt sẽ thêm đường viền màu xanh lam xung quanh đầu vào khi nó được lấy nét (nhấp vào). Bạn có thể loại bỏ hành vi này bằng cách thêm outline: none; đến đầu vào.
Sử dụng bộ chọn :focus để thực hiện điều gì đó với trường nhập khi nó được lấy tiêu điểm:
Nhập bằng biểu tượng/hình ảnh
Nếu bạn muốn có một biểu tượng bên trong đầu vào, hãy sử dụng thuộc background-image và định vị nó bằng thuộc tính background-position . Cũng lưu ý rằng chúng tôi thêm phần đệm lớn bên trái để dành khoảng trống cho biểu tượng:
Ví dụ
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
} Hãy tự mình thử »Đầu vào tìm kiếm hoạt hình
Trong ví dụ này, chúng tôi sử dụng thuộc tính transition CSS để tạo hiệu ứng cho độ rộng của đầu vào tìm kiếm khi nó được lấy tiêu điểm. Bạn sẽ tìm hiểu thêm về thuộc tính transition sau trong chương Chuyển tiếp CSS của chúng tôi.
Ví dụ
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
} Hãy tự mình thử »Tạo kiểu cho vùng văn bản
Mẹo: Sử dụng thuộc tính resize để ngăn không cho thay đổi kích thước vùng văn bản (tắt "trình lấy" ở góc dưới cùng bên phải):
Ví dụ
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
} Hãy tự mình thử »Kiểu dáng Chọn Menu
Ví dụ
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
} Hãy tự mình thử »Nút nhập kiểu dáng
Ví dụ
input[type=button], input[type=submit], input[type=reset]
{
background-color: #04AA6D;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */ Hãy tự mình thử »Để biết thêm thông tin về cách tạo kiểu cho các nút bằng CSS, hãy đọc Hướng dẫn về nút CSS của chúng tôi.
Biểu mẫu đáp ứng
Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng. Khi màn hình rộng dưới 600px, hãy đặt hai cột xếp chồng lên nhau thay vì cạnh nhau.
Nâng cao: Ví dụ sau sử dụng truy vấn phương tiện để tạo biểu mẫu phản hồi. Bạn sẽ tìm hiểu thêm về điều này trong chương sau.
