Web Forms 2.0 trong HTML5

Web Form 2.0 là sự mở rộng của các tính năng Form thành lập trong HTML4. Các phần tử và thuộc tính Form trong HTML5 cung cấp một mức độ đánh dấu semantic tốt hơn trong HTML4 và gỡ bỏ phần lớn sự cần thiết của công việc script và tạo kiểu tẻ nhạt được yêu cầu trong HTML4.

Phần tử trong HTML4

Các phần tử HTML4 input sử dụng thuộc tính type để xác định kiểu dữ liệu. HTML4 cung cấp các kiểu sau:

Kiểu	Miêu tả
text	Một trường văn bản không ràng buộc kiểu form, trên danh nghĩa không ràng buộc các dòng ngắt.
password	Một trường văn bản không ràng buộc kiểu form với thông tin nhạy cảm, trên danh nghĩa không ràng buộc các dòng ngắt.
checkbox	Tập hợp của 0 và nhiều giá trị hơn từ một danh sách đã xác định trước.
radio	Một giá trị liệt kê
submit	Một kiểu form không ràng buộc của nút khởi tạo sự đệ trình form.
file	Một file tùy ý với một kiểu MIME và một tên file tùy ý.
image	Một tọa độ, liên quan tới một kích cỡ ảnh riêng, với semantic thêm mà nó phải là giá trị cuối được chọn và khởi tạo sự đệ trình form
hidden	Một chuỗi tùy ý mà thông thường không được hiển thị tới người dùng
select	Một giá trị liệt kê, khá giống với kiểu radio.
textarea	Một trường văn bản không ràng buộc kiểu form, trên danh nghĩa không giới hạn các dòng ngắt.
button	Một form tùy ý của nút mà có thể khởi tạo bất kỳ sự kiện liên quan tới nút

Sau đây là ví dụ đơn giản của việc sử dụng các label, các nút radio, và các nút submit:

...
   
	
      first name: 
      

		
      last name: 
      

		
      email: 
      

		
       Male

       Female

       
   

 ...

Phần tử trong HTML5

Ngoài các thuộc tính được đề cập trên, phần tử input trong HTML5 giới thiệu một số giá trị mới cho thuộc tính type. Bảng dưới liệt kê các giá trị này:

Ghi chú: Bạn thử tất cả các ví dụ sau sử dụng phiên bản trình duyệt Opera mới nhất.

Kiểu	Miêu tả
datetime	Ngày và thời gian (năm, tháng, ngày, giờ, phút, giây, các phần của giây) được mã hóa theo ISO 8601 với Timezone thiết lập là UTC.
datetime-local	Ngày và thời gian (năm, tháng, ngày, giờ, phút, giây, các phần của giây) được mã hóa theo ISO 8601 mà không có thông tin về Timezone.
date	Ngày và thời gian (năm, tháng, ngày) được mã hóa theo ISO 8601
month	Một ngày trong một năm và tháng được mã hóa theo ISO 8601
week	Một ngày trong một năm và số tuần được mã hóa theo ISO 8601
time	Thời gian (giờ, phút, giây, các phần giây) được mã hóa theo ISO 8601
number	Chỉ chấp nhận các giá trị số. Thuộc tính step xác định độ chính xác, mặc định là 1
range	Kiểu range được sử dụng cho các trường input mà nên chứa một giá trị từ một dãy số.
email	Chỉ chấp nhận giá trị là thư điện tử. Kiểu này được sử dụng cho các trường đầu vào mà nên chứa địa chỉ Email. Nếu bạn cố gắng để đệ trình một văn bản đơn, nó buộc bạn chỉ nhập giá trị thư điện tử trong định dạng [email protected]
url	Chỉ chấp nhận giá trị URL. Kiểu này được sử dụng cho các trường đầu vào mà nên chứa một địa chỉ URL. Nếu bạn cố gắng để đệ trình một văn bản đơn, nó buộc bạn chỉ nhập địa chỉ URL trong định dạng hoặc http://www.example.com hoặc http://example.com

Phần tử

HTML5 giới thiệu một phần tử mới là mà được sử dụng để biểu diễn kết quả của các kiểu đầu ra khác nhau, như đầu ra được viết bởi một script.

Bạn có thể sử dụng thuộc tính for để xác định mối quan hệ giữa phần tử output và các phần tử khác trong tài liệu mà ảnh hưởng tới phép tính (ví dụ như các đầu vào input hoặc các tham số). Giá trị của thuộc tính for là một danh sách các ID của các phần tử khác được phân biệt riêng rẽ.


            
         Enter a value :

Nó sẽ cho kết quả sau:

Thuộc tính placeholder

