HTML form là gì? Xây dựng form nhập liệu trong HTML5 có gì mới?

Trong bài trước chúng ta đã được làm quen rất nhiều các thẻ HTML xây dụng lên nội dung các trang HTML, bài viết này chúng ta cùng tiếp tục tìm hiểu về một khái niệm mới là form trong HTML. Vậy HTML form là gì?, Tại sao nó quan trọng với trang web?, cùng tìm hiểu bạn nhé.

Chú ý: HTML form là bài số 4 trong Khóa học HTML từ cơ bản đến nâng cao, bạn hãy tham khảo nội dung cả khóa học này nhé.

Form trong HTML

1. HTML Form là gì?

Form nhập liệu là một phần đặc biệt trong trang web, chúng ta sử dụng form để thu nhập thông tin từ người dùng. Trong thực tế, form có thể sử dụng trong các phần phản hồi, bình luận bài viết, thanh toán đơn hàng trực tuyến, form đăng nhập, đăng ký… Chính vì form là một thành phần đặc biệt nên được tách rời thành một bài viết riêng mà không đưa vào bài viết Xây dựng nội dung trang HTML cơ bản. Form có thể chứa rất nhiều các thành phần HTML mà người dùng có thể sử dụng để nhập thông tin vào.

Tại sao HTML form lại quan trọng? Đơn giản thôi vì đây là phần tương tác giữa người dùng với trang web, nếu không có form người dùng chỉ có thể đọc mà không thể làm gì hơn. “Mâu thuẫn là động lực của phát triển”, nếu người dùng chỉ đọc nội dung theo một chiều, các “mâu thuẫn” là không thể phát sinh hoặc có nhưng không thể đến tai người viết nội dung, vậy thì phát triển thế nào? Vậy HTML form giúp người dùng tương tác với trang web hay với chính người lập ra nó và hẳn bạn đã hiểu tại sao nó quan trọng trong một trang web rồi chứ.

2. HTML Form hoạt động như thế nào?

Hoạt động của HTML form

1. Người dùng mở trang web có form nhập liệu trong trình duyệt.
2. Người dùng điền thông tin vào các thành phần form nhập liệu sau đó nhấn nút gửi (submit) dữ liệu lên máy chủ. Trong giai đoạn này dữ liệu được nhập vào đã có thể được kiểm tra tại máy tính người dùng thông qua các đoạn mã Javascript.
3. Tại máy chủ web, thông tin được xử lý thông qua các ngôn ngữ kịch bản máy chủ như PHP, ASP.NET, JSP… Các đoạn mã kịch bản máy chủ sẽ thực hiện kiểm tra dữ liệu trong form, thực hiện các logic, ghi nhận dữ liệu vào database…
4. Máy chủ web sau khi xử lý xong thông tin sẽ gửi lại một hồi đáp thành công hay không về trình duyệt và kết thúc một chu trình khép kín xử lý form nhập liệu.

3. Các thành phần cơ bản của form nhập liệu

3.1 Một số khái niệm trong HTML form

Các thành phần cơ bản của HTML form

Một form HTML cơ bản như hình trên có các thành phần như sau:

  • Tiêu đề của form nhập liệu, sử dụng các thẻ <h1>,…, <h6> tùy thuộc vào độ quan trọng của form (Xem bài Xây dựng nội dung trang HTML)
  • Mô tả form nhập liệu, sử dụng các thẻ <h2>,…,<h6>, <p>
  • legend: Tiêu đề của nhóm các ô nhập liệu
  • fieldset: Nhóm các ô nhập liệu
  • label: tiêu đề của ô nhập liêu
  • input: ô nhập liệu

Với form nhập liệu, chúng ta có thể có 3 hành động như sau:

  • Nhập thông tin vào ô nhập liệu
  • Chọn thông tin phù hợp
  • Nhấp chuột vào nút gửi dữ liệu

Mỗi hành động ở trên có rất nhiều các thẻ HTML liên quan đến form nhập liệu, chúng ta sẽ cùng tìm hiểu trong phần tiếp theo.

3.2 Tạo khung form nhập liệu với thẻ HTML <form>

Trước khi đi vào chi tiết từng thành phần HTML form, việc đầu tiên là tạo ra khung form nhập liệu với thẻ HTML <form>. Thẻ form có một số các thuộc tính hay dùng:

  • action: Định nghĩa hành động sẽ được thực hiện khi nhấn nút gửi dữ liệu, hành động này có thể là gửi dữ liệu lên web server, gửi dữ liệu đến một mail server… Ví dụ:
