WebVN Cộng đồng web Việt Nam
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> |
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> |
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> |
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> |
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> |
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 width
- 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> |
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> |
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> |
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> |
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> |
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"> <input type="submit" formenctype="multipart/form-data" value="Gửi với kiểu mã hóa Multipart/form-data"> </form> <p><strong>Lưu ý:</strong> 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.</p> </body> </html> |
Thuộc tính formmethod
Thuộc tính formmethod quy định phương thức gửi dữ liệu từ form tới máy chủ.
Thuộc tính formmethod sẽ ghi đè giá trị của thuộc tính method trong thẻ <form>.
Thuộc tính formmethod được sử dụng với type=”submit” và type=”image”.
Thuộc tính formmethod 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" method="get"> Họ: <input type="text" name="fname"><br> Tên: <input type="text" name="lname"><br> <input type="submit" value="Gửi"> <input type="submit" formmethod="post" formaction="/demo/demo_post.php" value="Gửi với phương thức POST"> </form> <p><strong>Lưu ý:</strong> Thuộc tính formmethod trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.</p> </body> </html> |
Thuộc tính formnovalidate
Khi thêm thuộc tính formnovalidate, dữ liệu trong form sẽ không bị kiểm tra trước khi gửi đi.
Thuộc tính formnovalidate sẽ ghi đè giá trị của thuộc tính novalidate trong thẻ <form>.
Thuộc tính formnovalidate được sử dụng với type=”submit”.
Thuộc tính formnovalidate 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"> E-mail: <input type="email" name="email"><br> <input type="submit" value="Gửi"><br> <input type="submit" formnovalidate value="Gửi - không kiểm tra email"> </form> <p><strong>Lưu ý:</strong> Thuộc tính formnovalidate trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.</p> </body> </html> |
Thuộc tính formtarget
Thuộc tính formtarget quy định cửa sổ trình duyệt sẽ hiển thị phản hồi từ máy chủ khi submit form.
Thuộc tính formtarget sẽ ghi đè giá trị của thuộc tính target trong thẻ <form>.
Thuộc tính formtarget được sử dụng với type=”submit” và type=”image”.
Thuộc tính formtarget 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"> <input type="submit" formtarget="_blank" value="Gửi trên cửa sổ/tab mới"> </form> <p><strong>Lưu ý:</strong> Thuộc tính formtarget trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.</p> </body> </html> |
Thuộc tính height và width
Thuộc tính height và width quy định chiều dài và chiều cao của một thẻ <input>.
Thuộc tính height và width chỉ được sử dụng trong thẻ <input type=”image”>.
|
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"><br> Tên: <input type="text" name="lname"><br> <input type="image" src="/wp-content/uploads/2015/09/img_submit.gif" alt="Submit" width="48" height="48"> </form> <p><b>Lưu ý:</b> Thẻ input type="image" sẽ gửi tọa độ X và Y của chuột trên ảnh khi người dùng nhấn submit.</p> </body> </html> |
Thuộc tính list
Thuộc tính list trỏ tới dữ liệu đã được chuẩn bị sẵn trong thẻ <datalist> để đưa ra một số gợi ý khi người dùng nhập liệu trong thẻ <input>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit" value="Gửi"> </form> <p><b>Lưu ý:</b> Thẻ datalist chưa được hỗ trợ trên Safari và IE9 (gồm cả các phiên bản trước đó).</p> </body> </html> |
Thuộc tính min và max
Thuộc tính min và max quy định giá trị tối thiểu và tối đa mà người dùng có thể nhập vào thẻ <input>.
Thuộc tính min, max được sử dụng trong thẻ input với các type có giá trị: number, range, date, datetime, datetime-local, month, time và week.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Nhập ngày trước 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> Nhập ngày sau 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br> Số lượng (từ 1 tới 5): <input type="number" name="quantity" min="1" max="5"><br> <input type="submit" value="Gửi"> </form> <p><strong>Lưu ý:</strong> Thuộc tính max và min không được hỗ trợ trong các phiên bản từ Internet Explorer 9 trở về trước.</p> <p><strong>Lưu ý:</strong> Internet Explorer 10 có hỗ trợ thẻ input với giá trị type là date và time nhưng không hỗ trợ thuộc tính min, max. IE 10 trở đi không hỗ trợ những thẻ input này.</p> </body> </html> |
Thuộc tính multiple
Thuộc tính multiple được sử dụng để cho phép người dùng chọn một hoăc nhiều giá trị trong thẻ <input>.
Thuộc tính multiple được sử dung trong thẻ input với các type có giá trị: email và file.
Thuộc tính multiple 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"> Chọn tệp tin: <input type="file" name="img" multiple> <input type="submit" value="Gửi"> </form> <p>Bạn có thể chọn nhiều tệp tin cùng lúc.</p> <p><strong>Lưu ý:</strong> Thuộc tính multiple trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.</p> </body> </html> |
Thuộc tính pattern
Thuộc tính pattern được sử dụng để thiết lập điều kiện cho giá trị nhập vào thẻ <input> (sử dụng biểu thức chính quy – regular expression).
Thuộc tính pattern được sử dung trong thẻ input với các type có giá trị: text, search, url, tel, email và password.
Mẹo: Sử dụng thuộc tính title để miêu tả về các điều kiện trong thẻ input, giúp người dùng dễ dàng hơn trong việc nhập liệu.
Mẹo: Bạn có thể tìm hiểu thêm về regular expressions trong các bài về JavaScript.
Thuộc tính pattern trong thẻ input không được hỗ trợ trong các phiên bản Internet Explorer 9 trở về trước và trong Safari.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Nhập mã quốc gia: <input type="text" name="country_code" pattern="[A-Za-z]{2}" title="Mã quốc gia gồm 2 ký tự"> <input type="submit" value="Gửi"> </form> <p><strong>Lưu ý:</strong> Thuộc tính pattern trong thẻ input không được hỗ trợ trong các phiên bản Internet Explorer 9 trở về trước và trong Safari.</p> </body> </html> |
Thuộc tính placeholder
Thuộc tính placeholder được sử dụng để đưa ra những gợi ý cho người dùng trước khi nhập liệu vào thẻ.
Thuộc tính placeholder được sử dung trong thẻ input với các type có giá trị: text, search, url, tel, email và password.
Thuộc tính placeholder 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"> <input type="text" name="fname" placeholder="Họ"><br> <input type="text" name="lname" placeholder="Tên"><br> <input type="submit" value="Gửi"> </form> <p><strong>Note:</strong> Thuộc tính placeholder trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.</p> </body> </html> |
Thuộc tính required
Thuộc tính required được sử dụng để quy định một thẻ bắt buộc phải nhập nội dung trước khi submit form.
Thuộc tính required được sử dung trong thẻ input với các type có giá trị: text, search, url, tel, email, password, date pickers, number, checkbox, radio và file.
Thuộc tính required trong thẻ input không được hỗ trợ trong các phiên bản Internet Explorer 9 trở về trước và trong Safari.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> Tên: <input type="text" name="usrname" required> <input type="submit" value="Gửi"> </form> <p><strong>Note:</strong> Thuộc tính required trong thẻ input không được hỗ trợ trong các phiên bản Internet Explorer 9 trở về trước và trong Safari.</p> </body> </html> |
Thuộc tính step
Thuộc tính step quy định dữ liệu nhập vào phải là bộ số của một số.
Ví dụ: nếu step=”3″, số hợp lệ được nhập vào là -3, 0, 3, 6, …
Mẹo: Thuộc tính step có thể kết hợp với thuộc tính max, min để tạo ra vùng giá trị hợp lệ.
Thuộc tính step được sử dung trong thẻ input với các type có giá trị: number, range, date, datetime, datetime-local, month, time và week.
Thuộc tính step trong thẻ input không được hỗ trợ trong các phiên bản Internet Explorer 9 trở về trước và trong Firefox.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <form action="/demo/action_page.php"> <input type="number" name="points" step="3"> <input type="submit" value="Gửi"> </form> <p><strong>Lưu ý:</strong> Thuộc tính step trong thẻ input không được hỗ trợ trong các phiên bản Internet Explorer 9 trở về trước và trong Firefox.</p> </body> </html> |
