032.4 Bài 1
Chứng chỉ: |
Web Development Essentials |
---|---|
Phiên bản: |
1.0 |
Chủ đề: |
032 Đánh dấu Tài liệu HTML |
Mục tiêu: |
032.4 Biểu mẫu HTML |
Bài: |
1 trên 1 |
Giới thiệu
Biểu mẫu web cung cấp một cách đơn giản và hiệu quả để có thể yêu cầu thông tin về khách truy cập từ trang HTML. Nhà phát triển giao diện người dùng có thể sử dụng các thành phần khác nhau như trường văn bản, hộp kiểm, nút bấm và nhiều thành phần khác để xây dựng giao diện gửi dữ liệu đến máy chủ theo một cách có cấu trúc.
Biểu mẫu HTML đơn giản
Trước khi nói đến mã đánh dấu cụ thể cho các biểu mẫu, hãy cùng bắt đầu với một tài liệu HTML trống đơn giản và không có bất kỳ nội dung nào:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Working with HTML Forms</title>
</head>
<body>
<!-- The body content goes here -->
</body>
</html>
Hãy lưu mẫu mã dưới dạng tệp văn bản thô có phần mở rộng là .html
(như là form.html
) và sử dụng trình duyệt yêu thích của bạn để mở nó. Sau khi thay đổi, hãy nhấn nút tải lại trên trình duyệt để hiển thị các sửa đổi.
Cấu trúc biểu mẫu cơ bản sẽ được cung cấp bởi chính thẻ <form>
và các thành phần bên trong của nó:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Working with HTML Forms</title>
</head>
<body>
<!-- Form to collect personal information -->
<form>
<h2>Personal Information</h2>
<p>Full name:</p>
<p><input type="text" name="fullname" id="fullname"></p>
<p><input type="reset" value="Clear form"></p>
<p><input type="submit" value="Submit form"></p>
</form>
</body>
</html>
Dấu trích dẫn kép không phải là bắt buộc đối với các thuộc tính một từ như type
; vì vậy, type=text
cũng sẽ hoạt động như type="text"
. Nhà phát triển có thể chọn sử dụng bất kỳ kiểu quy ước nào mà họ muốn.
Hãy lưu nội dung mới và tải lại trang trong trình duyệt. Bạn sẽ thấy kết quả hiển thị trong Figure 1.
Bản thân thẻ <form>
sẽ không tạo ra bất kỳ kết quả đáng chú ý nào ở trên trang. Các phần tử bên trong thẻ <form>…</form>
sẽ xác định các trường và các hỗ trợ trực quan khác được hiển thị cho khách truy cập.
Mã ở trong ví dụ có chứa cả thẻ HTML chung (<h2>
và <p>
) và thẻ <input>
dành riêng cho biểu mẫu. Trong khi các thẻ chung có thể xuất hiện ở bất kỳ đâu trong tài liệu thì các thẻ dành riêng cho biểu mẫu chỉ nên được sử dụng bên trong phần tử <form>
, nghĩa là giữa thẻ <form>
mở và thẻ </form>
đóng.
Note
|
HTML chỉ cung cấp các thẻ và thuộc tính cơ bản để sửa đổi giao diện tiêu chuẩn của biểu mẫu. CSS sẽ cung cấp các cơ chế phức tạp để sửa đổi giao diện của biểu mẫu; vì vậy, khuyến nghị ở đây là dùng mã HTML cho việc xử lý các khía cạnh chức năng của biểu mẫu và sửa đổi giao diện của biểu mẫu bằng CSS. |
Như được minh họa trong ví dụ, thẻ đoạn văn bản <p>
có thể được sử dụng để mô tả trường cho khách truy cập. Tuy nhiên, không có cách rõ ràng nào để trình duyệt có thể liên kết mô tả trong thẻ <p>
với phần tử đầu vào tương ứng. Thẻ <label>
(nhãn) sẽ phù hợp hơn trong những trường hợp này (từ giờ trở đi, hãy xem xét tất cả các mẫu mã nằm trong phần nội dung của tài liệu HTML):
<form>
<h2>Personal Information</h2>
<label for="fullname">Full name:</label>
<p><input type="text" name="fullname" id="fullname"></p>
<p><input type="reset" value="Clear form"></p>
<p><input type="submit" value="Submit form"></p>
</form>
Thuộc tính for
trong thẻ <label>
chứa id
của phần tử đầu vào tương ứng. Nó sẽ làm cho trang trở nên dễ truy cập hơn vì trình đọc màn hình sẽ có thể đọc nội dung của phần tử label khi phần tử đầu vào được đặt vào tiêu điểm. Ngoài ra, khách truy cập có thể nhấp vào nhãn để đặt tiêu điểm vào trường nhập dữ liệu tương ứng.
Thuộc tính id
thực hiện cùng một công việc cho các phần tử biểu mẫu như với bất kỳ phần tử nào khác trong tài liệu. Nó cung cấp một mã định danh cho phần tử là duy nhất trong toàn bộ tài liệu. Thuộc tính name
cũng có mục đích tương tự, nhưng nó được sử dụng để xác định thành phần đầu vào trong ngữ cảnh của biểu mẫu. Trình duyệt sẽ sử dụng thuộc tính name
để xác định trường nhập khi gửi dữ liệu biểu mẫu đến máy chủ; vì vậy, điều quan trọng là phải sử dụng các thuộc tính name
một cách có ý nghĩa và duy nhất ở bên trong của biểu mẫu.
Thuộc tính type
là thuộc tính chính của phần tử đầu vào vì nó kiểm soát loại dữ liệu mà phần tử chấp nhận và cách trình bày trực quan của nó đối với khách truy cập. Nếu thuộc tính type
không được cung cấp, đầu vào sẽ hiển thị một hộp văn bản theo mặc định. Các loại đầu vào sau đây hiện được hỗ trợ bởi các trình duyệt hiện đại:
Giá trị của type |
Kiểu dữ liệu | Kiểu hiển thị |
---|---|---|
|
Một chuỗi tùy ý |
Không áp dụng |
|
Văn bản không ngắt dòng |
Kiểm soát văn bản |
|
Văn bản không ngắt dòng |
Kiểm soát tìm kiếm |
|
Văn bản không ngắt dòng |
Kiểm soát văn bản |
|
URL tuyệt đối |
Kiểm soát văn bản |
|
Địa chỉ email hoặc danh sách địa chỉ email |
Kiểm soát văn bản |
|
Văn bản không ngắt dòng (thông tin nhạy cảm) |
Kiểm soát văn bản che khuất mục nhập |
|
Một ngày (năm, tháng, ngày) không có múi giờ |
Kiểm soát ngày |
|
Một ngày bao gồm một năm và một tháng không có múi giờ |
Kiểm soát một tháng |
|
Ngày bao gồm số tuần trong năm và số tuần không có múi giờ |
Kiểm soát một tuần |
|
Thời gian (giờ, phút, giây, giây thập phân) không có múi giờ |
Kiểm soát thời gian |
|
Ngày và giờ (năm, tháng, ngày, giờ, phút, giây, phần giây) không có múi giờ |
Kiểm soát ngày và giờ |
|
Một giá trị số |
Kiểm soát văn bản hoặc kiểm soát tăng giảm |
|
Một giá trị số với ngữ nghĩa bổ sung mà giá trị chính xác là không quan trọng |
Kiểm soát thanh trượt hoặc tương tự |
|
Một màu sRGB với các thành phần đỏ, lục và lam 8 bit |
Bộ chọn màu |
|
Một tập hợp gồm 0 hoặc nhiều giá trị từ danh sách được xác định trước |
Một hộp kiểm (cung cấp các lựa chọn và cho phép nhiều lựa chọn có thể được chọn) |
|
Một giá trị liệt kê |
Nút radio (cung cấp các lựa chọn và chỉ cho phép chọn một lựa chọn) |
|
Không hoặc nhiều tệp, mỗi tệp có loại MIME và tên tệp tùy chọn |
Một nhãn và một nút bấm |
|
Một giá trị liệt kê kết thúc quá trình nhập liệu và làm cho biểu mẫu được gửi |
Một nút bấm |
|
Một tọa độ liên quan đến kích thước của một hình ảnh cụ thể kết thúc quá trình nhập liệu và khiến biểu mẫu được gửi |
Một hình ảnh có thể nhấp hoặc một nút bấm |
|
Không áp dụng |
Một nút chung |
|
Không áp dụng |
Nút có chức năng đặt lại tất cả các trường khác về giá trị ban đầu của chúng |
Hình thức của các loại đầu vào password
, search
, tel
, url
và email
sẽ không khác so với hình thức của text
tiêu chuẩn. Mục đích của chúng là để đưa ra các gợi ý cho trình duyệt về nội dung dự định cho trường đầu vào đó, để trình duyệt hoặc tệp lệnh chạy ở phía máy khách có thể thực hiện các hành động tùy chỉnh cho một loại đầu vào cụ thể. Ví dụ như sự khác biệt duy nhất giữa kiểu nhập văn bản và kiểu trường mật khẩu là nội dung của trường mật khẩu không được hiển thị khi khách truy cập nhập chúng vào. Trong các thiết bị màn hình cảm ứng nơi văn bản được nhập bằng biểu tượng trên màn hình bàn phím, trình duyệt sẽ chỉ có thể bật lên bàn phím số khi đầu vào thuộc loại tel
được chọn làm tiêu điểm. Một hành động khả thi khác là đề xuất một danh sách các địa chỉ email đã biết khi đầu vào thuộc loại email
được chọn làm tiêu điểm.
Loại number
cũng xuất hiện dưới dạng kiểu nhập văn bản đơn giản nhưng sẽ có các mũi tên tăng/giảm ở bên cạnh. Việc sử dụng nó sẽ làm cho bàn phím số xuất hiện trên các thiết bị màn hình cảm ứng khi nó trở thành tiêu điểm.
Các phần tử đầu vào khác cũng có giao diện và hành vi riêng. Ví dụ: loại date
sẽ được hiển thị theo cài đặt định dạng ngày địa phương và lịch sẽ được hiển thị khi trường trở thành tiêu điểm:
<form>
<p>
<label for="date">Date:</label>
<input type="date" name="date" id="date">
</p>
</form>
[img-fig02] cho thấy cách mà phiên bản máy tính để bàn của Firefox đang hiển thị trường này.
#img-fig07] .Loại đầu vào ngày tháng. image::./images/fig07.png[]
Note
|
Các phần tử có thể xuất hiện hơi khác nhau trong các trình duyệt hoặc hệ điều hành khác nhau, nhưng chức năng và cách sử dụng của chúng sẽ luôn giống nhau. |
Đây là một tính năng tiêu chuẩn trong tất cả các trình duyệt hiện đại và không cần có các tùy chọn hoặc lập trình bổ sung.
Bất kể loại đầu vào là gì, nội dung của trường đầu vào được gọi là giá trị của nó. Tất cả các giá trị của trường đều sẽ trống theo mặc định, nhưng ta có thể sử dụng thuộc tính value
để đặt giá trị mặc định cho trường. Giá trị cho loại date
phải sử dụng định dạng NNNN-TT-NN. Giá trị mặc định trong trường ngày sau là vào ngày 6 tháng 8 năm 2020:
<form>
<p>
<label for="date">Date:</label>
<input type="date" name="date" id="date" value="2020-08-06">
</p>
</form>
Các loại đầu vào cụ thể sẽ hỗ trợ khách truy cập điền vào các trường, nhưng chúng sẽ không ngăn khách truy cập bỏ qua các hạn chế và nhập các giá trị tùy ý vào bất kỳ trường nào. Đó là lý do tại sao điều quan trọng ở đây là các giá trị trường phải được xác thực khi chúng đến máy chủ.
Các thành phần biểu mẫu có giá trị phải được nhập bởi khách truy cập có thể sẽ có các thuộc tính đặc biệt để hỗ trợ điền chúng. Thuộc tính placeholder
(giữ chỗ) sẽ chèn một giá trị ví dụ vào phần tử đầu vào:
<p>Address: <input type="text" name="address" id="address" placeholder="e.g. 41 John St., Upper Suite 1"></p>
Phần giữ chỗ sẽ xuất hiện bên trong phần tử đầu vào như được hiển thị trong Figure 2.
placeholder
.Một khi khách truy cập bắt đầu nhập vào trường, văn bản giữ chỗ sẽ biến mất. Văn bản giữ chỗ sẽ không được gửi dưới dạng giá trị trường nếu khách truy cập để trống trường.
Thuộc tính required
(bắt buộc) yêu cầu khách truy cập điền giá trị cho trường tương ứng trước khi gửi biểu mẫu:
<p>Address: <input type="text" name="address" id="address" required placeholder="e.g. 41 John St., Upper Suite 1"></p>
Thuộc tính required
là một thuộc tính Boolean; vì vậy, nó có thể được đặt một mình (mà không có dấu bằng). Việc đánh dấu các trường bắt buộc là rất quan trọng; nếu không, khách truy cập sẽ không thể biết trường nào bị thiếu và sẽ không gửi được biểu mẫu.
Thuộc tính autocomplete
(tự hoàn thành) sẽ cho biết liệu giá trị của phần tử đầu vào có thể được trình duyệt tự động hoàn thành hay không. Nếu được đặt thành autocomplete="off"
thì trình duyệt sẽ không đề xuất các giá trị đã từng xuất hiện trước đó để điền vào. Các phần tử đầu vào dành cho thông tin nhạy cảm (chẳng hạn như số thẻ tín dụng) phải đặt thuộc tính autocomplete
thành off
.
Đầu vào cho văn bản cỡ lớn: textarea
Không giống như trường văn bản chỉ có thể chèn một dòng văn bản, phần tử textarea
(vùng văn bản) sẽ cho phép khách truy cập nhập nhiều hơn một dòng văn bản. Vùng văn bản là một phần tử riêng biệt và không dựa trên phần tử đầu vào:
<p> <label for="comment">Type your comment here:</label> <br>
<textarea id="comment" name="comment" rows="10" cols="50">
My multi-line, plain-text comment.
</textarea>
</p>
Giao diện điển hình của vùng văn bản là Figure 3.
textarea
.Một điểm khác biệt khác so với phần tử đầu vào là phần tử textarea
có thẻ đóng (</textarea>
); vì vậy, nội dung của nó (tức giá trị của nó) sẽ nằm giữa hai thẻ này. Thuộc tính rows
(hàng) và cols
(cột) sẽ không giới hạn số lượng văn bản; chúng chỉ được sử dụng để xác định bố cục. Vùng văn bản cũng có một thanh điều khiển ở góc dưới cùng bên phải, cho phép khách truy cập thay đổi kích thước của nó.
Danh sách Tùy chọn
Một số loại kiểm soát biểu mẫu có thể được sử dụng để hiển thị danh sách các tùy chọn cho khách truy cập: phần tử <select>
(chọn) và các loại đầu vào radio
(phát thanh) và checkbox
(hộp kiểm).
Phần tử <select>
là một bảng điều khiển thả xuống với một danh sách các mục đã được xác định trước:
<p><label for="browser">Favorite Browser:</label>
<select name="browser" id="browser">
<option value="firefox">Mozilla Firefox</option>
<option value="chrome">Google Chrome</option>
<option value="opera">Opera</option>
<option value="edge">Microsoft Edge</option>
</select>
</p>
Thẻ <option>
(tuỳ chọn) đại diện cho một mục duy nhất trong phần điều khiển <select>
tương ứng. Toàn bộ danh sách sẽ xuất hiện khi khách truy cập chạm hoặc bấm vào điều khiển như được hiển thị trong Figure 4.
select
.Mục nhập đầu tiên trong danh sách sẽ được chọn theo mặc định. Để thay đổi hành vi này, ta có thể thêm thuộc tính selected
(đã chọn) vào một mục nhập khác để nó được chọn khi tải trang.
Loại đầu vào radio
cũng tương tự như phần tử điều khiển <select>
, nhưng thay vì danh sách thả xuống, nó sẽ hiển thị tất cả các mục để khách truy cập có thể đánh dấu một trong số chúng. Kết quả của đoạn mã sau sẽ được hiển thị trong Figure 5.
<p>Favorite Browser:</p>
<p>
<input type="radio" id="browser-firefox" name="browser" value="firefox" checked>
<label for="browser-firefox">Mozilla Firefox</label>
</p>
<p>
<input type="radio" id="browser-chrome" name="browser" value="chrome">
<label for="browser-chrome">Google Chrome</label>
</p>
<p>
<input type="radio" id="browser-opera" name="browser" value="opera">
<label for="browser-opera">Opera</label>
</p>
<p>
<input type="radio" id="browser-edge" name="browser" value="edge">
<label for="browser-edge">Microsoft Edge</label>
</p>
radio
.Hãy lưu ý rằng tất cả các loại đầu vào radio
trong cùng một nhóm đều có cùng thuộc tính name
. Tất cả đều là độc quyền; vì vậy, thuộc tính value
tương ứng cho mục nhập đã chọn sẽ là thuộc tính được liên kết với thuộc tính name
được chia sẻ. Thuộc tính checked
(đã chọn) hoạt động giống như thuộc tính selected
của phần tử điều khiển <select>
. Nó sẽ đánh dấu mục tương ứng khi trang tải lần đầu tiên. Thẻ <label>
sẽ đặc biệt hữu ích cho các mục nhập radio vì nó cho phép khách truy cập kiểm tra mục nhập bằng cách nhấp hoặc nhấn vào văn bản tương ứng bên cạnh phần điều khiển.
Trong khi các phần điều khiển radio
chỉ dành cho việc chọn một mục duy nhất trong danh sách thì loại đầu vào checkbox
sẽ cho phép khách truy cập chọn nhiều mục:
<p>Favorite Browser:</p>
<p>
<input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked>
<label for="browser-firefox">Mozilla Firefox</label>
</p>
<p>
<input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked>
<label for="browser-chrome">Google Chrome</label>
</p>
<p>
<input type="checkbox" id="browser-opera" name="browser" value="opera">
<label for="browser-opera">Opera</label>
</p>
<p>
<input type="checkbox" id="browser-edge" name="browser" value="edge">
<label for="browser-edge">Microsoft Edge</label>
</p>
Các hộp kiểm cũng có thể sử dụng thuộc tính checked
để để chọn mặc định các mục. Thay vì phần điều khiển hình tròn của đầu vào radio, hộp kiểm sẽ được hiển thị dưới dạng các phần điều khiển hình vuôn như trong Figure 6.
checkbox
.Nếu nhiều mục nhập được chọn, trình duyệt sẽ gửi chúng dưới cùng một tên và yêu cầu nhà phát triển phụ trợ viết mã cụ thể để đọc chính xác dữ liệu biểu mẫu có chứa các hộp kiểm.
Để cải thiện khả năng sử dụng, các trường nhập liệu có thể được nhóm lại với nhau bên trong thẻ <fieldset>
(tập hợp trường):
<fieldset>
<legend>Favorite Browser</legend>
<p>
<input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked>
<label for="browser-firefox">Mozilla Firefox</label>
</p>
<p>
<input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked>
<label for="browser-chrome">Google Chrome</label>
</p>
<p>
<input type="checkbox" id="browser-opera" name="browser" value="opera">
<label for="browser-opera">Opera</label>
</p>
<p>
<input type="checkbox" id="browser-edge" name="browser" value="edge">
<label for="browser-edge">Microsoft Edge</label>
</p>
</fieldset>
Thẻ <legend> sẽ chứa văn bản được đặt ở đầu khung mà thẻ <fieldset> bao xung quanh các điều khiển (Figure 7).
fieldset
.Thẻ <fieldset>
sẽ không thay đổi cách các giá trị của trường được gửi tới máy chủ, nhưng nó sẽ cho phép nhà phát triển giao diện người dùng kiểm soát các phần điều khiển được lồng với nhau một cách dễ dàng hơn. Ví dụ: đặt thuộc tính disabled
(vô hiệu hoá) bên trong thuộc tính <fieldset>
sẽ làm cho tất cả các thành phần bên trong của nó không khả dụng đối với khách truy cập.
Loại Phần tử Ẩn (hidden
)
Có những tình huống mà nhà phát triển muốn đưa một số thông tin vào biểu mẫu mà không muốn khách truy cập tương tác với những thông tin này - tức là gửi một giá trị do nhà phát triển chọn mà không hiển thị trường biểu mẫu nơi khách truy cập có thể nhập hoặc thay đổi giá trị. Ví dụ như nhà phát triển có thể muốn có mã thông báo xác thực trong một biểu mẫu cụ thể mà khách truy cập không cần nhìn thấy. Một phần tử biểu mẫu ẩn sẽ được mã hóa như trong ví dụ sau:
<input type="hidden" id="form-token" name="form-token" value="e730a375-b953-4393-847d-2dab065bbc92">
Giá trị của trường nhập ẩn thường được thêm vào tài liệu ở phía máy chủ khi kết xuất tài liệu. Các đầu vào ẩn sẽ được coi như các trường thông thường khi trình duyệt gửi chúng đến máy chủ; máy chủ này cũng sẽ đọc chúng như đọc các trường đầu vào thông thường.
Loại Đầu vào Tệp
Ngoài dữ liệu văn bản được nhập hoặc chọn từ danh sách, các biểu mẫu HTML cũng có thể gửi các tệp tùy ý đến máy chủ. Loại đầu vào tệp (file
) cho phép khách truy cập chọn một tệp từ hệ thống tệp cục bộ và gửi trực tiếp từ trang web:
<p>
<label for="attachment">Attachment:</label><br>
<input type="file" id="attachment" name="attachment">
</p>
Thay vì một trường biểu mẫu để ghi vào hoặc chọn một giá trị từ đó, loại đầu vào file
sẽ hiển thị nút browse
(duyệt) dùng để mở hộp thoại tệp. Loại tệp đầu vào file
chấp nhận bất kỳ loại tệp nào, nhưng nhà phát triển phía máy chủ có thể sẽ hạn chế các loại tệp được phép và kích thước tối đa của chúng. Việc xác minh loại tệp cũng có thể được thực hiện ở giao diện người dùng bằng cách thêm thuộc tính accept
(chấp nhận). Ví dụ: để chỉ chấp nhận hình ảnh JPEG và PNG, thuộc tính accept
sẽ phải là accept="image/jpeg, image/png"
.
Nút Hành động
Theo mặc định, biểu mẫu sẽ được nộp khi khách truy cập nhấn phím Enter tại bất kỳ trường nhập liệu nào. Để làm cho mọi thứ trực quan hơn, ta nên thêm một nút nộp với loại đầu vào submit
(nộp):
<input type="submit" value="Submit form">
Văn bản trong thuộc tính value
được hiển thị trên nút như trong Figure 8.
Một nút hữu ích khác để đưa vào biểu mẫu phức tạp là nút reset
(đặt lại). Nút này sẽ xóa và đưa biểu mẫu về lại trạng thái ban đầu:
<input type="reset" value="Clear form">
Giống như nút nộp, văn bản trong thuộc tính value
sẽ được sử dụng để gắn nhãn cho nút. Ngoài ra, thẻ <button>
(nút bấm) có thể được sử dụng để thêm các nút vào biểu mẫu hoặc bất kỳ nơi nào khác trong trang. Không giống như các nút được tạo bằng thẻ <input>
(đầu vào), phần tử button có thẻ đóng và nhãn của nút sẽ là nội dung bên trong của chúng:
<button>Submit form</button>
Khi ở trong một biểu mẫu, hành vi mặc định cho phần tử button
là gửi biểu mẫu. Giống như các nút nhập liệu, thuộc tính loại của nút có thể được chuyển sang reset
.
Hành động và Phương thức của Biểu mẫu
Bước cuối cùng trong việc viết một biểu mẫu HTML là xác định cách thức và nơi gửi dữ liệu. Những khía cạnh này sẽ phụ thuộc vào các chi tiết ở cả máy khách và máy chủ.
Về phía máy chủ, cách tiếp cận phổ biến nhất là có một tệp tệp lệnh phân tích cú pháp, xác thực và xử lý dữ liệu biểu mẫu theo mục đích của ứng dụng. Ví dụ: nhà phát triển phía máy chủ có thể viết tệp lệnh có tên receive_form.php
để nhận dữ liệu được gửi từ biểu mẫu. Về phía máy khách, tệp lệnh sẽ được chỉ định trong thuộc tính action
(hành động) của thẻ biểu mẫu:
<form action="receive_form.php">
Thuộc tính action
sẽ tuân theo các quy ước giống như tất cả các địa chỉ HTTP. Nếu tệp lệnh ở cùng mức phân cấp của trang chứa biểu mẫu thì tệp lệnh có thể được viết mà không cần đường dẫn của nó. Mặt khác, đường dẫn tuyệt đối hoặc tương đối sẽ phải được cung cấp. Tệp lệnh cũng sẽ tạo phản hồi để phục vụ dưới dạng trang đích được trình duyệt tải sau khi khách truy cập gửi biểu mẫu.
HTTP sẽ cung cấp các phương thức riêng biệt để gửi dữ liệu biểu mẫu thông qua kết nối với máy chủ. Các phương thức phổ biến nhất là get
và post
; các phương thức này sẽ được chỉ định trong thuộc tính method
(phương thức) của thẻ form
(biểu mẫu):
<form action="receive_form.php" method="get">
Hoặc:
<form action="receive_form.php" method="post">
Trong phương thức get
, dữ liệu biểu mẫu sẽ được mã hóa trực tiếp trong URL yêu cầu. Khi khách truy cập gửi biểu mẫu, trình duyệt sẽ tải URL được xác định trong thuộc tính action
với các trường biểu mẫu được nối với nó.
Phương thức get
được ưu tiên cho lượng dữ liệu nhỏ, chẳng hạn như biểu mẫu liên hệ đơn giản. Tuy nhiên, URL không thể vượt quá vài nghìn ký tự; vì vậy, ta nên sử dụng phương thức post
khi biểu mẫu chứa các trường lớn hoặc không phải là văn bản ví( dụ như là hình ảnh).
Phương thức post
sẽ khiến trình duyệt gửi dữ liệu biểu mẫu trong phần nội dung của yêu cầu HTTP. Mặc dù là cần thiết đối với dữ liệu nhị phân vượt quá giới hạn kích thước của URL nhưng phương thức post
sẽ gia tăng tải lượng không cần thiết vào việc kết nối khi được sử dụng ở dạng các biểu mẫu văn bản đơn giản; vì vậy, phương thức get
thường được ưa chuộng hơn trong những trường hợp như vậy.
Phương thức đã chọn sẽ không ảnh hưởng đến cách khách truy cập tương tác với biểu mẫu. Các phương thức get
và post
được xử lý theo những cách khác nhau bởi tệp lệnh bên phía máy chủ nhận biểu mẫu.
Khi sử dụng phương thức post
, ta cũng có thể thay đổi loại MIME của nội dung biểu mẫu bằng thuộc tính biểu mẫu enctype
(mã hoá). Điều này sẽ ảnh hưởng đến cách các trường và giá trị biểu mẫu được xếp chồng lên nhau trong giao tiếp HTTP với máy chủ. Giá trị mặc định cho enctype
là application/x-www-form-urlencoded
, tương tự như định dạng được sử dụng trong phương thức get
. Nếu biểu mẫu chứa các trường đầu vào thuộc loại file
thì ta nên sử dụng mã hóa multipart/form-data
để thay thế.
Bài tập Hướng dẫn
-
Cách đúng đắn nhất để liên kết thẻ
<label>
với thẻ<input>
là gì? -
Loại phần tử đầu vào nào sẽ cung cấp thanh trượt điều khiển để chọn một giá trị số?
-
Mục đích của thuộc tính biểu mẫu
placeholder
là gì? -
Làm thế nào để khiến lựa chọn thứ hai trong phần điều khiển select được chọn mặc định?
Bài tập Mở rộng
-
Làm cách nào để có thể thay đổi đầu vào tệp để khiến nó chỉ chấp nhận các tệp PDF?
-
Làm cách nào để có thể thông báo cho khách truy cập về những trường bắt buộc trong biểu mẫu?
-
Hãy tập hợp ba đoạn mã trong bài học này ở một dạng duy nhất. Hãy đảm bảo không sử dụng cùng một thuộc tính
name
hoặcid
trong nhiều phần kiểm soát biểu mẫu.
Tóm tắt
Bài học này đã nói về cách tạo các biểu mẫu HTML đơn giản để gửi dữ liệu trở lại máy chủ. Ở phía máy khách, các biểu mẫu HTML bao gồm các phần tử HTML tiêu chuẩn được kết hợp để xây dựng các giao diện tùy chỉnh. Hơn nữa, các biểu mẫu phải được cấu hình để có thể giao tiếp đúng cách với máy chủ. Bài học đã nhắc đến các khái niệm và quy trình sau:
-
Thẻ
<form>
và cấu trúc biểu mẫu cơ bản. -
Các yếu tố đầu vào cơ bản và đặc biệt.
-
Vai trò của các thẻ đặc biệt như
<label>
,<fieldset>
và<legend>
. -
Các nút và hành động của Biểu mẫu.
Đáp án Bài tập Hướng dẫn
-
Cách đúng đắn nhất để liên kết thẻ
<label>
với thẻ<input>
là gì?Thuộc tính
for
của thẻ<label>
phải chứa id của thẻ<input>
tương ứng. -
Loại phần tử đầu vào nào sẽ cung cấp thanh trượt điều khiển để chọn một giá trị số?
Loại đầu vào
range
(phạm vi). -
Mục đích của thuộc tính biểu mẫu
placeholder
là gì?Thuộc tính
placeholder
chứa một ví dụ về đầu vào có thể nhìn thấy của khách truy cập khi trường đầu vào tương ứng trống. -
Làm thế nào để khiến lựa chọn thứ hai trong phần điều khiển select được chọn mặc định?
Phần tử
option
thứ hai phải có thuộc tínhselected
.
Đáp án Bài tập Mở rộng
-
Làm cách nào để có thể thay đổi đầu vào tệp để khiến nó chỉ chấp nhận các tệp PDF?
Thuộc tính
accept
của phần tử đầu vào phải được đặt thànhapplication/pdf
. -
Làm cách nào để có thể thông báo cho khách truy cập về những trường bắt buộc trong biểu mẫu?
Thông thường, các trường bắt buộc sẽ được đánh dấu hoa thị (
*
) với một ghi chú ngắn gọn như “Các trường được đánh dấu * là bắt buộc” được đặt gần biểu mẫu. -
Hãy tập hợp ba đoạn mã trong bài học này ở một dạng duy nhất. Hãy đảm bảo không sử dụng cùng một thuộc tính
name
hoặcid
trong nhiều phần kiểm soát biểu mẫu.<form action="receive_form.php" method="get"> <h2>Personal Information</h2> <label for="fullname">Full name:</label> <p><input type="text" name="fullname" id="fullname"></p> <p> <label for="date">Date:</label> <input type="date" name="date" id="date"> </p> <p>Favorite Browser:</p> <p> <input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked> <label for="browser-firefox">Mozilla Firefox</label> </p> <p> <input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked> <label for="browser-chrome">Google Chrome</label> </p> <p> <input type="checkbox" id="browser-opera" name="browser" value="opera"> <label for="browser-opera">Opera</label> </p> <p> <input type="checkbox" id="browser-edge" name="browser" value="edge"> <label for="browser-edge">Microsoft Edge</label> </p> <p><input type="reset" value="Clear form"></p> <p><input type="submit" value="Submit form"></p> </form>