<form action="action_page.php">
<form action="mailto: firebird@allaravel.com>
  • method: Xác định phương thức HTTP sẽ sử dụng để gửi dữ liệu, có hai loại phương thức thường dùng là GET và POST.
  • target: giống như thuộc tính target của thẻ <a> thiết lập sau khi ấn nút submit sẽ vẫn ở nguyên màn hình trình duyệt (giá trị _self: mặc định) hay sẽ mở một cửa sổ hoặc một tab mới (giá trị _blank)

Form nhập liệu được đánh dấu bằng thẻ <form>, code sau đây khai báo một form nhập liệu với phương thức POST và được gửi đến đường dẫn action_page.php

<form action="action_page.php" method="post">
  ...Nội dung form nhập liệu
</form>

3.2.1 GET và POST khác nhau như thế nào?

Với form nhập liệu, thuộc tính method của thẻ HTML <form> có hai giá trị là GET và POST, vậy chúng khác nhau như thế nào? Mặc định thuộc tính method của form có giá trị là GET. Khi sử dụng phương thức GET, dữ liệu của form sẽ được đưa vào kèm theo với đường dẫn URL gửi đến máy chủ web. Ví dụ:

<form action="login.php" method="GET">
    Username: <input type="text" name="username"><br>
    Password: <input type="password" name="password"><br>
    <input type="submit">
</form>

Khi người dùng nhập username là abc và password là xyz và bấm submit thì bản chất là thực hiện đường dẫn login.php?username=abc&password=xyz. Một số chú ý khi sử dụng GET:

  • Thêm dữ liệu form vào URL theo cặp tên/giá trị.
  • Độ dài tối đa của URL là 3000 ký tự
  • Không sử dụng GET để gửi các dữ liệu nhạy cảm như mật khẩu, số tài khoản, thông tin cá nhân… vì nó sẽ hiển thị trên URL.
  • Sử dụng kiểu GET khi muốn người dùng có thể đánh dấu URL (bookmark) để sử dụng lại sau.
  • GET sử dụng tốt với các dữ liệu không cần bảo mật, giống như các chuỗi truy vấn trong URL của Goolge tìm kiếm.

Ví dụ khi bạn tìm kiếm từ khóa “All Laravel” trên Google thì form tìm kiếm sử dụng phương thức GET do đó dữ liệu được đưa vào URL như sau: https://www.google.com.vn/search?q=all+laravel. Đường dẫn này bạn có thể đánh dấu (bookmark) lại để sử dụng sau, trong trình duyệt Chrome bạn sử dụng tổ hợp phím Ctrl + D, lần sau bạn muốn tìm kiếm lại từ khóa “All Laravel” bạn chỉ cần chạy lại đường dẫn đã đánh dấu mà không cần nhập liệu gì thêm.

POST có gì khác, khi sử dụng phương thức POST với form nhập liệu, các dữ liệu form sẽ không được hiển thị trong URL mà nó sẽ đóng gói trong header của gói tin gửi đi, do đó các thông tin sẽ được bảo mật hơn. Với phương thức POST, độ lớn của dữ liệu gửi đi là không giới hạn, tuy nhiên gửi dữ liệu kiểu POST không thể đánh dấu để sử dụng lại sau.

3.3 Các thành phần hỗ trợ nhập liệu

3.3.1 Thẻ HTML <input>

Thẻ <input> tạo ra các thành phần nhập liệu như ô nhập liệu, nút lựa chọn dạng checkbox, radio… Trong các phiên bản trước của HTML5, thẻ <input> đã được hỗ trợ tuy nhiên chỉ hỗ trợ một số dạng nhập liệu. Phiên bản HTML5 có thêm nhiều các dạng nhập liệu mới, đây là sự đúc kết qua một quá trình phát triển nội dung HTML qua nhiều năm.

3.3.1.1 Thuộc tính của thẻ <input>

Trước khi đi vào từng dạng nhập liệu <input> chúng ta xem xét các thuộc tính của thẻ <input>:

