Form trong html – cách tạo form đăng nhập html

KHOAN ĐÃ! Trước khi đọc bài viết bạn có đang tò mò cách học html + css nhanh hiệu quả nhất mà mình từng trải qua?

Bạn đang tự tìm hiểu về html và css nhưng kiến thức rời rạc, bạn học cảm thấy không được bài bản, việc học nhàm chán và kém hiệu quả? Mình cũng từng tự học như bạn. Mình không bảo tự học là không tốt nhưng nó làm mình mất rất nhiều thời gian hơn so với việc tham gia một khóa học theo cách bài bản. Vào một ngày Mình quyết định đầu tư cho bản thân bằng cách bỏ ít tiền tham gia khóa học html và css của thầy Nguyễn Đức Việt . Kết quả mình học html và css nhanh và hiệu quả hơn rất nhiều. Thầy dạy dễ hiểu , kiến thức thực tiễn cho việc đi làm chứ không có lý thuyết suông. Các bạn có điều kiện nên đầu tư ít tiền cho bản thân để quá trình học html và css nói riêng , lập trình web nói chung để tiến nhanh và hiệu quả nhất trên con đường học lập trình web của mình nhé! Chúc bạn học tốt!

>>>> Tham khảo khóa học đã giúp mình tại:

Học HTML5/CSS3, BOOTSTRAP 4 và học cắt Web từ file thiết kế

700.000
599.000

Mô tả

Khóa học HTML5/CSS3 BOOTSTRAP 4 và cắt Web từ file thiết kế giúp nắm vững kiến thức về CSS HTML hiểu rõ Bootstrap và kỹ năng cắt Web với Illustrate Pix

Chương trình hợp tác với Unica Mã giảm giá lên đến 40% chỉ dành riêng cho độc giả của webaffiliatevn.com: WA40

Còn bây giờ thì vào bài viết thôi!

Hãy cùng web webaffiliatevn.com tìm hiểu cách tạo form trong html nhé!

Biểu mẫu (form) rất phổ biến trên trang web html, 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, số điện thoại, v.v.

Một biểu mẫu sẽ lấy thông tin đầu vào từ khách truy cập website (tên, email…) và sau đó sẽ gởi nó lên một ứng dụng back-end như CGI, ASP Script hoặc PHP script, v.v. Ứng dụng back-end sẽ thực hiện xử lý yêu cầu trên dữ liệu được truyền dựa trên logic nghiệp vụ được xác định bên trong ứng dụng.

Có nhiều yếu tố hình thức khác nhau có sẵn khi tạo form trong html như trường văn bản, trường văn bản, menu thả xuống, nút radio, hộp kiểm, v.v.

Thẻ <form> HTML được sử dụng để tạo biểu mẫu HTML và nó có cú pháp sau :

<form action = "Script URL" method = "GET|POST">
   form elements like input, textarea etc.
</form>

 1. Thuộc tính của form trong html

Sau đây là danh sách các thuộc tính biểu mẫu được sử dụng thường xuyên nhất:

STT Thuộc tính & Mô tả
1 action

Kịch bản cuối cùng đã sẵn sàng để xử lý dữ liệu của bạn.

2 method

Phương pháp được sử dụng để tải lên dữ liệu. Phương thức sử dụng thường xuyên nhất là  GET và POST.

3 target

Chỉ định cửa sổ đích hoặc khung nơi kết quả của tập lệnh sẽ được hiển thị. Nó nhận các giá trị như _blank, _elf, _parent, v.v.

4 enctype

Bạn có thể sử dụng thuộc tính enctype để chỉ định cách trình duyệt mã hóa dữ liệu trước khi gửi đến máy chủ. Các giá trị có thể là :

application / x-www-form-urlencoding – Đây là phương thức tiêu chuẩn mà hầu hết các biểu mẫu sử dụng trong các tình huống đơn giản.

mutlipart / form-data – Điều này được sử dụng khi bạn muốn tải lên dữ liệu nhị phân ở dạng tệp như hình ảnh, tệp từ, v.v.

     2. Điều khiển biểu mẫu HTML

