Các quy tắc cơ bản của HTML5, Phần 2: Thiết lập các đầu vào

Tương tác với người dùng

HTML5 phản ánh những thay đổi to lớn theo cách mà bây giờ bạn đang kinh doanh trên web và trong đám mây. Loạt bài này được thiết kế để làm sáng tỏ những thay đổi trong HTML5, bắt đầu bằng các thẻ mới và tổ chức trang và cung cấp thông tin cấp cao về thiết kế trang web, việc tạo các forms, việc sử dụng và giá trị của các API; và cuối cùng, các khả năng sáng tạo mà Canvas (Khung nền ảnh) cung cấp. Phần hai này giới thiệu khái niệm về các form control trong HTML5, đồng thời tiếp cận đến vai trò của JavaScript và CSS3.

Grace Walker, Chuyên gia tư vấn CNTT, Walker Automated Services

Grace Walker, một đối tác trong Walker Automated Services (Các dịch vụ tự động Walker) ở Chicago, Illinois, là một chuyên gia tư vấn Công nghệ thông tin (CNTT) có nền tảng đa dạng và kinh nghiệm rộng rãi. Bà đã làm việc trong lĩnh vực CNTT với tư cách là giám đốc, nhà quản trị, nhà lập trình, giảng viên, nhà phân tích kinh doanh, nhà phân tích kỹ thuật, nhà phân tích hệ thống, và nhà phát triển Web trong các môi trường khác nhau, bao gồm viễn thông, giáo dục, các dịch vụ tài chính, và phần mềm.



22 04 2013 (Xuất bản lần đầu tiên vào ngày 16 11 2011)

Tất cả những việc quản trị, phân tích dữ liệu, chiến lược tiếp thị, và các chức năng khác của các tổ chức mức doanh nghiệp đều quan trọng. Tuy nhiên, nếu như không có một công cụ nào để các khách hàng tiềm năng của bạn sử dụng — hay được thúc đẩy sử dụng — các quá trình ban đầu cần thiết cho sự phát triển của trang web mà thiếu đi sự trao đổi của khách truy cập. Một trải nghiệm tích cực, thân thiện với người sử dụng thúc đẩy sự tương tác cần thiết cho nỗ lực của bạn là một mục tiêu hàng đầu của tổ chức.

Các từ viết tắt thông dụng

  • API: Application programming interface - Giao diện lập trình ứng dụng
  • CSS3: Cascading style sheet version 3 - Bảng định kiểu xếp chồng phiên bản 3
  • HTML5: Hypertext Markup Language version 5 - Ngôn ngữ đánh dấu siêu văn bản phiên bản 5
  • IT: Information Technology - Công nghệ thông tin (CNTT)
  • UTC: Coordinated universal time - Giờ phối hợp quốc tế

Trọng tâm của sự tương tác chính là các form của trang web. Chúng tạo điều kiện trao đổi tương tác với người dùng sao cho các mục tiêu đã thúc đẩy việc xây dựng trang web có thể được nâng lên nhờ thay đổi của khách truy cập trang web. Các form là nhân tố chính cho sự tương tác giữa các trang web và người dùng, do đó chúng cực kỳ quan trọng cho việc thiết kế và phát triển một trang web.

Những điểm chính trong trọng tâm này được thể hiện qua các controls — radio buttons, check boxes, text boxes, number spinners và vân vân. Các phần tử này cần thiết cho việc giao tiếp giữa người dùng và trang web. Nói cách khác, nếu không có các controls này (cả về ý nghĩa vận hành "cơ học" hay cho một nhiệm vụ cụ thể nào đó), thì không thể thực hiện giao tiếp được.

Điều bắt buộc là các mối quan hệ của quá trình trao đổi này được xem xét cẩn thận, bao gồm tất cả các khía cạnh của sự tương tác giữa khách truy cập trang web và hệ thống hiện tại. Tốc độ xác nhận hợp lệ, đầu vào, nhận thức, sự chuyển hướng, việc nạp trang, và cách các trang được thiết lập đều có tác động đến quá trình trao đổi. Các cải tiến và nâng cao tính xác nhận hợp lệ, cùng với sự đa dạng mở rộng của các controls tùy chọn của form được cung cấp và tính chất đa phương tiện chung của các đặc tả HTML5, là tất cả các yêu tố đóng góp cho khả năng của HTML5 trong việc biến một khách truy cập trang web thành một người dùng trang web thực sự.

