HTML Input Types
Các kiểu Thẻ <input> thường được 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">| Lưu ý: Thuộc tính mặc định sẽ là kiểu “text” |
Input Type Text
<input type="text"> được định nghĩa bằng 1 dòng code của thẻ <input>:
Ví dụ
<form> <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"></form>
Input Type Password
<input type="password"> được định nghĩa bằng kiểu password
Ví dụ
<form> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">Password:</label><br> <input type="password" id="pwd" name="pwd"></form>Input Type Submit
<input type="submit"> được định nghĩa bằng một nút để gửi dữ liệu xử lý form
Form-handler thường là một trang máy chủ với một đoạn mã để xử lý dữ liệu đầu vào
Form-handler được xác định trong thuộc tính action của biểu mẫu:
Ví dụ
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"></form>Nếu bạn bỏ qua giá trị thuộc tính của nút gửi (submit button), nút đó sẽ có mặc định là text
Ví dụ
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit"></form>Input Type Reset
<input type="reset"> được định nghĩa là nút reset sẽ reset tất cả các giá trị đã điền:
Ví dụ
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> <input type="reset" value="Reset"></form>Nếu bạn cần thay đổi các giá trị và nhấn vào nút reset, dữ liệu trên form sẽ được reset về giá trị mặc định
Input Type Radio
<input type="radio"> định nghĩa là một nút đơn
Nút radio sẽ cho phép 1 lựa chọn trong tất cả các lựa chọn
Ví dụ
<p>Choose your favorite Web language:</p><form> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label></form>Input Type Checkbox
<input type="checkbox"> được định nghĩa là một checkbox
Checkboxes sẽ cho phép người dùng có nhiều sự lựa chọn trong tất cả các sự lựa chọn
Ví dụ
<form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label></form>Input Type Button
<input type="button"> được định nghĩa là một nút:
Ví dụ
<input type="button" onclick="alert('Hello World!')" value="Click Me!">Input Type Color
Thẻ <input type="color"> thường được dùng cho các kiểu input có chứa màu sắc
Phụ thuộc vào trình duyệt có hỗ trợ, mỗi sự lựa chọn sẽ có một màu khác nhau
Ví dụ
<form> <label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor"></form>Input Type Date
Thẻ <input type="date"> thường được sử dụng cho trường nhập là kiểu ngày
Tùy thuộc vào sự hỗ trợ của trình duyệt, một bảng chọn ngày có Thẻ xuất hiện trong trường nhập (input field).
Ví dụ
<form> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"></form>Bạn có Thẻ dùng thuộc tính để giới hạn ngày gần nhất và ngày lâu nhất
Ví dụ
<form> <label for="datemax">Enter a date before 1980-01-01:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">Enter a date after 2000-01-01:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"></form>Input Type Datetime-local
Thẻ <input type="datetime-local"> thường được sử dụng để nhập ngày, giờ, không có múi giờ
Tùy thuộc vào khả năng hỗ trợ của trình duyệt, một bảng chọn ngày có Thẻ xuất hiện trong trường nhập
Ví dụ
<form> <label for="birthdaytime">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"></form>Input Type Email
Thẻ <input type="email"> thường được để nhập email
Tùy thuộc vào khả năng hỗ trợ của trình duyệt, địa chỉ email có Thẻ tự động xác thực khi gửi
Một vài điện thoại thông minh nhận dạng được kiểu dữ liệu email và tự động Thẻm “.com” vào cuối trường nhập email
Ví dụ
<form> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"></form>Input type Image
Thẻ <input type"image"> thường được dung làm môjt nút để upload những hình ảnh được chọn vào trong form
Đường dẫn đến hình ảnh được chỉ định trong thuộc tính src
Ví dụ
<form> <label for="mylife">Select a file</label> <input type="image" src="img_submit.gif" alt="submit" width="48" height="48"></form>Input Type File
Thẻ <input type="file"> được định nghĩa lựa chọn 1 file để upload files
Ví dụ
<form> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"></form>Input Type Hidden
Thẻ <input type="hidden"> thường được dùng để ẩn những những thông tin nhạy cảm của người dùng (người nhập cũng không thể nhìn thấy được)
Hidden có thể giúp cho các lập trình viên không thể thấy được dữ liệu của người dùng khi gửi
Hidden thường lưu những thông tin khi thẻ <form> được gửi đi
Lưu ý: Mặc dù giá trị của trường này không được hiển thị trong nội dung trang cho người dùng, nó vẫn có thể thấy và chỉnh sửa bằng cách sử dụng các công cụ phát triển của trình duyệt hoặc chức năng "Xem nguồn" của trình duyệt. Không nên sử dụng các trường hidden như một biện pháp bảo mật.
Ví dụ
<form> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="hidden" id="custId" name="custId" value="3487"> <input type="submit" value="Submit"></form>Input Type Month
Thẻ <input type="month"> cho phép người dùng lựa chọn tháng và năm
Nó phụ thuộc vào sự hỗ trợ của trình duyệt và ngày tháng được chọn sẽ được show ra trong thẻ <input>
Ví dụ
<form> <label for="bdaymonth">Birthday (month and year):</label> <input type="month" id="bdaymonth" name="bdaymonth"></form>Input Type Number
Thẻ <input type="number"> để định nghĩa là kiểu nhập số
Bạn cũng có thể cài đặt những ràng buộc nhất định để được chấp nhận
Hiển thị trường nhập số, giới hạn nhập từ 1-5
Ví dụ
<form> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"></form>Input Restrictions
Các thuộc tính cho trường nhập (input fields) trong HTML:
| Thuộc tính | Mô tả |
| checked | Xác định rằng trường nhập (input field) nên được chọn mặc định khi trang tải( đối với type="checkbox" hoặc type="radio"). |
| disabled | Xác định rằng trường nhập nên bị vô hiệu hóa. |
| max | Xác định giá trị tối đa cho trường nhập. |
| maxlength | Xác định số ký tự tối đa cho trường nhập. |
| min | Xác định giá trị tối thiểu cho trường nhập. |
| pattern | Xác định biểu thức chính quy để kiểm tra giá trị nhập vào. |
| readonly | Xác định rằng trường nhập chỉ có thể đọc (không thể thay đổi). |
| required | Xác định rằng trường nhập là bắt buộc (phải được điền). |
| size | Xác định độ rộng (theo số ký tự) của trường nhập. |
| step | Xác định khoảng cách giá trị số hợp lệ cho trường nhập. |
| value | Xác định giá trị mặc định cho trường nhập. |
Bạn sẽ được tìm hiểu về các ràng buộc trong bài học tiếp theo
Nhập giá trị số từ 0-100, bước nhảy là 10, giá trị mặc định là 30
Ví dụ
<form> <label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30"></form>Input Type Range
Thẻ <input type="search"> được sử dụng cho trường tìm kiếm (search fields), trong đó trường tìm kiếm hoạt động giống như một trường văn bản thông thường.
Ví dụ
<form> <label for="vol">Volume (between 0 and 50):</label> <input type="range" id="vol" name="vol" min="0" max="50"></form>Input Type Search
Thẻ <input type="search"> được sử dụng để tìm kiếm
Ví dụ
<form> <label for="gsearch">Search Google:</label> <input type="search" id="gsearch" name="gsearch"></form>Input Type Tel
Thẻ <input type="tel"> được dùng để nhập số điện thoại
Ví dụ
<form> <label for="phone">Enter your phone number:</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"></form>Input Type Time
Thẻ <input type="time"> cho phép nhập thời gian( không bao gồm múi giờ)
Phụ thuộc vào trình duyệt hỗ trợ, thời gian được chọn có thể hiển thị trên thẻ <input>
Ví dụ
<form> <label for="appt">Select a time:</label> <input type="time" id="appt" name="appt"></form>Input Type Url
Thẻ <input type="url"> được sử dụng cho các trường nhập (input fields) nên chứa địa chỉ URL.
Tùy thuộc vào khả năng hỗ trợ của trình duyệt, trường nhập URL có thể được kiểm tra tính hợp lệ tự động khi được gửi.
Một số điện thoại thông minh nhận dạng loại URL và thêm ".com" vào bàn phím để phù hợp với việc nhập địa chỉ URL
Ví dụ
<form> <label for="homepage">Add your homepage:</label> <input type="url" id="homepage" name="homepage"></form>Input Type Week
Thẻ <input type="week"> cho phép người dùng chọn một tuần và năm.
Tùy thuộc vào khả năng hỗ trợ của trình duyệt, một bảng chọn ngày có thể xuất hiện trong trường nhập.
Ví dụ
<form> <label for="week">Select a week:</label> <input type="week" id="week" name="week"></form>