Hướng dẫn về Phần tử biểu mẫu HTML. Ở đây chúng ta đã thảo luận về phần giới thiệu về Phần tử biểu mẫu HTML, một số phần tử có cú pháp và mã mẫu.

Bạn đang xem : phần tử biểu mẫu trong html là gì

Phần tử biểu mẫu HTML

Giới thiệu về Phần tử biểu mẫu HTML

Trong Công nghệ Phát triển Web (đặc biệt là cho giao diện người dùng), “HTML” là ngôn ngữ đánh dấu cơ bản hoặc chính mà chúng tôi sử dụng để hiển thị các trang web (trang mà chúng tôi nhìn thấy trên một trang web). Đôi khi, trong một trang HTML, cùng với phần hiển thị nội dung khác, chúng ta cũng cần thực hiện một số đầu vào của người dùng (đặc biệt là trong các trang web động). Và để sử dụng đầu vào của người dùng trong một trang HTML, chúng tôi cần sử dụng nhiều phần tử biểu mẫu để tạo các biểu mẫu đó một cách chính xác và với sự trợ giúp của các biểu mẫu đó, chúng tôi lấy chính xác đầu vào của người dùng và đưa các đầu vào (dữ liệu) đó vào Cơ sở dữ liệu nội bộ của chúng tôi tại phần sau. Bây giờ, như chúng ta biết rằng mã HTML được viết dưới nhiều phần tử thẻ khác nhau (& lt; & gt;), do đó, về cơ bản, “Phần tử biểu mẫu HTML” là những phần tử được sử dụng bên trong “& lt; biểu mẫu & gt;” thẻ và các phần tử này cùng với các thuộc tính tiêu chuẩn và duy nhất khác cũng cung cấp một biểu mẫu và cấu trúc để cho người dùng biết phải làm gì với biểu mẫu và cách tiến hành theo một cấu trúc.

Giải thích các phần tử biểu mẫu HTML (bao gồm cú pháp và ví dụ với đầu ra)

Vì có nhiều phần tử biểu mẫu HTML để tạo biểu mẫu & amp; hãy cung cấp cho biểu mẫu một giao diện phù hợp theo cách có cấu trúc, dưới đây là một số giải thích từng cái một.

Bắt đầu Khóa học Phát triển Phần mềm Miễn phí của bạn < / span>

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Số SL
Thẻ
Ý nghĩa / Mô tả

1

& lt; biểu mẫu & gt;
Để xác định một biểu mẫu HTML cho đầu vào của người dùng

2

& lt; đầu vào & gt;
Để xác định kiểm soát đầu vào

3

& lt; datalist & gt;
Để chỉ định danh sách các tùy chọn được xác định trước

4

& lt; tập trường & gt;
Để xác định các yếu tố liên quan đến nhóm

5

& lt; keygen & gt;
Để xác định một đầu vào an toàn

6

& lt; nhãn & gt;
Để xác định nhãn đầu vào

7

& lt; huyền thoại & gt;
Để xác định chú thích cho tập trường

8

& lt; optgroup & gt;

Để xác định một nhóm các tùy chọn tương tự.

9

& lt; tùy chọn & gt;

Để xác định một tùy chọn cho trình đơn thả xuống.

10

& lt; đầu ra & gt;

Để xác định một kết quả

11

& lt; chọn & gt;

Để xác định danh sách thả xuống.

12

& lt; textarea & gt;

Để xác định vùng nhập nhiều dòng.

Lưu ý: Hầu hết các phần tử thẻ HTML được thảo luận ở đây là dành cho HTML5, phiên bản ngôn ngữ HTML mới nhất. Phần tử thẻ & lt; keygen & gt; không còn được hỗ trợ trong

Hầu hết các phần tử thẻ HTML được thảo luận ở đây là dành cho HTML5, phiên bản ngôn ngữ HTML mới nhất. Phần tử thẻ không còn được hỗ trợ trong HTML5 ; nó thực sự đã được sử dụng cho phiên bản trước của HTML.

Cú pháp và ví dụ

Một số cú pháp và ví dụ về Phần tử biểu mẫu HTML có kết quả đầu ra được thảo luận bên dưới:

1. “& Lt; biểu mẫu & gt;” phần tử

