04/05/2012 09:48:18 AM

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

(Lượt xem: 3305)
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. Bài viết này là bài thứ hai trong một loạt bài bốn phần được thiết kế để làm sáng tỏ những thay đổi trong HTML5,Vai trò của JavaScript 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 biểu mẫu, 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 thứ hai này giới thiệu các khái niệm về các nút điều khiển của biểu mẫu HTML5 và đề cập đến vvà CSS3.
Mục lục

Thiết kế biểu mẫu
Tạo biểu mẫu
Kết luận
Tải về
Tài nguyên
Đôi nét về tác giả

Các từ viết tắt thông dụng
  • API: Giao diện lập trình ứng dụng
  • CSS3: Bảng định kiểu xếp chồng phiên bản 3
  • GUI: Giao diện người dùng đồ họa
  • HTML: Ngôn ngữ đánh dấu siêu văn bản
  • HTML5: HTML phiên bản 5
  • SQL: Ngôn ngữ truy vấn có cấu trúc
  • UI: Giao diện người dùng
Tất cả 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, chẳng có một ô cửa kỹ thuật số thành công nào mà khách hàng tiềm năng của bạn có thể sử dụng — hoặc đượ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.
Điểm chính của sự tương tác là các biểu mẫu 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 biểu mẫu là nhân tố chính để tiếp thêm năng lượng cho sự tương tác giữa các chủ sở hữu hoặc các đại lý trang web và những người dùng trang web, và như vậy, chúng cực kỳ quan trọng cho việc thiết kế và phát triển một trang web.
Trung tâm của điểm chính đó được phát hiện ra trong các nút điều khiển — các nút tròn, các hộp kiểm tra, các hộp văn bản, các nút quay tròn số, và các thứ tương tự. Các phần tử này cần thiết cho việc đàm thoại của người dùng trang web với trang web. Nói cách khác, không có các nút điều khiển chức năng đầy đủ (cả hai về hoạt động "cơ học" của nút điều khiển và sự thích hợp của nút điều khiển cho nhiệm vụ cụ thể), thì không thể có đàm thoại, và do đó, không có sự trao đổi tiềm năng nào.
Đ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 các trang, và cách các trang được thiết lập tất cả đề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 tùy chọn nút điều khiển của biểu mẫu đượ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à lòng tin chung về điện toán dựa trên web hợp lý — 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, cách sử dụng của nó là 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 ở đây có trợ giúp. Các kiểu HTML5, chẳng hạn như email và telephone, làm cho các tùy chọn truyền thông rộng lớn dễ dà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 đối với một cuộc đàm thoại trong suốt 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ả hai một chức năng và một bắt nguồn từ cuộc hôn nhân đang phát triển giữa các yếu tố về 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ế biểu mẫu

Trong HTML5, các biểu mẫu đã được coi là việc tân trang lớn. Một số nhiệm vụ mà trước đây đòi hỏi mã hóa JavaScript thì bây giờ có thể dễ dàng được thực hiện mà không cần nó. Ví dụ biểu mẫu của 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 biểu mẫu. Bước đầu tiên trong quá trình này, tất nhiên, là hoạch định biểu mẫu.
Bố cục của ví dụ biểu mẫu 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 biểu mẫu này: vùng Header, vùng Form (Biểu mẫu), 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> và <footer>, hãy tham khảo bài viết đó

Hình 1. Bố trí trang biểu mẫu


Cuộc thảo luận các biểu mẫu này tập trung 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> (biểu mẫu): autocomplete và novalidate. Thuộc tính autocomplete cho phép các danh sách đề xuất thả xuống xuất hiện trên các trang web giống như Google. Thuộc tính novalidate tắt xác nhận hợp lệ cho một biểu mẫu, 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 biểu mẫu này hay các biểu mẫu thuộc về thẻ <fieldset>. Trong HTML5, một thẻ <fieldset> có thể nằm ngoài biểu mẫu này hay các biểu mẫu mà nó thuộc về. Khi một thẻ <fieldset> được đặt bên ngoài của biểu mẫu, 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 biểu mẫu hoặc các biểu mẫu đú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 biểu mẫu này hay các biểu mẫu mà thẻ <label> thuộc về. Thẻ <label> cũng có thể được đặt ở bên ngoài của biểu mẫu, vì vậy ở đây thuộc tính form cũng được sử dụng để liên kết <label> với biểu mẫu 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 biểu mẫu. 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 châm ngôn cũ là biểu mẫu 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 biểu mẫu HTML5.
Trong HTML5, trường <input> của biểu mẫu có thể nằm ngoài các thẻ <form>. Thuộc tính form xác định biểu mẫu này hay các biểu mẫu mà trường đầu vào thuộc về. Nó cũng xác định biểu mẫu mà nó thuộc về bằng cách đưa ra ID của biểu mẫu. Bảng 1 cho thấy các kiểu <input> mới.

Bảng 1. Các kiểu <input>

mớicolor (màu)     date (ngày)  datetime (ngày giờ)     datetime-local (ngày giờ-địa phương)   month (tháng)
  week (tuần)   time (thời gian)   email   number (số)   range (phạm vi)
  search (tìm kiếm)   tel (điện thoại)   url    

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