Có nhiều loại điều khiển biểu mẫu khác nhau mà bạn có thể sử dụng để thu thập dữ liệu bằng biểu mẫu HTML :

    • Điều khiển nhập văn bản
    • Kiểm soát hộp kiểm
    • Điều khiển hộp radio
    • Chọn điều khiển hộp
    • Chọn tệp
    • Điều khiển ẩn
    • Các nút có thể nhấp
    • Nút gửi và đặt lại

     a. Điều khiển nhập văn bản

Có ba loại nhập văn bản được sử dụng trên các biểu mẫu –

  • Điều khiển nhập văn bản một dòng – Điều khiển này được sử dụng cho các mục chỉ yêu cầu một dòng nhập của người dùng, chẳng hạn như hộp tìm kiếm hoặc tên. Chúng được tạo bằng thẻ <input>.
  • Điều khiển nhập mật khẩu – Đây cũng là kiểu nhập văn bản một dòng nhưng nó che dấu ký tự ngay khi người dùng nhập vào. Chúng cũng được tạo bằng thẻ HTMl <input>.
  • Điều khiển nhập văn bản nhiều dòng – Điều này được sử dụng khi người dùng được yêu cầu cung cấp chi tiết có thể dài hơn một câu. Điều khiển nhập nhiều dòng được tạo bằng thẻ <textarea>.

          a.1/ Điều khiển nhập văn bản một dòng

Điều khiển này được sử dụng cho các mục chỉ yêu cầu một dòng đầu vào của người dùng, chẳng hạn như hộp tìm kiếm hoặc tên. Chúng được tạo bằng thẻ <input> HTML.

Ví dụ:

Dưới đây là một ví dụ cơ bản về nhập văn bản một dòng được sử dụng để lấy tên và họ:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Text Input Control</title>
  </head> 
  <body> 
    <form > 
      Họ: <input type = "text" name = "ho" /> <br> 
     Tên: <input type = "text" name = "ten" /> 
    </form> 
  </body> 
</html>

See the Pen GRZRKmK by DavidKhai (@davidkhai) on CodePen.dark

 

Thuộc tính:

Sau đây là danh sách các thuộc tính cho thẻ <input> để tạo trường văn bản.

STT Thuộc tính & Mô tả
1 type

Cho biết loại điều khiển đầu vào và đối với điều khiển nhập văn bản, nó sẽ được đặt thành văn bản .

2 name

Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị.

3 value

Điều này có thể được sử dụng để cung cấp một giá trị ban đầu trong điều khiển.

4 size

Cho phép chỉ định độ rộng của điều khiển nhập văn bản theo các ký tự.

5 maxlength

Cho phép chỉ định số lượng ký tự tối đa mà người dùng có thể nhập vào hộp văn bản.

          a.2/ Điều khiển nhập mật khẩu

Đây cũng là kiểu nhập văn bản một dòng nhưng nó che dấu ký tự ngay khi người dùng nhập vào. Chúng cũng được tạo bằng thẻ <input> HTML nhưng thuộc tính type được đặt thành password (mật khẩu) .

Ví dụ:

Dưới đây là một ví dụ cơ bản về nhập mật khẩu một dòng được sử dụng để lấy mật khẩu người dùng :

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Password Input Control</title>
  </head> 
  <body> 
    <form > 
      Mã người dùng : <input type = "text" name = "user_id" /> 
      <br> 
      Mật khẩu: <input type = "password" name = "password" /> 
    </form> 
  </body> 
</html>

See the Pen XWdWWpQ by DavidKhai (@davidkhai) on CodePen.dark

 

Thuộc tính:

STT Thuộc tính & Mô tả
1 type

Cho biết loại điều khiển đầu vào và đối với điều khiển nhập mật khẩu, nó sẽ được đặt thành mật khẩu .

2 name

Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị.

3 value

Điều này có thể được sử dụng để cung cấp một giá trị ban đầu trong điều khiển.

4 size

Cho phép chỉ định độ rộng của điều khiển nhập văn bản theo các ký tự.

5 maxlength

Cho phép chỉ định số lượng ký tự tối đa mà người dùng có thể nhập vào hộp văn bản.

          a.3/ Điều khiển nhập văn bản nhiều dòng

Điều này được sử dụng khi người dùng được yêu cầu cung cấp chi tiết có thể dài hơn một câu. Điều khiển nhập nhiều dòng được tạo bằng thẻ <textarea> HTML.

