Khóa học HTML - Bài 25 - Các thuộc tính trong FORM - Lớp học Vi Tính - khóa học vi tính văn phòng

Thuộc tính value

Thuộc tính value xác định giá trị ban đầu cho 01 ô nhập liệu.

Ví dụ:

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

Thuộc tính readonly

Thuộc tính readonly xác định rằng 01 ô nhập liệu là chỉ đọc (không sửa được).

Ví dụ:

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

Thuộc tính disabled

Thuộc tính disabled xác định rằng ô nhập liệu bị vô hiệu.

01 ô nhập liệu bị vô hiệu không thể nhập được, không thể bấm vô được, và giá trị của nó sẽ không được gửi đi khi form submit.

Ví dụ:

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

Thuộc tính size

Thuộc tính size xác định KÍCH CỠ ô nhập liệu (tính bằng ký tự) .

Ví dụ:

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

Thuộc tính maxlength

Thuộc tính maxlength xác định độ dài tối đa của ô nhập liệu.

Ví dụ:

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

Thuộc tính maxlength không cung cấp bất kỳ phương thức phản hồi nào. Nếu bạn muốn cảnh báo người dùng bạn phải viết CODE.

Ghi chú: Việc hạn chế dữ liệu nhập vào chỉ là tượng trưng , JavaScript cung cấp rất nhiều cách để nhập dữ liệu không hợp lệ.Để hạn chế tối đa dữ liệu nhập vào không hợp lệ , ta phải kiểm tra lại ở trang nhận dữ liệu (máy chủ)!

Các thuộc tính HTML5

HTML5 bổ sung các thuộc tính sau cho thẻ <input>:

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

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

autocomplete
novalidate

Thuộc tính autocomplete

Thuộc tính autocomplete xác định ô nhập liệu có tính năng tự động hoàn thành khi người dùng gõ chữ.

Mẹo: Hoàn toàn có thể bật tính năng autocomplete "on" trên form, và "off" cho 01 ô nhập liệu nào đó, hoặc ngược lại.

Thuộc tính autocomplete hoạt động tốt với thẻ <form> và các kiểu <input> sau: text, search, url, tel, email, password, datepickers, range, và color.

Ví dụ:

01 HTML form với tính năng autocomplete on (và off cho 01 ô nhập mail):

<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: Ở 01 vài trình duyệt bạn có thể cần phải kích hoạt thì tính năng autocomplete mới hoạt động.

Thuộc tính novalidate

Thuộc tính novalidate là 01 thuộc tính của thẻ <form>.

Thuộc tính novalidate xác định rằng dữ liệu form sẽ không được kiểm tra tính hợp lệ khi submit.

Ví dụ:

Thuộc tính autofocus

Thuộc tính autofocus xác định rằng ô nhập liệu sẽ tự động có dấu nháy khi tải trang web.

Ví dụ:

Thiết lập ô "First name" sẽ tự động có dấu nháy khi tải trang web:

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

Thuộc tính form

Thuộc tính form xác định 01 hoặc nhiều form tham khảo tới thẻ <input>.

Mẹo: Để tham khảo tới nhiều form dùng ký tự khoảng trắng để ngăn cách các id của forms.

Ví dụ:

01 ô nhập liệu ở ngoài HTML form (nhưng vẫn được xem là thành phần của form có id=form1):

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

Thuộc tính formaction

Thuộc tính formaction xác định đường dẫn URL của tập tin sẽ thực thi các điều khiển input khi form được gửi đi.

Thuộc tính formaction sẽ thực thi chồng (override) lên thuộc tính action của thẻ <form>.

Thuộc tính formaction thường được dùng với kiểu submit và kiểu image.

Ví dụ:

01 form HTML với 02 nút submit , 02 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>

Thuộc tính formenctype

Thuộc tính formenctype xác định cách dữ liệu form sẽ được mã hóa (encoded) khi gửi đi (chỉ đối với form khai báo phương thức là post).

Thuộc tính formenctype thực thi chồng lên thuộc tính enctype của thẻ <form>.

Thuộc tính formenctype thường được dùng với kiểu submit và kiểu image.

Ví dụ:

Gửi dữ liệu form-data mặc định được mã hóa (nút submit thứ 1), và mã hóa kiểu "multipart/form-data" (nút submit thứ 2):

<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="multipleart/form-data" value="Submit as Multipart/form-data"> </form>

