Trong bài viết này, bạn sẽ tìm hiểu cách tạo trường nhập văn bản trong HTML. Bạn cũng sẽ tìm hiểu về các biểu mẫu web và có cái nhìn tổng quan về cách chúng hoạt động, vì các hộp văn bản là một tính năng phổ biến của mọi biểu mẫu
Bắt đầu nào
Biểu mẫu web là gì?
Biểu mẫu là một cách hiệu quả để thu thập thông tin
Có nhiều trường hợp bạn cần điền vào biểu mẫu vật lý, tài liệu vật lý được in và cung cấp thông tin cá nhân
Ví dụ: bạn có thể điền vào biểu mẫu và đưa cho ai đó khi bạn bắt đầu một công việc mới hoặc khi bạn đi kiểm tra sức khỏe hoặc khi bạn đang trong quá trình thuê/mua nhà – hoặc bất kỳ
Cũng giống như biểu mẫu vật lý, biểu mẫu web kỹ thuật số trực tuyến là một cách để nhận và thu thập thông tin đầu vào, thông tin và dữ liệu quan trọng từ người dùng và khách truy cập, sử dụng kết hợp các công nghệ web
Biểu mẫu web bắt chước biểu mẫu vật lý bằng cách chứa khoảng trống để người dùng điền thông tin của họ
Biểu mẫu web sử dụng nhiều công cụ hoặc điều khiển biểu mẫu khác nhau để thu thập thông tin đầu vào của người dùng
Một trang web có thể có hộp tìm kiếm hoặc trường nhập văn bản để nhập một dòng văn bản. Điều này cho phép người dùng tìm kiếm một cái gì đó cụ thể
Một trang web cũng có thể chứa một biểu mẫu đăng ký cho phép người dùng đăng ký nhận bản tin hoặc các bản cập nhật khác
Điều đó thường chứa trường nhập văn bản để nhập tên, họ và địa chỉ email của người dùng
Nhiều trang web cũng có biểu mẫu đăng ký/đăng nhập khi mua hàng trực tuyến, chẳng hạn như nơi người dùng nhập tên người dùng của họ vào trường văn bản và mật khẩu của họ vào trường riêng. Mặc dù các trường mật khẩu cũng là các trường văn bản, nhưng mỗi ký tự văn bản được che bởi một chấm đen để ẩn nội dung đang được nhập
Một trang web cũng có thể có vùng văn bản lớn hơn để người dùng nhập các đoạn văn bản dài hơn, điều này rất hữu ích khi để lại nhận xét bên dưới bài đăng trên blog
Nhiều biểu mẫu cũng cho phép người dùng chọn một tùy chọn cụ thể từ một số tùy chọn bằng cách chọn nút radio. Họ có thể cho phép người dùng chọn nhiều tùy chọn bằng cách chọn/bỏ chọn hộp kiểm
Cuối cùng, tất cả các biểu mẫu đều có nút gửi để gửi dữ liệu đến máy chủ nơi dữ liệu sẽ được lưu trữ hoặc xử lý
Biểu mẫu web hoạt động như thế nào
Internet là mạng toàn cầu rộng lớn kết nối hàng triệu máy tính trên toàn thế giới
Các máy tính là một phần của mạng giao tiếp với nhau bằng cách gửi và nhận thông tin
Cách đạt được điều này là nhờ kiến trúc yêu cầu/phản hồi máy khách/máy chủ của web
Máy khách, thường là trình duyệt web như Google Chrome, gửi yêu cầu đến máy chủ web
Máy chủ web là một phần cứng hoặc phần mềm máy tính lưu trữ các tệp tạo nên trang web và phân phối chúng bất cứ khi nào nhận được yêu cầu làm như vậy
Yêu cầu có thể là xem một biểu mẫu là một phần của trang web
Máy chủ gửi lại các tệp tạo nên biểu mẫu web dưới dạng phản hồi. Trình duyệt web sau đó tập hợp các tệp lại với nhau và người dùng xem biểu mẫu trong trình duyệt web
Chu trình yêu cầu/phản hồi này được cấu trúc bởi một giao thức, được gọi là HTTP [viết tắt của HyperText Transfer Protocol]
Vì vậy, khi sử dụng biểu mẫu web, người dùng nhập dữ liệu cần thiết. Sau đó, sau khi xác thực phía máy khách để kiểm tra xem tất cả các trường bắt buộc đã được điền chưa và dữ liệu có đúng định dạng hay không, người dùng nhấp vào nút gửi
Sau đó, dữ liệu được gửi đến máy chủ theo cặp tên-giá trị trong yêu cầu HTTP. Phương pháp tổ chức thông tin theo cặp tên-giá trị này đảm bảo rằng dữ liệu chính xác tương ứng với thành phần biểu mẫu chính xác
Sau đó, một ngôn ngữ phía máy chủ như PHP, Ruby hoặc Python được sử dụng để xử lý thông tin và lưu trữ thông tin đó trong cơ sở dữ liệu để sử dụng hoặc truy xuất sau này
Cách tạo biểu mẫu web trong HTML
Để tạo biểu mẫu trong HTML, bạn cần sử dụng phần tử
Web form
3 dùng để thu thập thông tinPhần tử
Web form
3 có thẻ mở
Web form
3 và đóng thẻ
Web form
6
Web form
Phần tử
Web form
3 có hai thuộc tính- Thuộc tính
8, chỉ định URL nơi bạn muốn dữ liệu được gửi và xử lýWeb form
- Thuộc tính
9 chấp nhận làm giá trị cho một trong hai động từ HTTP, hoặc làWeb form
0 hoặc là
1. Nếu không bao gồm thuộc tính
9, phương thứcWeb form
0 được sử dụng theo mặc định
Web form
Tuy nhiên, điều này một mình không thu thập bất kỳ đầu vào nào của người dùng
Phần tử HTML
4 là gì?
Phần tử
5 được sử dụng phổ biến nhất để thu thập và truy xuất dữ liệu người dùng từ biểu mẫu webĐó là nơi người dùng nhập dữ liệu của họ
Nó được lồng bên trong phần tử
Web form
3 và nó là phần tử tự đóng. Điều này có nghĩa là nó không yêu cầu thẻ đóng. [Các thẻ đóng có dấu gạch chéo về phía trước,
7. ]Bạn sử dụng nó để tạo các kiểu trường nhập liệu khác nhau hoặc tạo các điều khiển nhập liệu để người dùng nhập nhiều loại thông tin khác nhau
Nó tạo trường văn bản, trường email, trường mật khẩu, hộp kiểm, nút radio, menu thả xuống, nút gửi, khả năng chọn và tải tệp và hình ảnh lên từ máy tính của người dùng, v.v.
Cách xác định loại trường đầu vào hoặc kiểm soát đầu vào biểu mẫu là đặt thuộc tính
8 và gán cho nó một giá trịCú pháp chung của
5 trông như thế này________số 8Ví dụ: để tạo một trường cho phép người dùng tải tệp lên, phần tử
5 sẽ trông như thế này
Web form
1Thuộc tính
8 xác định loại dữ liệu mà phần tử
4 có thể chấp nhậnCách tạo trường nhập liệu hộp văn bản HTML
Giá trị mặc định của thuộc tính
8 của
4 khi không được chỉ định là văn bản. Vì vậy, kiểu nhập văn bản là kiểu nhập phổ biến nhấtDòng
Web form
15 tạo trường nhập văn bản một dòng, nơi người dùng có thể nhập bất kỳ kiểu nhập văn bản nào
Web form
7Khi bạn xem trang trong trình duyệt, bạn có thể thấy rằng một trường nhập văn bản một dòng đã được tạo
Cách thêm văn bản giữ chỗ vào trường văn bản
Văn bản giữ chỗ hay còn gọi là văn bản điền vào là một cách nhắc nhở và gợi ý cho người dùng về loại thông tin họ cần điền vào biểu mẫu. Nó cũng có thể cung cấp một giá trị mặc định trước khi họ bắt đầu nhập
Web form
8Mã từ trên sẽ dẫn đến kết quả như sau
Tầm quan trọng của thuộc tính
Web form
16 trong Trường văn bản
Web form
Khi gửi biểu mẫu và gửi nó đến máy chủ, máy chủ cần phân biệt và phân biệt giữa các loại dữ liệu được gửi khác nhau mà nó thu thập
Ví dụ: nó cần biết đâu là tên người dùng, đâu là mật khẩu và đâu là địa chỉ email
Điều này có nghĩa là mỗi trường văn bản cần một thuộc tính
Web form
16 và một giá trị để làm cho loại dữ liệu được gửi rõ ràng hơnVí dụ: bạn có thể sử dụng cách sau để nhắc ai đó nhập tên đầy đủ của họ vào trường văn bản
Web form
1Giả sử người dùng nhập tên "John Bexley" vào trường văn bản. Điều này sau đó sẽ trở thành giá trị của thuộc tính
Web form
16Như đã đề cập trước đó, dữ liệu trong biểu mẫu được gửi theo cặp tên-giá trị. Trong trường hợp này, máy chủ sẽ biết rằng
Web form
16 của người dùng là
Web form
70, cụ thể là nó sẽ giống như
Web form
71Để đưa ra một ví dụ khác
Web form
6Đoạn mã trên có hai trường văn bản riêng biệt để người dùng nhập riêng tên và họ của họ
Nếu họ nhập "John" làm tên, thì cặp tên-giá trị được gửi tới máy chủ sẽ là
Web form
72Nếu họ nhập "Bexley" làm họ, thì cặp tên-giá trị được gửi đến máy chủ sẽ là
Web form
73Cách tạo thông tin văn bản bắt buộc
Bạn có thể làm cho nó sao cho một số trường nhất định là bắt buộc và người dùng cần điền vào
HTML5 đã giới thiệu xác thực phía máy khách
Đây là tính năng hiển thị thông báo nếu người dùng chưa điền vào các trường bắt buộc hoặc nhập sai thông tin. Điều đó cũng có nghĩa là họ sẽ không thể gửi biểu mẫu
Tất cả những gì bạn cần làm để kích hoạt tính năng này là thêm thuộc tính
Web form
74 vào phần tử
5. Thuộc tính này không cần phải có giá trịHãy nhớ rằng khi thêm nhiều thuộc tính vào phần tử
5, bạn không cần phải thêm các phần tử theo một thứ tự nhất định
Web form
2Xem điều gì sẽ xảy ra nếu người dùng không điền vào một trong các trường
Một thông báo sẽ xuất hiện và người dùng sẽ không thể gửi biểu mẫu nếu các trường bắt buộc chưa được hoàn thành
Cách đặt số ký tự tối thiểu và tối đa trong hộp văn bản
Bạn có thể chỉ định số ký tự tối thiểu và tối đa mà người dùng có thể nhập vào trường văn bản
Để tạo số lượng ký tự tối thiểu, hãy sử dụng thuộc tính
Web form
77Ví dụ: bạn có thể có nó để tên người dùng của người dùng dài ít nhất ba ký tự
Web form
4Người dùng sẽ không thể gửi biểu mẫu nếu tên người dùng ngắn hơn ba ký tự
Để giới hạn số lượng ký tự mà người dùng nhập vào trường văn bản, hãy sử dụng thuộc tính
Web form
78Một ví dụ về việc kết hợp cả hai thuộc tính
Web form
77 và
Web form
78 có thể như thế này
Web form
0Trong ví dụ trên, tên người dùng của người dùng phải dài ít nhất 3 ký tự và không dài hơn 20 ký tự
Làm thế nào để
Web form
81 Điều khiển biểu mẫu
Web form
Cho đến nay, tôi đã sử dụng phần tử
Web form
82 để viết một số văn bản trước hộp văn bản, theo cách này sẽ nhắc người dùng và cho họ biết những gì họ cần nhậpNhưng đây không phải là cách thực hành tốt nhất và không thể truy cập được
Mỗi điều khiển biểu mẫu, trong trường hợp này là mỗi trường văn bản, phải có phần tử
Web form
83 của riêng nóĐiều này làm cho biểu mẫu có thể truy cập được đối với người dùng khiếm thị sử dụng các công nghệ hỗ trợ như trình đọc màn hình
Một cách để sử dụng nó là lồng bất kỳ văn bản giới thiệu nào và
Web form
15 vào phần tử
Web form
83 như vậy
Web form
1Một cách khác để sử dụng phần tử
Web form
83 và có kết quả tương tự là tách nó ra khỏi phần tử
5Trong trường hợp này, thuộc tính
Web form
88 cần được thêm vào
Web form
83 và thuộc tính
Web form
10 được thêm vào
5 để liên kết cả hai với nhauGiá trị của
Web form
88 sẽ giống với
Web form
10
Web form
2Sự kết luận
Tóm lại, để tạo trường nhập văn bản trong HTML, bạn cần ít nhất
- Phần tử
5, thường nằm bên trong phần tử
3Web form
- Để đặt thuộc tính
8 có giá trị là
17. Điều này sẽ tạo ra một trường nhập văn bản một dòngWeb form
- Đừng quên thêm thuộc tính
16. Điều này xác định thông tin cho từng điều khiển biểu mẫu được tạo và làm cho mọi thứ rõ ràng hơn cho máy chủWeb form
Để tìm hiểu thêm về HTML và CSS, hãy xem Chứng chỉ thiết kế web đáp ứng của freeCodeCamp, nơi bạn sẽ học theo cách tương tác trong khi xây dựng các dự án thú vị trên đường đi
Cảm ơn đã đọc và mã hóa hạnh phúc
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Học một cái gì đó mới mỗi ngày và viết về nó
Nếu bài viết này hữu ích, hãy tweet nó
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu