Hướng dẫn học CSS3 & HTML5 (Phần 2: Thiết lập các đầu vào)
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.
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.
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ư email và telephone, 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> và <footer>, hãy tham khảo bài viết đó
Hình 1. Bố cục trang form
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à: autocomplete và novalidate. 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 |
||||
|
color |
date |
datetime |
datetime-local |
month |
|
week |
time |
|
number |
range |
|
search |
tel |
url |
|
|
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 |
||||
|
autocomplete |
autofocus |
form |
formaction |
formenctype |
|
formmethod |
formnovalidate |
formtarget |
height |
max |
|
min |
multiple |
pattern |
placeholder |
required |
|
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
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ình2: 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
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ínhplaceholder 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ínhplaceholder, 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
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
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)
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
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> 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;
}
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.