Input số điện thoại html
Trong bài học này trình bày các kiểu đầu vào của phần tử . Show
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ụ 2:
Dưới đây là cách mà các mã code HTML sẽ hiển thị trên trình duyệt: User name:
Kiểu Input: submitđị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) Form-handler thường mà một trang chạy ở phía server, được viết bằng các ngôn ngữ ở phía máy chủ như PHP, ASP.NET, JSP … cho xử lý dữ liệu đầu vào. Form-handler được chỉ định bởi các thuộc tính “action” trong form đó: Ví dụ 3:
Dưới đây là cách mà các mã code HTML sẽ hiển thị trên trình duyệt: Nếu bạn bỏ qua thuộc tính value của nút Submit thì nút sẽ hiển thị với nhãn mặc định là “Submit”: Ví dụ 4:
Kiểu Input: 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:
Dưới đây là cách mà các mã code HTML sẽ hiển thị trên trình duyệt: Male 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:
Dưới đây là cách mà các mã code HTML sẽ hiển thị trên trình duyệt: Tôi có một chiếc xe đạp Kiểu Input: buttonđịnh nghĩa một button: Ví dụ 7:
Dưới đây là cách mà các mã code HTML sẽ hiển thị trên trình duyệt: Các kiểu đầu vào của HTML5Dưới đây là một số kiểu đầu vào mới của HTML5 mới bổ sung:
Kiểu Input: numberThẻ được sử dụng cho trường dữ liệu đầu vào có chứa các giá trị là số. Bạn có thể cài đặt các giới hạn trong kiểu đầu vào này. Tùy thuộc vào sự hỗ trợ của các trình duyệt mà các giới hạn này có thể áp dụng cho các trường dữ liệu đầu vào. Ví dụ 8:
Chọn giá trị (trong khoảng từ 1 tới 5): Các giới hạn đầu vàoDưới đây là danh sách một số các giới hạn đầu vào phổ biến( một vài giới hạn mới trong HTML5):
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. Ví dụ 9:
Nhập giá trị: Kiểu Input: dateThẻ đượ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. Ví dụ 10:
Birthday: Bạn có thể bổ sung thêm các giới hạn đầu vào: Ví dụ 11:
Enter a date before 1980-01-01: Kiểu Input: colorThẻ đượ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. Ví dụ 12:
Bạn chọn những màu sắc mà mình yêu thích: Kiểu Input: rangeThẻ đượ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. 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. Kiểu Input: monthThẻ 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. Ví dụ 14:
Birthday (month and year): Kiểu Input: weekThẻ 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. Ví dụ 15:
Select a week: Kiểu Input: timeThẻ cho phép người dùng lựa chọn một thời gian (không có múi giờ). 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. Ví dụ 16:
Select a time: Kiểu Input: datetimeThẻ 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ụ 17:
Birthday (date and time):
Kiểu Input: datetime-localThẻ cho phép người sử dụng lựa chọn ngày và thời gian (không có múi giờ). 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. Ví dụ 18:
Birthday (date and time): Kiểu Input: emailThẻ đượ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 các trình duyệt, địa chỉ e-mail có thể được tự động xác nhận khi gửi đến. 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:
E-mail: Kiểu Input: searchThẻ đượ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:
Search Google: Kiểu Input: telThẻ đượ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:
Telephone: Kiểu Input: urlThẻ đượ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:
Thêm trang web của bạn: |