Bài 21: HTML và CSS từ Zero đến Hero

  

Các mục chọn kiểu trình đơn

Ở các phần trước đã tìm hiểu các công cụ cho phép người dùng có thể lựa chọn như: datalist, radio, checkbox, phần này sẽ tìm hiểu thêm một số công cụ chọn khác, đó là sử dụng trình đơn xổ (drop-down menu), hoặc trình đơn cuộn (scrolling menu). Cả hai loại trình đơn này đều được tạo ra bằng phần tử select.

Mục chọn kiểu trình đơn xổ

Ở chế độ mặc định, phần tử select được hiển thị dưới dạng một trình đơn xổ, khi đó giá trị của thuộc tính size sẽ là 1. Thuộc tính size được sử dụng để xác định số mục mà người dùng được phép chọn trong trình đơn. Vậy, trong trình đơn xổ, người dùng chỉ được phép chọn một mục tại một thời điểm.

Ví dụ,

    <p>Trong các quyển sách sau, bạn thích quyển nào nhất?

    <select name="thich-nhat">

      <option value=“khuyen-hoc”>Khuyến học</option>

      <option>Đúng việc</option>

      <option>Khởi hành</option>

      <option>Trên đường băng</option>

      <option>Nhà giả kim</option>

    </select></p>

Từ ví dụ trên có thể thấy, vai trò của phần tử select chính là thùng chứa (container), mỗi mục  chọn được tạo ra bằng phần tử option, khi người dùng gửi form, nội dung của phần tử option sẽ được gửi về server thông qua thuộc tính name của phần tử select. Nếu không muốn gửi nội dung của phần tử option về server thì có thể thiết lập thuộc tính value để thay thế, như ở mục chọn đầu tiên của ví dụ trên, nếu được chọn, giá trị khuyen-hoc sẽ được gửi về server chứ không phải Khuyến học.

Mục chọn kiểu trình đơn cuộn

Cách tạo “mục chọn kiểu trình đơn cuộn” cũng tương tự như “mục chọn kiểu trình đơn xổ”, chỉ khác là giá trị của thuộc tính size phải lớn hơn 1.

Ví dụ,

<p>Trong các quyển sách sau, bạn thích quyển nào nhất?

    <select name="thich-nhat" size="4" multiple>

      <option>Khuyến học</option>

      <option selected>Đúng việc</option>

      <option selected>Khởi hành</option>

      <option>Trên đường băng</option>

      <option>Nhà giả kim</option>

    </select></p>

Ở ví dụ trên có thêm thuộc tính multiple, thuộc tính này cho phép người dùng chọn cùng lúc nhiều mục (nhấn phím ctrl trong khi chọn), trong “mục chọn kiểu trình đơn xổ” không thể sử dụng thuộc tính này.

Để thiết lập chế độ chọn mặc định cho control, thêm thuộc tính selected vào phần tử option tương ứng, mục nào có thuộc tính này sẽ được tô đậm hơn so với các mục còn lại.

Phân nhóm các mục chọn

Để phân nhóm các mục chọn, sử dụng phần tử optgroup, tên của nhóm được đặt trong thuộc tính label (đừng nhầm thuộc tính label với phần tử label). Ví dụ,

<p>Trong các quyển sách sau, bạn thích quyển nào nhất?

      <select name="thich-nhat" size="7" multiple>

        <optgroup label="Sách dịch">

          <option>Khuyến học</option>

          <option selected>Khởi hành</option>

          <option>Nhà giả kim</option>

        </optgroup>

        <optgroup label="Sách Việt">

          <option>Trên đường băng</option>

          <option selected>Đúng việc</option>

        </optgroup>

      </select></p>

Exercise 9-3. Adding a menu (p197)

Đính kèm tập tin

Web form không chỉ cho người dùng nhập thông tin mà nó còn cho đính kèm các tập tin từ đĩa của người dùng. Ví dụ, trang web của công ty in ấn sẽ cho khách hàng gửi các tập tin cần in của họ, hoặc một tạp chí sẽ cho người dùng đăng ảnh dự thi.

