Tạo Form đăng ký: Phần tử input người tiếp nhận hồ sơ

Phần tử Input trong Form Html cơ bản

Nội dung

Form nhập liệu thì ắt phải có dữ liệu được nhập vào. Vậy dữ liệu được nhập vào tại đâu? Thì hôm nay chúng ta sẽ tìm hiểu tổng quan về phần quan trọng nữa của Form.

1. Phần tử input người tiếp nhận hồ sở của Form

<form action=” ” method=” “>

<input …..>

</form>

Input nghĩa là đầu vào ! Nếu như xem Form như 1 ủy ban nhân dân, thì thì phần tử input là mơi tiếp nhận hồ sơ (sau đó chuyển đi và xử lý rồi lưu trữ gì gì đó).

Phần tử input sẽ tạo nên những khung nhập liệu, hay lựa chọn để mọi người cung cấp thông tin vào đó

Do dữ liệu đầu vào có nhiều dạng, có thể là chữ, mật khẩu, mail, ngày tháng năm… Nên phần tử input cũng sẽ phân loại các kiểu dữ liệu nhập vào thông qua các giá trị mà thuộc tính type sở hữu.

Nhưng trước khi đi vào tìm hiểu các giá trị của thuộc tính type. Thì chúng ta nên đi xem ngoài thuộc tính type thì phần tử input còn có các thuộc tín nào nữa nhé.

2. Thuộc tính của phần tử Input

a. Các thuộc tính của phần tử input

  • Type: Quy định kiểu dữ liệu đầu vào, Có rất nhiều loại đầu vào, nên đây là thuộc tính cần nhớ.
  • Value: Thuộc tính cho biết giá tri ban đầu để xuất của khung nhập liệu
  • Name: Phần tử định danh cho 1 input cụ thể
  • Size: Thuộc tính quy định kích thướt ( chiều ngang của khung)
  • Maxlength: Thuộc tính quy định chiều dài tối đa của dữ liệu nhập vào:
  • Placeholder:Thuộc tính tạo gợi ý nội dung cần nhập vào khung input. Nếu có thuộc tính giá trị thì thuộc tính này sẽ không xuất hiện.
  • Required: Thuộc tính xác định khung đã được nhập hay chưa, nếu chưa sẽ báo lỗi
  • Multiple: Thuộc tính cho phép chọn nhiều hơn 1 giá trị ( tác dụng với kiểu type=”file/ image”)
  • Disabled: Khóa khung nhập liệu không cho người khác nhập liệu
  • Readonly: Xác định dữ liệu chỉ để đọc không thể thay đổi
  • With và height: Thuộc tính chỉ dùng khu type la image
  • Form: thuộc tính form giúp phần tử input nằm ngoài phần tử form vẫn có thể liê kết với phần tử Form thông qua liên hệ giá trị với thuộc tính  id trong phần tử Form
Xem thêm:  Cách liên kết CSS với HTML để trang trí web của bạn

b. Các thuộc tính được mở rộng từ các thuộc tính của form

Thật ra nó cũng là thuộc tính của thằng input mà thui. Nhưng mình phân ra để các bạn dễ nhớ và nhớ được nhiều hơn. Vì các thuộc tính này có điểm chung là tên của nó được tạo thành bằng từ  form + tên thuộc tính của phần tử form. Và thật sự nó cũng là các thuộc tính mở rộng cho các thuộc tính Form. Nó cũng có ý nghĩa như chính các thuộc tính tương ứng của Form.

  • Formaction: (form + action)
  • Formenctype: (form + enctype) t tác dụng mã hóa dữ liệu Form khi gử đi
  • Formmethod: (form+  method)
  • Formnovalidate: (form + novalidate)
  • Formtarget:(form + target)

Hi vọng bài viết sẽ giúp bạn có cái nhìn tổng quan về phần tử input. Một phần tử rất quan trọng luôn được sử dụng trong Form.

Hãy để lại góp ý của bạn về bài viết nhá!