Langbiang: Web front-end (21) - HTML - Form label, bố cục, bài tập

Bài trước: Web front-end (20) - HTML - Form controls

-----

1.1.1 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 giao diện, như 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 ô nhập liệu trên trình duyệt, ví dụ ô nhập họ tên, chúng ta sẽ thấy chữ “Họ tên” và ô nhập liệu nằm cạnh nhau. Tuy nhiên, trong mã nguồn, đây là hai phần tử riêng biệt. Trong đó, 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>

</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-email">Email: </label>

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ụ,

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ụ,

<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>

</ol>

</fieldset>

1.1.2 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, trong đó sẽ có các trường nhập liệu, các 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, họ sẽ 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.

– Định dạng form

Chúng ta đang tạo được form, tuy nhiên nhìn nó không được đẹp và chuyên nghiệp như form trên các ứng dụng thực tế. Để làm được form đẹp chúng ta sẽ tìm hiểu cách định dang form ở phần CSS.

1.1.3 Bài tập và thực hành

Bài tập 1. Viết lại các đoạn mã trong phần lý thuyết.

Bài tập 2. Here’s the scenario. You are the web designer in charge of creating an online pizza ordering form for Black Goose Bistro. The owner has handed you a sketch (see the below figure) of the form’s content. There are sticky notes from the programmer with information about the script and variable names you need to use.

[A sketch of the Black Goose Bistro pizza ordering form]

Your challenge is to turn the sketch into a functional form. I’ve given you a head start by creating a bare-bones document with text content and minimal markup and styles (pizza.html).

[pizza.html]

<!DOCTYPE html >

<html><head> <meta charset="utf-8" > <title>Blackstone Bistro: Pizza-on-Demand</title>

<body>

<h1>Blackstone Bistro | Pizza-on-Demand</h1>

<p>Our 12" wood-fired pizzas are available for delivery. Build your custom pizza and we'll deliver it within an hour.</p>

<p>Your Information</p>

<ul>

<li>Address:</li>

<li>Telephone Number:</li>

<li>Email:</li>

<li>Delivery instructions:</li>

</ul>

<h2>Design Your Dream Pizza:</h2>

<p>Pizza specs</p>

<p>Crust <em>(Choose one)</em>:</p>

<ul>

<li>Classic white</li>

<li>Multigrain</li>

<li>Cheese-stuffed crust</li>

<li>Gluten-free</li>

</ul>

<p>Toppings <em>(Choose as many as you want)</em>:</p>

<ul>

<li>Red sauce</li>

<li>White sauce</li>

<li>Mozzarella Cheese</li>

<li>Pepperoni</li>

<li>Mushrooms</li>

<li>Peppers</li>

<li>Anchovies</li>

</ul>

<p>Number</p>

<p>How many pizzas:</p>

</body></html>

Bài tập 3. Viết mã cho form sau:

[Gợi ý làm bài tập]

Bài tập 2.

1. Open the file pizza.html in a text editor.

2. The first thing we’ll do is put everything after the intro paragraph into a form element. The programmer has left a note specifying the action and the method to use for this form. The resulting form element should look like this (keep it on one line):

<form action="http://www.blackgoosebistro.com/pizza.php" method="POST">

…

</form>

3. We’ll work on the “Your Information” section of the form. Start with the first four short text-entry form controls that are marked up appropriately as an unordered list. Here’s the first one; you insert the other three:

<li>Name: <input type="text" name="customername"></li>

HINTS: Choose the most appropriate input type for each entry field. Be sure to name the input elements as specified in the programmer’s note.

4. After “Delivery instructions:” add a line break and a multiline text area. Because we aren’t writing a style sheet for this form, use markup to make it four rows long and 60 characters wide (in the real world, CSS is preferable because it gives you more finetuned control):

<li>Delivery instructions:<br>

<textarea name="instructions" rows="4" cols="60"

maxlength="400" placeholder="No more than 400

characters long"></textarea></li>

5. We add the submit and reset buttons at the end, just before the </form> tag. Note that they’ve asked us to change the text on the submit button.

<p><input type="submit" value="Bring me a