HTML5 giới thiệu một thuộc tính mới được gọi là placeholder. Thuộc tính này trên phần tử và cung cấp một chỉ dẫn tới người sử dụng về những gì có thể được nhập vào trong trường đó. Phần văn bản placeholder phải không chứa carriage returns hoặc line-feeds.</p> <p>Sau đây là cú pháp đơn giản cho thuộc tính placeholder:</p> <pre class="prettyprint notranslate"> <input type="text" name="search" placeholder="search the web"/> </pre> <p>Thuộc tính này được hỗ trợ chỉ bởi phiên bản Mozilla, Safari và Chrome mới nhất.</p> <pre class="prettyprint notranslate tryit"> <!DOCTYPE HTML> <html> <body> <form action="/cgi-bin/html5.cgi" method="get"> Enter email : <input type="email" name="newinput" placeholder="email@example.com"/> <input type="submit" value="submit" /> </form> </body> </html> </pre> <p>Nó sẽ cho kết quả sau:</p> <iframe onload="resizeFrame(this)" class="result" src="../html5/src/placeholder_attribute.htm"></iframe> <h2>Thuộc tính autofocus</h2> <p>Đây là một mẫu một bước (one-step) đơn giản, dễ dàng được chương trình hóa trong JavaScript tại thời điểm tải tài liệu, tự động nhận trọng tâm một trường form cụ thể.</p> <p>HTML5 giới thiệu một thuộc tính mới gọi là <b>autofocus</b> mà sẽ được sử dụng như sau:</p> <pre class="prettyprint notranslate"> <input type="text" name="search" autofocus/> </pre> <p>Thuộc tính này được hỗ trợ chỉ bởi phiên bản Mozilla, Safari và Chrome mới nhất.</p> <pre class="prettyprint notranslate tryit"> <!DOCTYPE HTML><html> <body> <form action="/cgi-bin/html5.cgi" method="get"> Enter email : <input type="text" name="newinput" autofocus/> <p>Try to submit using Submit button</p> <input type="submit" value="submit" /> </form> </body> </html> </pre> <p>Nó sẽ cho kết quả sau:</p> <iframe onload="resizeFrame(this)" class="result" src="../html5/src/autofocus_attribute.htm"></iframe> <h2>Thuộc tính required</h2> <p>Bây giờ bạn không cần có JavaScript cho các xác nhận Client-Side như hộp văn bản trống sẽ không bao giờ được đệ trình bởi vì HTML5 giới thiệu một thuộc tính mới gọi là <b>required</b> mà sẽ được sử dụng như sau và sẽ nhấn mạnh để có một giá trị:</p> <pre class="prettyprint notranslate"> <input type="text" name="search" required/> </pre> <p>Thuộc tính này được hỗ trợ chỉ bởi phiên bản Mozilla, Safari và Chrome mới nhất.</p> <pre class="prettyprint notranslate tryit"> <!DOCTYPE HTML> <html> <body> <form action="/cgi-bin/html5.cgi" method="get"> Enter email : <input type="text" name="newinput" required/> <p>Try to submit using Submit button</p> <input type="submit" value="submit" /> </form> </body> </html> </pre> <p>Nó sẽ cho kết quả sau:</p> <iframe onload="resizeFrame(this)" class="result" src="../html5/src/required_attribute.htm"></iframe><div> <p><b>Bài học HTML5 phổ biến khác tại hoconline.club:</b></p> <ul class="list"><li><a href="https://hoconline.club/html5/cu_phap_html5_co_ban.jsp">Cú pháp HTML5 cơ bản</a></li> <li><a href="https://hoconline.club/html5/cac_thuoc_tinh_trong_html5.jsp">Thuộc tính</a></li> <li><a href="https://hoconline.club/html5/su_kien_trong_html5.jsp">Sự kiện</a></li> <li><a href="https://hoconline.club/html5/web_forms2_trong_html5.jsp">Giới thiệu Web Forms 2.0</a></li> <li><a href="https://hoconline.club/html5/svg_trong_html5.jsp">Giới thiệu SVG</a></li> <li><a href="https://hoconline.club/html5/mathml_trong_html5.jsp">Giới thiệu MathML</a></li> <li><a href="https://hoconline.club/html5/web_storage_trong_html5.jsp">Web Storage là gì ?</a></li></ul> </div> <hr> <div class="pre-btn"> <a href="../html5/su_kien_trong_html5.jsp"><i class="icon icon-arrow-circle-o-left big-font"></i> Trang trước</a> </div> <div class="pdf-btn"></div> <div class="nxt-btn"> <a href="../html5/svg_trong_html5.jsp">Trang sau <i class="icon icon-arrow-circle-o-right big-font"></i> </a> </div> <hr> <div class="fb-comments" data-order-by="social" data-href="http://hoconline.club/html5/web_forms2_trong_html5.jsp" data-width="100%" data-numposts="5"></div><hr> <div class="bottomgooglead"> <div class="bottomadtag">Bài viết liên quan</div> <div><ul class="list"> <li><p><a href="https://hoconline.club/ngu-phap-tieng-anh/">160 bài học ngữ pháp tiếng Anh hay nhất</a></p></li> <li><p><a href="https://hoconline.club/java/">155 bài học Java tiếng Việt hay nhất</a></p></li> <li><p><a href="https://hoconline.club/android/">100 bài học Android tiếng Việt hay nhất</a></p></li> <li><p><a href="https://hoconline.club/css/">247 bài học CSS tiếng Việt hay nhất</a></p></li> <li><p><a href="https://hoconline.club/html/">197 thẻ HTML cơ bản</a></p></li> <li><p><a href="https://hoconline.club/php/">297 bài học PHP</a></p></li> <li><p><a href="https://hoconline.club/cplusplus/">101 bài học C++ hay nhất</a></p></li> <li><p><a href="https://hoconline.club/bai_tap_cplusplus_co_giai/">97 bài tập C++ có giải hay nhất</a></p></li> <li><p><a href="https://hoconline.club/javascript/">208 bài học Javascript có giải hay nhất</a></p></li> </ul> </div> </div> </div> <div class="row"> </div></div> </div> </div> </div><div class="footer_ads"></div> <script type="text/javascript" src="../FrontEndWeb/js/sp.js"></script> <script type="text/javascript" src="/jvfrontend/javascript-v6.js?v=3"></script> </div><script type="text/javascript" src="../theme/js/custom-min.js"></script> <script type="text/javascript" src="../theme/js/jquery.colorbox-min.js"></script> <script type="text/javascript"> var tryit = new $.TryIt('../html5/try_html5.jsp'); tryit.compile(); </script> <style> pre.prettyprint.tryit { background: #eee url('../html5/images/try-it.jpg') top right no-repeat !important; } </style></div> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K2SNMM8" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript></body></html>