Cách hiển thị giá trị đầu vào trong div bằng javascript

Ngoài các thuộc tính hoạt động trên tất cả các phần tử

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Các giá trị của thuộc tính danh sách là

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Số ký tự tối đa (dưới dạng đơn vị mã UTF-16) mà người dùng có thể nhập vào đầu vào

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Đầu vào sẽ không xác thực được ràng buộc nếu độ dài của giá trị văn bản của trường lớn hơn

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Số ký tự tối thiểu (dưới dạng đơn vị mã UTF-16) mà người dùng có thể nhập vào đầu vào

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Đầu vào sẽ không xác thực ràng buộc nếu độ dài của văn bản được nhập vào trường nhỏ hơn

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Thuộc tính

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word"
      size="30" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word"
      size="30" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Nếu mẫu đã chỉ định không được chỉ định hoặc không hợp lệ, thì không có biểu thức chính quy nào được áp dụng và thuộc tính này bị bỏ qua hoàn toàn

Ghi chú. Sử dụng thuộc tính để chỉ định văn bản mà hầu hết các trình duyệt sẽ hiển thị dưới dạng chú giải công cụ để giải thích những yêu cầu để khớp với mẫu. Bạn cũng nên bao gồm văn bản giải thích khác gần đó

Xem để biết thêm chi tiết và một ví dụ

Thuộc tính

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Nếu nội dung của điều khiển có một hướng (LTR hoặc RTL) nhưng cần hiển thị trình giữ chỗ theo hướng ngược lại, bạn có thể sử dụng các ký tự định dạng thuật toán hai chiều Unicode để ghi đè hướng trong trình giữ chỗ;

Ghi chú. Tránh sử dụng thuộc tính

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Thuộc tính Boolean, nếu có, nghĩa là người dùng không thể chỉnh sửa trường này. Tuy nhiên,

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Ghi chú. Bởi vì trường chỉ đọc không thể có giá trị, nên

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Thuộc tính

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" required />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Điều này không đặt giới hạn về số lượng ký tự mà người dùng có thể nhập vào trường. Nó chỉ xác định khoảng bao nhiêu có thể được nhìn thấy tại một thời điểm. Để đặt giới hạn trên cho độ dài của dữ liệu đầu vào, hãy sử dụng thuộc tính

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" required />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" required />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" required />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Vô hiệu hóa kiểm tra chính tả cho phần tử này

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Bật kiểm tra chính tả cho thành phần này

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Thực hiện theo hành vi mặc định của phần tử để kiểm tra chính tả. Điều này có thể dựa trên bối cảnh

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" required />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Một trường nhập liệu có thể được bật kiểm tra chính tả nếu nó không có thuộc tính được đặt và không bị tắt

Giá trị được trả về bằng cách đọc

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" required />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Các thuộc tính không chuẩn sau đây cũng có sẵn trên một số trình duyệt. Theo nguyên tắc chung, bạn nên tránh sử dụng chúng trừ khi không thể giúp được

Một tiện ích mở rộng của Safari, thuộc tính

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Cho phép tự động sửa lỗi chính tả, cũng như xử lý thay thế văn bản nếu có được định cấu hình

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Vô hiệu hóa tự động sửa và thay thế văn bản

Tiện ích mở rộng của Mozilla, cung cấp gợi ý về loại hành động nào sẽ được thực hiện nếu người dùng nhấn phím Enter hoặc Return trong khi chỉnh sửa trường

Thuộc tính này đã không được dùng nữa. sử dụng thuộc tính toàn cầu thay thế

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Điều này ám chỉ như vậy

Khi được gửi, cặp tên/giá trị dữ liệu được gửi đến máy chủ sẽ là

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="10"
      placeholder="Username"
      minlength="4"
      maxlength="8" />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Bạn có thể cung cấp một trình giữ chỗ hữu ích bên trong kiểu nhập văn bản của mình để có thể cung cấp gợi ý về nội dung cần nhập bằng cách bao gồm sử dụng thuộc tính. Nhìn vào ví dụ sau

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Bạn có thể xem cách trình giữ chỗ được hiển thị bên dưới