pizza!"><input type="reset"></p>

6. Now, save the document and open it in a browser. The parts that are finished should generally match the above sketch. If they don’t, then you have some more work to do.

Once the document looks right, take it for a spin by entering some information and submitting the form. You should get a response like the one shown in the below figure. Yes, pizza.php actually works, but sorry, no pizzas will be delivered.

7. The next section of the Black Goose Bistro pizza ordering form uses radio buttons and checkboxes for selecting pizza options. In the “Design Your Dream Pizza” section, there are lists of Crust and Toppings options. The Crust options should be radio buttons because pizzas have only one crust. Insert a radio button before each option. Follow this example for the remaining crust options:

<li><input type="radio" name="crust" value="white"> Classic white</li>

8. Mark up the Toppings options as you did the Crust options, but this time, the type should be checkbox. Be sure the variable name for each is toppings[], and that the “Red sauce” option is preselected (checked), as noted on the sketch.

9. Save the document and check your work by opening it in a browser to make sure it looks right; then submit the form to make sure it’s functioning properly.

10. The only other control that needs to be added to the order form is a pull-down menu for selecting the number of pizzas to have delivered.

11. Insert a select menu element with the option to order between 1 and 6 pizzas:

<p>How many pizzas:

<select name="pizzas" size="1">

<option>1</option>

<-- more options here -->

</select>

</p>

12. Save the document and check it in a browser. You can submit the form, too, to be sure that it’s working. You should get the “Thank You” response page listing all of the information you entered in the form.

13. Our pizza ordering form is working, but we need to label it appropriately and create some fieldsets to make it more usable on assistive devices.

14. The “Your Information” section at the top of the form is definitely conceptually related, so let’s wrap it all in a fieldset element. Change the markup of the section title from a paragraph (p) to a legend for the fieldset:

<fieldset>

<legend>Your Information</legend>

<ul>

<li>Name: <input type="text" name="fullname">

</li>

…

</ul>

</fieldset>

15. Next, group the Crust, Toppings, and Number questions in a big fieldset with the legend “Pizza specs” (the text is there; you just need to change it from a p to a legend):

<h2>Design Your Dream Pizza:</h2>

<fieldset>

<legend>Pizza specs</legend>

Crust…

Toppings…

Number…

</fieldset>

16. Create another fieldset just for the Crust options, again changing the description in a paragraph to a legend. Do the same for the Toppings and Number sections. In the end, you will have three fieldsets contained within the larger “Pizza specs” fieldset. When you are done, save your document and open it in a browser. Now it should look very close to the final form shown in the sketch:

<fieldset>

<legend>Crust <em>(Choose one)</em>:</legend>

<ul>…</ul>

</fieldset>

17. OK, now let’s get some labels in there. In the “Your Information” fieldset, explicitly tie the label to the text input by using the for/id label method. Wrap the description in label tags and add the id to the input. The for/id values should be descriptive and they must match. I’ve done the first one for you; you do the other four:

<li><label for="form-name">Name:</label> <input type="text" name="fullname" id="form-name"></li>

18. For the radio and checkbox buttons, wrap the label element around the input and its value label. In this way, the button will be selected when the user clicks or taps anywhere inside the label element. Here’s the first one; you do the rest:

<li><label><input type="radio" name="crust" value="white"> Classic White</label></li>

Save your document, and you’re done! Labels don’t have any effect on how the form looks by default, but you can feel good about the added semantic value you’ve added and maybe even use them to apply styles at another time.