Thuộc tính formmethod

Thuộc tính formmethod xác định phương thức HTTP để gửi dữ liệu form-data đến trang khai báo trong thuộc tính action.

Thuộc tính formmethod thực thi chồng lên (overrides) thuộc tính của thẻ <form>.

Thuộc tính formmethod có thể được sử dụng với kiểu submit và kiểu image.

Ví dụ:

Nút submit thứ 02 thực thi chồng lên phương thức method của form:

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

Thuộc tính formnovalidate

Thuộc tính formnovalidate thực thi chồng lên thuộc tính novalidate của thẻ <form>.

Thuộc tính formnovalidate có thể được dùng với kiểu submit.

Ví dụ:

01 form với 02 nút submit (có và không có kiểm tra hợp lệ):

Thuộc tính formtarget

Thuộc tính formtarget xác định 01 tên hoặc 01 từ khóa mà chỉ ra nơi sẽ chứa kết quả trả về sau khi submit form.

Thuộc tính formtarget thực thi chồng lên thuộc tính target của thẻ <form>.

Thuộc tính formtarget có thể dùng với kiểu submit và kiểu image.

Ví dụ:

01 form với 02 nút submit có cửa sổ hiển thị 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>

Thuộc tính height và width

Thuộc tính height và width xác định chiều cao và bề rộng của 01 thẻ <input type="image">.

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

Ví dụ:

Xác định 01 tấm hình như là nút submit , với thuộc tính height và width:

Thuộc tính list

Thuộc tính list liên kết đến 01 phần tử <datalist> chứa các tùy chọn định trước cho thẻ <input>.

Ví dụ:

01 thẻ <input> với những giá trị định trước trong 01 <datalist>:

Thuộc tính min và max

Thuộc tính min và max xác định giá trị nhỏ nhất và lớn nhất của 01 thẻ <input>.

Thuộc tính min và max có trong các loại nhập liệu sau: number, range, date, datetime-local, month, time và week.

Ví dụ:

Thẻ <input> với giá trị min và max:

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

Thuộc tính multiple

Thuộc tính multiple xác định rằng người dùng được cho phép nhập nhiều hơn 01 giá trị trong thẻ <input>.

Thuộc tính multiple có trong các loại nhập liệu sau: email và file.

Ví dụ:

01 ô cho phép up cùng lúc nhiều tập tin:

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

Thuộc tính pattern

Thuộc tính pattern xác định 01 biểu thức mà giá trị của thẻ <input> được kiểm lần nữa.

Thuộc tính pattern có trong các kiểu nhập liệu sau: text, search, url, tel, email, và password.

Mẹo: Sử dụng thuộc tính global title để mô tả pattern trợ giúp cho người dùng.

Mẹo: Học thêm về regular expressions trong loạt bài JavaScript.

Ví dụ:

01 ô nhập liệu chỉ chứa 03 ký tự( không cho phép nhập 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">

Thuộc tính placeholder

Thuộc tính placeholder xác định 01 vùng nhập trước dữ liệu mong muốn( 01 giá trị mẫu hoặc mô tả ngắn về định dạng chẳng hạn).

Vùng này hiển thị trước khi người dùng nhập giá trị.

Thuộc tính placeholder có trong các kiểu nhập liệu sau: text, search, url, tel, email, và password.

Ví dụ:

01 ô nhập liệu với dòng chữ nhập trước:

Thuộc tính required

Thuộc tính required xác định rằng 01 ô nhập liệu là bắt buộc hay không.

Thuộc tính required có trong các kiểu nhập liệu sau: text, search, url, tel, email, password, date pickers, number, checkbox, radio, và file.

Ví dụ:

01 vùng nhập liệu bắt buộc :

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

Thuộc tính step

Thuộc tính step xác định số bước nhảy cho 01 ô nhập liệu

Ví dụ: nếu step="3", các con số hợp lệ phải là -3, 0, 3, 6, v.v.

Mẹo: Thuộc tính step có thể sử dụng chung với max và min tạo ra 01 dãy các giá trị hợp lệ.

Thuộc tính step có trong các kiểu nhập liệu sau: number, range, date, datetime-local, month, time và week.

Ví dụ:

01 ô nhập liệu với bước nhảy các con số định trước:

Tác giả: #drM

Nguồn: Sưu Tầm

NTM Solutions

Lớp học Vi Tính

Thứ Hai, 5 tháng 12, 2016