Trong bài viết này, bạn sẽ học cách tạo trường nhập văn bản trong HTML. Bạn cũng sẽ tìm hiểu về biểu mẫu web và có cái nhìn tổng quan về cách chúng hoạt động, vì hộp văn bản là đặc điểm chung của mọi biểu mẫu. Bắt đầu nào! Biểu mẫu web là gì? Biểu mẫu là một cách hiệu quả

Bạn đang xem: gõ đầu vào trong html

Trong bài viết này, bạn sẽ học cách tạo trường nhập văn bản trong HTML. Bạn cũng sẽ tìm hiểu về biểu mẫu web và có cái nhìn tổng quan về cách chúng hoạt động, vì hộp văn bản là đặc điểm chung của mọi biểu mẫu.

Hãy bắt đầu!

Biểu mẫu web là gì?

Biểu mẫu là một cách thu thập thông tin hiệu quả.

Có nhiều trường hợp bạn cần điền vào biểu mẫu thực, tài liệu in bản in và cung cấp thông tin chi tiết cá nhân.

Ví dụ: bạn có thể điền vào biểu mẫu và giao cho ai đó khi bạn bắt đầu công việc mới, hoặc khi bạn đi kiểm tra sức khỏe hoặc khi bạn đang trong quá trình thuê / mua nhà – hoặc bất kỳ lúc nào khác khi thủ tục giấy tờ là cần thiết.

Cũng giống như các biểu mẫu vật lý, biểu mẫu web kỹ thuật số trực tuyến là một cách để nhận và thu thập thông tin đầu vào, thông tin và dữ liệu quan trọng từ người dùng và khách truy cập bằng cách sử dụng kết hợp các công nghệ web.

Một biểu mẫu web bắt chước một biểu mẫu thực bằng cách chứa khoảng trắng để người dùng điền thông tin của họ.

Biểu mẫu web sử dụng nhiều công cụ hoặc điều khiển biểu mẫu, để thu thập thông tin đầu vào của người dùng.

Một trang web có thể có hộp tìm kiếm hoặc trường nhập văn bản để nhập một dòng văn bản. Điều này cho phép người dùng tìm kiếm một cái gì đó cụ thể.

Một trang web cũng có thể chứa biểu mẫu đăng ký cho phép người dùng đăng ký nhận bản tin hoặc các bản cập nhật khác.

Thường sẽ chứa trường nhập văn bản để nhập tên, họ và địa chỉ email của người dùng.

Nhiều trang web cũng có biểu mẫu đăng ký / đăng nhập khi mua hàng trực tuyến, ví dụ: trong đó người dùng nhập tên người dùng của họ vào trường văn bản và mật khẩu của họ trong một trường riêng biệt. Mặc dù trường mật khẩu cũng là trường văn bản, nhưng mỗi ký tự văn bản được che bởi một chấm đen để ẩn những gì đang được nhập.

Một trang web cũng có thể có kho văn bản lớn hơn để người dùng nhập các đoạn văn bản dài hơn, điều này rất hữu ích khi để lại nhận xét bên dưới bài đăng trên blog.

Nhiều biểu mẫu cũng cho phép người dùng chọn một tùy chọn cụ thể từ một số tùy chọn bằng cách chọn một nút radio. Họ có thể cho phép người dùng chọn nhiều tùy chọn bằng cách chọn / bỏ chọn một hộp kiểm.

Cuối cùng, tất cả các biểu mẫu đều có nút gửi, để gửi dữ liệu đến máy chủ nơi nó sẽ được lưu trữ hoặc xử lý.

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

Internet là một mạng toàn cầu rộng lớn kết nối hàng triệu máy tính trên khắp thế giới.

Các máy tính là một phần của mạng giao tiếp với nhau bằng cách gửi và nhận thông tin.

Cách đạt được điều này là nhờ vào kiến ​​trúc yêu cầu / phản hồi của máy khách / máy chủ.

Ứng dụng khách, thường là một trình duyệt web chẳng hạn như Google Chrome, gửi yêu cầu đến máy chủ web.

Máy chủ web là một phần cứng hoặc phần mềm máy tính lưu trữ các tệp tạo nên trang web và phân phối chúng bất cứ khi nào máy chủ nhận được yêu cầu.

Yêu cầu có thể là xem biểu mẫu là một phần của trang web.

Máy chủ gửi lại các tệp tạo nên biểu mẫu web dưới dạng phản hồi. Sau đó, trình duyệt web sẽ tập hợp các tệp lại với nhau và người dùng xem biểu mẫu trong trình duyệt web.

Chu kỳ yêu cầu / phản hồi này được cấu trúc bởi một giao thức, được gọi là HTTP (viết tắt của HyperText Transfer Protocol).

Vì vậy, khi sử dụng biểu mẫu web, người dùng nhập dữ liệu cần thiết. Sau đó, sau khi xác thực phía máy khách để kiểm tra xem tất cả các trường bắt buộc đã được điền đầy đủ chưa và dữ liệu có đúng định dạng hay không, người dùng nhấp vào nút gửi.

Dữ liệu sau đó được gửi đến máy chủ theo các cặp tên-giá trị trong một yêu cầu HTTP. Phương pháp sắp xếp thông tin theo cặp tên-giá trị này đảm bảo rằng dữ liệu chính xác tương ứng với phần tử biểu mẫu chính xác.

Sau đó, ngôn ngữ phía máy chủ như PHP, Ruby hoặc Python được sử dụng để xử lý thông tin và lưu trữ thông tin đó trong cơ sở dữ liệu để sử dụng hoặc truy xuất sau này.

Cách tạo biểu mẫu web trong HTML

Để tạo biểu mẫu trong HTML, bạn cần sử dụng phần tử & lt; form & gt; được sử dụng để thu thập thông tin.

Phần tử & lt; form & gt; có thẻ mở & lt; form & gt; và đóng & lt; / form & gt; .

 & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Biểu mẫu web & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; biểu mẫu & gt;
        
    & lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Phần tử & lt; form & gt; có hai thuộc tính:

  • Thuộc tính action , chỉ định URL mà bạn muốn dữ liệu được gửi và xử lý.
  • Thuộc tính method chấp nhận giá trị của một trong hai động từ HTTP, GET hoặc POST . Nếu không có thuộc tính method nào được bao gồm, thì phương thức GET được sử dụng theo mặc định.
  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Biểu mẫu web & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; form action = "/ url" method = "NHẬN" & gt;

    & lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Tuy nhiên, chỉ điều này không thu thập bất kỳ thông tin đầu vào nào của người dùng.

Xem Thêm  Phương thức JavaScript print () - làm thế nào để in một cái gì đó trong javascript

Phần tử HTML input là gì?

Phần tử & lt; input & gt; được sử dụng phổ biến nhất để thu thập và truy xuất dữ liệu người dùng từ biểu mẫu web.

Đó là nơi người dùng nhập dữ liệu của họ.

Nó được lồng bên trong phần tử & lt; form & gt; và nó là một phần tử tự đóng. Điều này có nghĩa là nó không yêu cầu thẻ đóng. (Các thẻ đóng có dấu gạch chéo lên, & lt; / & gt; .)

Bạn sử dụng nó để tạo các kiểu trường nhập khác nhau hoặc các điều khiển nhập biểu mẫu để người dùng nhập nhiều loại thông tin khác nhau.

Nó tạo ra các trường văn bản, trường email, trường mật khẩu, hộp kiểm, nút radio, menu thả xuống, nút gửi, khả năng chọn và tải lên tệp và hình ảnh từ máy tính của người dùng, v.v.

Cách để xác định loại trường nhập hoặc điều khiển nhập biểu mẫu, là đặt thuộc tính type và gán giá trị cho nó.

Cú pháp chung của & lt; input & gt; trông giống như sau:

  & lt; input type = "value" & gt; & lt;! - giá trị của thuộc tính type xác định kiểu của trường nhập - & gt;

 

Ví dụ: để tạo trường cho phép người dùng tải lên tệp, phần tử & lt; input & gt; sẽ trông giống như sau:

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Biểu mẫu web & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; form action = "/ url" method = "NHẬN" & gt;
        & lt; input type = "file" & gt;
    & lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Thuộc tính type xác định loại dữ liệu mà phần tử input có thể chấp nhận.

Cách tạo trường nhập hộp văn bản HTML

Giá trị mặc định của thuộc tính type của input khi không được chỉ định là text . Vì vậy, kiểu nhập văn bản là kiểu nhập phổ biến nhất.

Dòng & lt; input type = "text" & gt; tạo trường nhập văn bản một dòng, nơi người dùng có thể nhập bất kỳ kiểu nhập văn bản nào.

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Biểu mẫu web & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; form action = "/ url" method = "NHẬN" & gt;
        & lt; p & gt; Vui lòng nhập một số văn bản bên dưới: & lt; / p & gt;
        & lt; input type = "text" & gt;
    & lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Khi bạn xem trang trong trình duyệt, bạn có thể thấy rằng trường nhập văn bản một dòng đã được tạo:

