Tôi hiểu rằng các biểu mẫu không hoạt động tốt trong email, tuy nhiên, tôi đã thấy chúng đến với tôi. Chỉ muốn biết liệu "có thể nhúng toàn bộ khảo sát vào email không. Tôi có một cuộc khảo sát ngắn gồm 3 câu hỏi, tôi muốn nhúng vào email
Một biểu mẫu HTML được sử dụng để thu thập đầu vào của người dùng. Đầu vào của người dùng thường được gửi đến máy chủ để xử lý
Phần tử
Phần tử HTML được sử dụng để tạo biểu mẫu HTML cho đầu vào của người dùng
.
phần tử biểu mẫu
.
Các
phần tử là nơi chứa các loại phần tử đầu vào khác nhau, chẳng hạn như. trường văn bản, hộp kiểm, nút radio, nút gửi, v.v.Tất cả các yếu tố hình thức khác nhau được đề cập trong chương này. Phần tử biểu mẫu HTML
Phần tử
Phần tử HTML là phần tử biểu mẫu được sử dụng nhiều nhất
Phần tử có thể được hiển thị theo nhiều cách, tùy thuộc vào thuộc tính
type
Dưới đây là một số ví dụ
LoạiMô tảHiển thị trường nhập văn bản một dòngHiển thị nút radio [để chọn một trong nhiều lựa chọn]Hiển thị hộp kiểm [để chọn không hoặc nhiều lựa chọn]Hiển thị nút gửi [để gửi biểu mẫu]Hiển thị nút có thể nhấpTất cả các loại đầu vào khác nhau được đề cập trong chương này. Các loại đầu vào HTML
Trường văn bản
xác định trường nhập một dòng để nhập văn bản
Ví dụ
Một biểu mẫu có các trường nhập văn bản
Tên.
Họ.
Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt
Ghi chú. Bản thân biểu mẫu không hiển thị. Cũng lưu ý rằng chiều rộng mặc định của trường nhập liệu là 20 ký tự
Phần tử
Lưu ý việc sử dụng phần tử trong ví dụ trên
Thẻ xác định nhãn cho nhiều phần tử biểu mẫu
Phần tử hữu ích cho người dùng trình đọc màn hình vì trình đọc màn hình sẽ đọc to nhãn khi người dùng tập trung vào phần tử đầu vào
Phần tử cũng giúp những người dùng gặp khó khăn khi nhấp vào các vùng rất nhỏ [chẳng hạn như nút radio hoặc hộp kiểm] - bởi vì khi người dùng nhấp vào văn bản trong phần tử
, nó sẽ chuyển đổi nút radio/hộp kiểm
Thuộc tính
body{ font-family: 'Work Sans', sans-serif; } .faq-heading{ border-bottom: #777; padding: 20px 60px; } .faq-container{ display: flex; justify-content: center; flex-direction: column; } .hr-line{ width: 60%; margin: auto; } /* Style the buttons that are used to open and close the faq-page body */ .faq-page { /* background-color: #eee; */ color: #444; cursor: pointer; padding: 30px 20px; width: 60%; border: none; outline: none; transition: 0.4s; margin: auto; } .faq-body{ margin: auto; /* text-align: center; */ width: 50%; padding: auto; } /* Add a background color to the button if it is clicked on [add the .active class with JS], and when you move the mouse over it [hover] */ .active, .faq-page:hover { background-color: #F9F9F9; } /* Style the faq-page panel. Note: hidden by default */ .faq-body { padding: 0 18px; background-color: white; display: none; overflow: hidden; } .faq-page:after { content: '\02795'; /* Unicode character for "plus" sign [+] */ font-size: 13px; color: #777; float: right; margin-left: 5px; } .active:after { content: "\2796"; /* Unicode character for "minus" sign [-] */ }2 của thẻ
phải bằng thuộc tính
1 của phần tử
để liên kết chúng lại với nhau Trang Câu hỏi thường gặp [FAQ] có thể cải thiện trải nghiệm người dùng. Tất cả các trang web nên có trang Câu hỏi thường gặp vì nó giảm thời gian nhân viên của bạn cần trả lời các câu hỏi đơn giản. Nó cho phép khách truy cập tìm câu trả lời cho tất cả các câu hỏi của họ ở một nơi. Và một trang Câu hỏi thường gặp có thể là một nguồn ý tưởng nội dung tuyệt vờiTrong hướng dẫn này, tôi sẽ chỉ cho bạn cách tạo một trang Câu hỏi thường gặp đơn giản bằng HTML, CSS và JavaScript. Trước khi bắt đầu xây dựng trang Câu hỏi thường gặp, chúng ta sẽ tìm hiểu xem trang Câu hỏi thường gặp là gì và tại sao trang này lại quan trọng.
Trang Câu hỏi thường gặp là gì?
Trang Câu hỏi thường gặp là một trong những trang hữu ích nhất trên bất kỳ trang web nào. Nó cho phép khách truy cập tìm thấy câu trả lời cho tất cả các câu hỏi của họ ở một nơi. Chúng mang đến cho khách truy cập của bạn cơ hội tìm hiểu thêm về trang web của bạn với câu trả lời cho những mối quan tâm hoặc câu hỏi phổ biến mà bất kỳ ai cũng có thể có.
Câu hỏi thường gặp là một trong những trang bị bỏ qua nhiều nhất, nhưng bạn khó có thể tìm thấy một cửa hàng trực tuyến phổ biến hoặc một trang web nào không có nó
Tại sao bạn cần một trang FAQ?
- Cải thiện trải nghiệm người dùng của một trang web
- Giảm thời gian nhân viên của bạn cần trả lời các câu hỏi đơn giản
- Cho phép khách truy cập tìm câu trả lời cho tất cả các câu hỏi của họ ở một nơi
- Đó là một nguồn tuyệt vời cho các ý tưởng nội dung
điều kiện tiên quyết
Hướng dẫn này giả định rằng bạn cảm thấy thoải mái khi sử dụng HTML, CSS và Javascript. Trước khi bắt đầu, bạn sẽ phải tạo các tệp sau. Tệp HTML, tệp CSS và tệp JavaScript cuối cùng.
Đoạn bên dưới mô tả các bước cần thực hiện để xây dựng trang Câu hỏi thường gặp này
Bước một. Cấu trúc tài liệu HTML của chúng tôi
Mã HTML. trong phần này, các thành phần của trang Câu hỏi thường gặp được tạo và tải. Tiếp theo, chúng tôi tạo và liên kết phong cách. css và chỉ mục. tập tin js. thêm liên kết phông chữ và liên kết biểu tượng. Nó cũng xác định cấu trúc của trang FAQ.
Chúng tôi đã bọc các phần tử HTML của mình trong một phần có tên lớp là FAQ-container. Phần này chứa các yếu tố khác nhau được chia thành các phần. Phần đầu tiên chứa câu hỏi trong khi phần thứ hai chứa các câu trả lời thuộc cùng một phần danh mục
FAQ PAGEFAQ'S
What is an FAQ Page?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit saepe sequi, illum facere necessitatibus cum aliquam id illo omnis maxime, totam soluta voluptate amet ut sit ipsum aperiam. Perspiciatis, porro!
Why do you need an FAQ page?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit saepe sequi, illum facere necessitatibus cum aliquam id illo omnis maxime, totam soluta voluptate amet ut sit ipsum aperiam. Perspiciatis, porro!
Does it improves the user experience of a website?
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit saepe sequi, illum facere necessitatibus cum aliquam id illo omnis maxime, totam soluta voluptate amet ut sit ipsum aperiam. Perspiciatis, porro!
Bước hai. Định vị bố cục và kiểu dáng của chúng tôi
Mã CSS. Phần này chứa vị trí của trang Câu hỏi thường gặp, kích thước phông chữ và kiểu dáng của các phần tử.
- Tạo các cột bố cục,
- Để nội dung của chúng tôi có thể đọc được, chúng tôi phải sử dụng một phông chữ tốt. Kiểm tra liên kết này để biết phông chữ được sử dụng trong dự án phông chữ google
- Trang trung tâm ở giữa cửa sổ
body{ font-family: 'Work Sans', sans-serif; } .faq-heading{ border-bottom: #777; padding: 20px 60px; } .faq-container{ display: flex; justify-content: center; flex-direction: column; } .hr-line{ width: 60%; margin: auto; } /* Style the buttons that are used to open and close the faq-page body */ .faq-page { /* background-color: #eee; */ color: #444; cursor: pointer; padding: 30px 20px; width: 60%; border: none; outline: none; transition: 0.4s; margin: auto; } .faq-body{ margin: auto; /* text-align: center; */ width: 50%; padding: auto; } /* Add a background color to the button if it is clicked on [add the .active class with JS], and when you move the mouse over it [hover] */ .active, .faq-page:hover { background-color: #F9F9F9; } /* Style the faq-page panel. Note: hidden by default */ .faq-body { padding: 0 18px; background-color: white; display: none; overflow: hidden; } .faq-page:after { content: '\02795'; /* Unicode character for "plus" sign [+] */ font-size: 13px; color: #777; float: right; margin-left: 5px; } .active:after { content: "\2796"; /* Unicode character for "minus" sign [-] */ }
Bước thứ ba. Thêm chức năng
Mã JavaScript . Phần này chứa một phần mã kiểm soát các chức năng của trang Câu hỏi thường gặp. xử lý sự kiện.
Bây giờ chúng tôi sẽ thêm javascript để làm cho trang Câu hỏi thường gặp của chúng tôi hoạt động. Hiện tại, trang của chúng tôi trông đẹp nhưng không hoạt động tốt vì chúng tôi chưa bao gồm javascript của mình, nhưng chúng tôi có thể làm cho nó tốt hơn nhiều
main.js file var faq = document.getElementsByClassName["faq-page"]; var i; for [i = 0; i < faq.length; i++] { faq[i].addEventListener["click", function [] { /* Toggle between adding and removing the "active" class, to highlight the button that controls the panel */ this.classList.toggle["active"]; /* Toggle between hiding and showing the active panel */ var body = this.nextElementSibling; if [body.style.display === "block"] { body.style.display = "none"; } else { body.style.display = "block"; } }]; }
đầu ra
Phần kết luận
Có trang Câu hỏi thường gặp là điều cần thiết và có thể phục vụ như một trải nghiệm tốt hơn cho người dùng cuối của bạn, mang lại giá trị thực cho trang web của bạn. Tôi hy vọng bài viết này đã cung cấp cho bạn lý do để có trang Câu hỏi thường gặp trên trang web của bạn và cách xây dựng nó