Biểu mẫu là một trong những phần quan trọng nhất của web. Nếu không có chúng, sẽ không có cách nào dễ dàng để thu thập dữ liệu, tìm kiếm tài nguyên hoặc đăng ký để nhận thông tin có giá trị. Bạn có thể nhúng biểu mẫu trên các trang web bằng phần tử biểu mẫu HTML. Bên trong phần tử biểu mẫu, một số đầu vào là

Bạn đang xem: ví dụ về bài đăng trên biểu mẫu html

Biểu mẫu là một trong những phần quan trọng nhất của web. Nếu không có chúng, sẽ không có cách nào dễ dàng để thu thập dữ liệu, tìm kiếm tài nguyên hoặc đăng ký để nhận thông tin có giá trị.

Bạn có thể nhúng biểu mẫu vào các trang web bằng phần tử HTML biểu mẫu . Bên trong phần tử biểu mẫu, một số đầu vào được lồng vào nhau. Những đầu vào này còn được gọi là điều khiển biểu mẫu.

Trong hướng dẫn này, chúng ta sẽ khám phá phần tử biểu mẫu HTML, các loại đầu vào khác nhau mà nó cần và cách tạo nút gửi với dữ liệu được gửi.

Cuối cùng, bạn sẽ biết cách hoạt động của các biểu mẫu và bạn sẽ có thể tự tin tạo chúng.

Cú pháp biểu mẫu HTML cơ bản

  & lt; form action = "mywebsite.com" method = "POST" & gt;
    & lt;! - Nhập bất kỳ loại và văn bản nào được đưa vào đây - & gt;
& lt; / form & gt;
 

Các kiểu nhập biểu mẫu HTML

Bạn sử dụng thẻ & lt; input & gt; để tạo các điều khiển biểu mẫu khác nhau trong HTML. Nó là một phần tử nội dòng và nhận các thuộc tính như type , name , minlength , maxlength , placeholder , v.v. Mỗi thứ đều có những giá trị cụ thể mà chúng mang lại.

Thuộc tính placeholder rất quan trọng vì nó giúp người dùng hiểu mục đích của trường nhập liệu trước khi họ nhập bất kỳ thứ gì vào.

Có 20 loại đầu vào khác nhau và chúng ta sẽ xem xét từng loại một.

Nhập Văn bản

Loại đầu vào này nhận giá trị là “văn bản”, vì vậy, nó tạo ra một dòng nhập văn bản.

  & lt; input type = "text" placeholder = "Nhập tên" / & gt;
 

Đầu vào có kiểu văn bản giống như ảnh chụp màn hình bên dưới:
textInput

Nhập mật khẩu

Như tên của nó, một đầu vào với một loại mật khẩu sẽ tạo ra một mật khẩu. Nó tự động ẩn đối với người dùng, trừ khi nó bị JavaScript điều khiển.

  & lt; input type = "password" placeholder = "Nhập mật khẩu của bạn" / & gt;
 

passwordInput < / p>

Nhập Email

Bất kỳ đầu vào nào có loại email đều xác định trường để nhập địa chỉ email.

  & lt; input type = "email" placeholder = "Nhập email của bạn" / & gt;
 

typeEmail < / p>

Số loại

Loại đầu vào này chỉ cho phép người dùng chèn số.

  & lt; input type = "number" placeholder = "Nhập một số" / & gt;
 

numberInput < / p>

Nhập Đài

Đôi khi, người dùng sẽ cần phải chọn một trong nhiều tùy chọn. Trường đầu vào có thuộc tính type được đặt thành “radio” cho phép bạn thực hiện việc này.

  & lt; input type = "radio" / & gt;
 

typeRadio < / p>

Nhập Hộp kiểm

Vì vậy, với một loại đầu vào là radio, người dùng sẽ được phép chọn một trong nhiều tùy chọn. Điều gì sẽ xảy ra nếu bạn muốn họ chọn nhiều tùy chọn nhất có thể? Đó là những gì một đầu vào có thuộc tính type được đặt thành hộp kiểm thực hiện.

  & lt; input type = "checkbox" / & gt;
 

