Làm thế nào để đặt các hộp văn bản trong một mẫu HTML5 - núm vú

Nhiều yếu tố của biểu mẫu HTML5 sử dụng dựa trên thẻ đầu vào. Công việc xây dựng trang web này là một thẻ mục đích chung được sử dụng để tạo ra một số đối tượng đầu vào thú vị, nhưng nó không phải là loại hộp văn bản duy nhất theo ý của bạn. Bạn cũng có thể tạo các trường mật khẩu và các hộp văn bản multiline, như thể hiện ở phần trên cùng của bản demo mẫu này.

Mã cho hộp văn bản trong hình này trông như sau:

formDemo. html

Mẫu Biểu mẫu
Nhập văn bản
Hộp văn bản
Kiểu mật khẩu = "mật khẩu" id = "myPwd" value = "secret" />
Văn bản Diện tích id = "myTextArea" rows =

Một hộp văn bản cơ bản

Việc xây dựng một hộp văn bản cơ bản là đơn giản:

1. Tạo một phần tử đầu vào.

   Thẻ tạo cấu trúc chung của phần tử.

2. Đặt loại " văn bản " để cho biết rằng bạn đang xây dựng một phần tử văn bản chuẩn, chứ không phải là một thứ phức tạp hơn.

3. Thêm thuộc tính id để đặt tên cho phần tử.

   Điều này trở nên rất quan trọng khi bạn thêm JavaScript vào trang vì mã JavaScript của bạn sẽ sử dụng ID để trích xuất dữ liệu từ biểu mẫu.

4. Thêm dữ liệu mặc định .

   Bạn có thể thêm dữ liệu mặc định nếu muốn, sử dụng thuộc tính value. Bất kỳ văn bản nào bạn đặt trong giá trị sẽ trở thành giá trị mặc định của biểu mẫu.

Phần tử văn bản đặt một hộp nhỏ trên màn hình. Khi một khách truy cập vào trang web của bạn chọn hộp, con trỏ sẽ chuyển thành một thanh chùm I, và khách truy cập của bạn sẽ có thể nhập văn bản vào hộp.

Trường mật khẩu

Trường mật khẩu, thể hiện trong hình, trông giống như trường văn bản thông thường, nhưng nó có một sự khác biệt chính: Khi người dùng nhập dữ liệu vào trường mật khẩu, nội dung của trường được thay thế bởi dấu hoa thị.

Trường mật khẩu sử dụng cùng một thẻ đầu vào như một trường văn bản cơ bản. Sự khác biệt duy nhất là bạn đặt thuộc tính id thành "password".

Các dấu sao thay thế có thể ngăn cản người xem ác trình bày mật khẩu của bạn, nhưng trường mật khẩu không cung cấp bảo mật thật sự - đặc biệt nếu bạn sử dụng JavaScript, làm cho mã truy xuất có sẵn miễn phí với trình duyệt. JavaScript không phải là ngôn ngữ để sử dụng nếu bạn muốn giữ nhiều bí mật.

Một hộp văn bản đa dòng

Đôi khi bạn muốn cung cấp cho khách truy cập vào trang web của bạn khả năng nhập nhiều dòng văn bản. Phần tử văn bản HTML5 là hoàn hảo cho tình huống này. Dưới đây là cách tạo vùng văn bản của riêng bạn:

1. Bắt đầu bằng thẻ để chỉ ra sự bắt đầu của một hộp văn bản nhiều dòng.

   Sử dụng thẻ để đặt tên cho vùng văn bản của bạn nếu bạn muốn.

2. Chỉ định số hàng.

   Cho biết số hàng (hoặc dòng) của văn bản bạn muốn vùng văn bản chứa. Các hộp lớn chứa nhiều văn bản hơn nhưng cần nhiều chỗ hơn trên màn hình.

3. Chỉ số cột.

   Số cột hiển thị khoảng cách (trong ký tự) của hộp văn bản. Một trang rộng chiều rộng thường là 80 ký tự.

4. Thêm thẻ đóng.