Hướng dẫn html name value - giá trị tên html

Trong bài học này trình bày các kiểu đầu vào của phần tử  .

Phụ thuộc vào sự hỗ trợ của các trình duyệt, trường địa chỉ url có thẻ tự động xác nhận khi gửi đến. sử dụng cho nhập dữ liệu đầu vào cho đầu vào dạng văn bản (một dòng):

Ví dụ 21:

User name:




User password:




Các kí tự trong trường password được ẩn đi (nó được mã hóa hiển thị thành hình sao hoặc các chấm tròn).

Telephone:

Kiểu Input: url

User password:

	Thẻ  được sử dụng cho các trường đầu vào mà chứa địa chỉ URL.

Phụ thuộc vào sự hỗ trợ của các trình duyệt, trường địa chỉ url có thẻ tự động xác nhận khi gửi đến.

Một vài smartphones nhận ra kiểu đầu vào url, và bổ sung thêm “.com” vào bàn phím để phù hợp với địa chỉ đầu vào url. định nghĩa một nút để gửi dữ liệu từ form người sử dụng nhập tới nơi xử lý dữ liệu của form này (form-handler)

Ví dụ 22:

Thêm trang web của bạn:

Ví dụ 2:

Họ đệm:




Tên:








Nếu bạn click vào nút "Submit", dữ liệu trong form sẽ được gửi tới
 một trang có tên gọi là "action_page.php".

Telephone:

Kiểu Input: url

Ví dụ 4:

Họ đệm:




Tên:

Kiểu Input: radio

 định nghĩa một nút  radio. định nghĩa một nút  radio.

Các nút Radio cho phép người sử dụng chọn duy nhất một lựa chọn trong danh sách các lựa chọn:

Ví dụ 5:

 Male

 Female

 Other

Dưới đây là cách mà các mã code HTML sẽ hiển thị trên trình duyệt:

Male Female Other
Female
Other

Kiểu Input: checkbox

 định nghĩa một nút checkbox. định nghĩa một nút checkbox.

Checkboxes cho phép người sử dụng chọn không hoặc nhiều lựa chọn trong các lựa chọn đưa ra .

Ví dụ 6:

Tôi có một chiếc xe đạp


Tôi có một chiếc ô tô

Dưới đây là cách mà các mã code HTML sẽ hiển thị trên trình duyệt:

Male Female Other
 Tôi có một chiếc ô tô

Kiểu Input: checkbox

 định nghĩa một nút checkbox. định nghĩa một button:

Checkboxes cho phép người sử dụng chọn không hoặc nhiều lựa chọn trong các lựa chọn đưa ra .

Dưới đây là cách mà các mã code HTML sẽ hiển thị trên trình duyệt:

Male Female Other

Kiểu Input: checkbox

•  định nghĩa một nút checkbox.
• Checkboxes cho phép người sử dụng chọn không hoặc nhiều lựa chọn trong các lựa chọn đưa ra .
• Ví dụ 6:
• datetime-local
•  Tôi có một chiếc xe đạp  Tôi có một chiếc ô tô
• Kiểu Input: button
•  định nghĩa một button:
• Ví dụ 7:
• Các kiểu đầu vào của HTML5
• Dưới đây là một số kiểu đầu vào mới của HTML5 mới bổ sung:
• color
• date
• datetime

	email

month

number  được sử dụng cho trường dữ liệu đầu vào có chứa các giá trị là số.

range

search

tel

url

week

Các kiểu đầu vào mới bổ sung này, không được hỗ trợ bởi các trình duyệt web cũ, chúng sẽ hoạt động như kiểu input dạng text.

Phụ thuộc vào sự hỗ trợ của các trình duyệt:

Các giới hạn Numeric sẽ áp dụng cho các trường dữ liệu đầu vào.

Chọn giá trị (trong khoảng từ 1 tới 5):



Chú ý:type="number"không được hỗ trợ trong IE9 và trước đó.

Xác định trường dữ liệu đầu vào là chỉ đọc (không thể thay đổi)

required

Phụ thuộc vào sự hỗ trợ của các trình duyệt:

Các lỗi sẽ được khắc phục và áp dụng trong các trường dữ liệu đầu vào.

Nhập giá trị:



Note:type="number" không được hỗ trợ bởi IE9 .

Xác định các yêu cầu của trường dữ liệu đầu vào(trường không thể để trống)

size

Xác định độ rộng (theo các kí tự) của trường dữ liệu đầu vào  được sử dụng khi trường dữ liệu đầu vào chứa các giá trị là ngày.

step

Xác định các khoảng số hợp lí cho các trường dữ liệu đầu vào

Phụ thuộc vào sự hỗ trợ của các trình duyệt:

Một bộ chọn ngày sẽ được hiện lên khi bạn nhập các trường dữ liệu đầu vào.

Birthday:



Note: type="date" không được hỗ trợ bởi Internet Explorer 10 và các phiên bản trước đó.

value

Xác định giá trị mặc định cho trường dữ liệu đầu vào

Bạn có thể tìm hiểu thêm và kĩ hơn các tuỳ chọn đầu vào trong các bài học tiếp theo.

Enter a date before 1980-01-01:




Enter a date after 2000-01-01:





Note: type="date" không được hỗ trợ bởi Internet Explorer 10 và các phiên bản trước đó.

Ví dụ 9:
Enter a date after 2000-01-01:

Nhập giá trị:

Kiểu Input: date được sử dụng khi trường dữ liệu đầu vào chứa các giá trị là màu sắc.

Thẻ  được sử dụng khi trường dữ liệu đầu vào chứa các giá trị là ngày.

Tùy thuộc vào sự hỗ trợ của các trình duyệt, một bộ chọn ngày có thể hiển thị trong các trường dữ liệu đầu vào.

Họ đệm:




Tên:








Nếu bạn click vào nút "Submit", dữ liệu trong form sẽ được gửi tới
 một trang có tên gọi là "action_page.php".

Ví dụ 10:

Birthday:

Bạn có thể bổ sung thêm các giới hạn đầu vào: được sử dụng khi trường dữ liệu đầu vào chứa dữ liệu là giá trị trong phạm vi nhất định.

Ví dụ 11:

Enter a date before 1980-01-01: Enter a date after 2000-01-01:

Họ đệm:




Tên:








Nếu bạn click vào nút "Submit", dữ liệu trong form sẽ được gửi tới
 một trang có tên gọi là "action_page.php".

Kiểu Input: color

Thẻ  được sử dụng khi trường dữ liệu đầu vào chứa các giá trị là màu sắc.

Tùy thuộc vào sự hỗ trợ của các trình duyệt, một bộ chọn màu sắc có thể hiển thị trong các trường dữ liệu đầu vào. cho phép người sử dụng có thể lựa chọn một tháng và năm.

Ví dụ 12:

Bạn chọn những màu sắc mà mình yêu thích:

Họ đệm:




Tên:








Nếu bạn click vào nút "Submit", dữ liệu trong form sẽ được gửi tới
 một trang có tên gọi là "action_page.php".

Kiểu Input: range

Thẻ  được sử dụng khi trường dữ liệu đầu vào chứa dữ liệu là giá trị trong phạm vi nhất định.

Tùy thuộc vào sự hỗ trợ các trình duyệt mà các trường dữ liệu đầu vào có thể hiển thị như là thanh điều khiển. cho phép người sử dụng lựa chọn tuần và năm.

Ví dụ 13:

Bạn có thể sử dụng các thuộc tính sau để xác định các giới hạn: min, max, step, value.

Họ đệm:




Tên:








Nếu bạn click vào nút "Submit", dữ liệu trong form sẽ được gửi tới
 một trang có tên gọi là "action_page.php".

Kiểu Input: month

Thẻ  cho phép người sử dụng có thể lựa chọn một tháng và năm.