typeCheckbox < / p>

Nhập Gửi

Bạn sử dụng loại này để thêm nút gửi vào biểu mẫu. Khi người dùng nhấp vào nó, nó sẽ tự động gửi biểu mẫu. Nó có một thuộc tính giá trị, xác định văn bản xuất hiện bên trong nút.

  & lt; input type = "submit" value = "Enter to Win" / & gt;
 

typeSubmit < / p>

Nút Loại

Một đầu vào có kiểu được đặt thành nút sẽ tạo ra một nút, có thể thao tác với loại trình xử lý sự kiện onClick của JavaScript. Nó tạo ra một nút giống như kiểu gửi đầu vào, nhưng với ngoại lệ là giá trị trống theo mặc định, vì vậy nó phải được chỉ định.

  & lt; input type = "button" value = "Gửi" / & gt;
 

typeButton < / p>

Nhập tệp

Điều này xác định một trường để gửi tệp. Khi người dùng nhấp vào nó, họ sẽ được nhắc chèn loại tệp mong muốn, có thể là hình ảnh, PDF, tệp tài liệu, v.v.

  & lt; input type = "file" / & gt;
 

Kết quả của một loại tệp đầu vào trông giống như sau:

Xem Thêm  Nhiều khóa chính có thể tồn tại trên một bảng không? - một bảng có thể có 2 khóa chính được không?

fileInput < / p>

Loại Màu

Đây là kiểu nhập lạ mắt được giới thiệu bởi HTML5. Với nó, người dùng có thể gửi màu yêu thích của họ chẳng hạn. Màu đen (# 000000) là giá trị mặc định nhưng có thể bị ghi đè bằng cách đặt giá trị thành màu mong muốn.

Nhiều nhà phát triển đã sử dụng nó như một thủ thuật để chọn các sắc thái màu khác nhau có sẵn ở định dạng RGB, HSL và chữ và số.

  & lt; input type = "color" / & gt;
 

Đây là kết quả của loại màu đầu vào:

colorInput < / p>

Nhập Tìm kiếm

Phương thức nhập với kiểu tìm kiếm xác định trường văn bản giống như kiểu đầu vào của văn bản. Nhưng lần này nó có mục đích duy nhất là tìm kiếm thông tin. Nó khác với gõ văn bản ở chỗ, nút hủy xuất hiện khi người dùng bắt đầu nhập.

  & lt; input type = "search" / & gt;
 

typeSearch < / p>

Nhập URL

Khi thuộc tính type của thẻ đầu vào được đặt thành URL, nó sẽ hiển thị một trường mà người dùng có thể nhập URL.

  & lt; input type = "url" / & gt;
 

typeURL < / p>

Nhập Tel

Một loại số điện thoại đầu vào cho phép bạn thu thập số điện thoại từ người dùng.

  & lt; input type = "tel" / & gt;
 

typeTel < / p>

Bạn có thể đã đăng ký trên một trang web mà bạn yêu cầu ngày diễn ra một sự kiện nhất định. Trang web có thể đã sử dụng đầu vào có giá trị loại được đặt cho đến nay để khắc phục điều này.

  & lt; input type = "date" / & gt;
 

Đây là hình thức đầu vào có loại ngày tháng:

dateInput < / p>

Điều này hoạt động giống như ngày nhập của loại đầu vào, nhưng nó cũng cho phép người dùng chọn một ngày với một thời gian cụ thể.

  & lt; input type = "datetime-local" / & gt;
 

datelocalInput < / p>

Loại Tuần

Loại đầu vào của tuần cho phép người dùng chọn một tuần cụ thể.

  & lt; input type = "week" / & gt;
 

weekInput < / p>

Loại Tháng

Đầu vào với loại tháng điền vào các tháng để người dùng chọn khi được nhấp vào.

  & lt; input type = "month" / & gt;
 

monthInput < / p>

Textarea

Đôi khi, người dùng sẽ cần phải điền vào nhiều dòng văn bản không phù hợp với kiểu đầu vào của văn bản (vì nó chỉ định trường văn bản một dòng).

textarea cho phép người dùng thực hiện việc này vì nó xác định nhiều dòng nhập văn bản. Nó nhận các thuộc tính riêng của nó, chẳng hạn như cols – cho số cột và hàng cho số hàng.

  & lt; textarea cols = "50" row = "20" & gt; & lt; / textarea & gt;
 

textarea < / p>

Nhiều hộp chọn

Đây giống như một nút radio và hộp kiểm trong một gói. Nó được nhúng vào trang với hai phần tử – một phần tử select và một phần tử option , luôn được lồng bên trong select .

Theo mặc định, người dùng chỉ có thể chọn một trong các tùy chọn. Nhưng với nhiều thuộc tính, bạn có thể cho phép người dùng chọn nhiều hơn một trong các tùy chọn.

  & lt; chọn & gt;
      & lt; option value = "HTML" & gt; Chọn Ngôn ngữ & lt; / option & gt;
      & lt; option value = "HTML" & gt; HTML & lt; / option & gt;
      & lt; option value = "CSS" & gt; CSS & lt; / option & gt;
      & lt; option value = "JavaScript" & gt; JavaScript & lt; / option & gt;
      & lt; option value = "React" & gt; React & lt; / option & gt;
& lt; / select & gt;
 

selectDemo < / p>

Cách gắn nhãn đầu vào HTML

Việc gán nhãn cho các điều khiển biểu mẫu là quan trọng. Khi chúng được kết nối đúng cách với trường đầu vào thông qua thuộc tính for và thuộc tính id của đầu vào, người dùng sẽ dễ dàng sử dụng hơn vì họ có thể chỉ cần nhấp vào chính nhãn đó để truy cập đầu vào.

  & lt; label for = "name" & gt; Tên & lt; / label & gt;
& lt; input type = "text" id = "name" / & gt; & lt; br / & gt;
& lt; label for = "check" & gt; Đồng ý với các điều khoản & lt; / label & gt;
& lt; input type = "checkbox" id = "check" / & gt;
 

labelDemo < / p>

Xem Thêm  Ngày hiện tại trong SQL Server - tsql lấy ngày hiện tại

Cách hoạt động của Biểu mẫu HTML

Khi người dùng điền vào biểu mẫu và gửi nó bằng nút gửi, dữ liệu trong các điều khiển biểu mẫu sẽ được gửi đến máy chủ thông qua các phương thức yêu cầu HTTP GET hoặc POST .

Vậy máy chủ được chỉ định như thế nào? Phần tử biểu mẫu có thuộc tính action, thuộc tính này phải có giá trị được chỉ định cho URL của máy chủ. Nó cũng có thuộc tính method, trong đó phương thức HTTP mà nó sử dụng để truyền tải các giá trị đến máy chủ được chỉ định.

Phương thức này có thể là GET hoặc POST . Với phương thức GET , các giá trị do người dùng nhập sẽ hiển thị trong URL khi dữ liệu được gửi. Nhưng với POST , các giá trị được gửi trong tiêu đề HTTP, vì vậy những giá trị đó không hiển thị trong URL.

Nếu thuộc tính phương thức không được sử dụng trong biểu mẫu, người dùng sẽ tự động giả định rằng người dùng muốn sử dụng phương thức GET vì nó là phương thức mặc định.

Vậy khi nào bạn nên sử dụng phương thức GET hoặc POST ? Sử dụng phương thức GET để gửi dữ liệu không nhạy cảm hoặc truy xuất dữ liệu từ máy chủ (ví dụ: trong khi tìm kiếm). Sử dụng yêu cầu POST khi gửi tệp hoặc dữ liệu nhạy cảm.

Hãy xem những gì chúng ta đã học về biểu mẫu và sử dụng nó để tạo một biểu mẫu liên hệ đơn giản. Tôi cũng sẽ giới thiệu một vài khái niệm mới khi chúng ta tìm hiểu kỹ.

Đây là HTML:

  & lt; form action = example-server.com "& gt;
      & lt; tập trường & gt;
        & lt; legend & gt; Liên hệ với tôi & lt; / legend & gt;
        & lt; div class = "form-control" & gt;
          & lt; label for = "name" & gt; Tên & lt; / label & gt;
          & lt; input type = "name" id = "name" placeholder = "Nhập tên của bạn" bắt buộc / & gt;
        & lt; / div & gt;

        & lt; div class = "form-control" & gt;
          & lt; label for = "email" & gt; Email & lt; / label & gt;
          & lt; đầu vào
            type = "email"
            id = "email"
            placeholder = "Nhập email của bạn"
            yêu cầu
          / & gt;
        & lt; / div & gt;

        & lt; div class = "form-control" & gt;
          & lt; label for = "message" & gt; Message & lt; / label & gt;
          & lt; textarea
            id = "tin nhắn"
            cols = "30"
            hàng = "10"
            placeholder = "Nhập tin nhắn của bạn"
            yêu cầu
          & gt; & lt; / textarea & gt;
        & lt; / div & gt;
        & lt; input type = "submit" value = "Gửi" class = "submit-btn" / & gt;
      & lt; / fieldset & gt;
& lt; / form & gt;
 

Điều gì đang xảy ra trong mã HTML này?

Đầu tiên, phần tử form đang bao bọc mọi phần tử khác. Nó có một hành động được đặt thành “example-server.com”, một máy chủ giả nơi dữ liệu biểu mẫu sẽ được nhận.

Sau phần tử biểu mẫu, mọi phần tử khác cũng được bao quanh bởi phần tử fieldset với thẻ chú giải ngay dưới nó.

Chúng tôi sử dụng phần tử fieldset để nhóm các đầu vào liên quan lại với nhau và thẻ chú giải chứa chú thích truyền đạt nội dung của biểu mẫu.

Các đầu vào name , email textarea đều nằm trong div với một lớp biểu mẫu- điều khiển. Vì vậy, chúng hoạt động giống như một phần tử khối, để tạo kiểu dễ dàng hơn với CSS.

Chúng cũng được xác thực với bắt buộcThuộc tính , vì vậy biểu mẫu không gửi được khi các trường đó trống hoặc khi người dùng không nhập được các giá trị ở định dạng thích hợp.

Sau tất cả, chúng tôi sẽ có kết quả trong ảnh chụp màn hình bên dưới:
unstyledForm

Điều đó xấu đến mức nào? Chúng tôi cần áp dụng một số kiểu!

Đây là CSS:

  body {
    hiển thị: flex;
    align-các mục: trung tâm;
    justify-content: trung tâm;
    chiều cao: 100vh;
    font-family: chữ thảo;
  }

 đầu vào,
    textarea {
    chiều rộng: 100%;
    đệm: 5px;
    dàn ý: không có;
  }

  nhãn mác {
    chiều cao dòng: 1,9rem;
  }

  input [type = "submit"] {
   biến đổi: dịch (2,2%);
   đệm: 3px;
   margin-top: 0,6rem;
   font-family: chữ thảo;
   font-weight: bold;
  }

 tập trường {
   đệm: 20px 40px;
 }
 

Mã CSS đang làm gì ở đây?

Chúng tôi căn giữa mọi thứ trong phần thân theo chiều ngang với Flexbox và theo chiều dọc với chiều cao khung nhìn 100%. Chúng tôi đã sử dụng một họ chữ thảo.

Xem Thêm  Ràng buộc khóa chính và khóa ngoại - SQL Server - khóa ngoại khóa chính sql

Chúng tôi đã cung cấp cho các đầu vào và textarea có chiều rộng là 100% để chúng đi ngang nhau. Các nhãn có chiều cao dòng tối thiểu là 1,9rem (30,4px), vì vậy chúng không quá gần với các đầu vào tương ứng.

Chúng tôi đã tạo kiểu cụ thể cho nút (nút loại đầu vào) bằng thuộc tính biến đổi để đẩy nó vào giữa vì nó lệch tâm một chút. Chúng tôi đã tạo cho nó một khoảng đệm 3px để có thêm khoảng cách xung quanh nó. Sau đó, chúng tôi chọn một họ phông chữ thảo cho nó với độ đậm đậm.

Do nút quá gần với textarea , chúng tôi đặt margin-top là 0,6rem để đẩy nó xuống một chút.

Chúng tôi đã cung cấp cho phần tử tập trường của mình một khoảng đệm 20px ở trên cùng và dưới cùng, với 40px ở bên trái và bên phải để đẩy đường viền mà nó tạo ra xung quanh các phần tử form mà nó được bao bọc trong đó.

Cuối cùng, chúng ta có biểu mẫu tuyệt đẹp bên dưới:
styledForm

Kết luận

Tôi hy vọng hướng dẫn này đã giúp bạn hiểu cách hoạt động của biểu mẫu. Bây giờ, bạn sẽ có kiến ​​thức cần thiết để tích hợp các biểu mẫu vào trang web của mình để có thể bắt đầu thu thập dữ liệu.

Cảm ơn bạn đã đọc và tiếp tục viết mã.


Xem thêm những thông tin liên quan đến chủ đề ví dụ bài đăng biểu mẫu html

TOP USA&ASIA NEWS👲LAOS_ NCE NQI UA HAUJ LWM 🛑DEM TSIS TAU NEEG ASIA COOB LAWM🕵️06/21/2022

alt

  • Tác giả: TED VANG
  • Ngày đăng: 2022-06-21
  • Đánh giá: 4 ⭐ ( 1692 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: THESE NEWS ARTICLES feature materials, pictures and everything protected by the Fair Use guidelines of Section 107 of the Copyright Act. All rights reserved to the copyright owners.

    💥PLEASE CREDIT ALL THE ORIGINAL NEWS TO THE RIGHTFUL OWNERS, REPORTERS, THEIR TEAM MEMBERS, TIME, AND EVERYTHING THEY HAVE DONE FOR US. THANK YOU.

    Please subscribe to my Channel for regular videos: https://www.youtube.com/channel/UCSYi…
    DISCLAIMERS: I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for me to earn fees by linking to Amazon.com and affiliated sites.
    This video was not paid for by outside persons or manufacturers.
    No gear was supplied to me for this video. The content of this video and my opinions were not reviewed or paid for by any outside persons.

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

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

40 biểu mẫu HTML và CSS để đăng ký tài khoản, thanh toán và hơn thế nữa

  • Tác giả: www.creativosonline.org
  • Đánh giá: 5 ⭐ ( 6384 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 40 biểu mẫu CSS và HTML đặc biệt cho tất cả các loại mục đích như đăng nhập, biểu mẫu đăng ký, thẻ thanh toán, đăng ký và nhiều hơn nữa.

24 Signup Form Dành Cho Website

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 5 ⭐ ( 8005 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo một signup form cơ bản và các ví dụ thực tế để giúp bạn có thể dễ dàng tự xây dựng một form đăng ký đẹp mắt dành cho website của mình bằng HTML, CSS và Javascript nhé.

Sử dụng biểu mẫu và khung trong HTML

  • Tác giả: voer.edu.vn
  • Đánh giá: 3 ⭐ ( 6411 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng biểu mẫu và khung trong HTML (giáo trình – tài liệu – học liệu từ VOER)

form trong html là gì? các ví dụ về html

  • Tác giả: www.doctfire.com
  • Đánh giá: 5 ⭐ ( 4105 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: form trong html là gì? các ví dụ về html đoạn mã ví dụ & Học HTML tại DocTFire.com

Biểu mẫu trong HTML

  • Tác giả: tedu.com.vn
  • Đánh giá: 4 ⭐ ( 3106 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

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