Thuộc tính trong thẻ Input
Thuộc tính value Thuộc tính value được sử dụng để thiết lập giá trị cho thẻ input: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 < ! DOCTYPE html > < html > < body > < form action ...
Thuộc tính value
Thuộc tính value được sử dụng để thiết lập giá trị cho thẻ input:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action=""> Họ:<br> <input type="text" name="firstname" value="Nguyen"> <br> Tên:<br> <input type="text" name="lastname"> </form> </body> </html> |
Demo
Thuộc tính readonly
Thuộc tính readonly quy định giá trị trong thẻ input chỉ được dùng để hiển thị (không thể thay đổi):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action=""> Họ:<br> <input type="text" name="firstname" value ="Nguyen" readonly> <br> Tên:<br> <input type="text" name="lastname"> </form> </body> </html> |
Demo
Thuộc tính readonly không cần giá trị. Bạn cũng có thể viết readonly=”readonly”, hai cách đều như nhau.
Thuộc tính disabled
Thuộc tính disabled được sử dụng để vô hiệu hóa một thẻ input.
Khi thuộc tính này được thiết lập, bạn không thể nhấn hay sử dụng thẻ.
Những thông tin trong thẻ có thuộc tính disabled sẽ không được gửi đi khi submit.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action=""> Họ:<br> <input type="text" name="firstname" value ="Nguyen" disabled> <br> Tên:<br> <input type="text" name="lastname"> </form> </body> </html> |
Demo
Thuộc tính disabled không cần giá trị. Bạn cũng có thể viết disabled=”disabled”, hai cách đều như nhau.
Thuộc tính size
Thuộc tính size được sử dụng để thiết lập chiều dài (đơn vị là ký tự) của một thẻ input:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action=""> Họ:<br> <input type="text" name="firstname" value ="Nguyen" size="40"> <br> Tên:<br> <input type="text" name="lastname"> </form> </body> </html> |
Demo
Thuộc tính maxlength
Thuộc tính maxlength được sử dụng để thiết lập số ký tự tối đa cho một thẻ input:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action=""> Họ:<br> <input type="text" name="firstname" maxlength="10"> <br> Tên:<br> <input type="text" name="lastname"> </form> </body> </html> |
Demo
Khi thiết lập thuộc tính maxlength, thẻ input sẽ bỏ qua các ký tự vượt quá số được thiết lập.
Thuộc tính maxlength không cung cấp thêm bất kỳ thiết lập nào khác. Nếu bạn muốn cảnh báo người dùng đã sử dụng hết số ký tự cho phép, bạn phải sử dụng JavaScript.
Để việc nhận thông tin từ người dùng được an toàn, bạn phải kiểm tra lại một lần nữa trên máy chủ (bằng php, asp…).
Thuộc tính trong HTML5
HTML5 thêm một số thuộc tính cho thẻ <input>:
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and awidth
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
và một số thuộc tính mới cho thẻ <form>:
- autocomplete
- novalidate
Thuộc tính autocomplete
Thuộc tính autocomplete quy định một form hoặc một thẻ input trong form có được sử dụng chức năng tự động điền, gợi ý thông tin hay không.
Khi thuộc tính autocomplete có giá trị “on”, trình duyệt sẽ tự động gợi ý những giá trị dựa trên thông tin người dùng nhập vào.
Mẹo: Bạn có thể thiết lập giá autocomplete là “on” cho thẻ form và “off” cho một vài thẻ input hoặc ngược lại.
Thuộc tính autocomplete có thể sử dụng trong thẻ <form> và thẻ <input> với các kiểu: text, search, url, tel, email, password, datepickers, range và color.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php" autocomplete="on"> Họ:<input type="text" name="fname"><br> Tên: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit" value="Gửi"> </form> <p>Điền thông tin vào form và nhấn "Gửi", sau đó mở lại trang và thử nháy kép (hoặc điền một vài ký tự) vào ô nhập liệu để thấy thuộc tính autocomplete hoạt động như thế nào.</p> <p>Lưu ý rằng thuộc tính autocomplete có giá trị "on" với form nhưng lại "off" ở phần e-mail.</p> </body> </html> |
Demo
Thuộc tính novalidate
novalidate là một thuộc tính của thẻ <form>.
Khi thêm thuộc tính novalidate, dữ liệu trong form sẽ không bị kiểm tra trước khi gửi đi.
Thuộc tính novalidate không được hỗ trợ trên trình duyệt Internet Explorer 9 (cùng với các phiên bản trước) và Safari.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit" value="Gửi"> </form> <p><strong>Lưu ý:</strong> Thuộc tính novalidate không được hỗ trợ trên trình duyệt Internet Explorer 9 (cùng với các phiên bản trước) và Safari.</p> </body> </html> |
Demo
Thuộc tính autofocus
Khi thuộc tính autofocus được thiết lập, trình duyệt sẽ tự động chuyển con trỏ tới thẻ <input> chứa thuộc tính.
Thuộc tính autofocus trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Họ:<input type="text" name="fname" autofocus><br> Tên: <input type="text" name="lname"><br> <input type="submit" value="Gửi"> </form> <p><strong>Lưu ý:</strong> Thuộc tính autofocus trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.</p> </body> </html> |
Demo
Thuộc tính form
Thuộc tính form cho phép một thẻ input thuộc về một hoặc nhiều form khác nhau.
Mẹo: Để một thẻ input thuộc nhiều form, sử dụng dấu cách trong danh sách các id của form.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php" id="form1"> Họ: <input type="text" name="fname"><br> <input type="submit" value="Gửi"> </form> <p>Ô "Tên" mặc dù nằm ở ngoài form nhưng vẫn là một phần của form.</p> Tên: <input type="text" name="lname" form="form1"> </body> </html> |
Demo
Thuộc tính formaction
Thuộc tính formaction quy định địa chỉ trang sẽ xử lý dữ liệu khi submit form.
Thuộc tính formaction sẽ ghi đè giá trị của thuộc tính action trong thẻ <form>.
Thuộc tính formaction được sử dụng với type=”submit” và type=”image”.
Thuộc tính formaction trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Họ: <input type="text" name="fname"><br> Tên: <input type="text" name="lname"><br> <input type="submit" value="Gửi"><br> <input type="submit" formaction="/demo/demo_admin.php" value="Gửi tới trang admin"> </form> <p><strong>Lưu ý:</strong> Thuộc tính formaction trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.</p> </body> </html> |
Demo
Thuộc tính formenctype
Thuộc tính formenctype quy định cách dữ liệu trong form sẽ được mã hóa khi gửi thông tin lên máy chủ (chỉ dành cho form có thuộc tính method=”post”).
Thuộc tính formenctype sẽ ghi đè giá trị của thuộc tính enctype trong thẻ <form>.
Thuộc tính formenctype được sử dụng với type=”submit” và type=”image”.
Thuộc tính formenctype trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <form action="/demo/demo_post_enctype.php" method="post"> Tên: <input type="text" name="fname"><br> <input type="submit" value="Gửi">
0
|