Phần tử này có thể chứa nhiều phần tử khác cũng như bao gồm các phần tử bên dưới:

  • & lt; đầu vào & gt;
  • & lt; đầu ra & gt;
  • & lt; nhãn & gt;
  • & lt; chọn & gt;
  • Nút

  • & lt; & gt;
  • & lt; tùy chọn & gt;
  • & lt; textarea & gt;
  • & lt; optgroup & gt;
  • & lt; tập trường & gt;

Ví dụ về “& lt; biểu mẫu & gt;” phần tử có nút nhập và gửi:

Cú pháp:

  & lt; form action = "/ test_page.php" method = "get" & gt;
Tên của bạn: & lt; input type = "text" name = "name" & gt; & lt; br & gt;
& lt; input type = "submit" value = "Gửi" & gt;
& lt; / form & gt;  

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; form action = "/ test_page.php" & gt;
Tên của bạn: & lt; input type = "text" name = "Name" value = "Raju" & gt; & lt; br & gt;
& lt; input type = "submit" value = "Gửi" & gt;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Xem Thêm  Vòng lặp Python qua một danh sách - vòng lặp for với python danh sách

Phần tử biểu mẫu HTML -“ & lt; form & gt; ” phần tử

2. “& Lt; đầu vào & gt;” phần tử

Phần tử này là phần tử nội dòng và thuộc nhóm phần tử biểu mẫu.

Cú pháp:

 & lt; form action = "/ test_page.php" & gt;
Tên đầu vào: & lt; input type = "text" name = "name" & gt; & lt; br & gt;
Tuổi nhập: & lt; input type = "text" name = "age" & gt; & lt; br & gt;
& lt; input type = "submit" value = "Gửi" & gt;
& lt; / form & gt;  

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; form action = "/ action_page.php" & gt;
Tên đầu vào: & lt; input type = "text" name = "name" value = "" & gt; & lt; br & gt;
Tuổi nhập: & lt; input type = "text" name = "age" value = "" & gt; & lt; br & gt;
& lt; input type = "submit" value = "Gửi" & gt;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

“ & lt; input & gt; ” đầu ra phần tử

3. “& Lt; datalist & gt;” phần tử

Nó thường chỉ định danh sách đầu vào được xác định trước cho & lt; input & gt; phần tử nơi người dùng có thể chọn bất kỳ tùy chọn nào từ danh sách được xác định trước.

Cú pháp:

  & lt; input list = "fruit" & gt;
& lt; datalist id = "fruit" & gt;
& lt; option value = "Mango" & gt;
& lt; option value = "Apple" & gt;
& lt; option value = "Banana" & gt;
& lt; option value = "Pomegranate" & gt;
& lt; option value = "Dứa" & gt;
& lt; / datalist & gt;  

Mã:

  & lt ;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; form action = "/ test_page.php" method = "get" & gt;
& lt; input list = "fruit" name = "fruit" & gt;
& lt; datalist id = "fruit" & gt;
& lt; option value = "Mango" & gt;
& lt; option value = "Apple" & gt;
& lt; option value = "Banana" & gt;
& lt; option value = "Pomegranate" & gt;
& lt; option value = "Dứa" & gt;
& lt; / datalist & gt;
& lt; input type = "submit" & gt;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

“ & lt; datalist & gt; ” đầu ra phần tử

4. “& Lt; tập trường & gt;” phần tử

Phần tử này về cơ bản được sử dụng để nhóm các phần tử có liên quan trong các biểu mẫu và vẽ một hộp xung quanh các phần tử tương tự.

Cú pháp:

  & lt; form & gt;
& lt; tập trường & gt;
& lt; huyền thoại & gt; Người nổi tiếng: & lt; / legend & gt;
Tên: & lt; input type = "text" & gt; & lt; br & gt;
Điện thoại: & lt; input type = "number" & gt; & lt; br & gt;
Tuổi: & lt; input type = "text" & gt;
& lt; / fieldset & gt;
& lt; / form & gt;  

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; biểu mẫu & gt;
& lt; tập trường & gt;
& lt; huyền thoại & gt; Người nổi tiếng: & lt; / legend & gt;
Tên: & lt; input type = "text" & gt; & lt; br & gt;
Điện thoại: & lt; input type = "number" & gt; & lt; br & gt;
Tuổi: & lt; input type = "text" & gt;
& lt; / fieldset & gt;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

