Hướng dẫn HTML

TRANG CHỦ HTML Giới thiệu HTML Trình chỉnh sửa HTML HTML cơ bản Phần tử HTML Thuộc tính HTML Tiêu đề HTML Đoạn văn HTML Kiểu HTML Định dạng HTML Trích dẫn HTML Nhận xét HTML Màu HTML HTML CSS Liên kết HTML Hình ảnh HTML HTML Favicon Bảng HTML Danh sách HTML Khối HTML & Nội tuyến Các lớp HTML Id HTML Khung nội tuyến HTML HTML JavaScript Đường dẫn tệp HTML Đầu HTML Bố cục HTML HTML đáp ứng Mã máy tính HTML Ngữ nghĩa HTML Hướng dẫn kiểu HTML Thực thể HTML Biểu tượng HTML Biểu tượng cảm xúc HTML Bộ mã HTML Mã hóa URL HTML HTML so với XHTML

Biểu mẫu HTML

Biểu mẫu HTML Thuộc tính biểu mẫu HTML Phần tử biểu mẫu HTML Các loại đầu vào HTML Thuộc tính đầu vào HTML Thuộc tính biểu mẫu nhập HTML

Đồ họa HTML

HTML Canvas HTML SVG

HTML Media

HTML Media Video HTML Âm thanh HTML Trình cắm HTML HTML YouTube

API HTML

Vị trí địa lý HTML Kéo / thả HTML Lưu trữ web HTML Nhân viên web HTML HTML SSE

Ví dụ HTML

Ví dụ HTML HTML Quiz Bài tập HTML Chứng chỉ HTML Tóm tắt HTML Khả năng truy cập HTML

Tham chiếu HTML

Danh sách thẻ HTML Thuộc tính HTML Thuộc tính toàn cầu HTML Hỗ trợ trình duyệt HTML Sự kiện HTML Màu HTML HTML Canvas HTML Audio / Video HTML Doctypes Bộ ký tự HTML Mã hóa URL HTML Mã HTML Lang Tin nhắn HTTP Phương thức HTTP Công cụ chuyển đổi PX sang EM Các phím tắt bàn phím

Thuộc tính đầu vào HTML


Chương này mô tả các thuộc tính khác nhau cho <input>phần tử HTML.


Thuộc tính giá trị

Thuộc tính đầu vào valuechỉ định giá trị ban đầu cho trường đầu vào:

Thí dụ

Các trường nhập có giá trị ban đầu (mặc định):

<form>
  <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">
</form>

Thuộc tính chỉ đọc

Thuộc tính đầu vào readonlychỉ định rằng một trường đầu vào là chỉ đọc.

Không thể sửa đổi trường đầu vào chỉ đọc (tuy nhiên, người dùng có thể gắn thẻ, đánh dấu và sao chép văn bản từ trường đó).

Giá trị của trường đầu vào chỉ đọc sẽ được gửi khi gửi biểu mẫu!

Thí dụ

Trường đầu vào chỉ đọc:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

Thuộc tính bị vô hiệu hóa

Thuộc tính đầu vào disabledchỉ định rằng một trường đầu vào nên bị vô hiệu hóa.

Trường đầu vào bị vô hiệu hóa không thể sử dụng được và không thể nhấp được.

Giá trị của trường đầu vào bị vô hiệu hóa sẽ không được gửi khi gửi biểu mẫu!

Thí dụ

Một trường đầu vào bị vô hiệu hóa:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>


Thuộc tính kích thước

Thuộc tính đầu vào sizechỉ định chiều rộng hiển thị, tính bằng ký tự, của trường đầu vào.

Giá trị mặc định cho sizelà 20.

Lưu ý: Thuộc sizetính hoạt động với các loại đầu vào sau: văn bản, tìm kiếm, điện thoại, url, email và mật khẩu.

Thí dụ

Đặt chiều rộng cho trường đầu vào:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

Thuộc tính maxlength

Thuộc tính đầu vào maxlengthchỉ định số ký tự tối đa được phép trong một trường đầu vào.

Lưu ý: Khi a maxlengthđược đặt, trường nhập sẽ không chấp nhận nhiều hơn số ký tự được chỉ định. Tuy nhiên, thuộc tính này không cung cấp bất kỳ phản hồi nào. Vì vậy, nếu bạn muốn cảnh báo người dùng, bạn phải viết mã JavaScript.

Thí dụ

Đặt độ dài tối đa cho trường đầu vào:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

Thuộc tính tối thiểu và tối đa

Đầu vào minmaxcác thuộc tính chỉ định các giá trị tối thiểu và tối đa cho một trường đầu vào.

Thuộc tính minmaxhoạt động với các loại đầu vào sau: số, phạm vi, ngày, ngày giờ-cục bộ, tháng, giờ và tuần.

Mẹo: Sử dụng các thuộc tính max và min cùng nhau để tạo ra một loạt các giá trị pháp lý.

Thí dụ

Đặt ngày tối đa, ngày tối thiểu và phạm vi giá trị pháp lý:

<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"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Nhiều thuộc tính

Thuộc tính đầu vào multiplechỉ định rằng người dùng được phép nhập nhiều giá trị vào một trường đầu vào.

Thuộc multipletính hoạt động với các loại đầu vào sau: email và tệp.

Thí dụ

Trường tải lên tệp chấp nhận nhiều giá trị:

<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>
</form>

Thuộc tính mẫu