Thuộc tính của HTML <input> Mô tả
autocomplete Giá trị của thuộc tính này là on/off, nó xác định xem trình duyệt cứ tự động gợi ý text đã nhập trước đây không? Với một số trường hợp như khi bạn xây dựng một ô nhập liệu tự động gợi ý theo cách của bạn thì cần tắt tính năng gợi ý của trình duyệt. (Ví dụ Xây dựng tìm kiếm thông minh với Typeahead)

Chú ý: autocomplete chỉ làm việc với các dạng ô nhập liệu sau: text, search, url, tel, email, password, datepickers, range và color.

<input class="typeahead" type="text" autocomplete="off">
autofocus Khi thẻ <input> nào được thiết lập thuộc tính này thì khi trang web tải, con trỏ nhập liệu sẽ ngay lập tức ở ô nhập liệu này. Thuộc tính này không có giá trị, chỉ cần đưa thuộc tính vào thẻ, ví dụ:

<input type="text" autofocus>
form Mặc định, các thành phần nhập liệu nằm giữa thẻ <form> sẽ thuộc về form, tuy nhiên nếu thành phần nhập liệu nằm ngoài form thì sao? Chúng ta sử dụng thuộc tính form để xác định xem ô nhập liệu thuộc về <form> nào, ví dụ:

<form action="/register_page.php" id="register-form">
  Họ và đệm: <input type="text" name="firstname"><br>
  <input type="submit" value="Đăng ký">
</form>
Tên: <input type="text" name="lastname" form="register-form">
formaction Mặc định URL mà form gửi dữ liệu đến được xác định trong thuộc tính action của thẻ <form> tuy nhiên trong một số tình huống chúng ta muốn với trường hợp này thì gửi đến URL mặc định còn trường hợp khác thì gửi dữ liệu đến một URL khác. Ví dụ:

<form action="/user_login.php">
  Họ: <input type="text" name="firstname"><br>
  Tên: <input type="text" name="lastname"><br>
  <input type="submit" value="Người dùng đăng nhập"><br>
  <input type="submit" formaction="/admin_login.php" value="Quản trị đăng nhập">
</form>

Trong ví dụ này, khi người dùng nhấn vào nút “Người dùng đăng nhập” thông tin sẽ được gửi đến đường dẫn /user_login.php còn nếu người dùng bấm vào “Quản trị đăng nhập” thì thông tin được gửi đến /admin_login.php.

formenctype Thuộc tính formenctype xác định cách thức dữ liệu form được mã hóa khi được gửi đi, thuộc tính này chỉ được sử dụng khi form gửi đi với phương thức POST (<form action=”page.php” method=”post”>). Thiết lập này sẽ ghi đè thiết lập trong thẻ <form> và thiết lập này chỉ sử dụng cho các thẻ <input> có thuộc tính type là submit và image.

<form action="/binary_process.php" method="post">
  Họ: <input type="text" name="firstname"><br>
  <input type="submit" value="Gửi">
  <input type="submit" formenctype="multipart/form-data" value="Gửi dạng Multipart/form-data">
</form>
formmethod Ghi đè phương thức gửi của form nhập liệu

<form action="/action_page.php" method="get">
  Họ: <input type="text" name="firstname"><br>
  Tên: <input type="text" name="lastname"><br>
  <input type="submit" value="Gửi dữ liệu kiểu GET">
  <input type="submit" formmethod="post" value="Gửi dữ liệu kiểu POST">
</form>
formnovalidate Ghi đè thuộc tính novalidate của thẻ <form>, sử dụng với thẻ <input> có type là submit:

<form action="/action_page.php">
  Địa chỉ email: <input type="email" name="user_email"><br>
  <input type="submit" value="Gửi"><br>
  <input type="submit" formnovalidate value="Gửi không kiểm tra">
</form>
formtarget Thuộc tính formtarget xác định nơi hiển thị hồi đáp từ máy chủ web khi nhận được dữ liệu gửi lên từ form. Thuộc tính này có thể ghi đè thuộc tính target của thẻ <form> và thuộc tính này chỉ sử dụng cho thẻ <input> có type là submit và image.

<form action="/action_page.php">
  Họ: <input type="text" name="firstname"><br>
  Tên: <input type="text" name="lastname"><br>
  <input type="submit" value="Đăng ký">
  <input type="submit" formtarget="_blank" value="Đăng ký trong cửa sổ mới">
</form>
height Xác định độ cao của thẻ <input> với type là image:

