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í 17++ 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

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

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...

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. Bước vào kỷ nguyên công nghệ số 4.0. Nhu cầu hội nhập, quảng cáo hình ảnh, thương hiệu, tên tuổi...
    6 giây trước
  2. Có một điều mà tôi thực sự chưa bao giờ hiểu hết được: Có thể mọi người đoán đó là...
    23 giây trước
  3. Hiện nay, SEO đang là một chủ đề nóng và ngày càng quan trọng trong việc quảng bá một trang...
    17 giây trước
  4. Trong bài này chúng ta sẽ tìm hiểu những thủ thuật tiếp theo giúp bạn hiển thị những chức năng...
    8 giây trước
  5. 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ư...
    1 giây trước
  6. Mẫu Landing Page đẹp được coi là đích đến cuối cùng để khách hàng không ngần ngại mà click chuột...
    12 giây trước
  7. Mỗi một nội dung trước khi xuất bản cần phải là độc nhất. Bởi nếu là copy, sao chép thì...
    1 giây trước
  8. Search Engine Optimization (SEO) là một trong những đòn bẩy lớn nhất mà một doanh nghiệp; có thể sử dụng...
    28 giây trước
  9. Hôm nay là đúng vào dịp nghỉ lễ, người người vui vẻ, nô nức đi mua sắm, vui chơi khiến...
    12 giây trước
  10. 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...
    2 giây trước