Cách Thêm Văn bản Giữ chỗ vào Trường Văn bản

Văn bản giữ chỗ, còn được gọi là văn bản điền, là một cách để nhắc và đưa ra gợi ý cho người dùng về loại thông tin họ cần điền vào biểu mẫu. Nó cũng có thể cung cấp một giá trị mặc định trước khi họ bắt đầu nhập.

 & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Biểu mẫu web & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; form action = "/ url" method = "NHẬN" & gt;
        & lt; p & gt; Vui lòng nhập họ và tên của bạn: & lt; / p & gt;
        & lt; input type = "text" placeholder = "John" & gt;
        & lt; input type = "text" placeholder = "Doe" & gt;
    & lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Đoạn mã ở trên sẽ dẫn đến kết quả như sau:

Tầm quan trọng của thuộc tính name trong Trường Văn bản

Khi gửi biểu mẫu và gửi đến máy chủ, máy chủ cần phân biệt và phân biệt giữa các loại dữ liệu đã gửi mà nó thu thập.

Ví dụ: nó cần biết đâu là tên người dùng, đâu là mật khẩu và đâu là địa chỉ email.

Điều này có nghĩa là mỗi trường văn bản cần thuộc tính name và một giá trị để làm cho loại dữ liệu được gửi rõ ràng hơn.

Ví dụ: bạn có thể sử dụng cách sau để nhắc ai đó nhập tên đầy đủ của họ vào trường văn bản:

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Biểu mẫu web & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; form action = "/ url" method = "NHẬN" & gt;
        & lt; p & gt; Vui lòng nhập họ tên của bạn: & lt; / p & gt;
        & lt; input type = "text" name = "name" placeholder = "John Doe" & gt;
    & lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Giả sử người dùng nhập tên “John Bexley” vào trường văn bản. Sau đó, giá trị này sẽ trở thành giá trị của thuộc tính name .

Như đã đề cập trước đó, dữ liệu trong biểu mẫu được gửi theo cặp tên-giá trị. Trong trường hợp này, máy chủ sẽ biết rằng name của người dùng là John Bexley , cụ thể nó sẽ giống như name = John Bexley . < / p>

Xem Thêm  Nhận xét HTML - Cách Nhận xét Ra một Dòng hoặc Thẻ trong HTML - nhận xét về tệp html

Để đưa ra một ví dụ khác:

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Biểu mẫu web & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; form action = "/ url" method = "NHẬN" & gt;
        & lt; p & gt; Vui lòng nhập tên của bạn: & lt; / p & gt;
        & lt; input type = "text" name = "first_name" placeholder = "John" & gt;
        & lt; p & gt; Vui lòng nhập họ của bạn: & lt; / p & gt;
        & lt; input type = "text" name = "last_name" placeholder = "Doe" & gt;
    & lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Đoạn mã trên có hai trường văn bản riêng biệt để người dùng nhập họ và tên riêng của họ.

Nếu họ nhập “John” làm tên, thì cặp tên-giá trị được gửi đến máy chủ sẽ là first_name = John ".

Nếu họ nhập “Bexley” làm họ, thì cặp tên-giá trị được gửi đến máy chủ sẽ là last_name = Bexley .

Cách Yêu cầu Thông tin Văn bản

Bạn có thể làm điều đó sao cho một số trường nhất định bắt buộc và người dùng cần điền.

HTML5 đã giới thiệu xác thực phía máy khách.

Đây là tính năng hiển thị thông báo nếu người dùng chưa điền vào các trường bắt buộc hoặc nhập thông tin không chính xác. Điều đó cũng có nghĩa là họ sẽ không thể gửi biểu mẫu.

Tất cả những gì bạn cần làm để kích hoạt tính năng này là thêm thuộc tính started vào phần tử & lt; input & gt; . Thuộc tính này không cần phải có giá trị.

Hãy nhớ rằng khi thêm nhiều thuộc tính vào phần tử & lt; input & gt; , bạn không phải thêm các phần tử theo một thứ tự nhất định.

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Biểu mẫu web & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; form action = "/ url" method = "NHẬN" & gt;
        & lt; p & gt; Vui lòng nhập họ và tên của bạn: & lt; / p & gt;
        & lt; input type = "text" name = "first_name" placeholder = "John" bắt buộc & gt;
        & lt; input type = "text" name = "last_name" placeholder = "Doe" bắt buộc & gt;
        & lt; button type = "submit" & gt; Gửi & lt; / button & gt;
    & lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Xem điều gì sẽ xảy ra nếu người dùng không điền vào một trong các trường:

