HTML Input Types
Dưới đây là các input type khác nhau mà bạn 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 trường nhập văn bản một dòng:
Ví dụ
<form> <label for="fname">Họ:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Tên:</label><br> <input type="text" id="lname" name="lname"> </form>Đây là cách code HTML sẽ được hiển thị trong trình duyệt:
Input Type Password
<input type = "password"> xác định trường mật khẩu:
Ví dụ
<form> <label for="username">Tên người dùng:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">Mật khẩu:</label><br> <input type="password" id="pwd" name="pwd"> </form>Đây là cách code HTML sẽ được hiển thị trong trình duyệt:
Input Type Submit
<input type = "submit"> xác định một nút để submit dữ liệu form đến trình xử lý biểu mẫu.
Trình xử lý form thường là một trang máy chủ có tập lệnh để xử lý dữ liệu đầu vào.
Trình xử lý form được chỉ định trong attribute action của form:
<form action="/action_page.php"> <label for="fname">Họ:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Tên:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>Đây là cách code HTML sẽ được hiển thị trong trình duyệt:
Input Type Reset
<input type = "reset"> xác định nút đặt lại sẽ đặt lại tất cả các giá trị form về giá trị mặc định của chúng:
<form action="/action_page.php"> <label for="fname">Họ:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Tên:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> <input type="reset"> </form>Đây là cách code HTML sẽ được hiển thị trong trình duyệt:
Input Type Radio
<input type = "radio"> xác định một radio button.
Các radio button cho phép người dùng CHỈ chọn MỘT trong số các lựa chọn giới hạn.
Ví dụ
<p>Chọn ngôn ngữ web yêu thích của bạn:</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>Đây là cách code HTML sẽ được hiển thị trong trình duyệt:
Chọn ngôn ngữ web yêu thích của bạn:
Input Type Checkbox
<input type = "checkbox"> xác định checkbox.
Các checkbox cho phép người dùng chọn tùy chọn KHÔNG hoặc NHIỀU tùy chọn trong một số lựa chọn giới hạn.
Ví dụ
<form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> Tôi có xe đạp</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> Tôi có xe hơi</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> Tôi có thuyền</label> </form>Đây là cách code HTML sẽ được hiển thị trong trình duyệt:
Input Type Button
<input type="button"> xác định một button:
Ví dụ
<input type="button" onclick="alert('Hello World!')" value="Click Me!">Đây là cách code HTML sẽ được hiển thị trong trình duyệt:
Input Type Color
<Input type = "color"> được sử dụng cho các trường nhập phải chứa 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.
Ví dụ
<form> <label for="favcolor">Chọn màu sắc yêu thích của bạn:</label> <input type="color" id="favcolor" name="favcolor"> </form>Đây là cách code HTML sẽ được hiển thị trong trình duyệt:
Input Type Date
<Input type = "date"> được sử dụng cho các trường nhập phải chứa ngày tháng.
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.
Ví dụ
<form> <label for="birthday">Sinh nhật:</label> <input type="date" id="birthday" name="birthday"> </form>Bạn cũng có thể sử dụng các attribute min và max để thêm các giới hạn cho ngày tháng:
<form> <label for="datemax">Chọn ngày trước 1980-01-01:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">Chọn ngày sau 2000-01-01:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"> </form>Input Type Datetime-local
<Input type = "datetime-local"> chỉ định trường nhập 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.
Ví dụ
<form> <label for="birthdaytime">Sinh nhật:</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> </form>
Input Type Email
<Input type = "email"> được sử dụng cho các trường nhập phải chứa đị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.
Ví dụ
<form> <label for="email">Nhập địa chỉ email của bạn:</label> <input type="email" id="email" name="email"> </form>
Input Type Image
<Input type = "image"> xác định hình ảnh làm submit button.
Đường dẫn đến hình ảnh được chỉ định trong attribute src.
Ví dụ
<form> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form>
Input Type File
<Input type = "file"> xác định trường chọn file và nút "Browse" để tải fiel lên.
<form> <label for="myfile">Chọn file:</label> <input type="file" id="myfile" name="myfile"> </form>Input Type Hidden
<Input type = "hidden"> xác định trường nhập ẩn (không hiển thị cho người dùng).
Trường ẩn cho phép các nhà phát triển web bao gồm dữ liệu mà người dùng không thể nhìn thấy hoặc sửa đổi khi gửi form.
Trường ẩn thường lưu trữ bản ghi cơ sở dữ liệu nào cần được cập nhật khi form được gửi.
Lưu ý: Mặc dù giá trị không được hiển thị cho người dùng trong nội dung của trang, nhưng nó được hiển thị (và có thể được chỉnh sửa) bằng cách sử dụng bất kỳ công cụ dành cho nhà phát triển nào của trình duyệt hoặc chức năng "View Source". Không sử dụng đầu vào ẩn như một hình thức bảo mật!
Ví dụ
<form> <label for="fname">Tên:</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
<Input type = "month"> cho phép người dùng chọn một 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.
Ví dụ
<form> <label for="bdaymonth">Sinh nhật:</label> <input type="month" id="bdaymonth" name="bdaymonth"> </form>
Input Type Number
<Input type = "number"> xác định trường nhập số.
Bạn cũng có thể đặt giới hạn về những con số nào được chấp nhận.
Ví dụ sau hiển thị trường nhập số, nơi bạn có thể nhập giá trị từ 1 đến 5.
Ví dụ
<form> <label for="quantity">Giá trị (giữa 1 và 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form>
Input Type Range
<Input type = "range"> xác định điều khiển để nhập một số có giá trị chính xác (như điều khiển thanh trượt). Phạm vi mặc định là 0 đến 100. Tuy nhiên, bạn có thể đặt hạn chế về những con số nào được chấp nhận với các attribute min, max và step:
Ví dụ
<form> <label for="vol">Volume (giữa 0 và 50):</label> <input type="range" id="vol" name="vol" min="0" max="50"> </form>Input Type Search
<Input type = "search"> được sử dụng cho các trường tìm kiếm (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="gsearch">Tìm kiếm trên Google:</label> <input type="search" id="gsearch" name="gsearch"> </form>
Input Type Tel
<Input type = "tel"> được sử dụng cho các trường nhập phải chứa số điện thoại.
Ví dụ
<form> <label for="phone">Nhập số điện thoại của bạn:</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form>
Input Type Time
<Input type = "time"> cho phép người dùng chọn thời gian (không có múi giờ).
Tùy thuộc vào sự hỗ trợ của trình duyệt, bộ chọn thời gian có thể hiển thị trong trường nhập liệu.
Ví dụ
<form> <label for="appt">Chọn thời gian:</label> <input type="time" id="appt" name="appt"> </form>
Input Type Url
<Input type = "url"> được sử dụng cho các trường nhập phải chứa đị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.
Ví dụ
<form> <label for="homepage">Thêm trang chủ của bạn:</label> <input type="url" id="homepage" name="homepage"> </form>
Input Type Week
<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 sự hỗ trợ của trình duyệt, bộ chọn ngày có thể hiển thị trong trường nhập.
Ví dụ
<form> <label for="week">Chọn tuần:</label> <input type="week" id="week" name="week"> </form>