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.
Ví dụ 2:
Ví dụ 4:
Kiểu Input: radio
Ví dụ 5:
Kiểu Input: checkbox
Ví dụ 6:
Kiểu Input: checkbox
Ví dụ 6:
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 .
Male Female Other
Xác định các khoảng số hợp lí cho các 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.
Nhập giá trị:
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.
Enter a date before 1980-01-01: Enter a date after 2000-01-01:
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.
Bạn chọn những màu sắc mà mình yêu thích:
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.
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.
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.
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.
Thẻ cho phép người sử dụng có thể lựa chọn một tháng và năm.
Ví dụ 14:
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.
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.
Thẻ cho phép người sử dụng có thể lựa chọn một tháng và năm.
Ví dụ 14:
Thẻ cho phép người sử dụng lựa chọn tuần và năm.
Kiểu Input: week
Ví dụ 21:
Ví dụ 19:
Kiểu Input: search
Ví dụ 20: 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:
<!DOCTYPE html>
<html>
<body>
<form action="">
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>
<p>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).</p>
</body>
</html>
Kiểu Input: tel
Ví dụ 19:
Kiểu Input: search
Ví dụ 20:
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.
Kiểu Input: tel đị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)
Kiểu Input: search
Ví dụ 20:
Ví dụ 2:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Họ đệm:<br>
<input type="text" name="txtHoDem" value="Mickey">
<br>
Tên:<br>
<input type="text" name="txtTen" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>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".</p>
</body>
</html>
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 . Female Other
Kiểu Input: checkbox
Ví dụ 6: định nghĩa một nút checkbox.
Ví dụ 6:
Ví dụ 6:
<!DOCTYPE html>
<html>
<body><form action="action_page.php">
<input type="checkbox" name="vehicle1" value="Xe đạp">Tôi có một chiếc xe đạp
<br>
<input type="checkbox" name="vehicle2" value="Ô tô">Tôi có một chiếc ô tô
<br><br>
<input type="submit">
</form></body>
</html>
Ví dụ 6:
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 . Tôi có một chiếc ô tô
Kiểu Input: checkbox
Ví dụ 6: định nghĩa một button:
Ví dụ 6:
<!DOCTYPE html>
<html>
<body><input type="button" onclick="alert('Website Tìm ở đây chào bạn!')" value="Kíchh Tôi!"></body>
</html>
Ví dụ 6:
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 .
Kiểu Input: checkbox
Ví dụ 6:
Ví dụ 6:
Ví dụ 6:
datetime-local
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 .
Male Female Other
Xác định các khoảng số hợp lí cho các 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.
Nhập giá trị:
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.
Enter a date before 1980-01-01: Enter a date after 2000-01-01:
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.
Bạn chọn những màu sắc mà mình yêu thích:
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.
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.
Thẻ cho phép người sử dụng có thể lựa chọn một tháng và năm. được sử dụng cho trường dữ liệu đầu vào có chứa các giá trị là số.
Ví dụ 14:
Thẻ cho phép người sử dụng lựa chọn tuần và năm.
Kiểu Input: week
Ví dụ 19:
Kiểu Input: search
Ví dụ 20:
Kiểu Input: tel
Kiểu Input: url
Ví dụ 22:
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):
Telephone:
User password:
Thẻ được sử dụng cho các trường đầu vào mà chứa địa chỉ URL.
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)
Thêm trang web của bạn:
đị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:
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
định nghĩa một nút checkbox. định nghĩa một nút checkbox.
Male Female Other Tôi có một chiếc ô tô
định nghĩa một nút checkbox. định nghĩa một button:
định nghĩa một nút checkbox.
Tôi có một chiếc xe đạp Tôi có một chiếc ô tô
Kiểu Input: button
pattern
Xác định biểu thức chính quy để kiểm tra giá trị cho trường dữ liệu đầu vào
readonly
Xác định trường dữ liệu đầu vào là chỉ đọc (không thể thay đổi)
required
<!DOCTYPE html>
<html>
<body>
<p>
Phụ thuộc vào sự hỗ trợ của các trình duyệt:<br>
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.
</p><form action="action_page.php">
Nhập giá trị:
<input type="number" name="points" min="0" max="100" step="10" value="30">
<input type="submit">
</form>
<p><b>Note:</b>type="number" không được hỗ trợ bởi IE9 .
</p>
</body>
</html>
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. đượ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
<!DOCTYPE html>
<html>
<body><p>
Phụ thuộc vào sự hỗ trợ của các trình duyệt:<br>
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.
</p><form action="action_page.php">
Birthday:
<input type="date" name="bday">
<input type="submit">
</form>
<p><strong>Note:</strong> type="date" không được hỗ trợ bởi Internet Explorer 10 và các phiên bản trước đó.</p>
</body>
</html>
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.
<!DOCTYPE html>
<html>
<body><form action="action_page.php">
Enter a date before 1980-01-01:<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
Enter a date after 2000-01-01:<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
<input type="submit">
</form><p><strong>Note:</strong> type="date" không được hỗ trợ bởi Internet Explorer 10 và các phiên bản trước đó.</p>
</body>
</html>
Ví dụ 9: Enter a date after 2000-01-01: 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. đượ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.
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Họ đệm:<br>
<input type="text" name="txtHoDem" value="Mickey">
<br>
Tên:<br>
<input type="text" name="txtTen" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>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".</p>
</body>
</html>
0
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. đượ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:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Họ đệm:<br>
<input type="text" name="txtHoDem" value="Mickey">
<br>
Tên:<br>
<input type="text" name="txtTen" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>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".</p>
</body>
</html>
1
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. 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:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Họ đệm:<br>
<input type="text" name="txtHoDem" value="Mickey">
<br>
Tên:<br>
<input type="text" name="txtTen" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>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".</p>
</body>
</html>
2
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. 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.
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Họ đệm:<br>
<input type="text" name="txtHoDem" value="Mickey">
<br>
Tên:<br>
<input type="text" name="txtTen" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>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".</p>
</body>
</html>
3
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ờ).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.
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Họ đệm:<br>
<input type="text" name="txtHoDem" value="Mickey">
<br>
Tên:<br>
<input type="text" name="txtTen" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>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".</p>
</body>
</html>
4
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ờ).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á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ờ).
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Họ đệm:<br>
<input type="text" name="txtHoDem" value="Mickey">
<br>
Tên:<br>
<input type="text" name="txtTen" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>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".</p>
</body>
</html>
5
Ví dụ 14:
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. 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.
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Họ đệm:<br>
<input type="text" name="txtHoDem" value="Mickey">
<br>
Tên:<br>
<input type="text" name="txtTen" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>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".</p>
</body>
</html>
6
Ví dụ 14:
Birthday (month and year):
Kiểu Input: week được sử dụng cho các trường dữ liệu đầu vào có chứa một địa chỉ e-mail.
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ờ).
Kiểu Input: week
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Họ đệm:<br>
<input type="text" name="txtHoDem" value="Mickey">
<br>
Tên:<br>
<input type="text" name="txtTen" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>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".</p>
</body>
</html>
7
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.đượ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ụ 19:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Họ đệm:<br>
<input type="text" name="txtHoDem" value="Mickey">
<br>
Tên:<br>
<input type="text" name="txtTen" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>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".</p>
</body>
</html>
8
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). đượ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.
Ví dụ 20:
Search Google:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Họ đệm:<br>
<input type="text" name="txtHoDem" value="Mickey">
<br>
Tên:<br>
<input type="text" name="txtTen" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>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".</p>
</body>
</html>
9
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. được sử dụng cho các trường đầu vào mà chứa địa chỉ URL.