Phụ thuộc vào sự hỗ trợ các trình duyệt, một bộ chọn ngày có thể hiển thị trong các trường dữ liệu đầu vào. cho phép người dùng lựa chọn một thời gian (không có múi giờ).

Ví dụ 13:

Bạn có thể sử dụng các thuộc tính sau để xác định các giới hạn: min, max, step, value.

Họ đệm:




Tên:








Nếu bạn click vào nút "Submit", dữ liệu trong form sẽ được gửi tới
 một trang có tên gọi là "action_page.php".

Kiểu Input: month

Thẻ  cho phép người sử dụng có thể lựa chọn một tháng và năm.

Phụ thuộc vào sự hỗ trợ các trình duyệt, một bộ chọn ngày có thể hiển thị trong các trường dữ liệu đầu vào.cho phép người sử dụng lựa chọn ngày và thời gian (không có múi giờ).

Ví dụ 14:

Họ đệm:




Tên:








Nếu bạn click vào nút "Submit", dữ liệu trong form sẽ được gửi tới
 một trang có tên gọi là "action_page.php".

Birthday (month and year):

	Kiểu Input: week

Thẻ  cho phép người sử dụng lựa chọn tuần và năm.

Phụ thuộc vào sự hỗ trợ của trình duyệt , bộ chọn ngày có thể hiển thị trong trường dữ liệu đầu vào. cho phép người sử dụng lựa chọn ngày và thời gian (không có múi giờ).

Ví dụ 13:

Bạn có thể sử dụng các thuộc tính sau để xác định các giới hạn: min, max, step, value.

Họ đệm:




Tên:








Nếu bạn click vào nút "Submit", dữ liệu trong form sẽ được gửi tới
 một trang có tên gọi là "action_page.php".

Birthday (month and year):

Kiểu Input: week

Thẻ  cho phép người sử dụng lựa chọn tuần và năm. được sử dụng cho các trường dữ liệu đầu vào có chứa một địa chỉ e-mail.

Phụ thuộc vào sự hỗ trợ của trình duyệt , bộ chọn ngày có thể hiển thị trong trường dữ liệu đầu vào.

Một vài smartphones có thể nhận ra các loại email, và bổ sung thêm “.com” vào bàn phím để phù hợp với dữ liệu đầu vào của email.

Ví dụ 19:

Họ đệm:




Tên:








Nếu bạn click vào nút "Submit", dữ liệu trong form sẽ được gửi tới
 một trang có tên gọi là "action_page.php".

E-mail:

Kiểu Input: search

Thẻ  được sử dụng cho phép người dùng tìm kiếm các trường (một trường search hoạt động thông thường như một trường text). được sử dụng cho phép người dùng tìm kiếm các trường (một trường search hoạt động thông thường như một trường text).

Ví dụ 20:

Họ đệm:




Tên:








Nếu bạn click vào nút "Submit", dữ liệu trong form sẽ được gửi tới
 một trang có tên gọi là "action_page.php".

Search Google:

Kiểu Input: tel

Thẻ  được sử dụng cho các trường đầu vào có dữ liệu chứa một số điện thoại. được sử dụng cho các trường đầu vào có dữ liệu chứa một số điện thoại.

Phần tử  tel hiện nay chỉ được hỗ trợ trong trình duyệt Safari 8.

Ví dụ 21:

Họ đệm:




Tên:








Nếu bạn click vào nút "Submit", dữ liệu trong form sẽ được gửi tới
 một trang có tên gọi là "action_page.php".

Telephone:

Kiểu Input: url

Thẻ  được sử dụng cho các trường đầu vào mà chứa địa chỉ URL. được sử dụng cho các trường đầu vào mà chứa địa chỉ URL.

Phụ thuộc vào sự hỗ trợ của các trình duyệt, trường địa chỉ url có thẻ tự động xác nhận khi gửi đến.

Một vài smartphones nhận ra kiểu đầu vào url, và bổ sung thêm “.com” vào bàn phím để phù hợp với địa chỉ đầu vào url.

Ví dụ 22:

Họ đệm:




Tên:

Thêm trang web của bạn: