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: gửi dữ liệu 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  Đề thi mẫu Dẫn nhập Ngữ âm – Âm vị học tiếng Anh – PHONETICS &PHONOLOGY - hướng dẫn viết unit test

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>

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.

Xem Thêm  Cách tạo một thanh điều hướng cố định [CSS & JS] - thanh điều hướng cố định khi cuộn

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.

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

Xem Thêm  MySQL INSERT INTO SELECT Giải thích bằng các ví dụ thực tế - mysql chèn từ lựa chọn

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ủ đề gửi dữ liệu biểu mẫu html

HTML/PHP Contact Form Tutorial with Validation and Email Submit

alt

  • Tác giả: Clever Techie
  • Ngày đăng: 2016-11-02
  • Đánh giá: 4 ⭐ ( 6383 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Upgrade your Clever Techie learning experience:
    https://www.patreon.com/clevertechie

    UPDATE! (9/13/19) New features and improvements for Clever Techie Patreons:

    1. Download full source code with detailed comments – easy to learn and understand code
    2. Weekly source code file updates by Clever Techie – every time I learn new things about a topic I will add it to the source file and let you know about the update – keep up with the latest coding technologies
    3. Library of custom Clever Techie functions with descriptive, easy to understand comments – skyrocket coding productivity, code more efficiently by using Clever library of custom re-usable functions
    4. Syntax code summary – memorize and review previously learned code faster
    4. Organized file structure – access all Clever Techie lessons, source code, graphics, diagrams and cheat sheet from a single workspace – no more searching around for previously covered material and source code – save enormous amount of time and effort
    5. Outline of topics the source file covers – fast review of all previously learned coding lessons
    6. Access to all full HD 1080p videos with no ads
    7. Console input examples – interactive examples that make it easier to understand and learn coding
    8. Access to updated PHP Programming Book by Clever Techie

    Download this video’s source code and additional files here:
    https://www.patreon.com/posts/html-php-contact-20812527

    ““““““““““““““““““““““““““““““““““““““““““““““`

    This is a fast way to create your own HTML contact form with PHP validation rules and email submit. We use codepen.io which is a great web site for downloading existing code for web developers. We then modify the code to suit our needs and include PHP validation rules. You can use this same process to create just about any HTML form with CSS and PHP validation rules and submit the email using PHP. By knowing how the process of submitting the form and validation works, you’ll be able to create your own custom HTML contact, registration and login forms and validate them with PHP.

Biểu mẫu trong HTML5

  • Tác giả: comdy.vn
  • Đánh giá: 3 ⭐ ( 8720 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ học cách tạo biểu mẫu trong HTML5 để thu thập thông tin đầu vào của người dùng.

One moment, please…

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

HTML – Biểu mẫu

  • Tác giả: isolution.pro
  • Đánh giá: 4 ⭐ ( 4656 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Biểu mẫu HTML là bắt buộc khi bạn muốn thu thập một số dữ liệu từ khách truy cập trang web. Ví dụ, trong quá trình đăng ký người dùng, bạn muốn thu thập thông tin như tên, địa chỉ email, thẻ tín dụng, v.v. Một biểu mẫu sẽ nhận đầu vào từ khách truy cập trang web và sau…

Biểu mẫu trong HTML

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

Các biểu mẫu trong HTML

  • Tác giả: gokisoft.com
  • Đánh giá: 3 ⭐ ( 8263 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một biểu mẫu trong HTML được dùng để thu thập thông input vào của người dùng. Thông tin người dùng nhập vào có thể sau đó được gửi lên một máy chủ để xử lý.ví dụFirst name:Last name:

Cách gửi một đối tượng JSON bằng dữ liệu biểu mẫu html

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 2840 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Nhận dữ liệu biểu mẫu đầy đủ dưới dạng mảng và json xâu chuỗi nó. var…

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