Một thông báo sẽ xuất hiện và người dùng sẽ không thể gửi biểu mẫu nếu chưa hoàn thành các trường bắt buộc.

Cách Đặt Số lượng Ký tự Tối thiểu và Tối đa trong Một Hộp Văn bản

Bạn có thể chỉ định số ký tự tối thiểu và tối đa mà người dùng có thể nhập vào trường văn bản.

Để tạo số ký tự tối thiểu, hãy sử dụng thuộc tính minlength .

Ví dụ: bạn có thể có nó để tên người dùng của người dùng dài ít nhất ba ký tự:

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Biểu mẫu web & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; form action = "/ url" method = "NHẬN" & gt;
        & lt; p & gt; Vui lòng nhập tên người dùng của bạn & lt; / p & gt;
        & lt; input type = "text" name = "username" minlength = "3" bắt buộc & gt;
        & lt; button type = "submit" & gt; Gửi & lt; / button & gt;
    & lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Người dùng sẽ không thể gửi biểu mẫu nếu tên người dùng ngắn hơn ba ký tự:

Để giới hạn số ký tự mà người dùng nhập vào trường văn bản, hãy sử dụng thuộc tính maxlength .

Ví dụ về việc kết hợp cả hai thuộc tính minlength maxlength có thể trông như sau:

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Biểu mẫu web & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; form action = "/ url" method = "NHẬN" & gt;
        & lt; p & gt; Vui lòng nhập tên người dùng của bạn & lt; / p & gt;
        & lt; input type = "text" name = "username" minlength = "3" maxlength = "20" bắt buộc & gt;
        & lt; button type = "submit" & gt; Gửi & lt; / button & gt;
    & lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Trong ví dụ trên, tên người dùng của người dùng phải dài ít nhất 3 ký tự và không dài hơn 20 ký tự.

Cách gắn nhãn Điều khiển biểu mẫu

Cho đến nay, tôi vẫn đang sử dụng phần tử & lt; p & gt; để viết một số văn bản trước hộp văn bản, theo cách này, nhắc nhở người dùng và cho họ biết họ cần nhập gì.

Nhưng đây không phải là phương pháp hay nhất và không thể truy cập được.

Mỗi điều khiển biểu mẫu, trong trường hợp này là mỗi trường văn bản, phải có phần tử & lt; label & gt; riêng.

Điều này giúp biểu mẫu có thể truy cập được đối với người dùng khiếm thị sử dụng các công nghệ hỗ trợ như trình đọc màn hình.

Một cách để sử dụng nó là lồng bất kỳ văn bản giới thiệu nào và & lt; input type = "text" & gt; trong một phần tử & lt; label & gt; như vậy:

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Biểu mẫu web & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; form action = "/ url" method = "NHẬN" & gt;
        & lt; nhãn & gt;
            Xin hãy điền tên đăng nhập
            & lt; input type = "text" name = "username" minlength = "3" maxlength = "20" bắt buộc & gt;
        & lt; / label & gt;
        & lt; button type = "submit" & gt; Gửi & lt; / button & gt;
    & lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Xem Thêm  Thuộc tính Vị trí CSS được giải thích với các ví dụ - bố cục css thuộc tính vị trí

Một cách khác để sử dụng phần tử & lt; label & gt; và có cùng kết quả là tách nó khỏi phần tử & lt; input & gt; .

Trong trường hợp này, thuộc tính for cần được thêm vào & lt; label & gt; và thêm thuộc tính id vào & lt; input & gt; , để liên kết cả hai với nhau.

Giá trị của cho sẽ giống với id .

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Biểu mẫu web & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; form action = "/ url" method = "NHẬN" & gt;
        & lt; label for = "tên người dùng" & gt; Vui lòng nhập tên người dùng của bạn: & lt; / label & gt;
            & lt; input type = "text" id = "username" name = "username" minlength = "3" maxlength = "20" bắt buộc & gt;
        & lt; button type = "submit" & gt; Gửi & lt; / button & gt;
    & lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Kết luận

Tóm lại, để tạo trường nhập văn bản trong HTML, bạn cần ít nhất:

  • & lt; input & gt;Phần tử , thường nằm bên trong phần tử & lt; form & gt; .
  • Để đặt thuộc tính type có giá trị là text . Thao tác này sẽ tạo trường nhập văn bản một dòng.
  • Đừng quên thêm thuộc tính name . Điều này xác định thông tin cho từng điều khiển biểu mẫu được tạo và làm cho mọi thứ rõ ràng hơn cho máy chủ.

