Học HTML – Bài 9: Thẻ tạo form trong HTML

7806 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào mừng các bạn quay trở lại với loạt bài học HTML cơ bản tại Giuseart.com. Trong bài học này, chúng ta sẽ cùng nhau tìm hiểu cách tạo form trong HTML cũng như cách sử dụng các thẻ tạo form hiệu quả nhất trong lập trình website.

Mẫu Form có vai trò gì?

Trong quá trình thiết kế và quản trị website, chắc chắn bạn sẽ cần thu thập một số thông tin của người dùng như: họ tên, số điện thoại, địa chỉ email, thẻ tín dụng…

Các mẫu form sẽ nhận dữ liệu từ người dùng internet, sau đó sẽ gửi đến các ứng dụng back-end như CGI, APS-Script hoặc PHP Script (hiểu đơn giản là gửi dữ liệu về server để xử lí rồi có tác vụ phản hồi).

Bên trong thẻ form, có nhiều phần tử form như trường text, các trường textarea, menu, checkbox,…

Cấu trúc của thẻ Form

Thẻ <form> được dùng để tạo một mẫu Form trong HTML và có cấu trúc sau:

Một số loại form thường dùng trong HTML

Trong lập trình HTML và trong công việc thường ngày, chúng ta dễ dàng bắt gặp các loại form sau:

Các loại form nhập liệu

Nói đến form nhập liệu bạn sẽ hiểu ngay loại form này dùng để thu thập thông tin người dùng thông qua việc trực tiếp nhập thông tin vào khoảng trống cho sẵn. Các trường hợp người dùng nhập thông tin vào website có thể kể đến như điền Họ và tên, mật khẩu hoặc viết đoạn bình luận,… Do đó, chúng ta sẽ tìm hiểu 3 loại form nhập liệu sau:

+ Text input một dòng đơn: được sử dụng cho các mục đích thu thập thông tin chỉ một dòng của dữ liệu đầu vào của người dùng như các hộp tìm kiếm, các khung nhập username,… Text input được tạo ra bởi thẻ <input>.

+ Password input: đây cũng là kiểu nhập liệu một dòng đơn nhưng các ký tự của nó được giấu đi ngay khi người dùng nhập liệu. Loại form này sử dụng cho các khung điền mật khẩu đăng nhập.

+ Input nhiều dòng: được sử dụng cho các mục đích nhập liệu thông tin dài hơn một dòng, thường là comment, thông điệp hoặc nhiều mục đích khác,… Kiểu nhập liệu nhiều dòng được tạo ra bởi thẻ <textarea>.

Text input một dòng đơn

Để tạo form nhập liệu một dòng, chúng ta cần dùng thẻ <input> với thuộc tính style là “text” theo cú pháp như ví dụ sau:

và kết quả là:

Thẻ nhập liệu một dòng trong html
Thẻ nhập liệu một dòng trong html

Các thuộc tính của thẻ <input> để tạo dòng nhập liệu đơn:

+ Type: Xác định kiểu dữ liệu đầu vào. Để text nếu muốn nhập chữ, để number nếu muốn nhập số.

+ Name: Xác định tên cho trường để gửi tới Server để xác định và nhận giá trị của nó.

+ Value: Xác định giá trị dữ liệu đầu vào lúc ban đầu của form.

+ Size: Quy định độ rộng của khung nhập liệu.

+ Maxlength: Giới hạn số ký tự tối đa mà người dùng được phép nhập vào text input.

Password input

Tương tự như Text input một dòng đơn, nhưng password input giấu các ký tự ngay khi người dùng nhậpmật khẩu vào. Form này được tạo ra khi sử dụng thẻ <input> và thuộc tính type được thiết lập là “password“.

Ví dụ đơn giản về Password input được sử dụng để lấy mật khẩu người dùng:

và kết quả là:

Password input dùng để làm khung nhập mật khẩu trên website
Password input dùng để làm khung nhập mật khẩu trên website

Các thuộc tính của thẻ <input> để tạo trường mật khẩu:

+ Type: Xác định kiểu dữ liệu người dùng nhập vào. Với password input thì chọn kiểu dữ liệu là “password“.

+ Name: Đặt tên cho trường để gửi tới Server xác nhận và xử lí yêu cầu.

+ Value: Xác định giá trị dữ liệu đầu vào lúc ban đầu của form.

+ Size: Độ rộng của khung nhập mật khẩu, đơn vị là px.

+ Maxlength: Độ dài tối đa của mật khẩu.

Text input nhiều dòng

Text input nhiều dòng được sử dụng trong trường hợp người dùng cần nhập liệu thông tin chi tiết có độ dài nhiều hơn một dòng. Để làm được form này, chúng ta sử dụng thẻ <textarea>.

Ví dụ đơn giản về khung nhập liệu nhiều dòng tạo từ thẻ <textarea>:

