Thuộc tính type phần tử input
Trong bài đọc này sẽ mô tả các loại thuộc tính type khác nhau của phần tử HTML <input>.
Các giá trị type của phần tử <input>
Dưới đây là các giá trị type input khác nhau mà chúng ta có thể sử dụng trong HTML.
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
Input type = text
<input type="text"> xác định một trường nhập văn bản một dòng.
Ví dụ
<form action="action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form>
Input type = password
<input type="password">xác định một trường mật khẩu.
Input type = submit
<input type="submit">xác định một nút để gửi dữ liệu biểu mẫu đến trình xử lý biểu mẫu.
Trình xử lý biểu mẫu là một file trên web server có các đoạn code để xử lý dữ liệu đầu vào.
Trình xử lý biểu mẫu được chỉ định trong thuộc tính action của biểu mẫu.
Input type = reset
<input type="reset">xác định nút reset sẽ đặt lại tất cả các giá trị biểu mẫu về giá trị mặc định ban đầu của chúng.
Input type = radio
<input type="radio">xác định một nút radio.
Nút radio cho phép người dùng CHỈ chọn MỘT trong số các lựa chọn giới hạn.
Input type = checkbox
<input type="checkbox">xác định một hộp kiểm.
Hộp kiểm cho phép người dùng chọn tùy chọn KHÔNG hoặc MỘT/NHIỀU tùy chọn trong một số lựa chọn giới hạn.
Input type = button
<input type="button">xác định một nút.
Input type = color
<input type="color">được sử dụng cho các lĩnh vực có dữ liệu đầu vào là một lựa chọn màu.
Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn màu có thể hiển thị trong trường nhập liệu.
Input type = date
<input type="date">được sử dụng cho các yêu cầu có dữ liệu đầu vào là một ngày tháng năm.
Tùy 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 nhập liệu.
Input type = datetime-local
<input type="datetime-local"> chỉ định ngày và giờ, không có múi giờ.
Tùy 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 nhập liệu.
Input type = email
<input type="email">được sử dụng cho các dữ liệu đầu vào là một địa chỉ e-mail.
Tùy thuộc vào sự hỗ trợ của trình duyệt, địa chỉ e-mail có thể được tự động xác nhận khi được gửi.
Một số điện thoại thông minh nhận dạng được loại email và thêm ".com" vào bàn phím để khớp với kiểu nhập email.
Input type = file
<input type="file"> xác định trường chọn file và nút "Choose File" để tải tập tin từ máy tính người dùng lên.
Input type = hidden
<input type="hidden"> định nghĩa một trường nhập ẩn (không hiển thị cho người dùng).
Trường ẩn cho phép chúng ta gọi dữ liệu vào mà người dùng không thể nhìn thấy dữ liệu đó hoặc sửa đổi dữ liệu khi gửi biểu mẫu.
Input type = month
<input type="month"> cho phép người dùng lựa chọn dữ liệu đầu vào là tháng và năm.
Tùy 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 nhập liệu.
Input type = number
<input type="number"> định nghĩa một trường nhập số.
Chúng ta có thể đặt hạn chế về những số được chấp nhận.
Ví dụ sau hiển thị trường nhập số, người dùng chỉ có thể nhập giá trị từ 1 đến 5.
Chúng ta có thể thêm thuộc tính step bổ sung cho thuộc tính number để chỉ định bước nhảy số trong trường input.
Ví dụ
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
Input type = range
<input type="range">xác định một thanh trượt để nhập một số có giá trị trong phạm vi cho trước. Phạm vi mặc định là 0 đến 100. Tuy nhiên, chúng có thể thiết lập các phạm vi về vùng chọn với các thuộc tính min, max và step.
Input type = search
<input type="search">được sử dụng cho các dữ liệu tìm kiếm.
Input type = tel
<input type="tel">được sử dụng để xác định dữ liệu đầu vào là một số điện thoại.
Ví dụ
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required="required">
Input type = url
<input type="url">được sử dụng để xác định dữ liệu đầu vào là một địa chỉ URL.
Tùy thuộc vào sự hỗ trợ của trình duyệt, trường url có thể được tự động xác thực khi được gửi.
Một số điện thoại thông minh nhận ra loại url và thêm ".com" vào bàn phím để khớp với đầu vào url.
Input type = week
<input type="week">phép người dùng lựa chọn dữ liệu là một tuần và năm.
Tùy 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 nhập liệu.