Biểu mẫu HTML thu thập dữ liệu từ người dùng bằng các trường văn bản, danh sách thả xuống, hộp kiểm, v.v. Các biểu mẫu trong HTML được bao bọc trong <form> gắn thẻ và sử dụng <input> thẻ để tạo các phần tử.
Biểu mẫu HTML cung cấp một cách để người dùng tương tác với một trang web hoặc ứng dụng web. Biểu mẫu web cho phép người dùng gửi dữ liệu mà một trang web hoặc máy chủ sau đó có thể xử lý và lưu trữ.
Làm cách nào để bạn tạo một biểu mẫu trong HTML? Đó là câu hỏi mà chúng tôi sẽ trả lời trong hướng dẫn này.
Hướng dẫn này sẽ thảo luận, sử dụng một ví dụ, những kiến thức cơ bản về biểu mẫu HTML, cách thêm các trường đầu vào vào biểu mẫu và cách sử dụng biểu mẫu để gửi dữ liệu đến máy chủ. Đến cuối hướng dẫn này, bạn sẽ trở thành một chuyên gia trong việc tạo biểu mẫu trong HTML.
Biểu mẫu HTML
Trong HTML, biểu mẫu được tạo thành từ một hoặc nhiều phần tử. Biểu mẫu HTML có thể bao gồm các yếu tố sau:
- trường văn bản một dòng
- hộp văn bản
- hộp thả xuống
- hộp kiểm
- các nút
- các nút radio
Các phần tử này, ngoài các nút và hộp văn bản, hãy sử dụng <input> trong mã HTML.
Sau khi người dùng gửi biểu mẫu, nội dung của biểu mẫu có thể:
- được gửi đến máy chủ để xử lý thêm hoặc
- được xử lý bởi trình duyệt web.
Trước khi bạn tạo một biểu mẫu trong HTML, bạn nên nghĩ về cách bạn sẽ thiết kế biểu mẫu của mình. Bạn cần thu thập dữ liệu nào? Làm thế nào bạn sẽ giữ cho biểu mẫu của bạn đơn giản? Biểu mẫu của bạn càng lớn thì khả năng người dùng điền vào càng ít.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Đối với hướng dẫn này, chúng tôi sẽ tạo một biểu mẫu cho trang web của một quán cà phê. Giả sử rằng Three Brothers Coffee House yêu cầu chúng tôi thiết kế một biểu mẫu cho phép họ chấp nhận các truy vấn của khách hàng thông qua trang web của họ.
Chúng tôi được giao nhiệm vụ tạo một biểu mẫu chấp nhận bốn phần thông tin. Đây là:
- Tên của người dùng.
- Địa chỉ email của người dùng .
- Liệu người dùng đã từng truy cập quán cà phê.
- Thông báo người dùng muốn gửi đến quán cà phê.
Điều này có nghĩa là biểu mẫu của chúng tôi sẽ cần bao gồm bốn yếu tố. Biểu mẫu của chúng tôi cũng sẽ cần một nút để người dùng có thể gửi biểu mẫu của họ.
HTML <form> Gắn thẻ
Các biểu mẫu trong HTML được bao gồm trong <form> nhãn. Dưới đây là một ví dụ về biểu mẫu trong HTML:
<form> // Elements </form>
<form> được sử dụng để xác định một biểu mẫu trong HTML. Sau khi được xác định, <form> thẻ có thể bao gồm các phần tử biểu mẫu, chẳng hạn như hộp kiểm và trường văn bản một dòng.
Phần tử biểu mẫu chấp nhận hai thuộc tính:action và phương thức method . Chúng ta sẽ thảo luận về các thuộc tính này sau trong hướng dẫn này.
<input> Các phần tử cho biểu mẫu HTML
Hầu hết các điều khiển biểu mẫu HTML bao gồm phần tử đầu vào . Chúng được sử dụng để thu thập các loại dữ liệu khác nhau từ người dùng. Các phần tử đầu vào được xác định bằng <input> thẻ.
Cách <input> phần tử xuất hiện trên một trang web phụ thuộc vào thuộc tính loại được chỉ định. Ví dụ:nếu một trường nhập là một hộp văn bản, thì nó sẽ xuất hiện khác với nếu nó là một nút radio.
Cú pháp cho <input> như sau:
<input type="type" id="elementId">
Trong ví dụ này, <input> chấp nhận hai thuộc tính. Thuộc tính đầu tiên, được gọi là type , là loại đầu vào mà trường biểu mẫu sẽ chấp nhận. Loại method thuộc tính có thể có nhiều giá trị, nhưng một số giá trị phổ biến nhất là:
- Nút
method -
checkbox -
email -
text -
number -
radio
Thuộc tính thứ hai trong ví dụ của chúng tôi là id . Thuộc tính này được sử dụng để xác định duy nhất phần tử đầu vào và sẽ được sử dụng để truy cập vào dữ liệu mà người dùng đã gửi theo tập lệnh mà chúng tôi sử dụng để xử lý đầu vào biểu mẫu của người dùng.
Hãy trở lại Quán cà phê Ba Anh Em. Biểu mẫu chúng tôi đang xây dựng cần chấp nhận bốn phần thông tin về người dùng của chúng tôi. Hai phần thông tin đầu tiên chúng tôi muốn thu thập là tên và địa chỉ email của người dùng.
Chúng tôi có thể thu thập những thông tin này bằng hai <input> các thẻ:
<form> <label for="name">Name:</label><br/> <input type="text" id="name" name="name"><br /><br /> <label for="email">Email:</label><br/> <input type="email" id="email" name="email"> </form>
Nhấp vào 
nút trong trình chỉnh sửa ở trên để chạy mã.
Như bạn có thể thấy, chúng tôi đã tạo một biểu mẫu chấp nhận hai giá trị:tên của người dùng và địa chỉ email của người dùng. Trong ví dụ này, chúng tôi cũng sử dụng <label> yếu tố. Chúng ta sẽ sớm thảo luận về yếu tố này.
Tên method Thuộc tính trong các biểu mẫu HTML
Mọi phần tử biểu mẫu trong biểu mẫu HTML phải có name thuộc tính. Thuộc tính này được sử dụng để gửi nội dung của biểu mẫu. Nếu bạn không chỉ định name trong một phần tử biểu mẫu, nội dung của phần tử đó sẽ không được gửi đến máy chủ.
Trong ví dụ trên, trường "Tên" của chúng tôi có name thuộc tính có giá trị name và trường “Email” của chúng tôi có name thuộc tính với giá trị email .
HTML <label> Phần tử
Trong ví dụ trên, chúng tôi đã sử dụng <label> phần tử để thêm nhãn HTML vào từng mục trong biểu mẫu của chúng tôi. <label> thẻ cho phép chúng tôi nêu rõ mục đích của phần tử biểu mẫu và dữ liệu mà nó chấp nhận.
Một <label> cũng cho phép chúng tôi xác định văn bản mà máy tính sẽ đọc cho người dùng sử dụng trình đọc màn hình. Điều này là do trình đọc màn hình sẽ đọc nhãn khi nó gặp trường đầu vào trên trang web.
Đây là cú pháp cho nhãn HTML:
<form> <label for="name">Name:</label><br/> <input type="text" id="name" name="name"> </form>
Trong ví dụ trên, chúng tôi đã tạo một biểu mẫu thu thập tên người dùng. Chúng tôi đã sử dụng <label> để thêm nhãn Name: sang biểu mẫu. Lưu ý rằng chúng tôi cũng đã chỉ định một thuộc tính được gọi là for trong <label> của chúng tôi yếu tố. Thuộc tính này phải bằng id thuộc tính được input sử dụng phần tử mà nhãn được liên kết, vì nó liên kết một biểu mẫu với nhãn tương ứng của nó.
Phần tử biểu mẫu HTML
Hãy trở lại Quán cà phê Ba Anh Em. Khi bắt đầu hướng dẫn này, chúng tôi nói rằng chúng tôi muốn thu thập bốn phần thông tin:tên người dùng, địa chỉ email của họ, liệu họ có phải là khách hàng hay không và thông điệp họ muốn gửi đến quán cà phê.
Cho đến nay, chúng tôi đã tạo hai trường biểu mẫu:trường tên và trường email. Hãy thảo luận về cách chúng ta có thể tạo phần còn lại của biểu mẫu.
Các nút radio
Nút radio là một loại đầu vào phổ biến được sử dụng trong các biểu mẫu HTML. Nút radio cho phép người dùng chọn một giá trị từ một số lựa chọn giới hạn. Thông thường, các nút radio được sử dụng cho các biểu mẫu thu thập thông tin giới tính, độ tuổi hoặc câu trả lời có / không.
Sau đây là cú pháp cho một nút radio:
<input type="radio" name="radio_button">
Trên biểu mẫu của chúng tôi, chúng tôi muốn hỏi người dùng xem họ có phải là khách hàng của Three Brothers Coffee House hay không. Chúng ta có thể sử dụng một nút radio để thực hiện nhiệm vụ này. Đây là mã chúng tôi sẽ sử dụng để làm như vậy:
<form> <p>Are you a customer of the Three Brothers Coffee House?</p> <input type="radio" id="yes" name="customer" value="yes"> <label for="yes">Yes</label><br /> <input type="radio" id="no" name="customer" value="no"> <label for="no">No</label><br /> </form>
Nhấp vào nút trong trình chỉnh sửa ở trên để chạy mã.
Sau đó, người dùng của chúng tôi có thể gửi một trong hai giá trị:yes hoặc no .
Hãy chia nhỏ mã của chúng ta. Đầu tiên, chúng tôi xác định một <form> . Sau đó, chúng tôi sử dụng <p> để thêm một số văn bản giải thích cho người dùng.
Trên dòng tiếp theo, chúng tôi tạo một nút radio có giá trị yes . Sau đó, chúng tôi tạo một nhãn cho nút này, nó hiển thị văn bản “Có”. Tiếp theo, chúng tôi tạo một nút radio với giá trị no và tạo nhãn cho nút đó, nhãn này hiển thị văn bản “Không”.
Lưu ý rằng trong mã của chúng tôi, các nút radio của chúng tôi có giá trị method thuộc tính được chỉ định. Giá trị này là dữ liệu sẽ được gửi đến máy chủ khi người dùng gửi biểu mẫu. Vì vậy, nếu người dùng nhấp vào nút radio “Có”, giá trị yes sẽ được gửi đến máy chủ.
HTML <textarea> Phần tử
Chúng tôi có một phần tử đầu vào nữa mà chúng tôi muốn thêm vào biểu mẫu của mình:một vùng văn bản. Cho đến nay, chúng tôi đã thu thập tên người dùng, địa chỉ email của họ và liệu họ có phải là khách hàng hay không. Bây giờ chúng tôi muốn thêm phần tử biểu mẫu cho phép họ gửi tin nhắn đến quán cà phê.
Chúng tôi có thể làm như vậy bằng cách sử dụng <textarea> phần tử như thế này:
<form> <label for="message">Message:</label><br /> <textarea id="message" name="message"> What message do you want to send to the Three Brothers Coffee House? </textarea> </form>
Trong mã của chúng tôi, chúng tôi bắt đầu bằng cách xác định một nhãn method hiển thị giá trị “Thông báo:”.
Sau đó, chúng tôi xác định một vùng văn bản bằng cách sử dụng <textarea> nhãn. Chúng tôi chỉ định hai thuộc tính cho vùng văn bản này:
-
id. Điều này được sử dụng để tham chiếu nội dung biểu mẫu của chúng tôi sau khi người dùng gửi phản hồi của họ. -
name. Điều này là bắt buộc để có thể gửi nội dung của biểu mẫu của chúng tôi.
Cuối cùng, chúng tôi thêm thông điệp What message do you want to send to the Three Brothers Coffee House? giữa việc mở và đóng <textarea> của chúng tôi các thẻ. Đây là thông báo mặc định mà người dùng sẽ thấy.
Kết quả của mã của chúng tôi như sau:
Nhấp vào nút trong trình chỉnh sửa ở trên để chạy mã.
Bây giờ chúng ta có một trường vùng văn bản. Người dùng có thể sử dụng trường này để gửi tin nhắn đến quán cà phê.
HTML submit Nút
Bây giờ chúng tôi đã xác định nội dung của biểu mẫu của mình, chúng tôi đã sẵn sàng thêm một submit khuy ao. Đây là cú pháp cho submit nút:
<input type="submit" value="Submit">
Submit các nút được sử dụng để gửi nội dung của biểu mẫu đến trình xử lý biểu mẫu. (Trình xử lý biểu mẫu thường là một trang trên máy chủ web có thể xử lý nội dung của biểu mẫu.) submit nút liên kết đến trình xử lý biểu mẫu. Bạn cần chỉ định trình xử lý biểu mẫu bằng <form> hành động action thuộc tính.
Giả sử chúng ta muốn thêm một submit vào biểu mẫu web của chúng tôi cho quán cà phê. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
<form action="/post.php">
<label for="name">Name:</label>
<br/>
<input type="text" id="name" name="name">
<br />
<br />
<label for="email">Email:</label>
<br />
<input type="email" id="email" name="email">
<br />
<p>Are you a customer of the Three Brothers Coffee House?</p>
<input type="radio" id="yes" name="customer" value="yes">
<label for="yes">Yes</label>
<br />
<input type="radio" id="no" name="customer" value="no">
<label for="no">No</label>
<br /><br />
<label for="message">Message:</label><br />
<textarea id="message" name="message">
What message do you want to send to the Three Brothers Coffee House?
</textarea>
<input type="submit" value="Submit">
</form>
Như bạn có thể thấy, chúng tôi đã thêm nút gửi vào biểu mẫu của mình. Chúng tôi cũng đã chỉ định một action trong <form> nhãn. Tham số này liên kết biểu mẫu với tệp sẽ xử lý nội dung của nó.
Gửi biểu mẫu web
Sau khi tạo biểu mẫu HTML, bạn cần tạo một trình xử lý sẽ xử lý dữ liệu mà người dùng gửi qua biểu mẫu của bạn. <form> phần tử cung cấp hai thuộc tính được sử dụng để gửi dữ liệu biểu mẫu đến máy chủ:action và phương thức method .
Biểu mẫu action Thuộc tính
Hành động method thuộc tính xác định vị trí của mã xử lý biểu mẫu. Khi biểu mẫu của bạn được gửi — khi người dùng nhấp vào submit nút — dữ liệu mà nó thu thập được sẽ được gửi đến trình xử lý biểu mẫu.
Trong ví dụ trên của chúng tôi, khi biểu mẫu được gửi, dữ liệu từ biểu mẫu được gửi đến trang post.php , bao gồm mã xử lý biểu mẫu của chúng tôi. Đây là ví dụ về biểu mẫu có action thuộc tính được xác định:
<form action="/post.php"> </form>
Nếu không có action thuộc tính được chỉ định, biểu mẫu được gửi đến trang hiện tại.
Phương thức method Thuộc tính
Phương thức method thuộc tính nêu phương thức HTTP sẽ được sử dụng khi gửi biểu mẫu. Theo mặc định, các biểu mẫu sử dụng GET nhưng bạn cũng có thể sử dụng bất kỳ phương thức HTTP nào khác, chẳng hạn như POST .
Đây là một ví dụ về biểu mẫu method thuộc tính trong hành động:
<form action="/post.php" method="POST"> </form>
Khi biểu mẫu này được gửi, dữ liệu mà biểu mẫu thu thập được sẽ được gửi đến máy chủ bằng cách sử dụng HTTP POST phương pháp. (Ngoài ra, nếu chúng tôi muốn gửi GET yêu cầu, chúng tôi có thể đã chỉ định "GET" hoặc chỉ để trống vì GET là phương thức mặc định.)
Trong hầu hết các trường hợp, bạn nên sử dụng HTTP POST phương pháp để gửi dữ liệu. Điều này là do GET làm cho dữ liệu biểu mẫu hiển thị trong trường địa chỉ của trang. Vì vậy, chúng tôi đã gửi một biểu mẫu tới post.php với một trường có tên là “name” có chứa giá trị “Pauline”, thông tin sau sẽ được gửi đến trang web:
/post.php?name=Pauline
Đây là một phương pháp gửi dữ liệu không an toàn. GET không bao giờ được sử dụng phương pháp này nếu bạn đang xử lý thông tin nhạy cảm.
Kết luận
Biểu mẫu là một tính năng quan trọng của HTML cho phép bạn thu thập và xử lý dữ liệu người dùng.
Trong hướng dẫn này, chúng ta đã thảo luận — sử dụng một ví dụ — những điều cơ bản về biểu mẫu trong HTML và cách bạn có thể tạo biểu mẫu web đầu tiên của mình. Bây giờ, bạn đã sẵn sàng để bắt đầu thiết kế và phát triển các biểu mẫu HTML của riêng mình như một chuyên gia!