HTML5 là một công cụ đặc biệt mạnh mẽ để xác nhận hợp lệ và đảm bảo dựa trên web — một tài sản an toàn quan trọng. Nó đặc biệt quan trọng trong việc thiết kế và phát triển các trang web nhằm mục đích thu hút các khách hàng. Vì vậy, sử dụng nó là điều cần thiết để duy trì một tốc độ trao đổi thuận lợi. Nếu bạn không thể vạch ra các triển vọng, thì bạn đang gặp rắc rối; nếu bạn không thể thay đổi các triển vọng mà bạn vạch ra, thì bạn phải hạ cánh khẩn cấp.

Nhưng chúng ta có sự trợ giúp ở đây. Các kiểu HTML5, chẳng hạn như emailtelephone, giúp dễ dàng mở rộng các tùy chọn truyền thông. Nhờ kết hợp với sự thông suốt về cấu trúc được nền tảng ngữ nghĩa của HTML5 phổ biến, nên không có rào cản nào trong việc giao tiếp giữa bạn và phần còn lại của thế giới.

Dựa vào thế giới trung tâm mạng của chúng ta, tốc độ phát triển sôi động của nền kinh tế toàn cầu có tính ngẫu nhiên ngày càng tăng, sự phát triển nhanh chóng của điện toán đám mây, sự tăng trưởng theo cấp số nhân trong việc sử dụng các giải pháp công nghệ di động và viễn thông giữa các nền tảng — cả về thương mại lẫn xã hội — rõ ràng là chúng ta đứng trên ngưỡng cửa của một thế giới mới lý tưởng trong tương lai của điện toán và truyền thông dựa trên web. Đó là một thế giới có cả chức năng và kết quả của sự kết hợp lĩnh vực truyền thông và CNTT cũng như các nhu cầu của một xã hội toàn cầu có tính cạnh tranh cao.

Thiết kế form

Các form trong HTML5 đã có nhiều thay đổi lớn. Một số nhiệm vụ mà trước đây đòi hỏi phải dùng JavaScript thì bây giờ có thể dễ dàng được thực hiện mà không cần nó. Ví dụ trong bài viết này phân tích việc sử dụng bộ ứng dụng HTML5 về các đổi mới của form. Bước đầu tiên trong quá trình này, tất nhiên, là hoạch định form.

Bố cục của ví dụ form mà bạn sẽ phát triển được hiển thị trong Hình 1. Bạn sẽ phát triển ba vùng cho trang form này: vùng Header, vùng Form, và vùng Footer. Vùng Header chứa các tiêu đề và phụ đề trang được bọc trong các thẻ <header></header>. Ở dưới cùng của trang, vùng Footer có chứa thông tin bản quyền bên trong các thẻ <footer></footer>. Tôi đã nói về việc xây dựng một vùng Header và một vùng Footer trong ví dụ được cung cấp trong phần 1 của loạt bài này: Nếu bạn chưa quen với các thẻ <header><footer>, hãy tham khảo bài viết đó

Hình 1. Bố cục trang form
Hộp có một thẻ header, thẻ form,4 thẻ fieldsets, và thẻ footer.

Việc thảo luận các form này tập trung xoay quanh vào bốn thẻ:

  • <form>
  • <fieldset>
  • <label>
  • <input>

Trong HTML5, có hai thuộc tính mới đã được thêm vào thẻ <form> là: autocompletenovalidate. Thuộc tính autocomplete cho phép xuất hiện danh sách các gợi ý giống như khi tìm kiếm trong Google. Thuộc tính novalidate tắt tính năng xác nhận hợp lệ cho form, điều này rất có ích trong quá trình thử nghiệm.

Thẻ <fieldset> (thiết lập trường) có ba thuộc tính mới là: disable (vô hiệu hóa), name (tên), và form. Thuộc tính disable làm cho thẻ <fieldset> không hoạt động. Thuộc tính name đặt tên cho thẻ <fieldset>. Giá trị thuộc tính form là mã định danh (ID) của form này hay các form thuộc về thẻ <fieldset>. Trong HTML5, một thẻ <fieldset> có thể nằm ngoài form này hay các form mà nó thuộc về. Khi một thẻ <fieldset> được đặt bên ngoài form, bạn phải thiết lập thuộc tính form của thẻ <fieldset> để cho thẻ <fieldset> có thể được liên kết với form hoặc các form đúng.

Thẻ <label> (nhãn), định nghĩa một sự phân loại cho một phần tử đầu vào, có một thuộc tính mới là: form. Giá trị thuộc tính form là ID của form này hay các form mà thẻ <label> thuộc về. Thẻ <label> cũng có thể được đặt ở bên ngoài của form, vì vậy ở đây thuộc tính form cũng được sử dụng để liên kết <label> với form thích hợp.

Thẻ <input> (đầu vào) có một số kiểu mới cũng như các thuộc tính nâng cao khả năng sử dụng của form. HTML5 đã giới thiệu một số các kiểu đầu vào mới được thiết kế để tổ chức và phân loại dữ liệu, sao chép toàn bộ cách tiếp cận ngữ nghĩa của HTML5. Câu quan điểm cũ là form nên thực hiện theo chức năng là một cách tiếp cận thích hợp để mô tả các chức năng của các form HTML5.

Trong HTML5, trường <input> của form có thể nằm ngoài các thẻ <form>. Thuộc tính form xác định form này hay các form mà trường đầu vào thuộc về. Nó cũng xác định form mà nó thuộc về bằng cách đưa ra ID của form. Bảng 1 cho thấy các kiểu <input> mới.

Bảng 1. Các kiểu <input> mới
Các kiểu đầu vào
colordatedatetimedatetime-localmonth
weektimeemailnumberrange
searchtelurl  

Bảng 2 cho thấy các thuộc tính <input> mới.

Bảng 2. Các thuộc tính <input> mới
Các thuộc tính đầu vào
autocompleteautofocusformformactionformenctype
formmethodformnovalidateformtargetheightmax
minmultiplepatternplaceholderrequired
step    

Trong quá trình tạo trang web, bạn sử dụng hầu hết các kiểu và các thuộc tính này.


Tạo form

Trang web được hiển thị trong Hình 2 là Classical Music Place, một trang web cho phép tải về các tác phẩm của một số nhà soạn nhạc. Trang này cũng cho phép người dùng đăng lên các bản ghi âm của những bản nhạc cổ điển. Đây là trang bạn sẽ tạo ra.

Hình 2. Form Classical Music Place
Biểu mẫu với các phần customer, favorite composer, composers, và các phần các tệp tải lên với các trường tô đầy và thả xuống khác nhau.

Nhấp vào để xem ảnh lớn

Hình 2. Form Classical Music Place

Biểu mẫu với các phần customer, favorite composer, composers, và các phần các tệp tải lên với các trường tô đầy và thả xuống khác nhau.

Cấu tạo của biểu mẫu này bắt đầu bằng thẻ <form>. Trong ví dụ này, bạn sử dụng thuộc tính autocomplete mới, được đưa ra dưới đây:

<form id="orderForm" autocomplete="on"   action="javascript:alertValues();" method="get">

Một action JavaScript cũng được chứa trong thẻ <form>, mà tôi sẽ thảo luận trong phần sau.

Thẻ <form> có bốn thẻ <fieldset>, tương ứng với 4 mục thông tin như Hình 2: Tên, điện thoại, địa chỉ Email, và ngày. Thẻ <fieldset> tạo nhóm các thẻ nội dung trong biểu mẫu. Chúng ta hãy xem xét từng thẻ <fieldset> riêng biệt.

Thẻ <fieldset> đầu tiên

Thẻ <fieldset> đầu tiên chứa thông tin khách hàng (xem Hình 3). Nó có một trường Name, một trường Telephone, một trường Email address, và một trường Date. Trường Name có thuộc tính autofocus, cho phép bạn bắt đầu nhập văn bản vào trường này đầu tiên.

Hình 3. Các trường thông tin khách hàng
Các trường thông tin khách hàng name, telephone, email address và date.

Thẻ <fieldset> đầu tiên chứa một thẻ <legend>, một thẻ <label>, và một thẻ <input>, như trong Liệt kê 1. Trường Name, là kiểu text, có ba thuộc tính <input> mới là: placeholder, autofocus, và required.

Liệt kê 1. Trường Name
 <fieldset>
  <legend> Customer Info </legend>
  <p>
    <label>Name:
      <input id="name" name="name" type="text" placeholder="Enter your name" 
	                      autofocus required size="50">
    </label>
  </p>

