Bài 27: Các thuộc tính giá trị input của form

Các thuộc tính giá trị

Thuộc tính giá trị xác định giá trị ban đầu cho một lĩnh vực đầu vào:

Thí dụ

<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

---

Các thuộc tính chỉ đọc

Các thuộc tính chỉ đọc quy định rằng các lĩnh vực đầu vào là chỉ đọc (không thể thay đổi):

Thí dụ

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

Các thuộc tính chỉ đọc không cần một giá trị. Nó cũng giống như viết readonly = "readonly".

---

Các thuộc tính đặc biệt

Các thuộc tính đặc biệt quy định rằng các lĩnh vực đầu vào được vô hiệu hóa.

Một yếu tố tàn tật là un-có thể sử dụng và bỏ có thể click.

yếu tố vô hiệu sẽ không được gửi.

Thí dụ

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

Các thuộc tính tàn tật không cần một giá trị. Nó cũng giống như viết disabled = "tàn tật".

---

Kích thước Attribute

Các thuộc tính size chỉ định kích thước (bằng ký tự) cho trường đầu vào:

Thí dụ

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

Các thuộc tính maxlength

Các thuộc tính maxlength xác định tối đa độ dài cho phép đối với lĩnh vực đầu vào:

Thí dụ

<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

Với một thuộc tính maxlength, kiểm soát đầu vào sẽ không chấp nhận nhiều hơn số ký tự được phép.

Các thuộc tính không cung cấp bất kỳ thông tin phản hồi. Nếu bạn muốn để cảnh báo cho người sử dụng, bạn phải viết mã JavaScript.

	hạn chế đầu vào là không đơn giản. 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, hạn chế phải được kiểm tra bởi người nhận (máy chủ) là tốt.

---

Các thuộc tính HTML5

HTML5 thêm các thuộc tính sau cho <input>:

• autocomplete
• tự động lấy nét
• hình thức
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• chiều cao và chiều rộng
• danh sách
• min và max
• nhiều
• mô hình (biểu thức chính quy)
• giữ chỗ
• cần thiết
• bước đi

và các thuộc tính sau cho <form>:

• autocomplete
• novalidate

---

Các thuộc tính tự động hoàn chỉnh

Các thuộc tính tự động hoàn chỉnh xác định xem một trường mẫu hoặc đầu vào nên có autocomplete hoặc tắt.

Khi tự động hoàn chỉnh là trên, trình duyệt các giá trị tự động hoàn toàn dựa trên những giá trị mà người dùng đã nhập trước đó.

Mẹo: Có thể có autocomplete "trên" đối với hình thức, và "tắt" cho các lĩnh vực đầu vào cụ thể, hoặc ngược lại.

Các thuộc tính tự động hoàn chỉnh làm việc với <form> và sau đây <input> loại: văn bản, tìm kiếm, url, tel, email, mật khẩu, datepickers, phạm vi, và màu sắc.

Thí dụ

Một dạng HTML với autocomplete trên (và tắt cho một đầu vào lĩnh vực):

<form action="action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Mẹo: Trong một số trình duyệt có thể bạn cần kích hoạt chức năng tự động hoàn chỉnh để làm việc này.

---

Các thuộc tính novalidate

Các thuộc tính novalidate là một <form> thuộc tính.

Khi hiện tại, novalidate xác định rằng dữ liệu mẫu không nên được xác nhận khi gửi.

Thí dụ

Chỉ ra rằng hình thức không phải là để được xác nhận trên trình:

<form action="action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

---

Các thuộc tính tự động lấy nét

Các thuộc tính tự động lấy nét là một thuộc tính boolean.

Khi hiện tại, nó xác định rằng một <input> phần tử sẽ tự động được tập trung khi tải trang.

Thí dụ

Hãy để những "tên đầu tiên" trường nhập tự động nhận được tập trung khi tải trang:

First name:<input type="text" name="fname" autofocus>

---

Các hình thức Attribute

Các thuộc tính hình thức chỉ định một hoặc nhiều hình thức một <input> yếu tố thuộc về.

Mẹo: Để tham khảo nhiều hình thức, sử dụng một danh sách không gian tách biệt của id hình thức.

Thí dụ

Một lĩnh vực đầu vào nằm ngoài các hình thức HTML (nhưng vẫn còn là một phần của biểu mẫu):

<form action="action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

---

Các thuộc tính formaction

Các thuộc tính formaction định URL của tập tin đó sẽ xử lý kiểm soát đầu vào khi các mẫu được gửi.

Các thuộc tính formaction đè các thuộc tính hành động của <form> phần tử.

Các thuộc tính formaction được sử dụng với type = "submit" và gõ = "hình ảnh".

Thí dụ

Một dạng HTML với hai trình nút, với hành động khác nhau:

<form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="demo_admin.asp"
  value="Submit as admin">
</form>

---

Các thuộc tính formenctype

Các thuộc tính formenctype định cách hình thức-dữ liệu phải được mã hóa khi gửi nó đến máy chủ (chỉ dành cho hình thức với method = "post").

Các thuộc tính formenctype đè các thuộc tính enctype của <form> phần tử.

Các thuộc tính formenctype được sử dụng với type = "submit" và gõ = "hình ảnh".

Thí dụ

