Hướng dẫn form trong css - form in css

Cafedev chia sẻ cho ace về hiểu CSS Forms trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.

• 1. Các trường Input với kiểu
• 2. padding với input
• 3. Input có viền
• 4. Inputs với màu
• 5. Focused Inputs – Tập trung vào input
• 6. Input với icon/image
• 7. Hiểu ứng với Search Input
• 8. Tạo kiểu Textareas
• 9. Kiểu cho Select Menus
• 10. Kiểu cho Input Buttons
• 11. Form hoàn thiện

1. Các trường Input với kiểu

Sử dụng thuộc tính width để xác định chiều rộng của trường đầu vào:

A full-width input field:


  First Name
  

Ví dụ trên áp dụng cho tất cả các phần tử < input >. Nếu bạn chỉ muốn tạo kiểu cho một kiểu nhập cụ thể, bạn có thể sử dụng các bộ chọn thuộc tính:

• 
  
  
  
  
  
  
  Padded text fields:
  
  
    First Name
    
    Last Name
    
  
  
  
  

  1 – sẽ chỉ chọn các trường văn bản

• 
  
  
  
  
  
  
  Padded text fields:
  
  
    First Name
    
    Last Name
    
  
  
  
  

  2 – sẽ chỉ chọn các trường mật khẩu

• 
  
  
  
  
  
  
  Padded text fields:
  
  
    First Name
    
    Last Name
    
  
  
  
  

  3– sẽ chỉ chọn các trường số
• Vân vân..

2.

Padded text fields:

First Name Last Name

4 với input

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 sau nhau, bạn cũng có thể muốn thêm một số

Padded text fields:


  First Name
  
  Last Name
  

5, để thêm nhiều khoảng trống bên ngoài chúng:

Padded text fields:


  First Name
  
  Last Name
  

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ử.

3. Input có viền

4. Inputs với màu

Text fields with borders:


  First Name
  
  Last Name
  

5. Focused Inputs – Tập trung vào input

4. Inputs với màu

5. Focused Inputs – Tập trung vào input

Colored text fields:


  First Name
  
  Last Name
  

5. Focused Inputs – Tập trung vào input

6. Input với icon/image

7. Hiểu ứng với Search Input

In this example, we use the :focus selector to add a black border color to the text field when it gets focused (clicked on):
Note that we have added the CSS transition property to animate the border color (takes 0.5 seconds to change the color on focus).


  First Name
  
  Last Name
  

6. Input với icon/image

7. Hiểu ứng với Search Input

Input with icon:


  

7. Hiểu ứng với Search Input

8. Tạo kiểu Textareas

Animated search input:


  

8. Tạo kiểu Textareas

9. Kiểu cho Select Menus

Tip: Use the resize property to prevent textareas from being resized (disable the "grabber" in the bottom right corner):


  Some text...

A styled select menu.


  
  VN
  Canada
  USA
  

10. Kiểu cho Input Buttons

Styled input buttons.

11. Form hoàn thiện

Padded text fields:


  First Name
  
  Last Name
  

0

Sử dụng thuộc tính width để xác định chiều rộng của trường đầu vào:

Ví dụ trên áp dụng cho tất cả các phần tử < input >. Nếu bạn chỉ muốn tạo kiểu cho một kiểu nhập cụ thể, bạn có thể sử dụng các bộ chọn thuộc tính:

• 
  
  
  
  
  
  
  Padded text fields:
  
  
    First Name
    
    Last Name
    
  
  
  
  

  1 – sẽ chỉ chọn các trường văn bản

• 
  
  
  
  
  
  
  Padded text fields:
  
  
    First Name
    
    Last Name
    
  
  
  
  

  2 – sẽ chỉ chọn các trường mật khẩu

• 
  
  
  
  
  
  
  Padded text fields:
  
  
    First Name
    
    Last Name
    
  
  
  
  

  3– sẽ chỉ chọn các trường số
• Vân vân..
• 2.

  
  
  
  
  
  
  
  Padded text fields:
  
  
    First Name
    
    Last Name
    
  
  
  
  

  4 với input
• 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 sau nhau, bạn cũng có thể muốn thêm một số

  
  
  
  
  
  
  
  Padded text fields:
  
  
    First Name
    
    Last Name
    
  
  
  
  

  5, để thêm nhiều khoảng trống bên ngoài chúng:
• 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ử.

Sử dụng thuộc tính

Padded text fields:


  First Name
  
  Last Name
  

6 để thay đổi kích thước và màu đường viền, đồng thời sử dụng thuộc tính

Padded text fields:


  First Name
  
  Last Name
  

7 để thêm các góc tròn:

Copy and chạy code