“ & lt; tập trường & gt; ” đầu ra phần tử

5. “& Lt; keygen & gt;” phần tử

Phần tử này có thể nằm bên ngoài biểu mẫu, nhưng nó vẫn có thể là một phần của biểu mẫu. Thông thường, phần tử này được sử dụng để chỉ định một hoặc nhiều biểu mẫu. Phần tử này mới được sử dụng trong phiên bản HTML5 để tạo khóa mã hóa để chuyển dữ liệu được mã hóa qua biểu mẫu trong trang web dựa trên HTML.

Cú pháp:

& lt; keygen form = "form_id" & gt;

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; form action = "/ test_page.php" method = "get" id = "secureform" & gt;
Tên người dùng: & lt; input type = "text" name = "user_name" & gt;
& lt; input type = "submit" & gt;
& lt; / form & gt;
& lt; p & gt; Trường keygen được đề cập bên dưới nằm ngoài biểu mẫu, nhưng nó vẫn là một phần của biểu mẫu trên. & lt; / p & gt;
Mã hóa: & lt; keygen name = "security" form = "secureform" & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

“ & lt; keygen & gt; ” đầu ra phần tử

6. “& Lt; nhãn & gt;” phần tử

Phần tử này về cơ bản đặt tên cho biểu mẫu đầu vào để người dùng hiểu dữ liệu đầu vào đó phải là gì. Nó hoạt động như một chỉ báo cho người dùng.

Cú pháp:

  & lt; label for = "control id" & gt; ... & lt; / label & gt;  

Mã:

 & lt;! DOCTYPE html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về thẻ nhãn HTML & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; biểu mẫu & gt;
& lt; input type = "radio" name = "men" value = "boy" id = "boy" & gt;
& lt; label for = "boy" & gt; Boy & lt; / label & gt;
& lt; input type = "radio" name = "men" value = "girl" id = "girl" & gt;
& lt; label for = "girl" & gt; Girl & lt; / label & gt;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Xem Thêm  ngày (Giao dịch-SQL) - Máy chủ SQL - máy chủ sql nơi ngày tháng

“ & lt; nhãn & gt; ” đầu ra phần tử

7. “& Lt; huyền thoại & gt;” phần tử

Phần tử này thực sự xác định phụ đề cho & lt; tập trường & gt; yếu tố. Nó giống như một phần tử hỗ trợ cho một phần tử khác, một phần của phần tử nhóm.

Cú pháp:

  & lt; fieldset & gt;
& lt; huyền thoại & gt; Người nổi tiếng: & lt; / legend & gt;
Tên: & lt; input type = "text" & gt; & lt; br & gt;
Điện thoại: & lt; input type = "number" & gt; & lt; br & gt;
Tuổi: & lt; input type = "text" & gt;
& lt; / fieldset & gt;  

Mã:

  & lt;! DOCTYPE html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về thẻ chú giải HTML & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; biểu mẫu & gt;
& lt; tập trường & gt;
& lt; huyền thoại & gt; Người nổi tiếng: & lt; / legend & gt;
Tên: & lt; input type = "text" & gt; & lt; br & gt;
Điện thoại: & lt; input type = "number" & gt; & lt; br & gt;
Tuổi: & lt; input type = "text" & gt;
& lt; / fieldset & gt;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

“ & lt; huyền thoại & gt; ” đầu ra phần tử

8. “& Lt; optgroup & gt;” phần tử

Phần tử này là phần tử liên quan đến nhóm được sử dụng cho các tùy chọn trong danh sách thả xuống ở dạng HTML. Nó giúp người dùng dễ dàng xử lý một danh sách dài.

Cú pháp:

  & lt; chọn & gt;