<input type="image" src="img_submit.gif" alt="Gửi" width="68" height="68">
width Xác định độ cao của thẻ <input> với type là image:

<input type="image" src="img_submit.gif" alt="Gửi" width="68" height="68">
list Thuộc tính list sử dụng để tham chiếu đến thành phần HTML <datalist> chứa các tùy chọn được định nghĩa trước với thẻ <input>

<input list="php-frameworks">
<datalist id="php-frameworks">
  <option value="Laravel">
  <option value="PHPCake">
  <option value="Zend">
  <option value="Codeigniter">
  <option value="Symfony">
</datalist>
min, max Thuộc tính min, max xác định giá trị tối thiểu và tối đa của một thẻ <input>, sử dụng cho các dạng nhập liệu: number, range, date, datetime-local, month, time và week.

Nhập một ngày trước 01/01/1981: <input type="date" name="birthday" max="1980-12-31">
Nhập một ngày sau 01/01/2000: <input type="date" name="birthday" min="2000-01-02">
Đánh giá nội dung (từ 1 đến 5): <input type="number" name="review" min="1" max="5">
multiple Cho phép người dùng nhập liệu nhiều giá vào thẻ <input>, sử dụng cho các dạng email, file. Ví dụ cho phép người dùng có thể chọn nhiều file ảnh:

Ảnh cá nhân: <input type="file" name="images" multiple>
pattern (regexp) Thuộc tính pattern xác định biểu thức chính quy (regular expression) mà thẻ <input> sử dụng để kiểm tra giá trị trong value. Thuộc tính này hoạt động với các dạng text, search, url, tel, email và password.

Nhập số thẻ Visa: <input type="text" name="visa" pattern="^(?:4[0-9]{12}(?:[0-9]{3})?" title="Nhập số thẻ Visa card">
placeholder Thuộc tính placeholder để hiển thị gợi ý nhập liệu trong chính thành phần HTML, sử dụng cho các dạng nhập liệu text, search, url, tel, email và password.

<input type="text" name="fullname" placeholder="Nhập họ và tên đầy đủ">
required Thẻ required xác định thẻ <input> có phải nhập liệu hay không trước khi gửi dữ liệu form.

Username *: <input type="text" name="username" required>
step Thuộc tính này sẽ đưa vào điều khiển tăng giảm theo một số được thiết lập trước

<input type="number" name="points" step="3">
3.3.1.2 Các dạng thẻ <input>

Trong HTML5 có thêm rất nhiều các dạng thẻ <input> mới do sau một quá trình sử dụng HTML4.01 có rất nhiều các thành phần form thiếu hoặc phải sử dụng một thư viện ngoài để tạo ra. Trong phần các dạng thẻ <input> này chúng ta sẽ xem danh sách các dạng thẻ <input> thành hai phần:

  • Các dạng thẻ <input> được hỗ trợ từ HTML4.01.
  • Các dạng thẻ <input> mới có ở HTML5
3.3.1.2.1 Các dạng thẻ <input> được hỗ trợ trước đây

Bảng dưới đây chứa danh sách các dạng thẻ <input> được sử dụng trong các phiên bản trước HTML5 như HTML4.01, HTML4…

Dạng thẻ HTML <input> Mô tả Code Hình ảnh
text Thẻ <input> dạng nhập văn bản, đây là dạng phổ biến nhất dùng để nhập văn bản với các thông tin cơ bản như họ tên, mô tả…
<input type="text">
Input dạng văn bản
password Thẻ <input> dạng nhập mật khẩu, các ký tự khi được nhập vào sẽ được hiển thị ở dạng dấu * để che dấu các ký tự nhập vào
<input type="password">
Input dạng mật khẩu
submit Thẻ <input> dạng nút submit, sử dụng tạo ra nút submit để gửi dữ liệu lên máy chủ, chỉ có nút dạng submit khi nhấn mới thực hiện gửi dữ liệu
<input type="submit">
Input dạng submit
reset Thẻ <input> dạng nút reset, sử dụng để xóa dữ liệu được nhập trong cả form
<input type="reset">
Input dạng reset
radio Thẻ <input> dạng nút radio, sử dụng để người dùng có thể lựa chọn duy nhất một giá trị trong danh sách các giá trị
<input type="radio">
Input dạng radio
checkbox Thẻ <input> dạng nút checkbox, sử dụng để người dùng có thể lựa chọn nhiều giá trị trong một danh sách các giá trị
<input type="checkbox">
Input dạng checkbox
button Thẻ <input> dạng nút thông thường, sử dụng tạo ra một nút để khi người dùng nhấn vào thì thực hiện một số hoạt động.
<input type="button">
Input dạng button
3.3.1.2.2 Các dạng thẻ <input> mới trong HTML5