Ví dụ:

Dưới đây là một ví dụ cơ bản về kiểu nhập văn bản nhiều dòng được sử dụng để lấy mô tả:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Điều khiển nhập nhiều dòng</title> 
  </head> 
  <body> 
    <form> 
      Mô tả: <br /> 
        <textarea rows = "5" cols = "50" name = "description"> Nhập mô tả ở đây.....         </textarea> 
    </form> 
  </body> 
</html>

See the Pen zYqYYwQ by DavidKhai (@davidkhai) on CodePen.dark

 

Thuộc tính:

Sau đây là danh sách các thuộc tính cho thẻ <textarea>.

STT Thuộc tính & Mô tả
1 name

Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị.

2 rows

Cho biết số lượng hàng của hộp vùng văn bản.

3 cols

Cho biết số lượng cột của hộp văn bản

     b. Kiểm soát hộp kiểm (checkbox control)

Các checkbox được sử dụng khi cần chọn nhiều hơn một tùy chọn. Chúng cũng được tạo bằng thẻ <input> HTML nhưng thuộc tính type được đặt thành checkbox. 

Ví dụ:

Dưới đây là mã HTML mẫu cho một biểu mẫu có hai checkbox :

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Điều khiển Checkbox</title>
  </head> 
  <body> 
    <form> 
      <input type = "checkbox" name = "toan" value = "on"> Toán 
      <input type = "checkbox" name = "vatli" value = "on"> Vật lí 
    </form> 
  </body> 
</html>

See the Pen ZEWEKKJ by DavidKhai (@davidkhai) on CodePen.dark

Thuộc tính:

Sau đây là danh sách các thuộc tính cho thẻ <input>.

STT Thuộc tính & Mô tả
1 type

Cho biết loại điều khiển đầu vào và đối với điều khiển đầu vào hộp kiểm, nó sẽ được đặt thành checkbox. .

2 name

Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị.

3 value

Giá trị sẽ được sử dụng nếu hộp kiểm được chọn.

4 checked

Đặt thành checked nếu bạn muốn chọn nó theo mặc định.

     c. Điều khiển nút radio

Các nút radio được sử dụng khi có nhiều tùy chọn, chỉ cần chọn một tùy chọn. Chúng cũng được tạo bằng thẻ <input> HTML nhưng thuộc tính type được đặt thành radio .

Ví dụ:

Dưới đây là ví dụ mã HTML cho một biểu mẫu có hai nút radio:


<!DOCTYPE html>
<html>

   <head>
      <title>Radio Box Control</title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "toan"> Toán
         <input type = "radio" name = "subject" value = "vatli"> Vật lí
      </form>
   </body>

</html>

See the Pen vYGYWxG by DavidKhai (@davidkhai) on CodePen.dark

 

Thuộc tính:

Sau đây là danh sách các thuộc tính cho nút radio.

STT Thuộc tính & Mô tả
1 type

Cho biết loại điều khiển đầu vào và đối với điều khiển đầu vào hộp kiểm, nó sẽ được đặt thành radio.

2 name

Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị.

3 value

Giá trị sẽ được sử dụng nếu hộp radio được chọn.

4 checked

Đặt thành checked nếu bạn muốn chọn nó theo mặc định.

 

     d. Chọn điều khiển hộp

Một hộp chọn, còn được gọi là hộp thả xuống cung cấp tùy chọn để liệt kê các tùy chọn khác nhau dưới dạng danh sách thả xuống, từ đó người dùng có thể chọn một hoặc nhiều tùy chọn.

Ví dụ:

Dưới đây là ví dụ mã HTML cho một biểu mẫu với một hộp thả xuống:

<!DOCTYPE html>
<html>

   <head>
      <title>Select Box Control</title>
   </head>
	
   <body>
      <form>
         <select name = "dropdown">
            <option value = "toan" selected>Toán</option>
            <option value = "vatli">Vật lí</option>
         </select>
      </form>
   </body>
	
</html>

See the Pen GRZROEr by DavidKhai (@davidkhai) on CodePen.dark

 

Thuộc tính:

Sau đây là danh sách các thuộc tính quan trọng của thẻ <select>

STT Thuộc tính & Mô tả
1 name

Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị.

2 size

