Đầu vào thẻ CSS

Biểu mẫu - biểu mẫu là một phần không thể thiếu trong bất kỳ trang web bất kỳ loại nào. At this post, Quantrimang. com sẽ hướng dẫn bạn cách xây dựng phần giao diện hiển thị của một biểu mẫu cơ bản. Giao diện này có thể khá đẹp mắt với CSS, định dạng như thế này

Định dạng các phần trong biểu mẫu

Trường nhập vào

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

input {
  width: 100%;
}

Code này sẽ áp dụng với tất cả phần tử . Nếu bạn muốn định style cho một kiểu input cụ thể thì có thể sử dụng Attribute Selector:

• đầu vào [loại = văn bản]. định kiểu cho tất cả các trường có thuộc tính loại, giá trị văn bản
• đầu vào [loại = mật khẩu]. type for all the fields have property type, value password
• đầu vào [loại = số]. type for all of the fields are property type, value number

Thêm phần đệm và lề cho trường nhập

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Sử dụng thuộc tính đệm để không gian bên trong trường văn bản rộng rãi hơn. Bạn cũng nên sử dụng thêm lề để không có khoảng thời gian bên ngoài các trường, giúp các trường cách nhau một khoảng nhất định

Form no padding and margin

Form has both padding and margin

Bổ sung thêm thuộc tính box-sizing. hộp viền để cho phép phần đệm và đường viền của hộp nằm trong kích thước phần tử đã được định sẵn

Mã đơn giản như thế này để bạn xem thêm, hãy thử thay đổi các giá trị để thấy sự khác biệt

 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}




  Tên
  
  Họ và tên
  

Border Format

Sử dụng thuộc tính border-radius để thay đổi kích thước và đường viền màu, kết hợp với thuộc tính border-radius để định dạng bo tròn góc cạnh

input[type=text] {
  border: 2px solid purple;
  border-radius: 4px;
}

Ví dụ

 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid #58257b;
  border-radius: 4px;
}





  Tên
  
  Họ và Tên đệm
  

Nếu bạn chỉ muốn các khung chỉ có đường viền bên dưới, hãy sử dụng thuộc tính border-bottom

input[type=text] {
  border: none;
  border-bottom: 2px solid purple;
}

color format

Sử dụng thuộc tính màu nền để thêm màu nền cho trường nhập và thuộc tính màu để thay đổi màu văn bản

input[type=text] {
  background-color: #58257b;
  color: white
}

Ví dụ

 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #58257b;
  color: white
}





  Họ
  
  Tên đệm
  

Create the object for entry field

Theo mặc định, một số trình duyệt sẽ thêm một đường viền màu xanh xung quanh trường khi người dùng nhấp vào để điền thông tin. Bạn có thể loại bỏ điều này bằng cách thêm thuộc tính phác thảo. không ai

Nên sử dụng selector. tiêu điểm để tạo ấn tượng cho đầu vào trường, gây chú ý cho người dùng khi họ nhấp chuột vào ô

input[type=text]:focus {
  background-color: lightblue;
}

input[type=text]:focus {
  border: 3px solid #555;
}

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Thêm CSS thuộc tính chuyển tiếp để làm màu đường viền động [mất 0,5 giây để đổi màu khi click chuột vào]

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Trường nhập vào có biểu tượng/hình ảnh

Bạn có thể thêm một biểu tượng hoặc hình ảnh vào trường đầu vào, thông thường thì hãy đặt ở đầu để biểu thị mục đích của trường, sử dụng thuộc tính nền-hình ảnh và định vị của nó bằng thuộc tính nền-vị trí. Lưu ý, đặt kích thước đệm bên trái đủ rộng để không có khoảng trống cho biểu tượng. Ví dụ dễ thấy nhất là biểu tượng kính lúp trước mỗi thanh tìm kiếm trên các trang web

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Ví dụ

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Hiệu ứng cho ô tìm kiếm

Để tạo một điểm nhấn ở đây, hãy sử dụng thuộc tính chuyển đổi CSS để tạo hiệu ứng, làm ô tìm kiếm kéo dài ra sau khi được người dùng nhấp vào, nhìn khá đẹp mắt

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Ví dụ

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Định dạng hộp textarea

Sử dụng thuộc tính thay đổi kích thước để cố định kích thước hộp văn bản

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Ví dụ

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Định dạng biểu mẫu chọn

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Định dạng cho nút

 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}




  Tên
  
  Họ và tên
  

Form type

 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}




  Tên
  
  Họ và tên
  

Cố gắng thay đổi kích thước trình duyệt, khi màn hình có chiều rộng dưới 600px, hai cột sẽ chồng lên nhau thay vì cạnh nhau

Bạn có thể sao chép từng ví dụ để mình thử định dạng từng phần một của biểu mẫu, hoặc lấy thẳng ví dụ về kiểu mẫu cuối cùng để tạo biểu mẫu cho trang web của chính mình.

Chúc bạn học CSS thật vui

Bài trước. Thuộc tính bộ chọn - Attribute Selector trong CSS

Bài tiếp theo. Bộ đếm - Counter trong CSS

Thứ Bảy, 20/04/2019 09. 48

5 ★ 4 👨 41. 625

#CSS

0 Bình luận

Sắp xếp theo

Delete Login to Send

Bạn nên đọc

• Cách cài đặt font chữ Uni file viết trên máy tính
• Chiếc Android bé nhất thế giới tại VN
• Thị trường bảo mật di động vẫn đang "dò không"
• AR Cut & Paste -Ứng dụng có khả năng ‘cắt’ vật thể ngoài đời thực hiện ‘dán’ vào tệp Photoshop đã cho tải về
• truy cập Gmail nhanh khi mạng Internet "rùa bò"
• Xoắn não với 15 bài kiểm tra CAPTCHA để phân biệt người và robot của Google

