Kiếm thu nhập với kỹ năng HTML của bạn
Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn.
Chúng tôi đang xây dựng thị trường việc làm tự do lớn nhất dành cho những người như bạn.
TL; DR – Kiểu dáng biểu mẫu CSS đề cập đến việc thêm các thuộc tính vào biểu mẫu HTML để điều chỉnh vị trí của chúng, làm cho chúng tương tác và cải thiện giao diện tổng thể của chúng
Tên
Họ
Môn thể thao yêu thích
nội dung
Biểu mẫu CSS. Mẹo chính
- HTML cung cấp các yếu tố đầu vào của người dùng như
3,input[type=text] { width: 80%; padding: 15px 22px; margin: 10px 5px; box-sizing: border-box; }
4,input[type=text] { width: 80%; padding: 15px 22px; margin: 10px 5px; box-sizing: border-box; }
5,input[type=text] { width: 80%; padding: 15px 22px; margin: 10px 5px; box-sizing: border-box; }
6,input[type=text] { width: 80%; padding: 15px 22px; margin: 10px 5px; box-sizing: border-box; }
7 vàinput[type=text] { width: 80%; padding: 15px 22px; margin: 10px 5px; box-sizing: border-box; }
8input[type=text] { width: 80%; padding: 15px 22px; margin: 10px 5px; box-sizing: border-box; }
- Kiểu dáng biểu mẫu CSS tạo ra một thiết kế cho các yếu tố này
- Bạn có thể tạo hiệu ứng động và sửa đổi các biểu mẫu CSS, cũng như thêm nhiều thuộc tính kiểu dáng vào các trường nhập liệu
Các trường nhập liệu tạo kiểu
Chọn loại đầu vào
Bộ chọn thuộc tính CSS chọn các loại đầu vào CSS cụ thể để tạo kiểu
9 - chọn các trường biểu mẫu chấp nhận văn bảninput[type=text] { width: 80%; padding: 15px 22px; margin: 10px 5px; box-sizing: border-box; }
0 - chọn các trường biểu mẫu chấp nhận mật khẩuinput[type=text] { border: 4px solid #8842d5; border-radius: 5px; }
1 - chọn các trường biểu mẫu chấp nhận sốinput[type=text] { border: 4px solid #8842d5; border-radius: 5px; }
- vân vân
Thay đổi chiều rộng
Thuộc tính chiều rộng cho phép bạn thay đổi độ rộng của các trường đầu vào
The example will apply to all the elements and set their
input[type=text] {
border: 4px solid #8842d5;
border-radius: 5px;
}
2 to 100%:Nhập văn bản ở đây
Sao chép ví dụ
input[type=text] {
width: 80%;
padding: 15px 22px;
margin: 10px 5px;
box-sizing: border-box;
}
0Dùng thử trực tiếp Tìm hiểu trên Udacity
đầu vào đệm
Các thuộc tính padding và margin thêm khoảng trống bên trong và xung quanh trường nhập liệu để làm cho nó rộng rãi hơn
Mẹo. cả hai thuộc tính này đều chấp nhận các chỉ báo độ dài [ví dụ: px và em] và tỷ lệ phần trăm làm giá trị độ dài
Ví dụ dưới đây tạo khoảng trống cho trường nhập của biểu mẫu CSS
Văn bản của bạn
Sao chép ví dụ
input[type=text] {
width: 80%;
padding: 15px 22px;
margin: 10px 5px;
box-sizing: border-box;
}
Dùng thử trực tiếp Tìm hiểu trên Udacity
Ghi chú. chúng tôi đặt thuộc tính kích thước hộp thành giá trị của hộp viền để bao gồm phần đệm và đường viền trong tổng chiều cao và chiều rộng của các phần tử
Đầu vào có viền
Thuộc tính đường viền kiểm soát độ dày, bán kính đường viền [góc tròn], kiểu và màu của đường viền trong biểu mẫu CSS
Trong ví dụ này, chúng tôi thêm một đường viền dày màu tím vào trường
Văn bản của bạn
Sao chép ví dụ
input[type=text] {
border: 4px solid #8842d5;
border-radius: 5px;
}
Dùng thử trực tiếp Tìm hiểu trên Udacity
Nếu bạn chỉ cần thêm một, hai hoặc ba đường viền, bạn có thể sử dụng thuộc tính đường viền dọc. Ví dụ: thuộc tính border-bottom thêm đường viền ở dưới cùng
Văn bản của bạn
Sao chép ví dụ
input[type=text] {
width: 80%;
padding: 15px 22px;
margin: 10px 5px;
box-sizing: border-box;
}
3Dùng thử trực tiếp Tìm hiểu trên Udacity
Đầu vào màu
Thuộc tính màu nền thêm nền bên trong trường nhập liệu. Để thay đổi màu của văn bản bên trong trường, hãy sử dụng màu
Ví dụ dưới đây minh họa cách bạn có thể tô màu trường nhập liệu của mình
Văn bản của bạn
Sao chép ví dụ
input[type=text] {
width: 80%;
padding: 15px 22px;
margin: 10px 5px;
box-sizing: border-box;
}
4Dùng thử trực tiếp Tìm hiểu trên Udacity
Đầu vào tập trung
Các biểu mẫu CSS và các trường nhập của chúng trở nên tương tác hơn khi các thuộc tính kiểu dáng của chúng thay đổi khi người dùng nhấp vào chúng
Văn bản của bạn
Bạn nên thêm CSS pseudo class tên là
input[type=text] {
border: 4px solid #8842d5;
border-radius: 5px;
}
3 để tạo style riêng cho form khi nó có focusVí dụ này thay đổi màu nền của trường nhập sau khi chọn
Sao chép ví dụ
input[type=text] {
width: 80%;
padding: 15px 22px;
margin: 10px 5px;
box-sizing: border-box;
}
6Dùng thử trực tiếp Tìm hiểu trên Udacity
Ví dụ sau đây thêm đường viền sau khi kích hoạt
input[type=text] {
border: 4px solid #8842d5;
border-radius: 5px;
}
3Sao chép ví dụ
input[type=text] {
width: 80%;
padding: 15px 22px;
margin: 10px 5px;
box-sizing: border-box;
}
8Dùng thử trực tiếp Tìm hiểu trên Udacity
Ghi chú. bạn có thể xóa đường viền màu xanh xung quanh biểu mẫu bằng cách đặt thuộc tính phác thảo thành không
Thêm Biểu tượng hoặc Hình nền
Thuộc tính hình nền thêm hình ảnh vào trường đầu vào
Văn bản của bạn
Sao chép ví dụ
input[type=text] {
width: 80%;
padding: 15px 22px;
margin: 10px 5px;
box-sizing: border-box;
}
9Dùng thử trực tiếp Tìm hiểu trên Udacity
- Bằng cách thêm thuộc tính vị trí nền, bạn chỉ định vị trí cho hình ảnh. Đảm bảo rằng hình ảnh khớp chính xác với trường văn bản
- Bạn nên đặt lặp lại nền thành
5 để đảm bảo rằng hình ảnh chỉ xuất hiện một lầninput[type=text] { border: 4px solid #8842d5; border-radius: 5px; }
Đầu vào tìm kiếm hoạt hình
Thuộc tính chuyển tiếp tạo ảnh động cho chiều rộng của trường nhập liệu khi người dùng nhấp vào nó. Để làm được điều đó, chúng ta cần xác định thuộc tính
input[type=text] {
border: 4px solid #8842d5;
border-radius: 5px;
}
2 hai lần cho các biểu mẫu CSSSao chép ví dụ
input[type=text] {
width: 80%;
padding: 15px 22px;
margin: 10px 5px;
box-sizing: border-box;
}
2Dùng thử trực tiếp Tìm hiểu trên Udacity
- Đặt độ rộng mặc định của trường nhập liệu khi nó không hoạt động
- Sử dụng thuộc tính chuyển tiếp và bao gồm chiều rộng, thời gian để hoạt ảnh kết thúc và loại hoạt ảnh
- Xác định
2 của biểu mẫu CSS khi nó cóinput[type=text] { border: 4px solid #8842d5; border-radius: 5px; }
3. Nó đặt khoảng cách trường đầu vào sẽ mở rộng sau khi hoạt ảnh kích hoạtinput[type=text] { border: 4px solid #8842d5; border-radius: 5px; }
Khu vực văn bản
Các thuộc tính cho biểu mẫu CSS cũng có thể tạo kiểu cho các vùng văn bản bao gồm một số dòng dữ liệu. Bạn có thể đặt phần đệm, đường viền, chiều rộng, chiều cao và các quy tắc CSS khác để thiết kế các vùng văn bản gọn gàng
Ví dụ này tạo kiểu cho một vùng văn bản và ngăn người dùng thay đổi kích thước của nó
Sao chép ví dụ
input[type=text] {
width: 80%;
padding: 15px 22px;
margin: 10px 5px;
box-sizing: border-box;
}
5Dùng thử trực tiếp Tìm hiểu trên Udacity
Hãy nhớ rằng phần tử
input[type=text] {
width: 80%;
padding: 15px 22px;
margin: 10px 5px;
box-sizing: border-box;
}
5 có thể thay đổi kích thước theo mặc định. Người dùng có thể sử dụng công cụ gắp ở góc dưới cùng bên phải và thay đổi kích thước của hộp. Bạn có thể tắt tính năng này bằng cách sử dụng thuộc tính thay đổi kích thước được đặt thành input[type=text] {
width: 80%;
padding: 15px 22px;
margin: 10px 5px;
box-sizing: border-box;
}
30