HTML5 có thêm rất nhiều các dạng nhập liệu mới cho thẻ HTML <input>, nó giúp bạn xây dựng form nhập liệu rất phong phú với nội dung cần thu thập mà không cần phải sử dụng đến các thư viện của bên thứ 3.

Dạng thẻ HTML <input> mới trong HTML5 Mô tả Code Hình ảnh
color Thẻ <input> dạng chọn mã màu, khi bấm vào sẽ hiển thị một cửa sổ mới và có thể chọn màu với các mã màu trong đó
<input type="color">
Input dạng chọn màu
date Thẻ <input> dạng date dùng để chọn ngày tháng năm
<input type="date">
Input dạng chọn ngày
datetime-local Thẻ <input> dạng datetime-local sử dụng để lựa chọn cả ngày và giờ
<input type="datetime-local">
Input dạng datetime
email Thẻ <input> dạng email sử dụng để nhập liệu địa chỉ email
<input type="email">
Input dạng email có validate
month Thẻ <input> dạng month dùng lựa chọn tháng và năm
<input type="month">
Input dạng month
number Thẻ <input> dạng number sử dụng để nhập vào các số
<input type="number">
Input dạng number
range Thẻ <input> dạng range sử dụng để nhập một số trong một khoảng giá trị cho trước, kết hợp với các thuộc tính min, max để thiết lập giá trị tối thiểu và tối đa của dải giá trị.
<input type="range" min="0" max="10">
Input dạng range
search Thẻ <input> dạng search khá giống với input dạng văn bản thông thường, khác một chút là nó có nút xóa toàn bộ nội dung
<input type="search">
Input dạng search
tel Thẻ <input> dạng tel để nhập số điện thoại, khi sử dụng trên các smart phone nó sẽ hiển thị bảng số cho bạn dễ nhập liệu
<input type="tel">
time Thẻ <input> dạng range sử dụng để nhập một số trong một khoảng giá trị cho trước, kết hợp với các thuộc tính min, max để thiết lập giá trị tối thiểu và tối đa của dải giá trị.
<input type="time">
Input dạng time
url Thẻ <input> dạng url sử dụng để nhập giá trị là các đường dẫn URL nếu không đúng khi submit sẽ báo lỗi
<input type="url">
Input dạng URL
week Thẻ <input> dạng range sử dụng để nhập một số trong một khoảng giá trị cho trước, kết hợp với các thuộc tính min, max để thiết lập giá trị tối thiểu và tối đa của dải giá trị.
<input type="week">
Input dạng week

3.3.2 Thẻ HTML <textarea>

Thẻ <input type=”text”> cho phép nhập liệu văn bản, tuy nhiên nó chỉ cho nhập liệu trên một dòng, để nhập liệu được trên nhiều dòng sử dụng thẻ HTML <textarea>. Thẻ HTML <textarea> có hai thuộc tính là rows và cols để xác định khung nhập liệu văn bản sẽ cao bao nhiêu dòng và rộng bao nhiêu cột.

Ví dụ:

<textarea rows="3" cols="10">
Nội dung văn bản
</textarea>

Thẻ HTML textarea

Thẻ HTML <textarea> thường dùng cho các nội dung có lượng dữ liệu lớn của form như nội dung mô tả, các nội dung có chứa định dạng… Thẻ HTML <textarea> có thể định dạng kích thước thông qua thuộc tính style với cặp tên thuộc tính CSS/giá trị thuộc tính CSS như sau:

<textarea style="width: 300px; height: 200px;">
Nội dung văn bản
</textarea>

3.3.3 Thẻ HTML <select>, <option>, <optgroup>

Trong form nhập liệu, có những trường hợp chúng ta muốn người dùng lựa chọn một giá trị từ một danh sách dài, ví dụ chọn ngành nghề mà một ứng viên muốn tuyển dụng, chọn kích thước một loại quảng cáo mà bạn muốn đưa vào website… Khi đó chúng ta sẽ xây dựng một danh sách dạng drop-down tức là khi bấm vào thì danh sách sẽ xổ xuống bằng thẻ HTML <select> để đánh dấu bắt đầu danh sách và kết hợp với thẻ <option> để đánh dấu các giá trị trong danh sách. Ví dụ:

