Đầu ra có nghĩa là gì trong html?
HTML Example of codekết quả ví dụ0 100 + =Mẹo Bạn có thể điều chỉnh giá trị bên trong hộp bằng cách nhấp vào mũi tên lên hoặc xuống ở bên phải Thuộc tínhTrong thẻ HTML, một thuộc tính chỉ ra các khía cạnh nhất định của phần tử HTML. Các thuộc tính được tạo thành từ một cặp tên và giá trị; . Bảng sau đây hiển thị tất cả các thuộc tính HTML duy nhất hiện tại cho thẻ và mô tả của từng thuộc tính Trên web, bạn sẽ thấy một loạt các trang web có tính năng máy tính để tính toán những thứ như hoàn trả khoản vay, lãi suất thế chấp, thuế, bảo hiểm, v.v. Cho đến bây giờ, chúng tôi không có cách nào để đánh dấu ngữ nghĩa kết quả của những phép tính đó. đi vào. phần tử 7. Trong bài viết này, chúng tôi sẽ chỉ cho bạn 7 và một số thủ thuật JavaScript liên quan. Chúng ta hãy nứtĐịnh nghĩa #Phần tử 7, mới trong HTML5, được sử dụng trong biểu mẫu. Đặc tả HTML WHATWG mô tả 7 rất đơn giản
Cùng với các thuộc tính toàn cầu tiêu chuẩn, 7 cũng chấp nhận các thuộc tính sau 1Một danh sách được phân tách bằng dấu cách chứa ID của các phần tử có giá trị được đưa vào phép tính. 2Liên kết phần tử 7 với chủ sở hữu biểu mẫu của nó. Giá trị phải là ID của một biểu mẫu trong cùng một tài liệu. Điều này cho phép bạn đặt một phần tử 7 bên ngoài 5 mà nó được liên kết. 6Tên của phần tửThực hiện7 #Chúng ta sẽ bắt đầu bằng cách tạo một ví dụ đơn giản cộng hai số nguyên lại với nhau (Hình 1). Chúng tôi sẽ sử dụng kiểu đầu vào 8 mới trong HTML5 và hàm JavaScript 9 để chuyển đổi các chuỗi đầu vào thành số nguyên Hình 1. Một máy tính đơn giản, được hiển thị trong ChromeThuộc tính 0 mới đối với HTML5. Nó xác định mức tăng mà theo đó đầu vào 8 tăng và giảmLưu ý rằng chúng tôi đang sử dụng sự kiện 2 tiêu chuẩn hiện nay, sự kiện này đã thay thế sự kiện 3 không dùng nữa. Daniel Friesen đã viết một bài báo chi tiết về bối cảnh và sự hỗ trợ hiện tại của 2. 2 không được hỗ trợ trong IE8 trở xuống và hỗ trợ IE9 của nó hơi không ổn định, nhưng bạn có thể khắc phục những sự cố này bằng cách sử dụng polyfill html5WidgetsXem ví dụ trực tiếp về mã trong Hình 1 Như bạn mong đợi, nếu bạn chỉ nhập một giá trị duy nhất, hàm sẽ trả về NaN. Nó thực sự đang cố gắng thêm một số và một giá trị không xác định và 1 + không xác định = không xác định Sử dụng Thuộc tính1 #Hãy xây dựng dựa trên ví dụ trước và thêm thuộc tính 1 vào 7 (Hình 2). Chúng tôi cần thêm ID vào từng 9 được liên kết, giống như cách chúng tôi làm với thuộc tính 1 trên 81 Hình 2. Sử dụng thuộc tính 1 trên phần tử 7Xem ví dụ trực tiếp về mã trong Hình 2 Tài sản84 #HTML5 cũng đã giới thiệu thuộc tính 84 của các đối tượng đầu vào JavaScript (cụ thể là những đối tượng thuộc loại số, ngày tháng và phạm vi). Điều này trả về giá trị dưới dạng số thay vì chuỗi, nghĩa là chúng ta không còn cần sử dụng 9 hoặc 87 nữa và toán tử 88 cộng thay vì nối Hình 3. Sử dụng thuộc tính 84 để truy xuất giá trị số từ đầu vàoXem ví dụ trực tiếp về mã trong Hình 3 Máy tính hóa đơn. Một ví dụ chuyên sâu với dự phòng #Để có một ví dụ thực tế hơn, hãy tạo một máy tính lập hóa đơn nhân số giờ với tỷ lệ hàng giờ và thêm thuế để đưa ra tổng số (Hình 4) 8Hình 4. Máy tính lập hóa đơn hiển thị kết quả của nó trong phần tử 90Xem ví dụ trực tiếp về mã trong Hình 4 Không có gì quá phức tạp xảy ra ở đó. Trên thực tế, kịch bản đơn giản đến mức tôi cũng có thể làm được;) Một ví dụ gây tranh cãi nhẹ khi sử dụng91 #HTML5 cũng giới thiệu loại đầu vào 92, được hiển thị dưới dạng điều khiển thanh trượt trong các trình duyệt hỗ trợ. Với loại đầu vào này, người dùng có thể nhập một giá trị gần đúng trong một phạm vi nhất định mà không cần phải hoàn toàn chính xác hoặc nhập trực tiếp một giá trị số. Để biết khả năng tương thích giữa các trình duyệt, hãy xem polyfill phạm vi đầu vào của RemyTrong khi nghiên cứu bài viết này, tôi đã tìm thấy một số ví dụ sử dụng phần tử 7 kết hợp với 91 như trong Hình 5 9Hình 5. Sử dụng 91 với phần tử 7Xem ví dụ trực tiếp về mã trong Hình 5 Sử dụng 7 để hiển thị giá trị hiện tại cho người dùng có vẻ như là một trường hợp sử dụng hoàn toàn hợp lý đối với tôi, nhưng đó không phải là kết quả của một phép tính như thông số kỹ thuật mô tả. Mình chưa nói chuyện trực tiếp với Hixie về vấn đề này, nhưng có vẻ như 1 số bạn trên kênh IRC cũng đồng ý nên mình đã gửi bug report để yêu cầu sửa lại định nghĩa. Kể từ khi viết bài viết này, lỗi đã được giải quyết và định nghĩa được nới lỏng nghĩa là phần trên hiện là cách sử dụng hợp lệ của 90. Tiếng hoan hô. Tôi sẽ cập nhật bài viết này nếu có gì thay đổiHỗ trợ trình duyệt và Polyfills #Tin vui là tất cả các trình duyệt hiện đại đều hỗ trợ phần tử 7 ở một mức độ nào đó. Tin xấu là vẫn còn một vài vấn đềHỗ trợ trình duyệt cho phần tử 7BrowserSupportChrome13+Safari5. 1+Firefox*6+Opera9. 20+Internet Explorer10+* Firefox hỗ trợ phần tử 7 và sự kiện 2, nhưng nó không hỗ trợ thuộc tính 84Tất cả các ví dụ mà chúng ta đã thấy cho đến nay sẽ hoạt động hoàn hảo trong Opera 11. 5+, Safari5. 1+ và Chrome 13+. IE, như bạn có thể mong đợi, hơi chậm trễ, nhưng hỗ trợ cho 7 đã có trong IE10 Platform Preview 2 và hỗ trợ cho 2 đã có trong IE9Để giải quyết vấn đề này trong các ví dụ đơn giản của chúng tôi, chúng tôi sẽ cần quay trở lại 96 và 87 đã được thử và tin cậy (Hình 6) 9Hình 6. Sử dụng 98 để hỗ trợ các trình duyệt cũ hơnXem ví dụ trực tiếp về mã trong Hình 6 Mặc dù điều này không phải là lý tưởng, nhưng nó vẫn khả thi cho đến khi những trình duyệt kém khả năng đó chết một cách chậm rãi và đau đớn. Ngoài ra, bạn có thể sử dụng polyfill để bịt các khoảng trống Để kiểm tra hỗ trợ trong trình duyệt hiện tại của bạn, hãy mở trang kiểm tra hỗ trợ của Mike Taylor Polyfill #Để hỗ trợ các trình duyệt kém khả năng hơn, có các polyfill chẳng hạn như Tiện ích HTML5 được tạo bởi Zoltan “Du Lac” Hawryluk. Zoltan hướng dẫn bạn về quy trình trong bài viết chi tiết này về cách tạo các biểu mẫu trình duyệt chéo bằng cách sử dụng html5Widgets Bản tóm tắt #Có thể bạn sẽ không thấy mình sử dụng phần tử 7 mọi lúc, nhưng nó hữu ích trong nhiều tình huống. Tính toán các giá trị trên các trang web tài chính xuất hiện trong tâm trí hoặc xuất ra vị trí chuột hiện tại hoặc có thể là hiệu số bàn thắng bại trong bảng các đội thể thao. Bạn có thể nghĩ ra những trường hợp sử dụng nào khác cho 7? Bài đọc liên quan #
Richard ClarkBài viết này được viết bởi Richard Clark . Richard là Trưởng phòng Tương tác tại KMP Digitata, một công ty kỹ thuật số có trụ sở tại Manchester, Vương quốc Anh. Đồng tác giả của Bắt đầu HTML5 và CSS3. Web phát triển. Anh ấy điều hành một loạt trang web bao gồm trang này và trang chị em của nó là html5gallery. Một dự án phụ khác là Speak the Web, một loạt các hội nghị web theo phong cách biểu diễn nhỏ. Bạn nên theo dõi anh ấy trên twitter hoặc xem trang web của anh ấy. 36 Phản hồi về bài viết “Yếu tố đầu ra”20 tháng 12, 2011 lúc 9. 17 giờ chiều Trong Hình 6, bạn chỉ định id của đầu vào hai lần (thuộc tính thứ 2 và cuối cùng) bài viết tuyệt vời mặc dù, cảm ơn bạn Đáp lại 21 Tháng mười hai, 2011 lúc 10. 42 giờ sáng @Bernhard – Vì vậy, tôi đã làm, cảm ơn. Đã cập nhật nó ngay bây giờ Đáp lại 21 Tháng mười hai, 2011 lúc 11. 46 giờ sáng @Richard Clark Tôi là người tạo ra webshims lib và tôi thắc mắc, tại sao bạn chưa thêm triển khai tính năng biểu mẫu của webshims lib vào danh sách các polyfill có thể Nếu tìm thấy một cái gì đó lạ hoặc bạn không thích, xin vui lòng cho tôi biết. Tôi luôn cố gắng làm cho webshims lib tốt hơn Đáp lại 21 Tháng mười hai, 2011 lúc 12. 59 giờ tối Thuộc tính 1 có bất kỳ hành vi nào theo mặc định không?Đáp lại 21 Tháng mười hai, 2011 lúc 1. 12 giờ trưa Chúng ta sẽ làm gì với một trang web bằng tiếng Đức hoặc tiếng Thụy Điển chẳng hạn, trong đó đầu vào và đầu ra phải sử dụng dấu phẩy thập phân thay vì dấu thập phân (điều tương tự cũng xảy ra với nhiều ngôn ngữ, nếu không muốn nói là hầu hết)? Đáp lại alexander farkas nói. 21 Tháng mười hai, 2011 lúc 2. 28 giờ chiều @Bertil Wennergren Giá trị được hiển thị cho người dùng có thể được bản địa hóa bởi trình duyệt. Chrome đang làm điều này chẳng hạn. Và bạn có thể chỉ cần thay đổi/chuyển đổi đầu ra thành ngôn ngữ bạn muốn Tôi đã tạo một câu đố, trong đó giới thiệu việc sử dụng “toLocaleString” http. //jsfiddle. mạng/trixta/Zw37n/ Đáp lại Bertil Wennergren nói. 21 Tháng mười hai, 2011 lúc 2. 44 giờ chiều “Giá trị được hiển thị cho người dùng có thể được bản địa hóa bởi trình duyệt. Chrome đang làm điều này chẳng hạn. ” Đối với phần tử “đầu ra” hoặc đối với “đầu vào[type=number]” hoặc cho cả hai? Chính xác thì Chrome hiện làm gì với “đầu vào[type=number]” và “đầu ra” trong một trang web tiếng Anh trong trình duyệt tiếng Đức hoặc một trang web tiếng Đức trong trình duyệt tiếng Anh? Đáp lại alexander farkas nói. 21 Tháng mười hai, 2011 lúc 3. 11 giờ tối chỉ đầu vào [loại = số] được bản địa hóa thành ngôn ngữ của trình duyệt. vì vậy trong trình duyệt tiếng Đức, người dùng sẽ thấy 1,1 và trong trình duyệt tiếng Anh 1. 1, nhưng dữ liệu gửi vẫn là 1. 1 trong tất cả các trình duyệt đầu ra chỉ hiển thị những gì nhà phát triển đưa vào. nó không có hạn chế về định dạng. vì vậy bạn có thể làm một cái gì đó như thế này $('đầu ra'). prop('giá trị', “”+$. prop( inputElement, ‘valueAsNumber’). thay thế('. ’, ‘,’)); Đáp lại Bertil Wennergren nói. 22 tháng 12, 2011 lúc 11. 21 giờ sáng “đầu ra chỉ đơn giản là hiển thị những gì nhà phát triển đưa vào” Giá trị của phần tử đầu ra có nên được gửi cùng với tất cả dữ liệu biểu mẫu bên ngoài không? . Nếu vậy, thì vấn đề là cách giải thích dấu phân cách thập phân. Điều gì sẽ được gửi nếu giá trị “1,234” được đưa vào một phần tử đầu ra? Đáp lại 22 Tháng mười hai, 2011 lúc 5. 05 giờ chiều @Bertil – Các yếu tố có thể gửi là nút, đầu vào, keygen, đối tượng, lựa chọn và vùng văn bản. Vì vậy, không phải là yếu tố đầu ra. Xem Đáp lại 23 Tháng mười hai, 2011 lúc 8. 58 giờ sáng Giá trị "bất kỳ" cho thuộc tính "bước" không hoạt động chính xác trong Safari đối với loại đầu vào số... Đáp lại 23 Tháng mười hai, 2011 lúc 9. 03 giờ sáng 39/100 không phải là đầu ra của một phép tính, mà là bản thân phép tính. ) Tôi nghĩ bạn có thể đưa ra trường hợp đầu ra với phạm vi thực sự là kết quả của phép chia (tính toán tỷ lệ phần trăm) Đáp lại witchfinderx nói. 23 Tháng mười hai, 2011 lúc 9. 11 giờ sáng Tôi đoán không chỉ hiển thị "kết quả của phép tính" mà còn hiển thị cả kết quả. Sau đó, tôi thấy rất nhiều trường hợp chúng ta có thể sử dụng phần tử. Ví dụ: xem trước nhận xét cập nhật theo thời gian thực hoặc xem trước hình ảnh đã cắt khi bạn thay đổi ảnh người dùng của mình Đáp lại witchfinderx nói. 23 Tháng mười hai, 2011 lúc 9. 13 giờ sáng I guess should show not only “result of a calculation” but result at all! Then I see lots of cases we can use element. For example real-time updating comment preview or the preview of cropped image when you are changing your userpic. Đáp lại 23 Tháng mười hai, 2011 lúc 9. 05 giờ chiều Chắc chắn là một tính năng cho tương lai (hey nó vần. )) Cảm ơn Richard. Một câu hỏi, liên quan đến PHP, mảng $_POST có thể xử lý phần tử đầu ra không? Đáp lại Bertil Wennergren nói. 24 tháng 12, 2011 lúc 3. 45 giờ chiều “Một câu hỏi, liên quan đến PHP, mảng $_POST có thể xử lý phần tử đầu ra không?” Nếu giá trị của một phần tử đầu ra hoàn toàn không được gửi (có vẻ như vậy), thì không có gì để xử lý Mặt khác, nếu nó được gửi, thì PHP không có cách nào để biết liệu giá trị đến từ phần tử đầu ra hay từ phần tử đầu vào của một số phần tử khác (hoặc thực sự là từ bất kỳ loại phần tử HTML nào). Đơn giản là nó sẽ ở đó trong mảng $_POST (hoặc mảng $_GET) với tên và giá trị của nó. Vì vậy, PHP thực sự có thể xử lý các lần gửi như vậy Đáp lại Marco nói. 24 tháng 12, 2011 lúc 9. 03 giờ chiều Rất cảm ơn Bertil. Tôi không biết tại sao tôi lại có ấn tượng rằng mảng $_POST hoặc $_GET được điều chỉnh bởi các thẻ đầu vào thường được hỗ trợ trong HTML (radio, select, text, v.v.) nhưng bây giờ khi tôi nghĩ về nó, thì sao? Đáp lại Tháng Giêng 10, 2012 lúc 10. 23 giờ sáng Mong được thử nghiệm một số kiểu trình duyệt chéo với điều này. Chúc mừng bài viết hay Đáp lại Tháng Tư 4, 2012 tại 6. 40 giờ chiều Tôi vừa tìm thấy thêm một hướng dẫn nơi bạn có thể thay đổi giá đỡ thanh trượt bằng CSS, thanh trượt phạm vi cũng tốt nhưng quan trọng nhất là tùy chỉnh CSS Đây là một liên kết của nó http. // webstutorial. com/range-input-slider-html5-css3/html-5 Và bạn đã giải thích một cách rõ ràng. Cảm ơn bài viết về các đầu vào HTML5 khác nhau Đáp lại Tháng Tư 11, 2012 lúc 9. 21 giờ sáng Chào. thay vì phần tử đầu ra, tôi đã chuyển giá trị vào hộp văn bản. tôi cần chỉnh sửa giá trị hộp văn bản nhưng tôi không thể. làm ơn giúp đỡ 0 Đáp lại Tháng Sáu 4, 2012 lúc 12. 30 giờ chiều để tính toán phức tạp, tôi thấy định dạng này hữu ích Đáp lại Tháng Sáu 6, 2012 lúc 8. 56 giờ chiều Làm cách nào để làm tròn kết quả đến số thập phân cụ thể? Khi giao dịch với $, tôi chỉ muốn hai dấu thập phân Đáp lại Tháng Chín 11, 2012 lúc 12. 53 giờ sáng tôi đã thử http. //html5doctor. com/demos/đầu ra/1. html sau khi tắt JavaScript và nó không hoạt động. Trình duyệt có sử dụng JavaScript nội bộ để đạt được chức năng mong muốn không? Đáp lại Peter Jaros nói. Tháng Chín 14, 2012 lúc 10. 32 giờ chiều @Raja. Không nội bộ. có JavaScript trên trang đó đặt giá trị của phần tử đầu ra. Nó nằm trong thuộc tính oninput của phần tử biểu mẫu Phần tử đầu ra không thực sự thực hiện toán học cho bạn; Đáp lại Richard Clark nói. 1 tháng 10, 2012 lúc 9. 43 giờ chiều Chỉ cần lưu ý nhanh rằng báo cáo lỗi mà tôi đã đề cập trong bài viết đã được giải quyết và giờ đây bạn có thể sử dụng đầu ra cho kết quả của hành động hoặc tính toán của người dùng Đáp lại 26 Tháng mười một, 2012 lúc 9. 56 giờ chiều Yêu cầu trợ giúp. (cảm ơn bạn trước, *rất nhiều*) Tôi là một chiến binh cuối tuần về nội dung này… nhiều thứ đã được cải thiện kể từ lần cuối cùng tôi làm việc trên một dự án (HTML5, v.v.) Tôi đang cố gắng tạo GUI dựa trên trình duyệt cho ứng dụng telnet tùy chỉnh. Khi tôi nhận thấy rằng HTM5 có hỗ trợ cho WebSockets,. cuộc rượt đuổi đã bắt đầu Tôi đã phát triển GUI trình duyệt và hiện đang gặp khó khăn khi xuất chuỗi văn bản sang vùng văn bản (một vùng trên trang) Khi thiết bị được kết nối với điện thoại, nó sẽ phản hồi thông tin mà tôi cần hiển thị động. (để xem kết quả của các lệnh được gửi đến thiết bị) Tôi đã thử (chỉ nhập liệu… khi được ghi vào thông qua phương thức getElementById(), màn hình sẽ bị xóa (không hỗ trợ “\n”). Điều tương tự đối với câu lệnh div và thẻ. Tôi không muốn vào flash & activescript. Tôi rất thích giải pháp HTML5/Javascript, nếu có Tôi đoán tôi có thể từ bỏ và làm điều này với perl. (không có GUI và tôi đã hoàn thành hầu hết logic chức năng… chưa có ổ cắm) Bất cứ ai có cái nhìn sâu sắc về điều này? Cảm ơn bạn, Đáp lại Rick nói. 26 Tháng mười một, 2012 lúc 9. 59 giờ chiều Bài đăng trên đã xóa 'div' và các thẻ khác mà tôi đã thử Chỉnh sửa. (khu vực 'div' trên trang). Đáp lại Rick nói. 26 Tháng mười một, 2012 lúc 10. 25 giờ chiều Xin lỗi, nó cũng đã cắt thẻ 'đầu ra' Tôi đoán rằng tôi có thể tự động tạo một mảng chuỗi và nạp nó vào getElementById(), làm mất dòng đầu tiên khi số dòng được đệm bị tràn ngập…. nhưng đó là công việc khá tẻ nhạt. (chắc chắn rồi, tôi đã phải vật lộn với những bài tập sắp xếp đó, từ thời 'c') Tôi nghĩ rằng bậc thầy về HTML5 sẽ thấy trước sự cần thiết này. Tôi chỉ không thể tìm ra nó cho đến nay Cảm ơn… Rick Đáp lại Tháng Một 2, 2013 lúc 10. 10 giờ sáng Xin chào Vừa chạy trang kiểm tra được liên kết ( http. //miketaylr. com/code/html5-output-element-support. html ) Đáp lại 20 Tháng Ba, 2013 lúc 8. 46 giờ sáng Tiến sĩ. Richard – Tôi muốn biết làm thế nào tôi có thể hiển thị đầu ra của biểu mẫu – gõ. phạm vi dưới dạng các số được phân tách bằng dấu phẩy? Giả sử tôi đặt phạm vi ở mức $100000 – tôi muốn nó được hiển thị là &100.000 Xin vui lòng giúp đỡ Đáp lại 14 Tháng Năm, 2013 lúc 10. 35 giờ sáng Tôi hình dung rằng mặc dù tôi có thể sử dụng phần tử OUTPUT nhưng có lẽ tôi vẫn sẽ sử dụng phần tử. trước {nội dung. attr(data-value);hiển thị. inline-block …} bit trên mọi thứ loại thanh trượt, vì nó dường như vẫn hoạt động tốt hơn trong thời điểm hiện tại Đáp lại Tháng Hai 5, 2014 lúc 10. 59 giờ chiều Còn việc sử dụng phần tử đầu ra cho các thông báo lỗi đầu vào thì sao? Đáp lại Casey nói. Tháng Hai 6, 2014 lúc 3. 43 giờ chiều
Vì vậy, đại loại như sau Đáp lại Tháng Tám 24, 2014 lúc 10. 23 giờ chiều Yếu tố đầu ra có thể được sử dụng cho những thứ ngoài tính toán, chẳng hạn như cho người dùng biết rằng tên người dùng đã được sử dụng (thông qua ajax) trong biểu mẫu đăng ký trang web? Đầu ra trong HTML là gì?Thẻ dùng để thể hiện kết quả của phép tính (giống như kết quả được thực hiện bởi tập lệnh).
Mục đích của phần tử đầu ra là gì?Trong HTML, phần tử để hiển thị kết quả của một phép tính . Đó là vùng chứa mà ứng dụng hoặc trang web có thể đưa kết quả hoặc kết quả của một hành động do người dùng thực hiện vào đó.
Cái gì được sử dụng để xem đầu ra của chương trình HTML?Do đó trình duyệt web được sử dụng để xem đầu ra của chương trình html là TRUE. tài liệu được thiết kế để hiển thị trong trình duyệt web. |