Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Form trong HTML

5/5 - (3 bình chọn)

Ở bài trước mình và các bạn đã tìm hiểu về cách tạo ra bảng và biết được tác dụng của bảng trong HTML là dùng để lưu trữ dữ liệu. Vậy giờ mình muốn tạo ra một form để nhập cơ sở dữ liệu được không? Câu trả lời là có và khi bạn muốn thu thập thông tin dữ liệu của một số người như tên, tuổi, nghề nghiệp… thì khi đó ở trong HTML có các mẫu form được yêu cầu để thu thập dữ liệu vào từ site người sử dụng sau đó sẽ thông báo nó tới phần back-end để xử lý.  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,…Đó là lý do tại sao hôm nay mình sẽ hướng dẫn các bạn việc tạo form và giới thiệu các thuộc tính trong Form.

Trong HTML để tạo form chúng ta sử dụng cặp thẻ <form> </form>, thẻ này chứa một vài thẻ quan trọng, nội dung trong cặp thẻ đó là <input /> để khai báo các trường nhập liệu. Mình đưa ra ví dụ cho các bạn dễ hình dung về cú pháp khai báo cũng như cách sử dụng form nhé.

Form trong HTML form-trong-html

Form trong HTML kq-form-trong-html

Trong đó:

Các thuộc tính chính của form

  • action: Đường dẫn đến một trang xử lý dữ liệu sau khi người dùng ấn nút gửi dữ liệu.
  • method: Phương thức gửi dữ liệu, có 2 loại là POST hoặc GET
  • name: Tên của form.
  • target: Xác định cửa sổ hoặc frame để hiển thị kết quả. Thuộc tính có thể nhận các giá trị như _blank, _self, _parent….
  • enctype: Bạn sử dụng thuộc tính này để xác định cách mà trình duyệt mã hóa dữ liệu trước khi nó gửi tới Server. Các giá trị có thể nhận là:
    •  application/x-www-form-urlencoded – Đây là phương thức tiêu chuẩn mà hầu hết các form sử dụng.
    • mutlipart/form-data – Nó được sử dụng khi bạn muốn tải lên dữ liệu nhị phân trong mẫu form của các file như ảnh, word….

Các thuộc tính của thẻ input

  • Text Input
  • Checkbox
  • Radio Box
  • Select Box
  • File Select Box
  • Submit

Trong thẻ input có rất nhiều kiểu hiển thị và chức năng khác nhau, mình xin nêu ra một số các kiểu chính và hay dùng nhất

  • Text Input một dòng: Sử dụng cho các mục mà yêu cầu chỉ một dòng của dữ liệu đầu vào của người sử dụng như các hộp tìm kiếm hoặc tên. Form này được tạo ra bằng cách sử dụng thẻ <input>.
  • Password Input :Đây cũng là một Text Input một dòng đơn nhưng nó giấu các ký tự ngay sau khi người sử dụng nhập nó. Form này được tạo ra bằng cách sử dụng thẻ <input>.
  • Text Input đa dòng: Được sử dụng khi một người sử dụng được yêu cầu cung cấp thông tin mà có thể nhiều hơn một dòng. Form này được tạo ra bằng cách sử dụng thẻ <textarea>.
  • Checkbox: được sử dụng khi có nhiều hơn một tùy chọn được yêu cầu để chọn. Checkbox cũng được tạo ra bằng cách sử dụng thẻ <input> nhưng thuộc tính type được thiết lập là checkbox.
  • Radio: được sử dụng khi ngoài rất nhiều các tùy chọn, chỉ có một tùy chọn được yêu cầu để chọn. Radio Button được tạo ra bằng cách sử dụng thẻ <input> và thuộc tính type được thiết lập là radio.

Dưới đây là danh sách lần lượt các thuộc tính của thẻ input

Text input đơn dòng: Dùng để nhập họ tên, đại chỉ, vv… Nó được tạo ra bởi thẻ <input type=”text” />

Form trong HTML thuoc-tinh-input-text2

Password Input: Giống như Text input đơn dòng, password input được tạo ra bởi thẻ input và nó được dấu các kí tự nhằm bảo mật cho người dùng. Nó được tạo ra bằng thẻ <input type=”password” />

Form trong HTML thuoc-tinh-input-text

Text input đa dòng: Được tạo ra bởi thẻ <textarea> </textarea> gồm nhiều dòng khác và dùng để lưu trữ các dữ liệu dài dòng.

Form trong HTML thuoc-tinh-input-text3

Input radio: Dùng để chọn một trong rất nhiều lựa chọn khác nhau. Nó được tạo ra bằng thẻ <input type=”radio” />

Form trong HTML thuoc-tinh-input-text5

Input checkbox: Được tạo ra nhằm để chọn nhiều hơn một lựa chọn cụ thể nào đó. Ngược so với input radio. Nó được tạo ra bằng thẻ <input type=”checkbox” />

Form trong HTML thuoc-tinh-input-text4

Còn rất nhiều các thuộc tính khác của thẻ input trong form, bạn tham khảo thêm tại đây

Xem Thêm: Bảng (Table) trong HTML

Mình sẽ lấy ví dụ tổng hợp tất cả các thẻ trên cho gọn nhé:

Form trong HTML tong-hop-input

Chạy ra ngoài trình duyệt sẽ được kết quả sau:

Form trong HTML kq-tong-hop-input

Kết thúc bài hôm nay bạn đã có thể nắm rõ cách tạo form đăng ký bằng ngôn ngữ HTML là như thế nào, việc nắm được những cú pháp cũng như các tag HTML tạo form như trên giúp bạn khi gặp những form phức tạp cũng cảm thấy nhẹ nhàng hơn và làm chủ được HTML hơn.

Chúc các bạn thành công!

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Sau khi PHP 5 ra mắt vào năm 2004 thì phải đến hơn một thập kỉ bản phát hành chính...
    29 giây trước
  2. Như chúng ta đã biết, công cụ tìm kiếm Google hiện đang giữ vị trí số một trong bảng xếp...
    16 giây trước
  3. Hiện nay có hơn hai tỷ người tích cực sử dụng Google Chrome. Trình duyệt này có rất nhiều tính...
    17 giây trước
  4. Thiết kế Landing Page Trung tâm đào tạo lái xe ô tô Sao Bắc Việt phải thật sang trọng, đẹp...
    26 giây trước
  5. Tại sao bạn nên sử dụng trang đích thay vì trang web của bạn. Hãy cùng tìm hiểu 5 lý...
    24 giây trước
  6. Ajax rất hữu ích và thú vị. Hầu hết mọi người thích ajax bởi vì nó tải một phần của...
    10 giây trước
  7. TuArts Nguyen hay TuArts Wedding Studio là một thương hiệu chụp ảnh cưới nổi tiếng trong giới chụp ảnh gần...
    17 giây trước
  8. Bạn đang tìm kiếm các cách thức mới hoặc lập những chiến lược riêng để tăng thu nhập Adsense thông qua...
    24 giây trước
  9. Mẫu trang đích sẽ giúp bạn bắt đầu khởi chạy sản phẩm, ứng dụng mới hoặc cho phép người dùng...
    21 giây trước
  10. Như chúng ta đã biết, để lấy Newsfeed dạng cuộn đến cuối trang và load thêm trang tin giống như...
    24 giây trước