Các hình thức html là gì?

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

Show




    Ở 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ệu
    • method. Phương thức gửi dữ liệu
    • name. 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
    • e-mail
    • 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 web

    Vớ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

    Các loại đầu vào HTML5

    Ở đâ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ố

    Các điều khiển biểu mẫu khác

    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ư