Thuộc tính autofocus bảo đảm rằng trọng tâm đầu vào sẽ ở trên trường này khi trang được mở ra. Đây là một chức năng cho phép người dùng truy cập ngay lập tức vào biểu mẫu ngay khi trang được mở.

Thuộc tính placeholder đặt văn bản vào giữa các dấu ngoặc kép bên trong trường này dưới dạng văn bản màu xám nhạt. Thuộc tính placeholder sẽ gợi ý cho người dùng biết trường này phải chứa những gì và được hiển thị thế nào khi trường này rỗng. Tuy nhiên, vì các trường Name cũng có thuộc tính autofocus được thiết lập, nên khi bạn truy cập vào trang này, bạn không thể thấy dòng chữ placeholder. Lưu ý rằng trong Hình 3, trường Name không hiển thị placeholder, và nó được đóng khung trong phần đánh dấu màu vàng. Nếu bạn di chuyển đến một trường khác mà không nhập dữ liệu, thì văn bản placeholder sẽ được hiển thị. Khi bạn sử dụng thuộc tính autofocus với thuộc tính placeholder, văn bản placeholder sẽ biến mất do trọng tâm đang được đặt vào trường này.

Thuộc tính required tạo điều kiện thuận lợi cho việc đặt một trường bắt buộc như là một điều kiện tiên quyết để hoàn thành biểu mẫu. Điều này là hợp lệ với các trường văn bản, tìm kiếm, URL, điện thoại, email, mật khẩu, các nút chọn ngày, số, hộp kiểm tra, nút tròn, và các trường tập tin.

Trường Telephone, là kiểu tel, có các thuộc tính required, placeholder, size, và pattern, như trong Liệt kê 2. Kiểu tel là một trường văn bản được thiết kế để chứa các số điện thoại. Trong ví dụ này, trường Telephone có sự hạn chế theo mẫu cần phải được tuân thủ nghiêm ngặt, vì hệ thống sẽ không cho phép bạn đăng tải biểu mẫu cho đến khi bạn sử dụng đúng ký tự cho phép. Thuộc tính placeholder dùng cho trường Telephone sẽ gợi ý thông tin như thế nào là hợp lệ cho bạn.

Trường pattern mô phỏng các chức năng của một biểu thức JavaScript chính quy (regex) truyền thống. Đầu vào phải khớp với cấu trúc mẫu của biểu thức chính quy được định nghĩa trước khi nó được xác nhận hợp lệ. Trường này làm việc với các kiểu text, search, url, telephone, email, và password.

Liệt kê 2. Trường Telephone
 <p>
    <label>Telephone:
      <input id="tel" name="telephone" type="tel" placeholder="Pattern: 1-234-567-8910" 
	       required size="50" pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
    </label>
  </p>

Trường địa chỉ Email là kiểu email, như trong Liệt kê 3. Địa chỉ email được xác nhận hợp lệ tự động mà không cần phải sử dụng một mẫu: Xác nhận hợp lệ là một phần của HTML5. Nếu không trình bày địa chỉ email này theo định dạng đúng, thì biểu mẫu không thể được trình lên.

Liệt kê 3. Trường địa chỉ Email
  <p>
    <label>Email address:
      <input id="email" name="email" type="email" placeholder="Enter your email address" 
	            required size="50">
    </label>
  </p>

Mục nhập cuối cùng trong thẻ <fieldset> này là trường Date. Kiểu date cung cấp một bảng lịch để người dùng chọn ngày trong trình duyệt Opera nhưng lại tạo ra một spinner trong Google Chrome, như đã thấy trong Hình 3. Hình 4 cho thấy trình duyệt Opera xử lý trường Date này như thế nào. Lưu ý rằng trong Opera, các góc thiết lập trường này không được làm tròn, mặc dù đã sử dụng cùng một bảng định kiểu để làm tròn các góc như trong Chrome.

Hình 4. Trường Date
Trường Date với mịit lịc để chọn các ngày.

Liệt kê 4 cho thấy đoạn mã được sử dụng để tạo nút chọn ngày.

Liệt kê 4. Trường Date
    <p>
      <label>Date: <input type="date">
      </label>
    </p>
 </fieldset>

Bạn có thể tạo ra một bản ghi cho bất kỳ ngày nào. Bạn thậm chí có thể chia nó theo giờ. Dưới đây là các kiểu ngày giờ mà bạn có thể tạo:

  • date. Chọn ngày, tháng, và năm
  • month. Chọn tháng và năm
  • week. Chọn tuần và năm
  • time. Chọn thời gian (giờ và phút)
  • datetime. Chọn thời gian, ngày, tháng, và năm (thời gian UTC)
  • datetime-local. Chọn thời gian, ngày, tháng, và năm (thời gian địa phương)

Thẻ <fieldset> thứ hai

Thẻ <fieldset> thứ hai chứa một thẻ <input> có một thuộc tính list và một thẻ <datalist>. Thuộc tính list quy định một <datalist> của trường đầu vào. Thẻ <datalist> cung cấp một danh sách các tùy chọn trường đầu vào. Thuộc tính list làm việc với các kiểu <input> sau: text, search, url, telephone, email, date pickers, number, range, và color.

Thẻ <datalist> được hiển thị trong một danh sách thả xuống, như trong Hình 5. Ảnh này được chụp từ trình duyệt Opera. Trong Chrome, danh sách này được hiển thị như một hộp văn bản đơn giản. Người dùng sẽ không được trình bày bằng danh sách này.

Hình 5. Trường Favorites
Trường Favorites composer với một danh sách các nhà soạn nhạc thả xuống.

Liệt kê 5 cung cấp thiết lập trường để tạo ra phần Favorite Composer.

Liệt kê 5. Trường Favorite Composer
<fieldset>
  <legend> Favorite Composer </legend>
  <p>
    <label>
  <input type="text" name="favorites" list="composers">
  <datalist id="composers">
   <option value="Bach">
   <option value="Beethoven">
   <option value="Brahms">
   <option value="Chopin">
   <option value="Mendelssohn">
  </datalist>
 </label>
</p>
</fieldset>

Thẻ <fieldset> thứ ba

Thẻ <fieldset> thứ ba hiển thị một danh sách các nhà soạn nhạc, theo sau là một trường số chỉ rõ có bao nhiêu tác phẩm ứng với mỗi nhà soạn nhạc được liệt kê. Hình 6 cho thấy điều này.

Hình 6. Các trường Composers (Các nhà soạn nhạc)
Phần Composers section có 5 trường, một trường cho từng nhà soạn nhạc, có một danh sách thả xuống.

Ví dụ, Bach có năm tác phẩm, và Beethoven có 10 tác phẩm. Liệt kê 6 cho thấy các giá trị tối đa cho mỗi nhà soạn nhạc. Trường số sẽ không chấp nhận nhiều hơn giá trị tối đa khi bạn đăng tải biểu mẫu này. Khi được đăng tải, trường này sẽ phản hồi với các giá trị ngoài phạm vi hay không đúng bằng cách nhắc bạn sửa lại thông tin đã nhập cho phù hợp với các giới hạn số chấp nhận được của trường này.

Kiểu number tạo ra một trường nút quay tròn cho đầu vào. Sử dụng thuộc tính min, max, và step được sử dụng với kiểu số number. Giá trị bước mặc định là 1. Các thuộc tính min, max, và step được sử dụng với các ràng buộc số, phạm vi, hoặc đầu vào nút chọn ngày. Thuộc tính max xác định giá trị tối đa cho phép đối với trường đầu vào. Thuộc tính min xác định giá trị tối thiểu cho phép đối với trường đầu vào. Thuộc tính step xác định bước tăng hợp lệ.

Liệt kê 6. Các trường Composers
<fieldset>
  <legend>Composers</legend>
  <p>
    <label>
      Bach: <input name="form_number" id="form_number" type="number" min="1" max="5" >
    </label>
  </p>
  <p>
    <label>
      Beethoven: <input name="form_number" id="form_number" type="number" 
	      min="1" max="10" >
    </label>
  </p>
  <p>
    <label>
      Brahms: <input name="form_number" id="form_number" type="number" min="1" max="7" >
    </label>
  </p>
  <p>
    <label>
      Chopin: <input name="form_number" id="form_number" type="number" min="1" max="10" >
    </label>
  </p>
  <p>
    <label>
      Mendelssohn: <input name="form_number" id="form_number" type="number" 
	     min="1" max="4">
    </label>
  </p>

 </fieldset>

Thẻ <fieldset> thứ tư