và kết quả là:

Text input nhiều dòng trong html
Text input nhiều dòng trong html

Các thuộc tính của Text input nhiều dòng:

+ Name: Cung cấp tên cho trường để có thể gửi tới Server và được Server xác nhận và nhận giá trị.

+ Rows: Xác định số hàng.

+ Cols: Xác định số cột.

Các loại form lựa chọn

Các loại form lựa chọn trong html có thể là Radio Button, Checkbox hoặc Select Box.

Checkbox

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 từ thẻ <input> nhưng sử dụng thuộc tính type =”checkbox”.

Dưới đây là một ví dụ về một form dữ liệu có 4 checkbox:

và kết quả là:

form checkbox trong html
Form checkbox trong html

Các thuộc tính của thẻ <checkbox>:

+ Type: Khai báo kiểu dữ liệu nhập vào cho form, trong trường hợp này type=”checkbox“.

+ Name: Xác định tên của trường để Server xác nhận và nhận giá trị.

+ Value: Giá trị sẽ được sử dụng nếu Checkbox được chọn.

+ Checked: Thiết lập là checked nếu muốn để mặc định.

Radio Button

Radio Button được sử dụng khi có rất nhiều tùy chọn trong form, nhưng chỉ có một tùy chọn được phép chọn lựa. Thẻ này được sử dụng nhiều đề thiết kế các bài kiểm tra trắc nghiệm lựa chọn đáp án đúng nhất. Radio button được tạo ra khi sử dụng thẻ <input> với thuộc tính type=”radio”.

Ví dụ về sử dụng Form tạo tạo một câu hỏi trắc nghiệm chọn đáp án đúng nhất:

và kết quả là:

Tạo câu hỏi trắc nghiệm xử dụng form
Tạo câu hỏi trắc nghiệm sử dụng form

Các thuộc tính của Radio Button cũng giống như Checkbox. Do đó, mời bạn xem phần thuộc tính của Checkbox ở phần trên nhé! Riêng phần thuộc tính type thì type=”radio”.

Select Box

Hộp Select box cung cấp danh sách liệt kê từ trên xuống (drop down) các tùy chọn đa dạng trong form, người dùng có thể lựa chọn một hoặc nhiều tùy chọn trong hộp đó. Để làm hộp Select Box, chúng ta sử dụng thẻ <select> với các thẻ tùy chọn <option>. Dưới đây là đoạn code về một ví dụ Form chứa hộp Select Box:

kết quả là:

Bạn sinh năm bao nhiêu?

Thuộc tính của Select Box:

+ Name: Xác định tên được gửi tới Server để xác định và nhận giá trị.

+ Size: Kích thước của hộp lựa chọn, thuộc tính này quy định hộp lựa chọn của bạn có thanh cuốn hay không?

+ Multiple: Chọn thuộc tính này cho phép bạn lựa chọn nhiều tùy chọn cùng lúc.

Các loại Form Nút bấm

Form nút bấm hay còn gọi là Form Button được sử dụng nhiều để tạo các nút bấm có thể click được (clickable). Để tạo các nút bấm, bạn có thể sử dụng thẻ <input> với thuộc tính type=”button”. Thuộc tính type cũng có thể nhận các giá trị khác như submit, image, reset:

+ Submit: tạo nút chấp nhận một form hoặc thực thi thao tác gửi yêu cầu của người dùng.

+ Button: tạo một nút được sử dụng để kích hoạt một thao tác người dùng, có thể là chuyển trang, có thể là kích hoạt javascript…

+ Reset: tạo một nút để kích hoạt form về các giá trị ban đầu.

+ Image: cũng tạo nút nhưng gọi hình ảnh làm hình nền cho nút đó.

Dưới đây là một ví dụ form với đầy đủ 3 kiểu button:

và đây là kết quả:

Đây là nút bấm submit: Đây là nút bấm reset: Đây là nút bấm button:

Dạng form tải lên

Nếu bạn muốn cho phép người dùng tải file lên trang web của bạn, bạn phải tạo form File Upload box. Nó được tạo ra nhờ sử dụng thẻ <input> và thuộc tính type=”file”.

Dưới đây là một ví dụ về nút bấm tải lên:

và kết quả là:

Vui lòng gửi profile để chúng tôi xử lí yêu cầu của bạn:

Lời kết

Như vậy, chúng ta đã kết thúc bài học số 9 trong series Học HTML cơ bản tại Giuseart.com. Tổng kết bài học, chúng ta cần nhớ rõ có 4 loại form là form nhập liệu, form lựa chọn, form button và form tải lên. Chúc các bạn học tốt nhé!

Bài trước: Bài 8: Thẻ tạo bảng trong HTML

 

5/5 - (1 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Bài viết mới cập nhật:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Trang chủ
Tìm kiếm
Lên trên
Chia sẻ
Tải lại
Bình luận