<select name="work_categories">
   <option value="1">Giáo dục</option>
   <option value="2">Công nghệ thông tin</option>
   <option value="3">Công nghiệp</option>
   <option value="4">Dịch vụ công</option>
   <option value="5">Nghệ thuật</option>
</select>

Mặc định phần tử đầu tiên trong danh sách sẽ được lựa chọn, trong ví dụ trên mặc định giá trị “Giáo dục” sẽ được lựa chọn, chúng ta có thể định nghĩa giá trị mặc định này thông qua thuộc tính selected cho thẻ HTML <option>:

<option value="3" selected>Công nghệ thông tin</option>

Khi đó giá trị “Công nghệ thông tin” sẽ được lựa chọn mặc định.

Chúng ta có thể sử dụng dạng nhập liệu <input type=”radio”>, <input type=”checkbox”> cho mục đích tương tự, tuy nhiên các dạng này thường sử dụng cho các danh sách có số lượng giá trị ít, thường là khoảng dưới 5. Với các danh sách lựa chọn lên đến hàng vài chục giá trị thì HTML <select> là lựa chọn tốt hơn.

Khi sử dụng HTML <select>, mặc định sẽ chỉ hiển thị một dòng giá trị lựa chọn, bạn có thể mở rộng ra hiển thị nhiều dòng lựa chọn thông qua thuộc tính size, ví dụ:

<select name="work_categories" size="3">
   <option value="1">Giáo dục</option>
   <option value="2">Công nghệ thông tin</option>
   <option value="3">Công nghiệp</option>
   <option value="4">Dịch vụ công</option>
   <option value="5">Nghệ thuật</option>
</select>


Sẽ hiển thị 3 dòng đầu tiên trong danh sách 5 giá trị có thể lựa chọn.

Danh sách lựa chọn sử dụng <select> mặc định chỉ cho phép chọn duy nhất một giá trị, tuy nhiên bạn cũng có thể lựa chọn nhiều giá trị một lúc, ví dụ một ứng viên có thể lựa chọn nhiều ngành nghề tuyển dụng như Giáo dục, Công nghệ thông tin… thông qua thuộc tính multiple của thẻ HTML <select>:

<select name="work_categories" size="3" multiple>
   <option value="1">Giáo dục</option>
   <option value="2">Công nghệ thông tin</option>
   <option value="3">Công nghiệp</option>
   <option value="4">Dịch vụ công</option>
   <option value="5">Nghệ thuật</option>
</select>

Khi lựa chọn nhiều giá trị cùng một lúc giữ phím Ctrl và dùng chuột trái click để lựa chọn các giá trị.

Các danh sách trong form nhập liệu có thể là một danh sách đơn giản hoặc một danh sách đa cấp, quay lại ví dụ về ngành nghề ở trên, trong ngành nghề “Giáo dục” có thể chia nhỏ hơn như Tiểu học, Trung học, Đại học hay trong “Công nghệ thông tin” có thể chia thành “Phần mềm”, “Mạng và viễn thông”, “Phần cứng”… Với trường hợp này chúng ta sử dụng thẻ HTML <optgroup> để xây dựng các danh sách đa cấp này.

<select name="work_categories" size="5" multiple>
   <optgroup label="Giáo dục">
      <option value="1.1">Tiểu học</option>
      <option value="1.2">Trung học học</option>
      <option value="1.3">Đại học</option>
   </optgroup>
   <optgroup label="Công nghệ thông tin">
      <option value="2.1">Phần mềm</option>
      <option value="2.2">Mạng và viễn thông</option>
      <option value="2.3">Phần cứng</option>
   </optgroup>
   <option value="3">Công nghiệp</option>
   <option value="4">Dịch vụ công</option>
   <option value="5">Nghệ thuật</option>
</select>

3.3.4 Thẻ HTML5 <datalist>