Sử dụng input với type=“file” để tạo một control cho người dùng đính kèm tập tin. Ví dụ,

<form action="/client.php" method="POST" enctype="multipart/form-data">

    <label>Gửi ảnh đại diện của bạn

      <em>(tùy chọn)</em><br>

      <input type="file" name="photo" size="28"></label>

</form>

Giao diện để đính kèm tập tin rất đa dạng, tùy thuộc vào trình duyệt và hệ điều hành. Nó có thể là một trường nhập văn bản với một nút bấm, hoặc đơn giản chỉ là một nút bấm để tìm tới tập tin. Thuộc tính size được sử dụng để xác định độ rộng của trường nhập văn bản.

Lưu ý quan trọng, để có thể đính kèm tập tin, form bắt buộc phải có thuộc tính enctype=“multipart/form-data”, enctype là viết tắt của encoding type; thuộc tính method của form phải là POST.

Control ẩn

Trong một số trường hợp, lập trình viên muốn dùng form để gửi ngầm dữ liệu về chương trình/ứng dụng web bên server, bên cạnh dữ liệu do người dùng nhập vào, để làm việc này có thể sử dụng control ẩn. Với control ẩn, dữ liệu sẽ được gửi về server khi người dùng gửi form (submit), tuy nhiên, control ẩn sẽ không được hiển thị ra ngoài giao diện.

Để tạo ra control ẩn, sử dụng phần tử input với thuộc tính type=“hidden”. Mục đích duy nhất của control ẩn là gửi một cặp dữ liệu, có kiểu name/value về server khi người dùng gửi form.

Ví dụ,

<input type="hidden" name="step" value="1">

Control date và time

Nếu đã từng đặt phòng khách sạn, hoặc đặt vé máy bay thì sẽ rất quen thuộc với chức năng chọn ngày tháng. Để có một giao diện nhập ngày tháng thân thiện và tiện lợi, trước đây thường sử dụng JavaScript, tuy nhiên HTML5 đã cung cấp một số các control để làm việc này. Vì vấn đề hỗ trợ và tương thích với HTML5 của các trình duyệt là khác nhau, nên cần tìm hiểu thêm khi sử dụng các control liên quan đến date và time.

Bảng sau là một số các input liên quan đến ngày tháng, thời gian,

Input	Chức năng
<input type="date" name="ngay-dat-ve" value="2018-05-07">	Hiển thị một control để nhập ngày tháng (theo định dạng năm-tháng-ngày: YYYY-MM-DD), kiểu giống một trang lịch (calendar)
<input type="time" name="gio-dat-ve" value="10:53:30">	Hiển thị một control để nhập thời gian (giờ, phút, giây), không có thông tin xác định múi giờ (time zone). Định dạng hh:mm:ss
<input type="datetime-local" name="ngay-gio-dat-ve" value="2018-05-07T13:54:02">	Hiển thị một control để nhập ngày tháng và thời gian, không có thông tin múi giờ. (YYYY-MM-DDThh:mm:ss)
<input type="month" name="thang" value="2018-05">	Hiển thị một control để nhập tháng trong năm
<input type="week" name="tuan">	Hiển thị một control để nhập tuần trong năm

Nhập số

Để tạo control nhập số, HTML5 sử dụng phần tử input với type là number hoặc range.

Ví dụ một control nhập số với type=“number” và giá trị nhập vào phải nằm trong khoảng [0, 1000],

<label>Số sách bạn đã đọc: <input type="number" name="so-luong" min="0" max="1000"></label>

Ví dụ một control nhập số với type=“range” và giá trị nằm trong khoảng [0, 10], độ tăng/giảm mỗi mức của thanh trượt là 0.5.

<label>Mức độ hài lòng (0 tới 10): <input type="range" name="hai-long" min="0" max="10" step=".5"></label>

Bảng màu