Điều này có thể được sử dụng để trình bày một hộp danh sách cuộn.

3 multiple

Nếu được đặt thành “multiple” thì cho phép người dùng chọn nhiều mục từ menu.

Sau đây là danh sách các thuộc tính quan trọng của thẻ <option>

STT Thuộc tính & Mô tả
1 value

Giá trị sẽ được sử dụng nếu một tùy chọn trong hộp chọn được chọn.

2 selected

Chỉ định rằng tùy chọn này sẽ là giá trị được chọn ban đầu khi tải trang.

3 label

Một cách khác của tùy chọn ghi nhãn

 

     e. Hộp tải tệp (File Upload Box)

Nếu bạn muốn cho phép người dùng tải tệp lên trang web của mình, bạn sẽ cần sử dụng hộp tải lên tệp, còn được gọi là hộp chọn tệp. Điều này cũng được tạo bằng phần tử <input> nhưng thuộc tính type được đặt thành file.

Ví dụ:

Dưới đây là ví dụ mã HTML cho một biểu mẫu với một hộp tải lên tệp:


<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>
	
</html>

See the Pen PoNoOEj by DavidKhai (@davidkhai) on CodePen.dark

 

Thuộc tính:

Sau đây là danh sách các thuộc tính quan trọng của hộp tải lên tệp:

STT Thuộc tính & Mô tả
1 name

Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị.

2 accept

Chỉ định các loại tệp mà máy chủ chấp nhận.

 

     f. Nút điều khiển

Có nhiều cách khác nhau trong HTML để tạo các nút có thể nhấp. Bạn cũng có thể tạo nút có thể nhấp bằng thẻ <input> bằng cách đặt thuộc tính loại của nó thành button. Thuộc tính type có thể lấy các giá trị sau:

STT Loại & Mô tả
1 submit

Điều này tạo ra một nút tự động gửi một biểu mẫu.

2 reset

Điều này tạo ra một nút tự động đặt lại các điều khiển biểu mẫu về các giá trị ban đầu của chúng.

3 button

Điều này tạo ra một nút được sử dụng để kích hoạt tập lệnh phía máy khách khi người dùng nhấp vào nút đó.

4 image

Điều này tạo ra một nút có thể nhấp nhưng chúng ta có thể sử dụng một hình ảnh làm nền của nút.

Ví dụ:

Dưới đây là ví dụ mã HTML cho một biểu mẫu có ba loại nút:

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>
	
   <body>
      <form>
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
         <input type = "button" name = "ok" value = "OK" />
         <input type = "image" name = "imagebutton" src = "https://webaffiliatevn.com/storage/2020/03/webaffiliatevn-logo.png" />
      </form>
   </body>
	
</html>

See the Pen RwawjJK by DavidKhai (@davidkhai) on CodePen.dark

 

     g. Điều khiển biểu mẫu ẩn

Điều khiển biểu mẫu ẩn được sử dụng để ẩn dữ liệu bên trong trang mà sau này có thể được đẩy lên máy chủ. Điều khiển này ẩn bên trong mã và không xuất hiện trên trang thực tế. Ví dụ: theo mẫu ẩn đang được sử dụng để giữ số trang hiện tại. Khi người dùng nhấp vào trang tiếp theo thì giá trị của điều khiển ẩn sẽ được gửi đến máy chủ web và ở đó nó sẽ quyết định trang nào sẽ được hiển thị tiếp theo dựa trên trang hiện tại đã thông qua.

Ví dụ:

Dưới đây là ví dụ mã HTML để hiển thị việc sử dụng điều khiển ẩn:


<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <p>Đây là trang 10</p>
         <input type = "hidden" name = "pagename" value = "10" />
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
      </form>
   </body>
    
</html>

 

See the Pen abNbVjb by DavidKhai (@davidkhai) on CodePen.dark

>> Xem thêm”

TẶNG BẠN EBOOK HƯỚNG DẪN LÀM AFFILIATE TỪ CƠ BẢN ĐẾN NÂNG CAO

Học cách làm thế nào kiếm $ từ số vốn 0 đồng với affiliate 

Những người muốn làm tiếp thị liên kết chuyên nghiệp
đều phải đọc bài viết này !. 

Không, cảm ơn tôi không muốn kiếm $ từ Internet