Hướng Dẫn Cách Tạo FORM Trong HTML Với Thẻ FORM Và INPUT

5/5 - (3 đánh giá)

Khi làm web với HTML hoặc sau này bạn có học các ngôn ngữ lập trình khác để làm web  thì việc tạo các form đăng nhập, form nhập dữ liệu sẽ là rất phổ biến. Ở đây chúng ta đang trong series học HTML cơ bản nên mình sẽ chỉ nói đến việc tạo form trong HTML thôi nhé. Ở bài viết này, mình sẽ giới thiệu với bạn cặp thẻ tạo form trong HTML và các thuộc tính đi kèm với cặp thẻ đó giúp bạn hiểu rõ được các sử dụng.

Hướng dẫn cách tạo FORM trong HTML

Để tạo form trong HTML chúng ta sẽ sử dụng cặp thẻ <form> </form> và cặp thẻ <input /> để khai báo các trường nhập liệu. Với cặp thẻ <form> </form> chúng ta sẽ có 1 vài thuộc tính quan trọng cần khai báo và cặp thẻ <input /> chúng ta cũng sẽ có các thuộc tính kèm theo. Trước khi đi vào tìm hiểu chi tiết các thẻ và các thuộc tính thì bạn hãy xem qua đoạn code tạo form đăng nhập trong HTML sau để thấy rõ cấu trúc.

<form action="#" method="post" name="dang-nhap"> Tên đăng nhập: <input type="text" name="username" placeholder="Nhập tên đăng nhập" /> <br /> Mật khẩu: <input type="password" name="password" placeholder="Nhập mật khẩu" /> <br /> <input type="submit" name="submit" value="Đăng nhập" /> </form>

Thẻ form và các thuộc tính

Trong ví dụ trên bạn cũng thấy, trong thẻ form chúng ta sẽ có các thuộc tính như sau:

• action: Khai báo đường dẫn đến 1 trang xử lý dữ liệu sau khi người gửi dữ liệu.
• method: Khai báo phương thức gửi dữ liệu. Có 2 tùy chọn là get và post.
• name: Đặt tên cho form.

Các thuộc tính trên sẽ cần các ngôn ngữ lập trình khác để xử lý còn với HTML thì bạn không cần quan tâm đến các thuộc tính đó nhưng khi tạo form thì bạn nhớ là vẫn phải khai báo các thuộc tính đó.

Tham khảo thêm

• Thuộc tính STYLE trong HTML
• Thẻ a trong HTML – Thẻ tạo link liên kết trong HTML
• Thẻ Table trong HTML – Thẻ tạo bảng trong HTML

Thẻ input và các thuộc tính

Thẻ input dùng để cho người dùng có thể nhập hoặc chọn các thông tin. Thẻ input trong HTML hiện tại có 23 kiểu nhập dữ liệu khác nhau. Để lựa chọn kiểu nhập dữ liệu bạn sẽ phải khai báo trong thuộc tính type.

23 giá trị của thuộc tính type:

• button: Hiển thị dạng nút nhấn.
• checkbox: Hiển thị dạng hộp kiểm.
• file: Hiển thị dạng chọn file.
• hidden: Hiển thị dạng ẩn.
• image: Hiển thị dạng hình.
• password: Hiển thị dạng password.
• radio: Hiển thị dạng chọn lựa.
• reset: Hiển thị dạng phục hồi.
• submit: Hiển thị dạng submit.
• text: Hiển thị dạng text.
• color: Hiển thị dạng màu.
• date: Hiển thị dạng ngày.
• datetime: Hiển thị dạng ngày và thời gian.
• datetime-local: Hiển thị dạng ngày và thời gian của vùng.
• email: Hiển thị dạng email.
• month: Hiển thị dạng tháng.
• number: Hiển thị dạng số.
• range: Hiển thị dạng dãy.
• search: Hiển thị dạng tìm kiếm.
• tel: Hiển thị dạng số điện thoại.
• time: Hiển thị dạng thời gian.
• url: Hiển thị dạng đường dẫn.
• week: Hiển thị dạng tuần.

Đó là các giá trị của thuộc tính type trong thẻ input. Ngoài ra còn có các thuộc tính khác mà mình không thể thống kế hết ra ở đây được. Bạn có thể xem thêm các thuộc tính của thẻ input ở đây.

Để tạo form trong HTML chỉ cần làm đơn giản vậy thôi. Bạn có thể tự mình làm 1 form để luyện cho nhớ lâu hơn nhé. Hi vọng với những kiến thức mình chia sẻ sẽ giúp ích cho bạn trong việc học HTML và làm web với HTML. Chúc bạn thành công!