Bảng 2. Các thuộc tính <input> mới
autocomplete (hoàn thành tự động)   autofocus (trọng tâm tự động)   form (biểu mẫu)   formaction (hành động biểu mẫu)     formenctype (mã hóa biểu mẫu)
  formmethod (phương thức biểu mẫu)   formnovalidate (biểu thức không xác nhận hợp lệ)   formtarget (đích biểu mẫu)   height (độ cao)   max (tối đa)
  min (tối thiểu)   multiple (nhiều)   pattern (mẫu)   placeholder (giữ chỗ)   required (cần thiết)
  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.
Về đầu trang

Tạo biểu mẫu

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

Hình 2. Biểu mẫu Điểm âm nhạc cổ điển


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">
grave;nh động 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>, được phác ra trực quan bởi các vùng màu xám trong Hình 2: Tên, điện thoại, địa chỉ Email, và ngày. Thẻ <fieldset> tạo nhóm thẻ như 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 mà không cần phải nhấn vào trường này.

Hình 3. Các trường thông tin khách hàng


Thẻ <fieldset> đầu tiên chứa một thẻ <legend> (ghi chú), 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 làm cho trang này tập trung vào ngay khi nó tải, cho phép người dùng truy cập ngay lập tức vào biểu mẫu đó.
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ẽ nó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 nhập vào trang này, bạn không thể thấy văn bản thực sự. Lưu ý rằng trong Hình 3, trường Name không hiển thị giữ chỗ, 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 giữ chỗ 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 giữ chỗ sẽ biến mất do trong tâm được đượ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 để trình lên 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.
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 trình lên cho đến khi bạn sử dụng các mẫu ký tự đúng. Trường placeholder dùng cho điện thoại thiết lập mẫu dựa vào bạn dùng đầu vào nào
Trường pattern mô phỏng các chức năng của một biểu thức chính quy (regex) JavaScript 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ó thể đượ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 nút chọn lịch để chọn ngày trong trình duyệt Opera nhưng tạo ra một nút quay tròn trong Google Chrome, như đã thấy trong Hình 3. Hình 4 cho thấy biểu diễn Opera của trang web này có nút chọn trường Date được hiển thị. 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

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 lấy trong 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


Liệt kê 5 cung cấp thiết lập trường để tạo ra phần Favorite Composer (Nhà soạn nhạc yêu thích).

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 có sẵn với mỗi nhà soạn nhạc được liệt kê. Hình 6 cho thấy phần này.

Hình 6. Các trường Composers (Các nhà soạn nhạc)


Ví dụ, Bạch 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 trình lên biểu mẫu này. Khi được trình lên, trường này đáp ứng với các giá trị ngoài dải, không đúng bằng cách nhắc bạn sửa lại đầu vào cho nó 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


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 (Trình lên) 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ể thực hiện biểu 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ác thực hành 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> và <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;
}

Về đầu trang

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ẽ khác thường thích hợp cho nhiệm vụ này. 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.
Về đầu trang

Tải về

  Mô tả   Tên Kích thước   Phương thức tải  
  Example HTML , CSS3 and JavaScript files   HTML5Forms.zip   10KB   HTTP

Thông tin về phương thức tải

Tài nguyên

Học tập

  • Tạo các trang web hiện đại bằng cách sử dụng HTML5 và CSS3 (developerWorks, 03.2010) là một bài viết HTML5 và CSS3 nhiều thành phần.
  • Trong bài Các phần tử mới trong HTML 5 (developerWorks, 08.2007), bạn sẽ tìm thấy thông tin cho một số các phần tử mới trong HTML5.
  • Trang web <html>5doctor cung cấp một cái nhìn tuyệt vời về những xu hướng hiện tại trong HTML5 hiện nay.
  • Tham khảo thẻ HTML5 của W3Schools.com cung cấp một danh sách rộng rãi của các thẻ, các định nghĩa, và các ví dụ HTML5.
  • Trang web WHATWG cung cấp thông tin chi tiết cho đặc tả HTML5.
  • Vùng phát triển Web chuyên về các bài viết trình bày các giải pháp dựa trên web khác nhau.
  • Theo sát với các sự kiện kỹ thuật và các webcast của developerWorks.
  • Các trình diễn theo yêu cầu của developerWorks: Xem các trình diễn khác nhau từ cài đặt sản phẩm và thiết lập các trình diễn cho những người mới bắt đầu đến các chức năng tiên tiến cho các nhà phát triển có kinh nghiệm.
  • Theo dõi developerWorks trên Twitter.

Thảo luận

  • Tạo hồ sơ cá nhân developerWorks của bạn ngay hôm nay và thiết lập một danh sách theo dõi về HTML. Kết nối và theo sát kết nối với cộng đồng developerWorks
  • Tìm các thành viên developerWorks khác quan tâm đến phát triển web.
  • Chia sẻ những gì bạn biết: Tham gia một trong các nhóm developerWorks của chúng tôi có tập trung vào các chủ đề web.
  • Roland Barcia nói về Web 2.0 và phần mềm trung gian trong blog của mình.
  • Theo dõi các đánh dấu trang được chia sẻ về các chủ đề web của các thành viên developerWorks.
  • Nhận được các câu trả lời nhanh chóng: Hãy truy cập vào Diễn đàn về các ứng dụng Web 2.0.
  • Nhận được các câu trả lời nhanh chóng: Hãy truy cập vào Diễn đàn Ajax.
Về đầu trang

Đôi nét về tác giả

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.
Về đầu trang
  • Mẫu giao diện web thiết kế bởi Topweb
Tài nguyên





Xem tất cả
Tư vấn khách hàng
Điện thoại để được tư vấn tốt nhất
0973668377