[pizza.html (finished]

<!DOCTYPE html>

<title>Blackstone Bistro: Pizza-on-Demand</title>

ol,

ul {

list-style-type: none;

}

</style>

</head>

<body>

<h1>Blackstone Bistro | Pizza-on-Demand</h1>

<p>Our 12" wood-fired pizzas are available for delivery. Build your custom pizza and we'll deliver it within an hour.

</p>

<legend>Your Information</legend>

<ul>

<li><label for="form-address">Address:</label><input type="text" id="form-address" name="address"></li>

<li><label for="form-tel">Telephone Number:</label><input type="tel" id="form-tel" name="telephone"></li>

<li><label for="form-email">Email:</label><input type="email" id="form-email"></li>

<li><label for="form-delivery">Delivery instructions:</label><br>

</li>

</ul>

</fieldset>

<h2>Design Your Dream Pizza:</h2>

<legend>Pizza specs</legend>

<legend>Crust <em>(Choose one)</em>:</legend>

<ul>

<li><label><input type="radio" name="crust" value="white">Classic white</label></li>

<li><label><input type="radio" name="crust" value="multigrain">Multigrain</label></li>

<li><label><input type="radio" name="crust" value="cheese">Cheese-stuffed crust</label></li>

<li><label><input type="radio" name="crust" value="gluten">Gluten-free</label></li>

</ul>

</fieldset>

<legend>Toppings <em>(Choose as many as you want)</em>:</legend>

<ul>

<li><label><input type="checkbox" name="toppings[]" value="red sauce" checked>Red sauce</label></li>

<li><label><input type="checkbox" name="toppings[]" value="white sauce">White sauce</label></li>

<li><label><input type="checkbox" name="toppings[]" value="mozzarellae">Mozzarella Cheese</label></li>

<li><label><input type="checkbox" name="toppings[]" value="pepperoni">Pepperoni</label></li>

<li><label><input type="checkbox" name="toppings[]" value="mushrooms">Mushrooms</label></li>

<li><label><input type="checkbox" name="toppings[]" value="peppers">Peppers</label></li>

<li><label><input type="checkbox" name="toppings[]" value="anchovies">Anchovies</label></li>

</ul>

</fieldset>

<legend>Number</legend>

<p>How many pizzas:

</select>

</p>

</fieldset>

</form>

</body></html>

Bài tập 3.

[form Liên hệ]

<p>

</p>

<p>

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

</p>

<p>

<label for="dien-thoai">Điện thoại:</label>

</p>

<p>

<br>

</p>

</fieldset>

</form>

1.1.4 Xem và đọc thêm

– [1] Jenifer Niederst Robbins, Learning Web Design, O’Reilly, 2018, trang 177 – 213

– [2] https://www.youtube.com/watch?v=kUMe1FH4CHE&t=9642s

1.1.5 Câu hỏi ôn tập

Câu 1. A webform, web form or HTML form on a web page allows a user to _____ that is sent to a server for processing.

A. download data

B. create database

C. markup database

D. enter data

Câu 2. Trong quá trình mua hàng online, để người mua hàng lựa chọn hình thức thanh toán (trả tiền mặt khi nhận hàng, chuyển khoản, MoMo...v.v), sử dụng control nào là hợp lý nhất?

A. Checkbox

B. Radio

C. Textarea

D. Button

Câu 3. Khi muốn lấy ý kiến đánh giá, bình luận về một sản phẩm từ người mua hàng, sử dụng control nào là hợp lý nhất?

A. Datalist

B. Label

C. Select

D. Textarea

Câu 4. Khi làm việc với form, để không bị chuyển trang khi bấm nút submit, bạn có thể thiết lập giá trị cho action là:

A. %

B. #

C. @

D. /

Câu 5. Trong form có chứa control <input type="password" name="mat-khau" maxlength="8" id="form-mat-khau">. Vậy, khi gửi form này về web server, mật khẩu của người dùng sẽ chứa trong thuộc tính nào?

A. type

B. name

C. maxlength

D. id

Câu 6. 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.

A. label

B. group

C. textarea

D. fieldset

Đáp án: 1(D), 2(B), 3(D), 4(B), 5(B), 6(D)

-----

Cập nhật: 16/5/2024

Bài sau: Web front-end (22) - HTML - Các thành phần nhúng

-----

Tải tài liệu đầy đủ: Tự học HTML căn bản

-----

LIÊN HỆ TÁC GIẢ

Menu

Tìm kiếm trong Blog

Web front-end (21) - HTML - Form label, bố cục, bài tập

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

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

1.1.3 Bài tập và thực hành

1.1.4 Xem và đọc thêm

1.1.5 Câu hỏi ôn tập