Thẻ biểu mẫu CSS là gì?

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ư

  input[type=text] {
      width: 80%;
      padding: 15px 22px;
      margin: 10px 5px;
      box-sizing: border-box;  
  }

  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;  
  }

  8
• 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

• input[type=text] {
      width: 80%;
      padding: 15px 22px;
      margin: 10px 5px;
      box-sizing: border-box;  
  }

  9 - chọn các trường biểu mẫu chấp nhận văn bản

• input[type=text] {
      border: 4px solid #8842d5;
      border-radius: 5px;  
  }

  0 - chọn các trường biểu mẫu chấp nhận mật khẩu

• input[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ố
• 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;  
}

0

Dù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;  
}

3

Dù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;  
}

4

Dù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ó focus

Ví 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;  
}

6

Dù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;  
}

3

Sao chép ví dụ

input[type=text] {
    width: 80%;
    padding: 15px 22px;
    margin: 10px 5px;
    box-sizing: border-box;  
}

8

Dù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;  
}

9

Dù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

  input[type=text] {
      border: 4px solid #8842d5;
      border-radius: 5px;  
  }

  5 để đảm bảo rằng hình ảnh chỉ xuất hiện một lần

Đầ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 CSS

Sao chép ví dụ

input[type=text] {
    width: 80%;
    padding: 15px 22px;
    margin: 10px 5px;
    box-sizing: border-box;  
}

2

Dù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

  input[type=text] {
      border: 4px solid #8842d5;
      border-radius: 5px;  
  }

  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ạt

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;  
}

5

Dù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

Biểu mẫu trong CSS là gì?

Thẻ biểu mẫu để làm gì?

thẻ biểu mẫu với ví dụ là gì?

Tôi có thể tạo kiểu cho thẻ biểu mẫu không?