Để tìm hiểu thêm về HTML và CSS, hãy xem Giấy chứng nhận thiết kế web đáp ứng của freeCodeCamp, nơi bạn sẽ học theo cách tương tác trong quá trình xây dựng các dự án thú vị.

Cảm ơn bạn đã đọc và chúc bạn viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề loại đầu vào trong html

Tự học HTML và code ra cái web đơn giản trong 15 phút

  • Tác giả: Phạm Huy Hoàng
  • Ngày đăng: 2021-06-07
  • Đánh giá: 4 ⭐ ( 1014 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Như đã hứa với các bạn, mình sẽ dần dần ra mắt các vlog trong series “Trở thành Phun Sờ Nắc sau 3 tiếng”.
    Vlog đầu tiên sẽ hướng dẫn các bạn một ngôn ngữ hết sức cơ bản để xây dựng trang web – HTML (Đọc là Hát Tê Mờ Lờ hoặc Ét Tê Em Eo đều được nhé).
    Tụi mình cũng sẽ code một trang web siêu siêu đơn giản nha.

    Danh sách khoá học của Cybersoft: https://bit.ly/codedao-cyber
    Tư vấn khoá học free Cybersoft: https://fb.com/lophocviet
    Nhớ nói được anh Hoàng giới thiệu để được nhận ưu đãi nhé hihi.

    Nhớ subscribe cho mình nhe: https://bit.ly/codedaotube

    Học xong các bạn có thể xem thêm các phần sau:
    – Học HTML trong 15 phút: https://youtu.be/jSyH0HxKQPY
    – Học CSS trong 15 phút: https://youtu.be/DUwx3IdXupU
    – Học JS trong 15 phút https://youtu.be/watch?v=ZIgDYEZl1VE
    – Kết hợp HTML CSS JS https://youtu.be/watch?v=JL2o5qixOPI
    – Code 4 dự án HTML CSS JS https://youtu.be/watch?v=YtYcYRsODmI

    Timestamp:
    00:00 Bắt đầu vlog
    01:30 Giới thiệu ngôn ngữ HTML
    04:20 Bắt đầu viết code HTML, các tag hiển thị thông tin
    09:40 HTML Form, lấy thông tin từ người dùng
    11:25 Tự code web giới thiệu bản thân
    13:30 Giới thiệu CSS kì sau

    Channel Tôi Đi Code Dạo là nơi mình chia sẻ những kiến thức, kinh nghiệm về ngành lập trình mà mình đạt được trong quá trình làm việc. Những kiến thức này sẽ biến các bạn từ một coder trở thành developer – lập trình viên thứ thiệt.
    Nhớ ghé thăm và subscribe channel để xem clip mới vào 8H TỐI T3 hàng tuần nha!

    Ghé thăm mình tại:
    Blog: https://toidicodedao.com/
    Fanpage: https://www.facebook.com/toidicodedao/

    html code_cung_code_dao hoc_html_15_phut

HTML Cơ Bản

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 3 ⭐ ( 7319 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài học bạn sẽ được tìm hiểu về cấu trúc trang HTML và lướt qua một số thẻ phổ biến trong HTML. Đừng lo nếu như bạn chưa thể hiểu rõ về công dụng của các thẻ vì chúng ta sẽ tìm hiểu kỹ hơn ở các bài học tiếp the…

HTML là gì? Các loại Tag HTML cơ bản nhất bạn cần Nắm Rõ!!

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

Các kiểu input trong HTML

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

Form trong HTML

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 5819 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Form trong HTML – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.

Phần 6: Các Thẻ Input trong HTML — HTML Cheat Sheet

  • Tác giả: www.stdio.vn
  • Đánh giá: 4 ⭐ ( 9172 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các loại thẻ hỗ trợ nhập liệu chuỗi, số, mật khẩu, … trong HTML.

Kiểm tra tính hợp lệ của Form trong HTML5 với thuộc tính “pattern”

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 4 ⭐ ( 5598 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, chúng ta sẽ khám phá thuộc tính pattern của HTML, sử dụng nó để giúp chúng ta tùy biến cách chúng ta kiểm tra tính hợp lệ của form.
    Kiểm tra tính hợp lệ
    Kiểm tra tính hợp lệ…

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