Gửi mẫu dữ liệu được mã hóa mặc định (nút đầu tiên trình), và mã hóa như là "multipart / form-data" (nút thứ hai gửi):

<form action="demo_post_enctype.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

---

Các thuộc tính formmethod

Các thuộc tính formmethod định nghĩa phương thức HTTP để gửi form-data vào URL hành động.

Các thuộc tính formmethod đè các thuộc tính phương pháp của <form> phần tử.

Các thuộc tính formmethod có thể được sử dụng với type = "submit" và gõ = "hình ảnh".

Thí dụ

Nút thứ hai nộp override phương thức HTTP có dạng:

<form action="action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="demo_post.asp"
  value="Submit using POST">
</form>

---

Các thuộc tính formnovalidate

Các thuộc tính novalidate là một thuộc tính boolean.

Khi hiện tại, nó xác định rằng <input> yếu tố không nên được xác nhận khi gửi.

Các thuộc tính formnovalidate đè các thuộc tính novalidate của <form> phần tử.

Các thuộc tính formnovalidate có thể được sử dụng với type = "submit".

Thí dụ

Một hình thức với hai trình nút (có và không có xác nhận):

<form action="action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

---

Các thuộc tính formtarget

Các thuộc tính formtarget chỉ định một tên hoặc một từ khóa cho biết nơi để hiển thị các phản ứng đó được nhận sau khi nộp mẫu đơn.

Các thuộc tính formtarget đè các thuộc tính mục tiêu của <form> phần tử.

Các thuộc tính formtarget có thể được sử dụng với type = "submit" và gõ = "hình ảnh".

Thí dụ

Một hình thức với hai trình nút, với các cửa sổ mục tiêu khác nhau:

<form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

---

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

Chiều cao và chiều rộng thuộc tính chỉ định chiều cao và chiều rộng của một <input> phần tử.

Chiều cao và chiều rộng thuộc tính chỉ được sử dụng với <input type = "image">.

	Luôn xác định kích thước của hình ảnh. Nếu trình duyệt không biết kích thước, trang sẽ nhấp nháy trong khi hình ảnh tải.

Thí dụ

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

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

---

Danh sách thuộc tính

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

Thí dụ

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

<input list="browsers">

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

---

Min và max thuộc tính

Min và max thuộc tính chỉ định tối thiểu và tối đa giá trị cho một <input> phần tử.

Min và max thuộc tính làm việc với các loại đầu vào sau: số lượng, phạm vi, thời gian, ngày giờ, datetime-địa phương, tháng, thời gian và tuần.

Thí dụ

<Input> yếu tố với min và giá trị tối đa:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

---

Các thuộc tính nhiều

Các thuộc tính nhiều là một thuộc tính boolean.

Khi hiện tại, nó xác định rằng người sử dụng được phép nhập nhiều hơn một giá trị trong <input> phần tử.

Các thuộc tính nhiều hoạt động với các loại sau đây vào: email, và các tập tin.

Thí dụ

Một lĩnh vực tập tin tải lên mà chấp nhận nhiều giá trị:

Select images: <input type="file" name="img" multiple>

---

Các mô hình thuộc tính

Các thuộc tính mô hình xác định một biểu thức chính quy này với trị giá <input> yếu tố được kiểm tra lại.

Các thuộc tính mô hình làm việc với các loại đầu vào sau đây: văn bản, tìm kiếm, url, tel, email và mật khẩu.

Mẹo: Sử dụng toàn cầu tiêu đề thuộc tính để mô tả mô hình để giúp người sử dụng.

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

Thí dụ

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

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

---

Các thuộc tính placeholder

Các thuộc tính giữ chỗ chỉ rõ một gợi ý rằng mô tả các giá trị kỳ vọng của một trường đầu vào (một giá trị mẫu hoặc một mô tả ngắn về định dạng).

Các gợi ý được hiển thị trong các lĩnh vực đầu vào trước khi người dùng nhập vào một giá trị.

Các thuộc tính giữ chỗ làm việc với các loại đầu vào sau đây: văn bản, tìm kiếm, url, tel, email và mật khẩu.

Thí dụ

Một lĩnh vực đầu vào với một văn bản giữ chỗ:

<input type="text" name="fname" placeholder="First name">

---

Các thuộc tính cần thiết

Các thuộc tính cần thiết là một thuộc tính boolean.

Khi hiện tại, nó xác định rằng một lĩnh vực đầu vào phải được điền đầy đủ trước khi nộp mẫu đơn.

Các thuộc tính cần làm việc với các loại sau đây vào: văn bản, tìm kiếm, url, tel, email, mật khẩu, hái ngày, số, checkbox, radio, và tập tin.

Thí dụ

Một lĩnh vực đầu vào cần thiết:

Username: <input type="text" name="usrname" required>

---

Các thuộc tính bước

Các thuộc tính bước xác định các khoảng số pháp lý cho một <input> phần tử.

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

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

Các thuộc tính bước làm việc với các loại đầu vào sau: số lượng, phạm vi, thời gian, ngày giờ, datetime-địa phương, tháng, thời gian và tuần.

Thí dụ

Một lĩnh vực đầu vào với một khoảng thời gian số quy phạm pháp luật quy định:

<input type="number" name="points" step="3">