Kể từ khi Google thống trị toàn cầu với chỉ một ô nhập liệu có gợi ý, thế giới website cũng có những thay đổi, các ô nhập liệu không còn đơn thuần, nó có thể gợi ý theo những gì người dùng đang nhập liệu. HTML5 đã đưa vào thẻ HTML <datalist> để định nghĩa trước một danh sách, khi danh sách này được gán vào một thẻ HTML <input> người dùng có thể gõ và danh sách gợi ý hiện ra, người dùng có thể lựa chọn trong gợi ý hoặc gõ vào một văn bản riêng. Ví dụ:

Bạn thích nhất PHP framework nào: <input list="frameworks">
<datalist id="frameworks">
   <option value="Laravel">
   <option value="Symfony">
   <option value="CodeIgniter">
   <option value="Yii 2">
   <option value="PHPCake">
   <option value="Phalcon">
</datalist>

Bạn có thể lựa chọn PHP framework trong danh sách gợi ý, hoặc nếu bạn thích Zend hoặc FuelPHP… thì cũng có thể nhập vào.

3.3.5 Thẻ HTML5 <output>

Thẻ HTML5 <output> hiển thị kết quả của phép tính giống như khi thực hiện bằng một đoạn mã script. Ví dụ:

<form oninput="c.value=parseInt(a.value)+parseInt(b.value)">
  0<input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="c" for="a b"></output>
</form>

Kết quả như sau:

3.3.6 Thẻ <progress>, <meter>

Trong quá trình nhập liệu vào form với những form có nội dung dài, đôi khi chúng ta muốn biết được trạng thái nhập liệu như đã hoàn thành bao nhiêu %, ví dụ form là một đề thi thì hiển thị % số lượng bài đã hoàn thành là rất hữu ích. Trong HTML5 có hai thẻ mới sử dụng cho mục đích đo lường, hiển thị phần trăm hoàn thành là <progress> và <meter>:

  • Thẻ HTML5 <progress>: như tên gọi của thẻ, nó thể hiện tiến trình của một tác vụ tức hay phần trăm đã hoàn thành, ví dụ khi bạn tải file, thanh trạng thái thể hiện tải được bao nhiêu % là cực hữu ích, chúng ta có thể sử dụng HTML5 <progress> cho trường hợp này.
  • Thẻ HTML5 <meter>: là thước đo cho phép xác định phép đo đại lượng vô hướng trong một phạm vi đã biết hoặc giá trị phân số, ví dụ dung lượng ổ cứng đang sử dụng, nhiệt độ hiện tại của động cơ… HTML5 <meter> cho phép định nghĩa các dải thấp, cao, điều kiện tốt nhất để hiển thị các màu sắc cho thanh trạng thái.

Khi mới sử dụng bạn khó phân biệt cách dùng thẻ HTML5 <progress> và <meter> tuy nhiên ý nghĩa của nó rõ ràng là khác nhau, chúng ta cùng xem hai ví dụ về cách sử dụng các thẻ trạng thái này. Ví dụ 1: Form thực hiện bài thi:

Bạn đã hoàn thành: 6/10 bài<br>
<progress value="6" max="10"></progress>

Chú ý trạng thái hoàn thành sử dụng <progress> thường có giá trị tăng lên, ví dụ khi bạn làm nhiều bài hơn trong đề thi thì thanh tiến trình sẽ tăng giá trị hoàn thành hoặc khi bạn tải một file thì % hoàn thành cũng chỉ có tăng lên.

Ví dụ hai về đồng hồ bình xăng của xe máy:

Xăng còn 4.5 lít:
<meter min="0" max="5" low="1" high="4" optimum="5" value="4.5"></meter><br>
Xăng còn 2.5 lít:
<meter min="0" max="5" low="1" high="4" optimum="5" value="2.5"></meter><br>
Xăng còn 0.5 lít: 
<meter min="0" max="5" low="1" high="4" optimum="5" value="0.5"></meter><br>

Qua hai ví dụ bạn đã thấy được sự khác biệt giữa progress và meter rồi chứ.

3.3.7 Thẻ <button>

Thẻ HTML <button> định nghĩa một nút bấm, khi bấm vào có thể thiết lập các sự kiện bằng Javascript, hiện tại có thể bạn chưa biết về Javascript, chúng ta sẽ cùng tìm hiểu sau trong Khóa học Javascript cơ bản. Ví dụ:

<button>Hiển thị nội dung!</button>

