Tạo form bình luận HTML

Khi làm website bằng HTML, đặc biệt là sau này bạn học lên các ngôn ngữ server-side như PHP hay Python thì việc sử dụng form nhập liệu rất phổ biến như tạo form đăng nhập, form đăng dữ liệu lên website,…nên nếu có thể thì nên hiểu cách tạo một form nhập liệu bằng HTML ngay từ bây giờ.

Ở HTML, để tạo form chúng ta sẽ sử dụng cặp thẻ , thẻ này sẽ chứa một vài thuộc tính quan trọng và nội dung bên trong cặp thẻ đó là các thẻ  để khai báo các trường nhập liệu. Trước hết hãy xem qua mẫu một cái form đăng nhập bằng HTML dưới đây.

See the Pen qEGdOQ by Thach Pham [@thachpham92] on CodePen.

Các thuộc tính trong thẻ :

• action: Đường dẫn đến một trang xử lý dữ liệu sau khi người dùng ấn nút gửi dữ liệu.
• method: Phương thức gửi dữ liệu.
• name: Tên của form.

Hiện tại nếu bạn đang học HTML thì không cần quan tâm đến ba thuộc tính trên vì nó thuộc thẩm quyền xử lý của các ngôn ngữ server-side, nhưng bạn chỉ cần nhớ khi tạo form thì nhớ khai báo các thuộc tính đó là được.

Các thuộc tính trong thẻ :

Thẻ này sẽ đại diện cho các trường nhập dữ liệu, mỗi thẻ là một trường nhập dữ liệu khác nhau. Tuy nhiên, kiểu nhập liệu của mỗi thẻ sẽ khác nhau dựa vào thuộc tính type bên trong nó vì hiện tại HTML đang hỗ trợ đến 23 kiểu nhập liệu, tương ứng với 23 giá trị của thuộc tính type.

Danh sách các giá trị của thuộc tính type:

• button
• checkbox
• color
• date
• datetime
• datetime-local
• email
• file
• hidden
• image
• month
• number
• password
• radio
• range
• reset
• search
• submit
• tel
• text
• time
• url
• week

Thay vì giải thích thì bạn nên tự tay thử từng loại để biết chức năng của nó là gì nhé, chỉ cần thay giá trị của thuộc tính type tương ứng với danh sách trên thôi. Tuy nhiên, bạn sẽ sử dụng nhiều nhất là kiểu 1 [trường nhập liệu dạng chữ và số], 2 [trường nhập mật khẩu, nó sẽ tự mã hóa mật khẩu nhập vào bằng ký tự *], 3 [trường tạo nút gửi dữ liệu đi], 4 [khung nhập liệu giống kiểu text nhưng bạn có thể viết xuống dòng].

Xem thêm về các thuộc tính của thẻ

Chỉ vậy thôi, bây giờ bạn chỉ cần nhớ về cách tạo form trong HTML là được, còn khi nào quên thì có thể lên mạng tham khảo tại trang W3Schools nhé.

Một HTML Form là một phần của trang web có chứa các điều khiển như các trường văn bản, các trường mật khẩu, các checkbox, các radio button, submit button, các menu...

HTML Form là phương tiện cho người dùng nhập dữ liệu được gửi đến máy chủ để xử lý.

Tại sao sử dụng HTML Form

HTML Form được sử dụng khi bạn muốn thu thập một số dữ liệu của người truy cập trang web.

Ví dụ: Nếu người dùng muốn mua một số mặt hàng trên online, họ phải điền vào form các thông tin như địa chỉ giao hàng và chi tiết thẻ tín dụng / thẻ ghi nợ để có thể gửi hàng đến địa chỉ đó.

Khai báo HTML Form

    
    //input controls ví dụ: textfield, textarea, radiobutton, button
  
 

Các thẻ HTML sử dụng trong Form

Bảng sau thể hiện danh sách các thẻ HTML hay được sử dụng trong form.

ThẻMô tảĐịnh nghĩa một HTML Form để nhập liệu từ phía người dùng.Định nghĩa một điền khiển nhập liệu dự vào thuộc tính type của nó.Định nghĩa ô nhập văn bản có thể nhập nhiều dòng.Định nghĩa nhãn cho các input.Nhóm các phần tử liên quan.Định nghĩa mô tả cho thẻ .Định nghĩa một danh sách drop-down.Định nghĩa một nhóm các tùy chọn liên quan thành một danh sách drop-down.Định nghĩa một option trong một danh sách drop-down.Định nghĩa một nút có thể click.

Các thẻ HTML 5 sử dụng trong Form

Bảng sau thể hiện danh sách các thẻ HTML5 được sử dụng trong form.

TagDescriptionChỉ định một danh sách của các option được định nghĩa trước cho việc điều khiển nhập liệu.Định nghĩa trường sinh ra cặp key [key-pair] cho các form.Định nghĩa kết quả tính toán.

Trường HTML TextField trong form

Thuộc tính type="text" của thẻ input tạo ra một textfield là trường nhập văn bản trong một dòng. Thuộc tính name là tùy chọn, nhưng nó là bắt buộc khi phía server là JSP, ASP, PHP...

    
    First Name:  
  
    Last Name:   
  
  
 

Thẻ lable trong form

Đây được xem là một cách tốt hơn để hiển thị nhãn trong form. Vì nó tạo được trải nghiệm thân thiện hơn cho người dùng/trình duyệt/bộ phân tích mã nguồn.

Khi bạn click vào thẻ label, nó sẽ focus vào ô nhập text tương ứng. Để làm được như vậy, bạn cần có thuộc tính for trong thẻ label phải giống với thuộc tính id trong thẻ input.

    
    First Name:   
     
  
    Last Name:   
     
  
  
 

Trường HTML Password trong form

Password sẽ không được hiện thị trong trường password.

    
    Password:   
     
  
  
 

Trường HTML 5 Email trong form

Trường email là một trường mới trong HTML 5. Nó sẽ kiểm tra tính hợp lệ của một địa chỉ email. Bạn phải sử dụng @ và dấu chấm [.] bên trong trường này.

    
    Email:   
     
  
  
 

Radio Button trong form

Radio button được sử dụng để chọn chỉ một trong nhiều lựa chọn. Nó được sử dụng để lựu chọn giới tính, câu hỏi trắc nghiệm...

Sử dụng name giống nhau cho tất cả các radio button, thì chỉ duy nhất một radio button được chọn tại một thời điểm.