& lt; optgroup label = "Xe đạp Kawasaki" & gt;
& lt; option value = "ninja300" & gt; Ninja 300 & lt; / option & gt;
& lt; option value = "ninja450" & gt; Ninja 450 & lt; / option & gt;
& lt; / optgroup & gt;
& lt; optgroup label = "Xe đạp Bajaj" & gt;
& lt; option value = "pulsar200" & gt; Pulsar 200 & lt; / option & gt;
& lt; option value = "pulsar150" & gt; Pulsar 150 & lt; / option & gt;
& lt; / optgroup & gt;
& lt; / select & gt;  

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về thẻ chú giải HTML & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; chọn & gt;
& lt; optgroup label = "Xe đạp Kawasaki" & gt;
& lt; option value = "ninja300" & gt; Ninja 300 & lt; / option & gt;
& lt; option value = "ninja450" & gt; Ninja 450 & lt; / option & gt;
& lt; / optgroup & gt;
& lt; optgroup label = "Xe đạp Bajaj" & gt;
& lt; option value = "pulsar200" & gt; Pulsar 200 & lt; / option & gt;
& lt; option value = "pulsar150" & gt; Pulsar 150 & lt; / option & gt;
& lt; / optgroup & gt;
& lt; / select & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

“ & lt; optgroup & gt; ” đầu ra phần tử

9. “& Lt; tùy chọn & gt;” phần tử

Phần tử này được sử dụng để đại diện cho một tùy chọn từ danh sách thả xuống trong & lt; select & gt; yếu tố; danh sách thả xuống phải chứa ít nhất một tùy chọn.

Cú pháp:

  & lt; option value = "option-value" & gt; ... & lt; / option & gt;  

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về thẻ tùy chọn HTML & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; biểu mẫu & gt;
& lt; chọn & gt;
& lt; option value = "Xe đạp" & gt; Xe đạp & lt; / option & gt;
& lt; option value = "Ô tô" & gt; Ô tô & lt; / option & gt;
& lt; option value = "Xe buýt" & gt; Xe buýt & lt; / option & gt;
& lt; / select & gt;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

“ & lt; tùy chọn & gt; ” đầu ra phần tử

10. “& Lt; đầu ra & gt;” phần tử

Phần tử này về cơ bản được sử dụng để hiển thị đầu ra của một phép tính (ví dụ: trong một phép tính theo tập lệnh).

Cú pháp:

  & lt; đầu ra & gt; ... & lt; / output & gt;  

Mã:

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về Thẻ xuất HTML & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; form oninput = "result.value = parseInt (x.value) + parseInt (y.value)" & gt;
& lt; input type = "range" id = "x" value = "50" & gt; +
& lt; input type = "number" id = "y" value = "100" & gt; =
& lt; output name = "result" for = "x y" & gt; & lt; / output & gt;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Phần tử biểu mẫu HTML

11. “& Lt; chọn & gt;” phần tử

Phần tử này được sử dụng để thực hiện lựa chọn từ danh sách trong biểu mẫu.

Cú pháp:

  & lt; chọn & gt;
& lt; option value = "Xe đạp" & gt; Xe đạp & lt; / option & gt;
& lt; option value = "Xe hơi" & gt; Xe & lt; / option & gt;
& lt; option value = "Xe buýt" & gt; Xe buýt & lt; / option & gt;
& lt; / select & gt;  

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về HTML chọn Thẻ & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; biểu mẫu & gt;
& lt; chọn & gt;
& lt; option value = "Xe đạp" & gt; Xe đạp & lt; / option & gt;
& lt; option value = "Xe hơi" & gt; Xe & lt; / option & gt;
& lt; option value = "Xe buýt" & gt; Xe buýt & lt; / option & gt;
& lt; / select & gt;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Xem Thêm  Đặt chiều rộng của hộp văn bản đầu vào trong HTML, CSS và JavaScript - thay đổi kích thước của hộp nhập css

Phần tử biểu mẫu HTML

12. “& Lt; textarea & gt;” phần tử

Phần tử này được sử dụng để xác định đầu vào văn bản nhiều dòng (ví dụ: cho địa chỉ).

Cú pháp:

  & lt; form & gt;
& lt; p & gt; Đặt Bình luận của bạn:
& lt; textarea cols = "50" row = "6" & gt; Đặt ở đây ... & lt; / textarea & gt;
& lt; / p & gt;
& lt; / form & gt;  

Mã:

  & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; Ví dụ về Thẻ HTML textarea & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; biểu mẫu & gt;
& lt; p & gt; Đặt Bình luận của bạn:
& lt; textarea cols = "30" row = "4" & gt; Đặt ở đây ... & lt; / textarea & gt;
& lt; / p & gt;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;  