Thẻ HTML <button> cho kết quả hiển thị giống như thẻ HTML <input> với type=”button”, vậy giữa <button> và <input type=”button”> có gì khác nhau, tại sao phải có cả hai loại nút như vậy:

  • HTML <button> cho phép đưa mã HTML vào trong, do đó bạn hoàn toàn có thể đưa vào một ảnh, một nội dung… thành một nút bấm.
  • Có một số khuyến cáo tránh sử dụng <button> do có nhiều trình duyệt không hỗ trợ, đặc biệt là IE, tuy nhiên các trình duyệt IE hiện nay không còn phổ biến.

Thẻ HTML <button> có thêm một số thuộc tính so với thẻ HTML <input type=”button”>, danh sách như sau:

Thuộc tính Giá trị Mô tả
autofocus autofocus Thiết lập nút bấm sẽ được focus ngay khi tải trang.
disabled disabled Thiết lập nút bấm đang được khóa, không sử dụng được.
form form_id Xác định nút bấm thuộc về một hoặc nhiều form nhập liệu trong trang.
formaction URL Xác định nơi dữ liệu form sẽ được gửi đến khi bấm vào nút submit, chỉ sử dụng với <button type=”submit”>
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Xác định cách dữ liệu form được mã hóa trước khi gửi đến máy chủ, chỉ sử dụng với <button type=”submit”>
formmethod get
post
Xác định phương thức gửi dữ liệu form, chỉ sử dụng với <button type=”submit”>
formnovalidate formnovalidate Xác định dữ liệu form có cần kiểm tra khi gửi lên máy chủ không, chỉ sử dụng với <button type=”submit”>
formtarget _blank
_self
_parent
_top
framename
Thiết lập nơi hiển thị hồi đáp từ máy chủ sau khi gửi dữ liệu form lên, chỉ sử dụng với <button type=”submit”>
name name Thiết lập tên nút bấm
type button
reset
submit
Thiết lập dạng nút bấm
value text Thiết lập giá trị khởi tạo cho nút bấm

3.3.8 Các thành phần khác trong form

Như trong phần một số khái niệm cơ bản của form HTML chúng ta đã đưa ra các thành phần như nhóm nhập liệu, tiêu đề nhóm, tiêu đề cho ô nhập liệu, ô nhập liệu… Các phần trước của bài viết chúng ta đã tập trung vào các dạng ô nhập liệu, do vậy phần tiếp theo này chúng ta sẽ cùng tìm hiểu tiếp các thành phần còn lại.

3.3.8.1 Thẻ HTML <label>

Thẻ HTML <label> dùng để định nghĩa tiêu đề cho một thẻ HTML <input>, khi trình duyệt xử lý HTML <label> không có gì khác với văn bản thông thường ngoại trừ việc người dùng có thể nhấp chuột vào tiêu đề và con trỏ chuột sẽ nhảy vào ô nhập liệu tương ứng. Chú ý: thuộc tính for của thẻ HTML <label> phải bằng thuộc tính id của thẻ <input> tương ứng.

<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
3.3.8.2 Thẻ HTML <fieldset>, <legend>

Trong form nhập liệu có thể chia ra các nhóm thông tin nhập liệu khác nhau, ví dụ một form đăng ký người dùng bao gồm nhóm thông tin chung như họ tên, địa chỉ, email, số điện thoại, nhóm thông tin về các mạng xã hội sử dụng, nhóm thông tin về kinh nghiệm. Mỗi nhóm trong form được thiết lập bằng thẻ HTML <fieldset> và tiêu đề của nhóm sử dụng thẻ HTML <legend>. Ví dụ:

<form>
  <fieldset>
    <legend>Thông tin chung</legend>
    <label for="name">Họ và tên:</label>
    <input type="text" name="fullname" id="name"><br>
    <label for="address">Địa chỉ:</label>
    <input type="text" name="address" id="address">
  </fieldset>
  <fieldset>
    <legend>Kinh nghiệm</legend>
    <label for="name">Bằng cấp</label>
    <select name="certificate" multiple>
      <option value="1">Bằng PTTH</option>
      <option value="2">Bằng Trung cấp</option>
      <option value="3">Bằng Đại học</option>
      <option value="4">Bằng Thạc sĩ</option>
    </select><br>
    <label for="experience">Số năm kinh nghiệm:</label>
    <input type="number" name="experience" id="experience">
  </fieldset>
  <input type="submit" value="Đăng ký">
</form>

Add Comment