Trình giữ chỗ thường được hiển thị bằng màu sáng hơn màu nền trước của phần tử và tự động biến mất khi người dùng bắt đầu nhập văn bản vào trường (hoặc bất cứ khi nào trường có giá trị được đặt theo chương trình bằng cách đặt thuộc tính

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Kích thước vật lý của hộp nhập liệu có thể được kiểm soát bằng thuộc tính. Với nó, bạn có thể chỉ định số lượng ký tự mà kiểu nhập văn bản có thể hiển thị tại một thời điểm. Điều này ảnh hưởng đến chiều rộng của phần tử, cho phép bạn chỉ định chiều rộng theo ký tự thay vì pixel. Ví dụ, trong ví dụ này, đầu vào rộng 30 ký tự

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word"
      size="30" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Các phần tử

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Ghi chú. Xác thực biểu mẫu HTML không thay thế cho tập lệnh máy chủ đảm bảo dữ liệu đã nhập ở định dạng phù hợp. Quá dễ dàng để ai đó thực hiện các điều chỉnh đối với HTML cho phép họ bỏ qua xác thực hoặc xóa hoàn toàn. Cũng có thể ai đó bỏ qua HTML của bạn hoàn toàn và gửi dữ liệu trực tiếp đến máy chủ của bạn. Nếu mã phía máy chủ của bạn không xác thực được dữ liệu mà nó nhận được, thảm họa có thể xảy ra khi dữ liệu được định dạng không đúng (hoặc dữ liệu quá lớn, không đúng loại, v.v.) được nhập vào cơ sở dữ liệu của bạn

Có các lớp giả hữu ích có sẵn để tạo kiểu cho các phần tử biểu mẫu để giúp người dùng biết khi nào giá trị của chúng hợp lệ hoặc không hợp lệ. Đây là

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Kỹ thuật này cũng yêu cầu một phần tử

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Bạn có thể sử dụng thuộc tính như một cách dễ dàng để nhập giá trị bắt buộc trước khi cho phép gửi biểu mẫu

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" required />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Điều này ám chỉ như vậy

Nếu bạn cố gắng gửi biểu mẫu mà không nhập cụm từ tìm kiếm vào đó, trình duyệt sẽ hiển thị thông báo lỗi

Bạn có thể chỉ định độ dài tối thiểu (bằng ký tự) cho giá trị đã nhập bằng thuộc tính;

Ví dụ bên dưới yêu cầu giá trị đã nhập có độ dài từ 4–8 ký tự

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="10"
      placeholder="Username"
      minlength="4"
      maxlength="8" />
    <span class="validity">span>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

div {
  margin-bottom: 10px;
  position: relative;
}
input + span {
  padding-right: 30px;
}
input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}
input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Điều này ám chỉ như vậy

Nếu cố gửi biểu mẫu có ít hơn 4 ký tự, bạn sẽ nhận được thông báo lỗi thích hợp (thông báo lỗi này khác nhau giữa các trình duyệt). Nếu bạn cố gắng nhập nhiều hơn 8 ký tự, trình duyệt sẽ không cho phép bạn

Ghi chú. Nếu bạn chỉ định

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      placeholder="Lower case, all one word" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Bạn có thể sử dụng thuộc tính để chỉ định một biểu thức chính quy mà giá trị đã nhập phải khớp để được coi là hợp lệ (xem khóa học cấp tốc đơn giản về cách sử dụng biểu thức chính quy để xác thực đầu vào)

Ví dụ bên dưới giới hạn giá trị ở 4-8 ký tự và yêu cầu giá trị đó chỉ chứa các chữ cái viết thường

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="45"
      pattern="[a-z]{4,8}" />
    <span class="validity">span>
    <p>Usernames must be lowercase and 4-8 characters in length.p>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form>
  <div>
    <label for="uname">Choose a username: label>
    <input type="text" id="uname" name="name" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Điều này ám chỉ như vậy

Bạn có thể xem các ví dụ hay về kiểu nhập văn bản được sử dụng trong ngữ cảnh trong bài viết Biểu mẫu HTML đầu tiên của bạn và Cách cấu trúc một biểu mẫu HTML

Làm cách nào để hiển thị giá trị trong thẻ div bằng JavaScript?

Làm cách nào để hiển thị giá trị đầu vào trong JavaScript?

Làm cách nào để lấy giá trị tên đầu vào trong JavaScript?

Làm cách nào để đặt giá trị đầu vào trong JavaScript?