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

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, 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:

STTThuộc tính & Mô tả
1action

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

2method

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.

3target

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.

4enctype

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.

STTThuộc tính & Mô tả
1type

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 .

2name

Đượ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ị.

3value

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

4size

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

5maxlength

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:

STTThuộc tính & Mô tả
1type

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 .

2name

Đượ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ị.

3value

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

4size

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

5maxlength

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

STTThuộc tính & Mô tả
1name

Đượ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ị.

2rows

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

3cols

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

STTThuộc tính & Mô tả
1type

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

2name

Đượ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ị.

3value

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

4checked

Đặ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.

STTThuộc tính & Mô tả
1type

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.

2name

Đượ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ị.

3value

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

4checked

Đặ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>

STTThuộc tính & Mô tả
1name

Đượ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ị.

2size

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

3multiple

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>

STTThuộc tính & Mô tả
1value

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

2selected

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

3label

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:

STTThuộc tính & Mô tả
1name

Đượ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ị.

2accept

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:

STTLoại & Mô tả
1submit

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

2reset

Đ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.

3button

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

4image

Đ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/wp-content/uploads/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”

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *