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ụ:
<form action="action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
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>
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.
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ệ):
<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>
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:
<input type="image" src="xinh.jpg" alt="Submit" width="48" height="48">
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>:
<input list="browsers">
<datalist id="browsers">
<option value="Internet
Explorer"> <option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</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">
<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ụ:
Ví dụ:
Ví dụ:
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.
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:
<input type="text" name="fname" placeholder="First
name">
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.
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.
01
ô nhập liệu với bước nhảy các con số định trước:
<input type="number" name="points" step="3">
Tác giả: #drM
Nguồn: Sưu Tầm