Thẻ <fieldset> thứ tư chứa kiểu <input>file và thuộc tính multiple, như trong Hình 7. Thuộc tính multiple quy định rằng một trường đầu vào có thể chọn nhiều giá trị từ một danh sách dữ liệu hoặc danh sách tệp. Trong ví dụ này, một người dùng có thể chọn nhiều tệp để tải lên.

Hình 7. Trường Upload
Phần Upload có một nút chọn tệp.

Mã cho kiểu tệp và thuộc tính multiple được hiển thị trong Liệt kê 7.

Liệt kê 7. Trường Upload (Tải lên)
 <fieldset>
  <legend> Upload file(s) </legend>
  <p>Upload one of your orchestra's file(s) for inclusion in our library</p>
    <p><label> 
      <input type="file" multiple="multiple" /> 
    </label>
  </p>
 </fieldset>

Nút Submit (đăng tải) sử dụng các thuộc tính height (chiều cao) và width (chiều rộng), như trong Liệt kê 8. Bạn sử dụng các thuộc tính này để thiết lập chiều cao và chiều rộng của kiểu đầu vào image. Khi bạn thiết lập các thuộc tính này, vùng không gian của trang web dành cho hình ảnh không bị thay đổi do bị các ràng buộc về các kích thước chiều rộng và chiều cao đặt sẵn, để làm cho việc nạp trang dễ dàng nhằm nâng cao hiệu quả hiển thị trang.

Liệt kê 8. Nút Submit
<input type="image" src="submitbutton.png" alt="Submit" width="100" height="45" />
</form>

JavaScript và CSS3

Không thể trình diễn HTML5 mà không có CSS3. Và, mặc dù HTML5 đã phủ nhận sự cần thiết đối với một số mã JavaScript, thì JavaScript vẫn là một công cụ có giá trị. Sau đây là các tệp mã JavaScript và CSS3 được sử dụng để tạo các biểu mẫu ví dụ.

Mã JavaScript là một hộp cảnh báo đơn giản trả về ba trường cần thiết, như trong Liệt kê 9. Mặc dù đoạn mã JavaScript được sử dụng ở đây chỉ có một dòng, những nó đã được đặt trong một tệp JavaScript riêng biệt, sau đây là cách tốt nhất để sử dụng nó.

Liệt kê 9. Mã JavaScript của biểu mẫu ví dụ
function alertValues()
{
alert("Customer information: " + "\n     " + fullname.value + "\n     " 
                 + tel.value + "\n     " + email.value);  
}

Liệt kê 10 cho thấy mã CSS3 định dạng biểu mẫu ví dụ. Thông tin <header><footer> không có ở đây.

Liệt kê 10. Biểu mẫu ví dụ CSS3
form {
  width: 550px;
  margin: 0 0 0 0 ;
  padding: 50px 60px;
  background-color: #2d2d2d;
  border-radius: 20px;
}

fieldset {
  padding: 0 20px 20px;
  margin: 0 0 30px ;
  border: 2px solid #ffffff;
  background: #B8B8B8 ;
  border-radius: 10px;
}

legend {
  color: #ffffff;
  background: #990033;
  font-size: 0.9em;
  font-weight: bold;
  text-align: left;
  padding: 5px;
  margin: 0;
  width: 10em;
  border: 2px solid #660033;
  border-radius: 5px;
 }

label {
  display: block;
  float: left;
  clear: left;
  text-align: left;
  width: 100%;
  padding: .4em 0 0 0;
  margin: .15em 0 0 0;
}

Kết luận

Chìa khóa cho thành công rõ ràng cho cá nhân và tổ chức là truyền thông. Các nút điều khiển của biểu mẫu và các hướng dẫn dựng trang nói chung là quan trọng cho quá trình này, và HTML5 đã cung cấp nhiều công cụ mạnh mẽ thích hợp. Những người được chuẩn bị cho tương lai — ngay lúc này — sẽ được hưởng lợi; còn những người không được chuẩn bị sẽ phải chịu rủi ro nghiêm trọng bởi tốc độ phát triển và các yêu cầu của xã hội toàn cầu, trung tâm mạng, một thế giới-web.


Tải về

Mô tảTênKích thước
Example HTML, CSS3 and JavaScript files HTML5Forms.zip10KB

Tài nguyên

Học tập

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=SOA và dịch vụ Web
ArticleID=775305
ArticleTitle=Các quy tắc cơ bản của HTML5, Phần 2: Thiết lập các đầu vào
publish-date=04222013