CSS - Forms: A Comprehensive Guide for Beginners

Xin chào các bạn đang học thiết kế web! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của các biểu mẫu CSS. Là người thầy thân thiện trong khu phố, tôi rất háo hức dẫn dắt các bạn trong hành trình này. tin tôi đi, sau khi hoàn thành hướng dẫn này, bạn sẽ có khả năng thiết kế biểu mẫu như một chuyên gia!

CSS Form - Font and Text Styling

Hãy bắt đầu từ những điều cơ bản. Tương tự như chúng ta mặc đẹp cho các dịp khác nhau, chúng ta cũng có thể trang trí các phần tử biểu mẫu với các phông chữ và kiểu văn bản khác nhau. Dưới đây là cách làm:

input[type="text"] {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}

Mã này告诉浏览器 sử dụng phông Arial cho các trường văn bản, đặt kích thước phông là 16 pixel và màu văn bản là xám đậm (#333). Đó giống như mặc cho biểu mẫu của bạn một bộ trang phục dễ đọc!

CSS Form - Styling Element Borders and Backgrounds

Tiếp theo, hãy thêm một chút phong cách cho các phần tử biểu mẫu với viền và nền:

input[type="text"] {
border: 2px solid #4CAF50;
border-radius: 4px;
background-color: #f8f8f8;
}

Mã này cho các trường văn bản có viền xanh, góc bo tròn và nền xám nhạt. Đó giống như đặt một khung đẹp xung quanh các phần tử biểu mẫu của bạn!

CSS Form - Using Padding and Margins

Bây giờ, hãy tạo ra một chút không gian cho các phần tử biểu mẫu của chúng ta:

input[type="text"] {
padding: 10px;
margin-bottom: 15px;
}

Điều này thêm không gian bên trong (padding) và bên dưới (margin) trường nhập liệu. Đó giống như tạo ra một không gian cá nhân cho các phần tử biểu mẫu của bạn!

CSS Form - Focus Styles

Khi người dùng nhấp vào một trường nhập liệu, chúng ta muốn làm nổi bật nó. Dưới đây là cách làm:

input[type="text"]:focus {
outline: none;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

Mã này loại bỏ đường viền mặc định và thêm một ánh sáng xanh dịu khi trường nhập liệu được聚焦. Đó giống như nói "Nhìn tôi này!" với người dùng.

CSS Form - Button Styling

Các nút là những siêu anh hùng của biểu mẫu của bạn. Hãy làm cho chúng trông giống như vậy:

button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}

Mã này tạo ra một nút xanh và tối hơn khi di chuột qua. Đó giống như mặc cho nút của bạn một bộ trang phục siêu anh hùng!

CSS Form - Checkbox and Radio Button Styling

Thiết kế các hộp kiểm và nút radio có thể khó khăn. Dưới đây là một cách đơn giản để bắt đầu:

input[type="checkbox"], input[type="radio"] {
width: 20px;
height: 20px;
}

Mã này làm cho các hộp kiểm và nút radio lớn hơn và dễ nhấp hơn. Đó giống như cho chúng một sự tăng trưởng!

CSS Form - Form Layout

Bây giờ, hãy tổ chức các phần tử biểu mẫu của chúng ta:

form {
width: 300px;
margin: 0 auto;
}

label {
display: block;
margin-bottom: 5px;
}

Mã này đặt biểu mẫu của chúng ta ở giữa và đặt mỗi nhãn trên một dòng. Đó giống như dọn dẹp phòng của bạn - mọi thứ đều có vị trí của riêng nó!

Example

Hãy kết hợp tất cả lại:

<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<button type="submit">Submit</button>
</form>

form {
width: 300px;
margin: 0 auto;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="text"], input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 2px solid #4CAF50;
border-radius: 4px;
background-color: #f8f8f8;
}

button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
width: 100%;
}

button:hover {
background-color: #45a049;
}

Điều này tạo ra một biểu mẫu đơn giản và được thiết kế. Đó giống như ráp một puzzle - tất cả các mảnh đều khớp hoàn hảo!

CSS Form - Box-sizing

Đây là một mẹo chuyên nghiệp: sử dụng box-sizing: border-box để làm cho cuộc sống của bạn dễ dàng hơn:

* {
box-sizing: border-box;
}

Điều này đảm bảo rằng padding và border được bao gồm trong tổng chiều rộng và chiều cao của phần tử. Đó giống như phép thuật - không có sự tràn không mong muốn!

CSS Form - Fieldset and Legend

Fieldsets và legends có thể giúp tổ chức biểu mẫu của bạn:

fieldset {
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 20px;
}

legend {
font-weight: bold;
padding: 0 10px;
}

Mã này tạo ra một viền đẹp xung quanh các phần tử biểu mẫu liên quan với một tiêu đề. Đó giống như tạo ra các chương trong câu chuyện của biểu mẫu của bạn!

CSS Form - Full Width Input

Đôi khi, bạn muốn các trường nhập liệu chiếm toàn bộ không gian khả dụng:

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

Điều này làm cho trường nhập liệu kéo dài để lấp đầy container của nó. Đó giống như cho trường nhập liệu một sự kéo dài!

CSS Form - Colored Input

Hãy thêm một chút màu sắc cho các trường nhập liệu:

input[type="text"] {
background-color: #e6f3ff;
color: #00366d;
}

Điều này cho trường nhập liệu một nền xanh nhạt với văn bản xanh đậm. Đó giống như sơn biểu mẫu của bạn với một bảng màu cool!

CSS Form - Images In The Inputs

Bạn thậm chí có thể thêm hình ảnh vào các trường nhập liệu:

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

Điều này thêm một biểu tượng tìm kiếm bên trái trường nhập liệu. Đó giống như cho trường nhập liệu một аватар nhỏ!

CSS Form - Input With Animation

Hãy thêm một chút chuyển động vào các trường nhập liệu:

input[type="text"] {
transition: all 0.3s ease-in-out;
}

input[type="text"]:focus {
transform: scale(1.05);
}

Điều này làm cho trường nhập liệu hơi lớn hơn khi được聚焦. Đó giống như cho trường nhập liệu một điệu nhảy nhỏ!

CSS Form - Styling Textareas

Đừng quên về các trường văn bản dài:

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

Điều này thiết kế trường văn bản dài và cho phép thu phóng dọc. Đó giống như cho người dùng một block note có thể kéo dài!

CSS Form - Styling Dropdown Menus

Các menu thả xuống cũng cần tình yêu:

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

Mã này tạo ra một menu thả xuống sạch sẽ và đẹp. Đó giống như cho người dùng một máy bán hàng tự động cho các tùy chọn!

Responsive Form Layout

Cuối cùng, hãy làm cho biểu mẫu của chúng ta responsive:

@media screen and (max-width: 600px) {
form {
width: 100%;
}
}

Điều này làm cho biểu mẫu của chúng ta có toàn bộ chiều rộng trên màn hình nhỏ hơn. Đó giống như cho biểu mẫu của bạn một khả năng变身!

Và thế là xong! Bạn đã học cách thiết kế biểu mẫu với CSS. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy đừng ngại thử nghiệm với các phong cách này. Chúc mừng编码!

Credits: Image by storyset