Khi làm website bằng HTML, đặc biệt là sau này bạn học lên các ngôn ngữ phía máy chủ như PHP hay Python thì việc sử dụng form nhập liệu rất phổ biến như tạo form đăng nhập, form đăng dữ liệu lên website,…nếu nên
Ở dạng HTML, để tạo biểu mẫu, chúng ta sẽ sử dụng cặp thẻ , thẻ này sẽ chứa một vài thuộc tính quan trọng và nội dung bên trong cặp thẻ đó là các thẻ để khai báo các trường nhập liệu. Trước hết hãy xem qua một mẫu đăng nhập bằng HTML bên dưới đây
Xem Bút qEGdOQ của Thạch Phạm [@thachpham92] trên CodePen
Các thuộc tính trong thẻ
action. Đường dẫn đến một trang xử lý dữ liệu sau khi người dùng nhấn nút gửi dữ liệumethod. Phương thức gửi dữ liệuname. Tên của biểu mẫu
Hiện tại nếu bạn đang học HTML thì không cần quan tâm đến ba thuộc tính vì nó thuộc thẩm quyền xử lý của các ngôn ngữ phía máy chủ, nhưng bạn chỉ cần nhớ khi tạo biểu mẫu thì hãy nhớ khai báo các thuộc tính đó là được
Các thuộc tính trong thẻ
Thẻ này sẽ đại diện cho các trường nhập dữ liệu, mỗi thẻ là một trường nhập dữ liệu khác nhau. Tuy nhiên, kiểu dữ liệu của mỗi thẻ sẽ khác nhau dựa trên thuộc tính type bên trong nó vì hiện tại HTML đang hỗ trợ cho 23 kiểu dữ liệu, tương ứng với 23 giá trị của thuộc tính type
Danh sách các giá trị của thuộc tính type
- cái nút
- hộp kiểm
- màu
- ngày
- ngày giờ
- datetime-local
- tập tin
- ẩn giấu
- hình ảnh
- tháng
- số
- mật khẩu mở khóa
- Đài
- phạm vi
- cài lại
- Tìm kiếm
- Gửi đi
- điện thoại
- chữ
- thời gian
- url
- tuần
Thay vì giải thích thì bạn nên tự tay thử từng loại để biết chức năng của nó là gì nhé, chỉ cần thay giá trị của thuộc tính type tương ứng với danh sách trên thôi. Tuy nhiên, bạn sẽ sử dụng nhiều nhất là kiểu 1 [trường nhập dữ liệu ở dạng chữ và số], 2 [trường nhập mật khẩu, nó sẽ tự mã hóa mật khẩu nhập bằng ký tự *], 3 [trường tạo nút gửi
Xem thêm về các thuộc tính của thẻ
Chỉ vậy thôi, bây giờ bạn chỉ cần nhớ về cách tạo form trong HTML là được, còn khi nào quên thì có thể lên mạng tham khảo tại trang W3Schools nhé
Mô-đun này cung cấp một loạt bài viết sẽ giúp bạn nắm vững các yếu tố cần thiết của biểu mẫu web. Các biểu mẫu web là một công cụ rất mạnh để tương tác với người dùng — chúng thường được sử dụng phổ biến nhất để thu thập dữ liệu từ người dùng hoặc cho phép họ kiểm soát giao diện người dùng. Tuy nhiên, vì những lý do lịch sử và kỹ thuật, không phải lúc nào chúng ta cũng rõ ràng về cách sử dụng hết tiềm năng của chúng. Trong các bài viết được liệt kê dưới đây, chúng tôi sẽ đề cập đến tất cả các khía cạnh thiết yếu của biểu mẫu Web bao gồm đánh dấu cấu trúc HTML của chúng, điều khiển biểu mẫu kiểu dáng, xác thực dữ liệu biểu mẫu và gửi dữ liệu đến máy chủ
Tìm cách trở thành một nhà phát triển web front-end?
Chúng tôi đã tập hợp một khóa học bao gồm tất cả các thông tin cần thiết mà bạn cần để hướng tới mục tiêu của mình
Bắt đầu
Trước khi bắt đầu mô-đun này, ít nhất bạn nên học qua phần Giới thiệu về HTML của chúng tôi. Tại thời điểm này, bạn sẽ thấy dễ hiểu và cũng có thể sử dụng hướng dẫn điều khiển biểu mẫu gốc Cơ bản của chúng tôi
Tuy nhiên, việc thành thạo các biểu mẫu không chỉ yêu cầu kiến thức về HTML — bạn cũng cần tìm hiểu một số kỹ thuật cụ thể để tạo kiểu cho các điều khiển biểu mẫu và cần có một số kiến thức về kịch bản để xử lý những thứ như xác thực và tạo các điều khiển biểu mẫu tùy chỉnh. Do đó, trước khi bạn xem các phần khác được liệt kê bên dưới, chúng tôi khuyên bạn nên bỏ qua và tìm hiểu một số CSS và JavaScript trước
Văn bản trên là một chỉ báo tốt về lý do tại sao chúng tôi đặt các biểu mẫu web vào mô-đun độc lập của riêng nó, thay vì cố gắng trộn các bit của nó vào các khu vực chủ đề HTML, CSS và JavaScript — các phần tử biểu mẫu phức tạp hơn hầu hết các HTML khác
Ghi chú. Nếu bạn đang làm việc trên máy tính/máy tính bảng/thiết bị khác mà bạn không có khả năng tạo tệp của riêng mình, bạn có thể thử [hầu hết] các ví dụ về mã trong một chương trình viết mã trực tuyến như JSBin hoặc Glitch
hình thức đầu tiên của bạn
Bài viết đầu tiên trong loạt bài của chúng tôi cung cấp cho bạn trải nghiệm đầu tiên về tạo biểu mẫu web, bao gồm thiết kế một biểu mẫu đơn giản, triển khai biểu mẫu đó bằng cách sử dụng các thành phần HTML phù hợp, thêm một số kiểu dáng rất đơn giản thông qua CSS và cách dữ liệu được gửi đến máy chủ
Cách cấu trúc một biểu mẫu webVới những kiến thức cơ bản đã xong, bây giờ chúng ta xem xét chi tiết hơn các thành phần được sử dụng để cung cấp cấu trúc và ý nghĩa cho các phần khác nhau của biểu mẫu
Điều khiển biểu mẫu gốc cơ bản
Chúng ta bắt đầu phần này bằng cách xem xét chi tiết chức năng của các loại HTML gốc, xem xét những tùy chọn nào có sẵn để thu thập các loại dữ liệu khác nhau
Ở đây, chúng tôi tiếp tục đi sâu vào phần tử , xem xét các loại đầu vào bổ sung được cung cấp khi HTML5 được phát hành và các cải tiến thu thập dữ liệu và điều khiển giao diện người dùng khác nhau mà chúng cung cấp. Ngoài ra, chúng tôi xem xét yếu tố
Tiếp theo, chúng ta xem xét tất cả các điều khiển biểu mẫu không phải ____1_______ và các công cụ liên quan, chẳng hạn như , , và
Tạo kiểu cho các biểu mẫu web
Bài viết này cung cấp phần giới thiệu về các biểu mẫu tạo kiểu bằng CSS, bao gồm tất cả những điều cơ bản mà bạn có thể cần biết đối với các tác vụ tạo kiểu cơ bản
Kiểu dáng biểu mẫu nâng caoỞ đây chúng ta xem xét một số kỹ thuật tạo kiểu biểu mẫu nâng cao hơn cần được sử dụng khi cố gắng xử lý một số phần tử biểu mẫu khó tạo kiểu hơn
Lớp giả giao diện người dùngGiới thiệu về các lớp giả giao diện người dùng cho phép các điều khiển biểu mẫu HTML được nhắm mục tiêu dựa trên trạng thái hiện tại của chúng
Xác thực biểu mẫu phía máy khách
Gửi dữ liệu là chưa đủ — chúng tôi cũng cần đảm bảo rằng dữ liệu người dùng nhập vào biểu mẫu ở định dạng chính xác để xử lý thành công và dữ liệu đó sẽ không làm hỏng các ứng dụng của chúng tôi. Chúng tôi cũng muốn giúp người dùng điền chính xác các biểu mẫu của chúng tôi và không cảm thấy khó chịu khi cố gắng sử dụng ứng dụng của chúng tôi. Xác thực biểu mẫu giúp chúng tôi đạt được những mục tiêu này — bài viết này cho bạn biết những điều bạn cần biết
Gửi dữ liệu biểu mẫuBài viết này xem xét điều gì sẽ xảy ra khi người dùng gửi biểu mẫu — dữ liệu sẽ đi đến đâu và chúng tôi xử lý dữ liệu đó như thế nào khi đến đó?
Các bài viết sau đây không cần thiết cho lộ trình học tập, nhưng chúng sẽ rất thú vị và hữu ích khi bạn đã nắm vững các kỹ thuật trên và muốn biết thêm
Cách xây dựng các điều khiển biểu mẫu tùy chỉnhBạn sẽ gặp một số trường hợp trong đó các tiện ích biểu mẫu gốc không cung cấp những gì bạn cần, ví dụ:. g. vì kiểu dáng hoặc chức năng. Trong những trường hợp như vậy, bạn có thể cần xây dựng tiện ích biểu mẫu của riêng mình từ HTML thô. Bài viết này giải thích cách bạn làm điều này và những cân nhắc bạn cần biết khi làm như vậy, với một nghiên cứu điển hình thực tế
Gửi biểu mẫu qua JavaScriptBài viết này xem xét các cách sử dụng biểu mẫu để tập hợp yêu cầu HTTP và gửi yêu cầu đó qua JavaScript tùy chỉnh, thay vì gửi biểu mẫu tiêu chuẩn. Nó cũng xem xét lý do tại sao bạn muốn làm điều này và ý nghĩa của việc làm như vậy. [Xem thêm Sử dụng các đối tượng FormData. ]
Bảng tương thích thuộc tính CSS cho các điều khiển biểu mẫuBài viết cuối cùng này cung cấp một tài liệu tham khảo hữu ích cho phép bạn tra cứu thuộc tính CSS nào tương thích với thành phần biểu mẫu nào