Đầu ra:

Phần tử biểu mẫu HTML

Kết luận

Có rất nhiều phần tử biểu mẫu HTML có sẵn; trong bài viết này, chúng tôi đã thảo luận về một số phần tử biểu mẫu cơ bản hoặc nguyên bản. Nó giúp chúng tôi tạo các biểu mẫu HTML phù hợp và đúng chức năng. Điểm cần lưu ý là hầu hết các phần tử biểu mẫu HTML cần có một vài thuộc tính đi kèm với chúng. Một số yếu tố phụ thuộc vào nhau, các yếu tố này phải được mã hóa cùng nhau. Tất cả các trình duyệt có thể không hiển thị các phần tử đã không được dùng nữa.

Các bài báo được đề xuất

Đây là hướng dẫn về Phần tử biểu mẫu HTML. Ở đây chúng tôi thảo luận về các ví dụ khái niệm cơ bản của Phần tử biểu mẫu HTML với việc triển khai và kết quả mã. Bạn cũng có thể xem qua các bài viết đề xuất khác của chúng tôi để tìm hiểu thêm –

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề phần tử biểu mẫu trong html là gì

Learn How To Code HTML Forms

alt

  • Tác giả: PixemWeb
  • Ngày đăng: 2020-01-02
  • Đánh giá: 4 ⭐ ( 5384 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video I show you how to code HTML Forms using the Form Tag.
    The HTML form element defines a form that is used to collect user input from people who visit your website.

    Form elements are different types of input elements, like text fields, check boxes, radio buttons, submit buttons, and more.

    This is only an HTML Tutorial. CSS, JavaScript and Server Side Processing of Contact forms will come in a separate playlist.

    Contact forms are a vital part of all Websites. You will often want people to have a way to communicate with you. That’s why it’s important to look at all the different form elements you can use to customize your contact form in your web page.

    HTML and HTML5 provides you with a lot of functionality to create the structure for your forms. In this video I show you the most widely used form elements.

    Here’s the playlist link and other videos you might find helpful.

    PixemWeb:
    https://www.pixemweb.com/html/

    HTML Tutorials for Beginners Playlist:
    https://www.youtube.com/watch?v=DGVXXW6xEnc&list=PL97Qo7C6CNAx4Bqon_eeW3p4LPJ6_krKQ

    What I Wish I Knew:
    https://youtu.be/CpgkUpl-4ZM

    Freelancing Business:
    https://youtu.be/Y0XG-kinZhc

    What’s On My Desk:
    https://youtu.be/Cw0m3w107Hk

    Fullstack Video:
    https://youtu.be/UtDpYVf9jKU

    html html5 learntocode

Hướng dẫn nhanh để tạo nút gửi trên biểu mẫu HTML với thẻ nút

  • Tác giả: www.greelane.com
  • Đánh giá: 4 ⭐ ( 5297 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu cách sử dụng các trường nhập làm nút gửi cũng như các phần tử nút và phần tử lệnh từ HTML5.

Bài 25: Thẻ Form trong HTML

  • Tác giả: timoday.edu.vn
  • Đánh giá: 4 ⭐ ( 9585 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ form là một thẻ rất quan trọng trong HTML để thu thập dữ liệu người dùng. Bài này sẽ tìm hiểu cách tạo form, các thuộc tính và xử lý dữ liệu trên form

[HTML] Bài 7 – Các Phần Tử Nhập Liệu & Biểu Mẫu

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 2351 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, chúng ta sẽ cùng nói về các phần tử hỗ trợ tạo ra các biểu mẫu nhập liệu để thu thập thông tin từ người sử dụng. Ví dụ thường thấy của các phần tử và các biểu mẫu…

[HTML/HTML5] Phần 30: Form (biểu mẫu) trong HTML

  • Tác giả: www.dammio.com
  • Đánh giá: 5 ⭐ ( 8076 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Biểu mẫu trong HTML

  • Tác giả: tedu.com.vn
  • Đánh giá: 3 ⭐ ( 7021 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về biểu mẫu trong HTML

Thiết kế web theo yêu cầu tại Hồ Chí Minh

  • Tác giả: aithietke.com
  • Đánh giá: 5 ⭐ ( 7170 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php