Biểu mẫu web là một phần thiết yếu của nhiều trang web và cho phép người điều hành trang web chấp nhận đầu vào từ người dùng. Ví dụ:một biểu mẫu web có thể được sử dụng để chấp nhận địa chỉ email của những người dùng muốn đăng ký nhận bản tin email của trang web.
Bằng cách sử dụng CSS, bạn có thể thêm các kiểu tùy chỉnh để tạo đầu vào cho biểu mẫu trên một trang web. Điều này cho phép bạn tạo các trường biểu mẫu đẹp mắt về mặt thẩm mỹ mà khách truy cập có thể sử dụng để gửi thông tin.
Hướng dẫn này sẽ thảo luận, với các ví dụ, khái niệm cơ bản về đầu vào HTML và cách sử dụng CSS để tạo kiểu cho các trường nhập trên một trang web. Khi kết thúc việc đọc hướng dẫn này, bạn sẽ trở thành một chuyên gia trong việc tạo kiểu các trường đầu vào bằng CSS.
Đầu vào HTML và CSS
Để xác định một biểu mẫu trên một trang web, chúng ta phải sử dụng HTML. Ngôn ngữ HTML cho phép chúng ta xác định cấu trúc của biểu mẫu - trường biểu mẫu nào sẽ xuất hiện và ở đâu - sau đó chúng ta có thể sử dụng CSS để áp dụng các kiểu tùy chỉnh cho các phần tử trong biểu mẫu của mình.
Trong HTML, thẻ được sử dụng để chấp nhận đầu vào của người dùng trong một biểu mẫu. Cú pháp cơ bản cho HTML là:
<input type="typeOfInput">
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Nếu bạn muốn tìm hiểu thêm về đầu vào HTML, hãy đọc hướng dẫn dành cho người mới bắt đầu của chúng tôi về đầu vào HTML. Đây là ví dụ cơ bản về trường biểu mẫu chấp nhận tên người dùng:
<label for="userName">Name</label> <input type="text" name="userName">
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Trường đầu vào của chúng tôi sử dụng các kiểu HTML mặc định cho thẻ , các kiểu này khá cơ bản. Chúng tôi cũng sử dụng thẻ
Đầu vào CSS
Hãy xem qua một vài ví dụ về cách tạo kiểu cho các phần tử biểu mẫu bằng CSS.
Đặt chiều rộng của đầu vào
Giả sử chúng ta đang thiết kế một trường biểu mẫu cho một câu lạc bộ tem địa phương thu thập tên của những người gửi biểu mẫu. Biểu mẫu này phải chiếm 50% chiều rộng của trang web. Chúng tôi có thể tạo biểu mẫu này bằng mã sau:
<html>
<label for="userName">Name</label>
<input type="text" name="userName">
<style>
input {
width: 50%;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong ví dụ này, chúng tôi đã tạo một trường biểu mẫu bằng 50% chiều rộng của trang web.
Trong mã HTML của mình, chúng tôi đã sử dụng thẻ
Nhập bằng đường viền
Câu lạc bộ tem Seattle đã yêu cầu chúng tôi thêm đường viền màu xanh lam nhạt xung quanh mỗi trường biểu mẫu vì màu xanh lam nhạt là màu câu lạc bộ của họ. Đường viền phải có chiều rộng là 3px. Chúng tôi có thể sử dụng thuộc tính đường viền để thêm đường viền xung quanh mỗi trường nhập biểu mẫu.
Đây là mã chúng tôi sẽ sử dụng để thêm đường viền xung quanh trường nhập của chúng tôi:
<html>
<label for="userName">Name</label>
<input type="text" name="userName">
<style>
input {
border: 3px solid lightblue;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong mã của chúng tôi, chúng tôi sử dụng kiểu đường viền để thêm đường viền xung quanh trường nhập của chúng tôi. Đường viền này dày 3px. Như bạn có thể thấy, trường biểu mẫu của chúng tôi có đường viền màu xanh lam nhạt.
Nếu bạn muốn tìm hiểu thêm về đường viền CSS, hãy đọc hướng dẫn cuối cùng của chúng tôi về đường viền CSS.
Nhập với Đường viền dưới
Ngoài ra, chúng ta cũng có thể thêm đường viền vào một cạnh cụ thể của biểu mẫu của chúng ta. Vì vậy, nếu chúng ta chỉ muốn một đường viền xuất hiện ở cuối trường, chúng ta có thể sử dụng thuộc tính border-bottom. Đây là mã chúng tôi sẽ sử dụng:
<html>
<label for="userName">Name</label>
<input type="text" name="userName">
<style>
input {
border-bottom: 3px solid lightblue;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong mã của chúng tôi, chúng tôi sử dụng thuộc tính border-bottom để thêm đường viền vào cuối trường đầu vào của chúng tôi.
Nhập bằng Padding
Câu lạc bộ tem Seattle đã yêu cầu chúng tôi tạo khoảng trống xuất hiện giữa nội dung của biểu mẫu — khoảng trống nơi người dùng nhập thông tin — và đường viền của biểu mẫu.
Câu lạc bộ muốn một phần đệm 10px xuất hiện giữa các đường viền trên cùng và dưới cùng và nội dung của biểu mẫu. Câu lạc bộ cũng muốn một khoảng đệm 15px xuất hiện giữa các đường viền bên trái và bên phải và nội dung của biểu mẫu.
Chúng tôi có thể hoàn thành nhiệm vụ này bằng cách sử dụng mã sau:
<html>
<label for="userName">Name</label>
<input type="text" name="userName">
<style>
input {
padding: 10px 15px;
box-sizing: border-box;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong ví dụ này, chúng tôi đã sử dụng kiểu đệm để áp dụng đệm giữa nội dung của trường biểu mẫu và đường viền của trường biểu mẫu. Giá trị đầu tiên (10px) đặt đệm cho các cạnh trên và dưới, và giá trị thứ hai (15px) đặt đệm cho các cạnh trái và phải.
Chúng tôi cũng đã đặt giá trị của thuộc tính box-sizing thành border-box . Điều này đảm bảo đệm được bao gồm trong tổng chiều rộng của các phần tử.
Nếu bạn muốn tìm hiểu thêm về thuộc tính CSS padding, hãy đọc hướng dẫn của chúng tôi về CSS padding.
Kiểu với Đầu vào Tập trung
Trong hầu hết các trình duyệt, khi bạn nhấp vào trường biểu mẫu, đường viền màu xanh lam sẽ được thêm vào trường. Tính năng này được sử dụng để làm nổi bật biểu mẫu bạn hiện đang tập trung vào.
Tuy nhiên, chúng tôi có thể tùy chỉnh điều này bằng cách sử dụng:bộ chọn CSS tiêu điểm. Câu lạc bộ Tem Seattle đã yêu cầu chúng tôi thêm đường viền màu xám nhạt vào cuối biểu mẫu khi người dùng nhấp vào biểu mẫu. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
<html>
<label for="userName">Name</label>
<input type="text" name="userName">
<style>
input:focus {
outline: none;
border-bottom: 3px solid lightgray;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Biểu mẫu web xuất hiện bằng cách sử dụng các kiểu HTML mặc định. Tuy nhiên, khi bạn nhấp vào biểu mẫu, một đường viền màu xám nhạt liền khối rộng 3px sẽ được áp dụng cho phần dưới cùng của biểu mẫu của chúng tôi.
Điều này là do chúng tôi đã sử dụng:bộ chọn tiêu điểm, cho phép chúng tôi áp dụng một kiểu khi người dùng nhấp vào trường nhập. Chúng tôi cũng sử dụng quy tắc outline:none, ngăn đường viền màu xanh lam mặc định xuất hiện khi người dùng nhấp vào trường nhập biểu mẫu.
Để tìm hiểu thêm về bộ chọn tiêu điểm, hãy đọc hướng dẫn của chúng tôi về CSS:công cụ chọn tiêu điểm.
Đầu vào với các góc được làm tròn
Câu lạc bộ Tem Seattle đã yêu cầu chúng tôi thêm một đường viền màu xám nhạt xung quanh mọi cạnh của trường nhập và làm tròn các góc của đầu vào. Chúng tôi có thể làm như vậy bằng cách sử dụng thuộc tính border-radius, cho phép bạn tạo rounded corners hiệu ứng trong CSS.
Đây là mã chúng tôi sẽ sử dụng để tạo trường biểu mẫu có các góc được làm tròn:
<html>
<label for="userName">Name</label>
<input type="text" name="userName">
<style>
input {
border: 3px solid lightgray;
border-radius: 10px;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong ví dụ này, chúng tôi xác định một đường viền màu xám nhạt đồng nhất rộng 3px xuất hiện xung quanh trường đầu vào của chúng tôi. Sau đó, chúng tôi sử dụng thuộc tính border-radius để làm tròn các góc của trường biểu mẫu của chúng tôi.
Nếu bạn muốn tìm hiểu thêm về cách áp dụng các góc tròn cho phần tử HTML trên trang web, hãy đọc hướng dẫn của chúng tôi về các góc được làm tròn trong CSS.
Nhập với màu nền
Câu lạc bộ Tem Seattle đã yêu cầu chúng tôi tạo một trường mẫu cuối cùng. Trường biểu mẫu này phải có đường viền màu xám nhạt liền khối rộng 3px và có nền màu xanh lam nhạt.
Chúng tôi có thể sử dụng mã sau để tạo trường biểu mẫu này:
<html>
<label for="userName">Name</label>
<input type="text" name="userName">
<style>
input {
border: 3px solid lightgray;
background-color: lightblue;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong mã của chúng tôi, chúng tôi đã sử dụng thuộc tính border để xác định một đường viền màu xám nhạt liền khối rộng 3px xung quanh các trường đầu vào của chúng tôi. Sau đó, chúng tôi sử dụng thuộc tính background-color để đặt màu nền của trường biểu mẫu thành màu xanh lam nhạt.
Áp dụng kiểu cho các trường nhập cụ thể
Trong hướng dẫn này, chúng ta đã thảo luận về cách áp dụng kiểu cho các trường . Tuy nhiên, có một cách mà bạn có thể áp dụng kiểu cho chỉ một kiểu đầu vào cụ thể.
Đó là nơi các bộ chọn thuộc tính xuất hiện. Thay vì sử dụng input trong các kiểu của bạn, nếu bạn chỉ muốn áp dụng kiểu cho một đầu vào cụ thể, bạn có thể thử sử dụng một trong các bộ chọn sau:
- input [type =text]:Áp dụng một kiểu cho tất cả các trường văn bản.
- input [type =email]:Áp dụng một kiểu cho tất cả các trường email.
- input [type =password]:Áp dụng một kiểu cho tất cả các trường mật khẩu.
- input [id =userName]:Áp dụng một kiểu cho phần tử có ID
userName.
Để tìm hiểu thêm về cách hoạt động của bộ chọn thuộc tính, hãy đọc hướng dẫn Career Karma của chúng tôi về bộ chọn thuộc tính CSS.
Kết luận
Bằng cách sử dụng CSS, bạn có thể tạo các biểu mẫu web được thiết kế riêng, vừa đẹp mắt về mặt thẩm mỹ và chức năng. Đầu tiên, bạn sử dụng HTML để thiết kế cấu trúc của một biểu mẫu, sau đó bạn có thể sử dụng các kiểu CSS để áp dụng các kiểu cho biểu mẫu.
Hướng dẫn này đã thảo luận, có tham chiếu đến các ví dụ, kiến thức cơ bản về đầu vào HTML và cách bạn có thể sử dụng CSS để tạo kiểu cho các trường đầu vào. Giờ đây, bạn đã được trang bị kiến thức cần thiết để tạo kiểu cho các trường nhập liệu của mình giống như một chuyên gia sử dụng CSS!