Gõ html

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 số thuộc tính quan trọng và nội dung bên trong cặp thẻ đó là 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á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 sắc
  • ngày
  • ngày giờ
  • datetime-local
  • e-mail
  • tập tin
  • ẩn giấu
  • hình ảnh
  • tháng
  • con 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 biểu mẫu 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é

Phụ thuộc vào sự hỗ trợ của trình duyệt, trường địa chỉ url có thẻ tự động xác nhận khi gửi đến

  • Ví dụ 2
  • Ví dụ 4
  • Type Input. Đài
  • Ví dụ 5
  • Type Input. hộp kiểm
  • Ví dụ 6
  • Type Input. hộp kiểm
  • Các hộp kiểm cho phép người sử dụng lựa chọn không hoặc nhiều lựa chọn trong các lựa chọn được đưa ra
  • Nam Nữ Khác
  • Xác định các khoảng hợp lý cho các trường dữ liệu đầu vào
  • Bạn có thể tìm hiểu thêm và kỹ năng tốt hơn các tùy chọn đầu vào trong các bài học tiếp theo
  • Enter value
  • Tùy thuộc vào sự hỗ trợ của các trình duyệt, một bộ chọn ngày có thể hiển thị trong các trường dữ liệu đầu vào
  • Nhập một ngày trước 1980-01-01. Nhập một ngày sau 2000-01-01
  • Thẻ  được sử dụng khi trường dữ liệu bắt đầu chứa các giá trị là màu sắc
  • Bạn chọn những màu sắc mà mình yêu thích
  • Thẻ  được sử dụng khi trường dữ liệu bắt đầu vào chứa dữ liệu là giá trị trong phạm vi nhất định
  • Bạn có thể sử dụng các thuộc tính sau để xác định các giới hạn. tối thiểu, tối đa, bước, giá trị
  • Thẻ cho phép người sử dụng có thể lựa chọn tháng và năm
  • Bạn có thể sử dụng các thuộc tính sau để xác định các giới hạn. tối thiểu, tối đa, bước, giá trị
  • Thẻ cho phép người sử dụng có thể lựa chọn tháng và năm
  • Ví dụ 14
  • Thẻ  cho phép người sử dụng lựa chọn tuần và năm
  • Bạn có thể sử dụng các thuộc tính sau để xác định các giới hạn. tối thiểu, tối đa, bước, giá trị
  • Type Input. tuần
  • Ví dụ 19
  • Type Input. Tìm kiếm
  • Ví dụ 20
  • Type Input. điện thoại
  • Ví dụ 21
  • Type Input. url
  • Ví dụ 22
  • Phụ thuộc vào sự hỗ trợ của trình duyệt, trường địa chỉ url có thẻ tự động xác nhận khi gửi đến. use for input data start to input format text [one lines]

    Ví dụ 21

    
    
    
    
    
    
    User name:

    User password:

    Các kí tự trong trường password được ẩn đi [nó được mã hóa hiển thị thành hình sao hoặc các chấm tròn].

    Điện thoại

    Kiểu Nhập. url

    Mật khẩu người dùng.

    Thẻ  được sử dụng cho các trường đầu vào có chứa địa chỉ URL

    Phụ thuộc vào sự hỗ trợ của trình duyệt, trường địa chỉ url có thẻ tự động xác nhận khi gửi đến

    Một số điện thoại thông minh nhận kiểu đầu vào url và bổ sung thêm “. com” vào bàn phím để phù hợp với địa chỉ đầu vào url

    Chủ Đề