Để hiển thị một bảng màu cho phép người dùng chọn từng màu cụ thể, HTML5 sử dụng phần tử input với type=“color”. Giá trị màu được xác định bằng RGB hệ 16 (#CCAA23).

Ví dụ,

<label>Bạn thích màu gì? <input type="color" name="mau"></label>

2.6.5       Tăng tính ngữ nghĩa cho form

Với những đối tượng người dùng không thể nhìn thấy trình duyệt (ví dụ các hệ xử lý tự động), thì việc giúp các đối tượng này có khả năng hiểu và làm việc tiện lợi với form là một yêu cầu cần thiết. Ba phần tử: label, fieldset, và legend sẽ giúp tăng thêm tính ngữ nghĩa và tính gắn kết của các thành phần trên một form; ngoài ra, nó còn giúp việc CSS được dễ dàng hơn.

Phần tử label

Khi quan sát một trường nhập liệu trên trình duyệt, ví dụ trường nhập họ tên, có thể thấy dòng chữ “Họ tên” và trường để nhập họ tên nằm ngay cạnh nhau, tuy nhiên, trong mã nguồn, đây là hai phần tử riêng biệt. Trong đó, phần tử label chứa phần văn bản để mô tả ngữ nghĩa cho một control khác.

Mỗi label được kết hợp với duy nhất một control, việc kết hợp này có thể thực hiện bằng hai cách.

– Cách một, kết hợp ngầm (implicit association) bằng cách đặt control và mô tả của nó trong phần tử label. Ví dụ,

<ol>

        <li><label><input type="radio" name="tuoi" value="duoi24" checked> dưới

        24</label></li>

        <li><label><input type="radio" name="tuoi" value="25-34"> 25 tới 34</label></li>

        <li><label><input type="radio" name="tuoi" value="35-44"> 35 tới 44</label></li>

        <li><label><input type="radio" name="tuoi" value="tren45"> 45+</label></li>

</ol>  

– Cách hai, kết hợp tường minh (explicit association), sử dụng thuộc tính for của label để tham chiếu tới id của control. Cách này có ưu điểm là tách biệt hai phần tử label và input, giúp dễ dàng thực hiện căn chỉnh, định dạng bằng CSS.

Ví dụ,

      <label for="form-ho-ten">Họ tên: </label>

      <input type="text" name="ho-ten" id="form-ho-ten"><br>

      <label for="form-email">Email: </label>

      <input type="text" name="email" id="form-email">

Sử dụng label còn có một ưu điểm nữa là người dùng chỉ việc bấm chuột hoặc chạm vào label để lựa chọn control tương ứng.

Lưu ý: để phân biệt các id của form với các id của trang, nên thêm tiếp đầu ngữ “form-” vào trước id của form; ngoài ra, nếu muốn cụ thể hơn có thể thêm tên của form, ví dụ,

<form id="form-login">

        <input id="form-login-ho-ten">

        <input id="form-login-email">

Phần tử fieldset và legend

Phần tử fieldset được sử dụng để nhóm các control có liên quan đến nhau, để chú thích cho nhóm các control này sử dụng phần tử legend. Ví dụ,

    <fieldset>

      <legend>Bạn bao nhiêu tuổi?</legend>

      <ol>

        <li><label><input type="radio" name="tuoi" value="duoi24" checked> dưới

        24</label></li>

        <li><label><input type="radio" name="tuoi" value="25-34"> 25 tới 34</label></li>

        <li><label><input type="radio" name="tuoi" value="35-44"> 35 tới 44</label></li>

        <li><label><input type="radio" name="tuoi" value="tren45"> 45+</label></li>

      </ol>        

    </fieldset>

Exercise 9-4. Labels and fieldsets (p205)

2.6.6       Tạo bố cục và thiết kế form

Việc thiết kế form không tốt ảnh hưởng rất nhiều đến trải nghiệm người dùng, làm giảm hiệu quả của một website. Nghĩa là, giao diện không tốt cũng là một trong những nguyên nhân làm mất khách hàng, mất lượng người truy cập. Cần đọc thêm các tài liệu chuyên về thiết kế form để có được kĩ năng cần thiết. Dưới đây là một số lưu ý khi thiết kế form:

– Càng ít hỏi người dùng càng tốt

Mỗi khi cần sử dụng form để lấy thông tin từ người dùng, nên bỏ đi các yêu cầu không cần thiết, chỉ giữ lại những thông tin bắt buộc phải có, mục đích là để form càng đơn giản càng tốt, người dùng càng nhanh hoàn thành việc khai báo thông tin càng tốt. Nếu có cách khác để lấy được thông tin từ người dùng thì không nhất thiết phải yêu cầu họ cung cấp thêm một lần nữa, ví dụ, nếu đã có mã số sinh viên thì có thể trích từ đó ra được năm nhập học.

Có những thông tin cũng cần thiết nhưng không bắt buộc thì có thể hỏi người dùng sau này, cố gắng nhanh nhất để họ có thể submit form và website có được mối liên hệ với họ.

– Đặt label ở vị trí phù hợp

Vị trí đặt label có ảnh hưởng tới thời gian người dùng điền thông tin vào form. Nói chung, người dùng càng ít phải nhìn sang hai bên thì việc đọc và thu nhận thông tin càng nhanh. Do vậy, nếu muốn người dùng nhập thông tin nhanh thì nên đặt label ở phía trên của input và căn lề thống nhất cho tất cả các label, cách này cũng rất thích hợp khi label có nội dung dài ngắn khác nhau, hoặc tạo form cho các thiết bị có màn hình nhỏ và hẹp. Hạn chế của cách này là làm cho form bị kéo dài.

Đặt label ở bên trái control, và căn trái là cách làm cho người dùng nhập thông tin chậm nhất. Nên sử dụng cách này nếu muốn website có thời gian để kiểm tra các yêu cầu khi người dùng nhập dữ liệu (ví dụ tính hợp lệ của dữ liệu, hoặc các trường bắt buộc).

– Chọn loại input cẩn thận

Như đã đề cập, để cho người dùng có thể thực hiện các chọn lựa, lập trình viên có thể sử dụng trình đơn xổ (drop-down menu) hoặc dùng các checkbox. Trong thực tế, để làm một công việc, có thể sử dụng nhiều loại input khác nhau, khi đó, cần phải phân tích kĩ để lựa chọn input phù hợp nhất. Có thể cho dùng thử để kiểm tra tính khả thi của mỗi giải pháp.

– Nhóm các input có liên quan  

Người dùng sẽ dễ thao tác với form hơn, khi các thành phần của nó được nhóm lại với nhau theo từng chủ để hoặc có chủ ý cụ thể. Ví dụ, thông tin liên hệ của người dùng sẽ là một nhóm, với một số các trường nhập liệu, tùy chọn. Giữa các nhóm cần có dấu hiệu để nhận biết, như đường kẻ hoặc khoảng trắng. Tuy nhiên, đừng quá lạm dụng cách làm này.

– Để ý đến hành vi sử dụng

Sau khi người dùng đã điền các thông tin vào form, việc tiếp theo là bấm vào một nút để hoàn thành bước hiện tại và chuyển sang bước tiếp theo, đây được gọi là hoạt động chính. Trong trường hợp này, nút bấm thường là loại nút submit, vì vậy, nên làm các nút bấm này nổi bật và dễ thấy hơn so với các nút còn lại, vị trí của nút thường được đặt theo trục chính của form.

Tuy nhiên, form cũng nên cho phép người dùng được nhập lại các thông tin bằng cách bấm vào nút clear hoặc reset, đây được gọi là hoạt động phụ. Nên làm các nút này khác và ít quan trọng hơn so với nút của hoạt động chính. Cũng nên có thêm nút hủy bỏ thao tác (undo) trên form.

Tạo bố cục và thiết kế form

Việc thiết kế form không tốt ảnh hưởng rất nhiều đến trải nghiệm người dùng, làm giảm hiệu quả của một website. Nghĩa là, giao diện không tốt cũng là một trong những nguyên nhân làm mất khách hàng, mất lượng người truy cập. Cần đọc thêm các tài liệu chuyên về thiết kế form để có được kĩ năng cần thiết. Dưới đây là một số lưu ý khi thiết kế form:

– Càng ít hỏi người dùng càng tốt

Mỗi khi cần sử dụng form để lấy thông tin từ người dùng, nên bỏ đi các yêu cầu không cần thiết, chỉ giữ lại những thông tin bắt buộc phải có, mục đích là để form càng đơn giản càng tốt, người dùng càng nhanh hoàn thành việc khai báo thông tin càng tốt. Nếu có cách khác để lấy được thông tin từ người dùng thì không nhất thiết phải yêu cầu họ cung cấp thêm một lần nữa, ví dụ, nếu đã có mã số sinh viên thì có thể trích từ đó ra được năm nhập học.

Có những thông tin cũng cần thiết nhưng không bắt buộc thì có thể hỏi người dùng sau này, cố gắng nhanh nhất để họ có thể submit form và website có được mối liên hệ với họ.

– Đặt label ở vị trí phù hợp

Vị trí đặt label có ảnh hưởng tới thời gian người dùng điền thông tin vào form. Nói chung, người dùng càng ít phải nhìn sang hai bên thì việc đọc và thu nhận thông tin càng nhanh. Do vậy, nếu muốn người dùng nhập thông tin nhanh thì nên đặt label ở phía trên của input và căn lề thống nhất cho tất cả các label, cách này cũng rất thích hợp khi label có nội dung dài ngắn khác nhau, hoặc tạo form cho các thiết bị có màn hình nhỏ và hẹp. Hạn chế của cách này là làm cho form bị kéo dài.

Đặt label ở bên trái control, và căn trái là cách làm cho người dùng nhập thông tin chậm nhất. Nên sử dụng cách này nếu muốn website có thời gian để kiểm tra các yêu cầu khi người dùng nhập dữ liệu (ví dụ tính hợp lệ của dữ liệu, hoặc các trường bắt buộc).

– Chọn loại input cẩn thận

Như đã đề cập, để cho người dùng có thể thực hiện các chọn lựa, lập trình viên có thể sử dụng trình đơn xổ (drop-down menu) hoặc dùng các checkbox. Trong thực tế, để làm một công việc, có thể sử dụng nhiều loại input khác nhau, khi đó, cần phải phân tích kĩ để lựa chọn input phù hợp nhất. Có thể cho dùng thử để kiểm tra tính khả thi của mỗi giải pháp.

– Nhóm các input có liên quan  

Người dùng sẽ dễ thao tác với form hơn, khi các thành phần của nó được nhóm lại với nhau theo từng chủ để hoặc có chủ ý cụ thể. Ví dụ, thông tin liên hệ của người dùng sẽ là một nhóm, với một số các trường nhập liệu, tùy chọn. Giữa các nhóm cần có dấu hiệu để nhận biết, như đường kẻ hoặc khoảng trắng. Tuy nhiên, đừng quá lạm dụng cách làm này.

– Để ý đến hành vi sử dụng

Sau khi người dùng đã điền các thông tin vào form, việc tiếp theo là bấm vào một nút để hoàn thành bước hiện tại và chuyển sang bước tiếp theo, đây được gọi là hoạt động chính. Trong trường hợp này, nút bấm thường là loại nút submit, vì vậy, nên làm các nút bấm này nổi bật và dễ thấy hơn so với các nút còn lại, vị trí của nút thường được đặt theo trục chính của form.

Tuy nhiên, form cũng nên cho phép người dùng được nhập lại các thông tin bằng cách bấm vào nút clear hoặc reset, đây được gọi là hoạt động phụ. Nên làm các nút này khác và ít quan trọng hơn so với nút của hoạt động chính. Cũng nên có thêm nút hủy bỏ thao tác (undo) trên form.