CSS và CSS3

• TOP code CSS xếp hạng sao [Star Rating] đẹp cho website

CSS và CSS3

• CSS cơ bản
  • CSS giới thiệu
  • Cú pháp và Selector CSS
  • Vị trí đặt CSS
  • CSS - Màu
  • CSS - Nền
  • CSS - Đường viền
  • CSS - Ký quỹ
  • CSS - Đệm
  • CSS - Chiều rộng và Chiều cao
  • CSS - Mô hình hộp
  • CSS - Phác thảo
  • CSS - Văn bản
  • CSS - Phông chữ
  • CSS - Biểu tượng
  • CSS - Liên kết
  • CSS - Tạo danh sách
  • CSS - Bảng
  • CSS - Hiển thị
  • CSS - Chiều rộng tối đa
  • CSS - Vị trí
  • CSS - tràn
  • CSS - Float và Clear
  • CSS - Khối nội tuyến
  • CSS - Căn chỉnh
  • CSS - Trình kết hợp
  • CSS - Lớp giả
  • CSS - Phần tử giả
  • CSS - Độ mờ
  • CSS - Thanh điều hướng
  • CSS - Trình đơn thả xuống
  • CSS - Thư viện hình ảnh
  • CSS - Sprite hình ảnh
  • CSS - Bộ chọn thuộc tính
  • CSS - Biểu mẫu
  • CSS - Bộ đếm
  • CSS - Bố cục
  • CSS - Đơn vị
  • CSS - Tính đặc hiệu
• nâng cao CSS
  • CSS - Góc bo tròn
  • CSS - Hình ảnh đường viền
  • CSS - Nhiều nền
  • CSS - Màu
  • CSS - Chuyển màu
  • CSS - Hiệu ứng đổ bóng
  • CSS - Hiệu ứng văn bản
  • CSS - Phông chữ Web
  • CSS - Chuyển đổi 2D
  • CSS - Chuyển đổi 3D
  • CSS - Chuyển tiếp
  • CSS - Hoạt ảnh
  • CSS - Chú giải công cụ
  • CSS - Flexbox
  • CSS - Nút
  • CSS- @media
  • Tạo hiệu ứng hover node bằng CSS

• công nghệ
  • Ứng dụng
  • hệ thống
  • Game - Trò chơi
  • điện thoại Iphone
  • Android
  • Linux
  • Nền web
  • Đồng hồ thông minh
  • Chụp ảnh - Quay phim
  • hệ điều hành Mac
  • Phần cứng
  • SEO thủ thuật
  • base format
  • quả mâm xôi
  • Dịch vụ ngân hàng
  • Lập trình
  • Online service
  • Dịch vụ nhà mạng
  • Nhà thông minh
• Tải xuống
  • Ứng dụng văn phòng
  • Tải game
  • Hệ thống tiện ích
  • Ảnh, đồ họa
  • Internet
  • Bảo mật, Antivirus
  • Họp, học trực tuyến
  • Video, phim, nhạc
  • Email
  • Lưu trữ đám mây
  • Giao tiếp, liên lạc, hẹn hò
  • Support for learning
  • Máy ảo
• Tiện ích
• Khoa học
  • Khoa học vui
  • Khám phá khoa học
  • Bí ẩn - Chuyện lạ
  • Chăm sóc sức khỏe
  • Khoa học Vũ trụ
  • Khám phá thiên nhiên
• Điện máy
  • tủ lạnh
  • tivi
  • Điều hòa
  • Máy giặt
• Cuộc sống
  • Kỹ năng
  • Món ngon mỗi ngày
  • làm đẹp
  • nuôi dạy con
  • Chăm sóc nhà cửa
  • Kinh nghiệm Du lịch
  • Halloween
  • mẹo vặt
  • giáng sinh - noel
  • tết 2023
  • quà tặng
  • Giải trí
  • Là gì?
  • nhà đẹp
  • HÀNG ĐẦU
  • phong thủy
• Băng hình
  • công nghệ
  • Phòng thí nghiệm của Cisco
  • Phòng thí nghiệm của Microsoft
  • Video Khoa học
• Ô tô, Xe máy
  • Giấy phép lái xe
• Làng công nghệ
  • Tấn công mạng
  • Công nghệ
  • new technology
  • Trí tuệ nhân tạo [AI]
  • Anh tài công nghệ
  • Bình luận công nghệ
  • Tổng hợp
• Học CNTT
  • quiz technology
  • Microsoft Word 2016
  • Microsoft Word 2013
  • Word 2007
  • Excel 2019
  • Excel 2016
  • Hàm Excel
  • Microsoft PowerPoint 2019
  • Microsoft PowerPoint 2016
  • Google Trang tính - Trang tính
  • photoshop CS6
  • photoshop CS5
  • HTML
  • CSS và CSS3
  • con trăn
  • Học SQL
  • Lập trình C
  • Lập trình C++
  • Lập trình C#
  • Học HTTP
  • Bootstrap
  • Máy chủ SQL
  • JavaScript
  • Học PHP
  • jQuery
  • Học MongoDB
  • Unix/Linux
  • Học Git
  • NodeJS

Giới thiệu. Điều khoản. bảo mật. Hướng dẫn. Ứng dụng. Liên hệ. Quảng cáo. Facebook. YouTube. DMCA

Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản. CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. address. 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại. 024 2242 6188. E-mail. thông tin @ meta. vn. Chịu trách nhiệm nội dung. Lê Ngọc Lâm

Bản quyền © 2003-2022 QuanTriMang. com. Giữ toàn quyền. Không thể sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc về QuanTriMang. com khi chưa được phép