Thuộc tính đầu vào patternchỉ định một biểu thức chính quy mà giá trị của trường đầu vào được kiểm tra, khi biểu mẫu được gửi.

Thuộc patterntính hoạt động với các loại đầu vào sau: văn bản, ngày tháng, tìm kiếm, url, số điện thoại, email và mật khẩu.

Mẹo: Sử dụng thuộc tính tiêu đề chung để mô tả mẫu giúp người dùng.

Mẹo: Tìm hiểu thêm về biểu thức chính quy trong hướng dẫn JavaScript của chúng tôi.

Thí dụ

Trường đầu vào chỉ có thể chứa ba chữ cái (không có số hoặc ký tự đặc biệt):

<form>
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

Thuộc tính trình giữ chỗ

Thuộc tính đầu vào placeholderchỉ định một gợi ý ngắn mô tả giá trị mong đợi của trường đầu vào (giá trị mẫu hoặc mô tả ngắn về định dạng mong đợi).

Gợi ý ngắn được hiển thị trong trường nhập liệu trước khi người dùng nhập giá trị.

Thuộc placeholdertính hoạt động với các loại đầu vào sau: văn bản, tìm kiếm, url, điện thoại, email và mật khẩu.

Thí dụ

Trường đầu vào có văn bản giữ chỗ:

<form>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Thuộc tính bắt buộc

Thuộc tính đầu vào requiredchỉ định rằng một trường đầu vào phải được điền trước khi gửi biểu mẫu.

Thuộc requiredtính hoạt động với các loại đầu vào sau: văn bản, tìm kiếm, url, điện thoại, email, mật khẩu, bộ chọn ngày, số, hộp kiểm, radio và tệp.

Thí dụ

Một trường đầu vào bắt buộc:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

Thuộc tính bước

Thuộc tính đầu vào stepchỉ định khoảng số hợp pháp cho một trường đầu vào.

Ví dụ: nếu bước = "3", các số hợp pháp có thể là -3, 0, 3, 6, v.v.

Mẹo: Bạn có thể sử dụng thuộc tính này cùng với các thuộc tính max và min để tạo ra một loạt các giá trị pháp lý.

Thuộc steptính hoạt động với các loại đầu vào sau: số, phạm vi, ngày, ngày giờ-cục bộ, tháng, giờ và tuần.

Thí dụ

Trường đầu vào có khoảng số hợp pháp được chỉ định:

<form>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
</form>

Lưu ý: Các hạn chế đầu vào không phải là dễ hiểu và JavaScript cung cấp nhiều cách để thêm đầu vào bất hợp pháp. Để hạn chế đầu vào một cách an toàn, nó cũng phải được kiểm tra bởi người nhận (máy chủ)!


Thuộc tính lấy nét tự động

Thuộc tính đầu vào autofocuschỉ định rằng trường nhập sẽ tự động lấy tiêu điểm khi tải trang.

Thí dụ

Để trường nhập "Tên" tự động lấy tiêu điểm khi trang tải:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Thuộc tính chiều cao và chiều rộng

Đầu vào heightwidthcác thuộc tính chỉ định chiều cao và chiều rộng của một <input type="image">phần tử.

Mẹo: Luôn chỉ định cả thuộc tính chiều cao và chiều rộng cho hình ảnh. Nếu chiều cao và chiều rộng được đặt, không gian cần thiết cho hình ảnh sẽ được dành riêng khi trang được tải. Nếu không có các thuộc tính này, trình duyệt không biết kích thước của hình ảnh và không thể dành không gian thích hợp cho nó. Hiệu quả sẽ là bố cục trang sẽ thay đổi trong quá trình tải (trong khi tải hình ảnh).

Thí dụ

Xác định hình ảnh làm nút gửi, với các thuộc tính chiều cao và chiều rộng:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

Thuộc tính danh sách

Thuộc tính đầu vào listđề cập đến một <datalist>phần tử có chứa các tùy chọn được xác định trước cho phần tử <input>.

Thí dụ

Phần tử <input> với các giá trị được xác định trước trong <datalist>:

<form>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

Thuộc tính tự động hoàn thành

Thuộc tính đầu vào autocompletechỉ định xem biểu mẫu hoặc trường nhập liệu có nên bật hoặc tắt tính năng tự động hoàn thành hay không.

Tự động điền cho phép trình duyệt dự đoán giá trị. Khi người dùng bắt đầu nhập vào một trường, trình duyệt sẽ hiển thị các tùy chọn để điền vào trường, dựa trên các giá trị đã nhập trước đó.

Thuộc autocompletetính hoạt động với <form>và các <input>loại sau: văn bản, tìm kiếm, url, điện thoại, email, mật khẩu, bộ chọn ngày, phạm vi và màu sắc.

Thí dụ

Biểu mẫu HTML có bật và tắt tính năng tự động điền cho một trường đầu vào:

<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Submit">
</form>

Mẹo: Trong một số trình duyệt, bạn có thể cần phải kích hoạt chức năng tự động hoàn thành để tính năng này hoạt động (Xem trong phần "Tùy chọn" trong menu của trình duyệt).


Bài tập HTML

Kiểm tra bản thân với các bài tập

Bài tập:

Trong trường nhập bên dưới, hãy thêm trình giữ chỗ có nội dung "Tên của bạn ở đây".

<form action = "/ action_page.php">
<input type = "text">
</form>


Các phần tử đầu vào và biểu mẫu HTML

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control

Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi .