Tổng hợp về INPUT trong HTML

INPUT ^HTML_1-2-3-4-5

---

INPUT là thẻ tương đối nhiều thuộc tính trong HTML, nên tôi sẽ trình bày thành một trang riêng về INPUT để mọi ngượi tiện theo dõi và nắm bắt hết các chức năng của nó.
Tại đây, những đặc tính mới của INPUT sẽ luôn được cập nhật từ W3C.

Attribute		Value	Description
accept	? ○ Thuộc tính chấp nhận được hỗ trợ trong Internet Explorer 10, Firefox, Opera, Chrome, và Safari 6. ○ Lưu ý: chấp nhận thuộc tính của thẻ <input> không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước đó. ○ Thuộc tính accept quy định cụ thể các loại tập tin mà máy chủ chấp nhận (có thể được gửi thông qua một tập tin tải lên). ○ Lưu ý: thuộc tính accept chỉ có thể được sử dụng với <input type="file">. ○ Mẹo: Không sử dụng thuộc tính này như một công cụ xác nhận. Tải lên tập tin cần được xác nhận trên máy chủ. ○ Cú pháp <input accept="audio/*|video/*|image/*|MIME_type"> (MIME_type: là danh sách các loại file được quy định tại http://www.iana.org/assignments/media-types/) ○ Mẹo: Để chỉ định nhiều hơn một giá trị, các giá trị riêng biệt bằng dấu phẩy (ví dụ như <input accept="audio/*,video/*,image/*" />. Xem ví dụ <form action="#"> <input type="file" name="pic" accept="image/*"> <input type="submit"> </form> Xem Kết quả	audio/* video/* image/* MIME_type	Chỉ định các loại tập tin mà máy chủ chấp nhận (chỉ dành cho type = "file")
align	? Hẫy Dùng CSS để viết thay vì thiết đặt hình thức trực tiếp vào một đối tượng	left right top middle bottom	Không được hỗ trợ trong HTML5. Phản đối trong HTML 4.01.
alt	? ○ Thuộc tính alt được hỗ trợ trong tất cả các trình duyệt chính. ○ Thuộc tính alt cung cấp một văn bản thay thế cho người sử dụng, nếu người dùng vì một lý do nào đó không thể xem hình ảnh (vì kết nối chậm, src sai, ...). ○ Lưu ý: Các thuộc tính alt chỉ có thể được sử dụng với <input type="image" ... >. ○ Cú pháp <input alt="text" ... > Xem ví dụ <form action="#"> <input type="image" src="anh_nen.gif" alt="đây là ảnh nền cho Submit" width="200" height="50"> </form> Xem Kết quả - Nếu ảnh nền không hiển thị thì chữ trong alt mới hiển thị - Nếu dòng chữ trong alt dài hơn width thì chữ sẽ không hiển thị!	text	Chỉ định một văn bản thay thế cho hình ảnh
autocomplete	? ○ Thuộc tính autocomplete được hỗ trợ trong tất cả các trình duyệt chính. ○ Mẹo: Trong một số trình duyệt, bạn có thể cần phải kích hoạt một chức năng tự động hoàn chỉnh này. ○ Thuộc tính autocomplete xác định có hay không một trường đầu vào phải có được kích hoạt tự động hoàn chỉnh. ○ Autocomplete cho phép trình duyệt để dự đoán giá trị. Khi người dùng bắt đầu gõ vào một lĩnh vực, trình duyệt sẽ hiển thị các tùy chọn để điền vào trường, dựa trên các giá trị đã nhập trước đó. ○ Lưu ý: Các thuộc tính tự động hoàn chỉnh hoạt động với các loại <input> sau: text, search, url, tel, email, password, datepickers, range, and color. ○ Mặc định autocomplete="on". Xem ví dụ <form action="#" autocomplete="on"> E-mail: <input type="email" name="email" autocomplete="on"><br> <input type="submit"> </form> Xem Kết quả E-mail: Nếu bạn gõ chữ a nó sẽ hiển thị ra vài địa chỉ email có chữ a đầu tiên đã từng nhập, để bạn sẵn chọn, khỏi mất công viết lại.	on | off	Xác định xem một yếu tố <input> nên kích hoạt tự động hoàn chỉnh
autofocus	? ○ Thuộc tính tự động lấy nét được hỗ trợ trong Internet Explorer 10, Firefox, Opera, Chrome, Safari và không được hỗ trợ trong Internet Explorer 9 và các phiên bản IE trước đó. ○ Con trỏ chuột sẵn sàng để bạn nhập khi vừa tải trang. ○ Cú pháp <input autofocus> Xem ví dụ <form action="#"> First name:<input type="text" name="fname" autofocus><br> Last name: <input type="text" name="lname"><br> <input type="submit"> </form> Xem Kết quả First name: Last name: Con trỏ chuột đã nhấp nháy khi vừa tải xong trang, để bạn sẳn sàng gõ phím rồi!	autofocus	Chỉ định rằng một yếu tố <input> tự động sẽ nhận được tập trung khi tải trang
checked	? ○ Thuộc tính kiểm tra được hỗ trợ trong tất cả các trình duyệt chính. ○ Thuộc tính kiểm tra có thể được sử dụng với <input type="checkbox"> và <input type="radio"> khi tải trang.. ○ Thuộc tính kiểm tra cũng có thể được thiết lập sau khi tải trang, với JavaScript. Xem ví dụ <form action="#">Bạn đang dùng mạng <br/> <input type="checkbox" name="mang" value="Dây đồng">Dây đồng<br> <input type="checkbox" name="mang" value="Cáp quang">Cáp quang<br> <input type="checkbox" name="mang" value="3g" checked>3G kiểu Việt Nam<br> <input type="submit" value="Submit"> </form> Xem Kết quả Bạn đang dùng mạng Dây đồng Cáp quang 3G kiểu Việt Nam	checked	Chỉ định rằng một yếu tố <input> nên được chọn sẵn, khi tải trang
disabled	? ◊ Thuộc tính vô hiệu hóa được hỗ trợ trong tất cả các trình duyệt chính. ◊ Một yếu tố đầu vào sẽ không sử dụng được và chưa có thể click. ◊ Lưu ý: Các thuộc tính khóa sẽ không làm việc với <input type="hidden">. ◊ Cú pháp <input disabled> Xem ví dụ <form action="#"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname" disabled><br> <input type="submit" value="Submit"> </form> Xem Kết quả First name: Last name:	disabled	Chỉ định rằng một yếu tố <input> bị vô hiệu hóa
form	? ◊ Thuộc tính hình thức được hỗ trợ trong tất cả các trình duyệt chính, ngoại trừ Internet Explorer. ◊ Vì lý do nào đó mà các <input> phải đặt gián đoạn, Thuộc tính này sẽ nhóm các <input> cùng chung 1 định danh form ◊ Cú pháp <input form="form_id"> Xem ví dụ <form action="#" id="aaaaa"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="aaaaa"> Xem Kết quả First name: Last name:	form_id	định danh cho 1 input
formaction	? ● Thuộc tính formaction được hỗ trợ trong Internet Explorer 10, Firefox, Opera, Chrome, và Safari. ● Thuộc tính formaction xác định URL của tập tin đó sẽ xử lý kiểm soát đầu vào khi biểu mẫu được gửi. ● Thuộc tính formaction ghi đè lên action mặc định của phần tử <form>. ● Lưu ý: Các thuộc tính formaction được sử dụng với các type="submit" và type="image". ● Thuộc tính formaction mới trong HTML5. ● Cú pháp <input formaction="URL"> (đường dẫn tương đối hoặc truyệt đối) Xem ví dụ <form action="aaa.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit aaa"> <input type="submit" formaction="bbb.php" value="Submit bbb"> </form>. Xem Kết quả First name: Last name:	url	Chỉ định các URL riêng cho mỗi submit khi biểu mẫu được gửi (for type="submit" and type="image")
formenctype	? ¤ Thuộc tính formenctype được hỗ trợ trong Internet Explorer 10, Firefox, Opera, Chrome, và Safari. Lưu ý: Các thuộc tính formenctype của thẻ <input> được không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước đó. ¤ Thuộc tính formenctype xác định kiểu mã hóa dữ liệu trước khi gửi nó đến máy chủ (chỉ dành cho method="post") ¤ Lưu ý: Các thuộc tính formenctype được sử dụng với các type = "submit" và type ="image". ¤ Thuộc tính formenctype mới có trong HTML5. ¤ Cú pháp <input formenctype="value"> application/x-www-form-urlencoded Mặc định. Tất cả các ký tự được mã hóa trước khi gửi đi Space chuyển đổi sang dấu "+", ký tự đặc biệt được chuyển đổi sang giá trị HEX ASCII multipart/form-data Không có ký tự được mã hóa text/plain Spaces được chuyển đổi thành "+" biểu tượng, nhưng không có các ký tự đặc biệt được mã hóa (Space là khoảng trống) Xem ví dụ <form action="#" 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> Xem Kết quả First name:	application/x-www-form-urlencoded multipart/form-data text/plain	Xác định các hình thức dữ liệu được mã hóa khi gửi nó đến máy chủ (for type="submit" and type="image")
formmethod	? ☺ Thuộc tính formmethod được hỗ trợ trong Internet Explorer 10, Firefox, Opera, Chrome, và Safari. Lưu ý: Các thuộc tính formmethod của thẻ <input> được không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước đó. ☺ Thuộc tính formmethod định nghĩa phương thức HTTP cho việc gửi dữ liệu dạng URL ☺ Thuộc tính formmethod ghi đè các phương pháp thuộc tính method của <form>. ☺ Lưu ý: Các thuộc tính formmethod có thể được sử dụng với type = "submit" và type ="image". ☺ Về phương pháp "get/pot" để hiểu sâu hơn thì bạn cần học phần lập trình web động. ☺ Thuộc tính formmethod mới có trong HTML5. ☺ Cú pháp <input formmethod="get|post"> GET (nhận). Mặc định. Không nên sử dụng "get" để nhận các thông tin nhạy cảm! (Mật khẩu hoặc các thông tin nhạy cảm khác sẽ được hiển thị trong thanh địa chỉ của trình duyệt) POT (gửi). Phương pháp "post" là mạnh mẽ hơn và an toàn hơn "get", và "post" không có giới hạn kích thước Xem ví dụ <form action="#form.php" method="get"> a: <input type="text" name="a"><br> b: <input type="text" name="b"><br> <input type="submit" value="Submit GET"> <input type="submit" formmethod="post" formaction="#post.php" value="Submit POST"> </form> Xem Kết quả a: b:	get | post	Định nghĩa phương thức HTTP để gửi dữ liệu đến URL hành động
formnovalidate	? ☻ Thuộc tính formnovalidate được hỗ trợ trong Internet Explorer 10, Firefox, Opera, và Chrome. Không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước đó, hoặc trong Safari. ☻ Thuộc tính novalidate là một thuộc tính boolean (Chỉ 2 giá trị: "đúng" hoặc "sai"). ☻ Thuộc tính formnovalidate ghi đè novalidate thuộc tính của phần tử <form>. ☻ Lưu ý: Các thuộc tính formnovalidate có thể được sử dụng với type = "submit". ☻ Thuộc tính formnovalidate mới có trong HTML5. ☻ Cú pháp <input formnovalidate="formnovalidate"> ☻ Lưu ý: Các thuộc tính formnovalidate là một thuộc tính boolean, và có thể được thiết lập trong các cách sau: → <input formnovalidate> → <input formnovalidate="formnovalidate"> → <input formnovalidate=""> <form action="#"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Submit"> <input type="submit" formnovalidate="formnovalidate" value="Submit formnovalidate"> </form>	formnovalidate	Xác định các yếu tố hình thức không nên được xác nhận khi gửi
formtarget	? ☺ Thuộc tính formtarget được hỗ trợ trong Internet Explorer 10, Firefox, Opera, Chrome, và Safari. Không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước đó. ☺ Thuộc tính formtarget quy định cụ thể một nơi để hiển thị các phản hồi nhận được sau khi nhấn submit. ☺ Thuộc tính formtarget ghi đè lên thuộc tính target của phần tử <form>. ☺ Lưu ý: Các thuộc tính formtarget có thể được sử dụng với type = "submit" type = "image". ☺ Thuộc tính formtarget mới có trong HTML5. ☺ Lưu ý: Frames và framesets không được hỗ trợ trong HTML5. _top, _parent Và framename giá trị hiện nay chủ yếu được sử dụng với iframes. ☺ Cú pháp <input formtarget="_blank | _self | _parent | _top | framename"> ► Xem bảng chú thích các giá trị (di chuột vào đây!) Value Description _blank hiển thị trong một cửa sổ mới hoặc tab _self hiển thị trong cùng một khung (này là mặc định) _parent hiển thị trong khung mẹ _top hiển thị trong toàn bộ cơ thể của cửa sổ framename hiển thị trong một khung nội tuyến có tên framename Xem ví dụ <form action="#"> 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> Xem Kết quả First name: Last name:	_blank _self _parent _top framename	Xác định nơi để hiển thị các phản hồi nhận được sau khi nộp mẫu đơn
height	? ◘ Thuộc tính chiều cao được hỗ trợ trong tất cả các trình duyệt chính. ◘ Thuộc tính xác định chiều cao của phần tử <input>. ◘ Lưu ý: Các thuộc tính chiều cao chỉ được sử dụng với <input type="image">. ◘ Mẹo: Luôn luôn ghi rõ cả chiều cao và các thuộc tính chiều rộng cho hình ảnh. Nếu chiều cao và chiều rộng được thiết lập, không gian cần thiết cho hình ảnh được dành riêng khi trang web được tải. Tuy nhiên, không có những thuộc tính này, trình duyệt không biết kích thước của hình ảnh, và không thể dành ra không gian phù hợp với nó. Hiệu quả sẽ được bố trí trang sẽ thay đổi trong thời gian tải (trong khi tải hình ảnh). ◘ Thuộc tính chiều cao mới cho thẻ <input> trong HTML5. ◘ Cú pháp <input height="pixels"> Xem ví dụ <form action="http://www.google.com/search" method="get" target="_blank"> Tìm kiếm: <input type="text" value="" name="q"/> <input type="image" src="hinh_anh.png" alt="Submit" width="24" height="24"> </form> Xem Kết quả Tìm kiếm:	pixels	Chỉ định chiều cao của một yếu tố <input> (only for type="image")
list	? ♠ Thuộc tính list được hỗ trợ trong Internet Explorer 10, Firefox, Opera, và Chrome. Không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước đó, hoặc trong Safari. ♠ Thuộc tính list đề cập đến một yếu tố <datalist> có chứa tùy chọn được xác định trước cho một thành phần <input>. ♠ Thuộc tính list mới có trong HTML5. ♠ Cú pháp <input list="datalist_id"> Xem ví dụ <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Google Chrome"> <option value="Opera"> <option value="Safari"> </datalist> Xem Kết quả	datalist_id	Đề cập đến một yếu tố <datalist> có chứa được xác định trước tùy chọn cho một thành phần <input>
max	? ◙ Các thuộc tính max được hỗ trợ trong Internet Explorer 10, Opera, Chrome, và Safari.Không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước đó, hoặc trong Firefox. ◙ Lưu ý: Các thuộc tính max sẽ không làm việc cho những ngày và thời gian trong Internet Explorer 10, kể từ khi IE 10 không hỗ trợ các loại đầu vào. ◙ Các thuộc tính max quy định cụ thể giá trị tối đa cho một thành phần <input>. ◙ Mẹo: Sử dụng các thuộc tính max cùng với min thuộc tính để tạo ra một loạt các giá trị pháp lý. ◙ Lưu ý: thuộc tính max và min làm việc với các loại đầu vào sau: số lượng, phạm vi, ngày, datetime, datetime địa phương, tháng, thời gian và tuần. ◙ Các thuộc tính max là mới trong HTML5. ◙ Cú pháp <input max="number | date"> ► Xem bảng chú thích các giá trị (di chuột vào đây!) Value Description number Chỉ định giá trị tối đa cho phép date Chỉ định ngày tối đa cho phép Xem ví dụ <form action="#"> Trước 2010-10-10:<br/> <input type="date" name="a" max="2010-10-10"> <br/> Sau 2012-12-12:<br/> <input type="date" name="b" min="2012-12-12"><br/> Trong khoảng từ 2010-10-10 đến 2012-12-12:<br/> <input type="date" name="c" min="2010-10-10" max="2012-12-12"><br/> Bạn có bao nhiêu con (1 .. 2): <input type="number" name="quantity" min="1" max="2"><br/> <input type="submit"> </form> Xem Kết quả Trước 2010-10-10: Sau 2012-12-12: Trong khoảng từ 2010-10-10 đến 2012-12-12: Bạn có bao nhiêu con (1 .. 2):	number | date	Chỉ định giá trị tối đa cho một thành phần <input>
maxlength	? ○ Thuộc tính maxlength được hỗ trợ trong tất cả các trình duyệt chính. ○ Các thuộc tính maxlength xác định số lượng tối đa ký tự cho phép trong các yếu tố <input>. ○ Cú pháp <input maxlength="number"> ► Xem bảng chú thích các giá trị (di chuột vào đây!) Value Description number Chỉ định giá trị tối đa cho phép Xem ví dụ <form action="#"> Bạn gõ được tối đa 10 ký tự: <input type="text" name="usrname" maxlength="10"> </form> Xem Kết quả Bạn gõ được tối đa 10 ký tự:	number	Chỉ định số lượng tối đa ký tự cho phép trong một yếu tố <input>
min	? Sử dụng tương tự Max nhưng mục đích ngược lại. Xem lại thuộc tính Max đã trình bày ở trên!	number | date	Chỉ định một giá trị tối thiểu cho một thành phần <input>
multiple	? ♣ multiple được hỗ trợ trong Internet Explorer 10, Firefox, Opera, Chrome, và Safari. Không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước đó. ♣ Thuộc tính nhiều là một thuộc tính boolean. ♣ Khi hiện nay, 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 các yếu tố <input>. ♣ Lưu ý: Các thuộc tính nhiều hoạt động với các loại đầu vào sau: email, và các tập tin. ♣ Thuộc tính multiple mới có trong HTML5. ♣ Trong XHTML, phải được viết <input multiple="multiple" />. ♣ Cú pháp HTML <input multiple> Xem ví dụ <form action="#"> Bạn có thể chọn được nhiều file cùng lúc: <br/> <input type="file" name="img" multiple> <input type="submit"> </form> Xem Kết quả Bạn có thể chọn được nhiều file cùng lúc:	multiple	Chỉ định người dùng có thể nhập nhiều giá trị trong một đối tượng <input>
name	? Tên của một input, nó là biến để xử lý tính toán sau khi dữ liệu được gửi đi. Input nào cũng phải có name="..."	text	Chỉ định tên của một phần tử <input>
pattern	? ♥ Các thuộc tính pattern được hỗ trợ trong Internet Explorer 10, Firefox, Opera, và Chrome. Không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước đó, hoặc trong Safari. ♥ Các thuộc tính pattern xác định kiểm tra giá trị đầu vào cho <input>. ♥ Lưu ý: Các thuộc tính pattern hoạt động với các loại đầu vào sau đây: văn bản, tìm kiếm, url, điện thoại, email, và mật khẩu. ♥ Mẹo: có thể sử dụng thêm JavaScript để hoàn thiện và đa chức năng hơn ♥ Thuộc tính pattern mới trong HTML5. ♥ Cú pháp <input pattern="regexp"> Xem ví dụ <form action="#"> Chỉ nhận 3 chữ cái trong khoảng từ A..Z và từ a..z <br/> <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Chỉ nhận đủ 3 chữ, không nhận ký tự đặc biệt khác"> <input type="submit"> </form> Xem Kết quả Chỉ nhận 3 chữ cái trong khoảng từ A..Z và từ a..z	regexp	Chỉ định giá trị nhập vào sẽ được kiểm tra đối với một giá trị phần tử <input>
placeholder	? ■ Thuộc tính placeholder được hỗ trợ trong Internet Explorer 10, Firefox, Opera, Chrome, và Safari.Không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước đó. ■ Thuộc tính placeholder quy định cụ thể một gợi ý ngắn mô tả các giá trị kỳ vọng của một trường đầu vào (ví dụ như một giá trị mẫu hoặc mô tả ngắn về các định dạng mong đợi). ■ Những gợi ý ngắn sẽ hiển thị trong ô đầu vào trước khi người dùng nhập vào một giá trị. ■ Lưu ý: Các thuộc tính placeholder làm việc với các loại đầu vào sau đây: text, search, url, tel, email, and password. ■ Thuộc tính placeholder mới trong HTML5. ■ Cú pháp <input placeholder="text"> ► Xem bảng chú thích thuộc tính (di chuột vào đây!) Giá trị Mô tả text Chỉ định một gợi ý ngắn mô tả giá trị đầu vào Xem ví dụ <form action="#"> <input type="text" name="uname" placeholder="Tên đăng nhập"><br> <input type="password" name="pass" placeholder="Mật khẩu"><br> <input type="submit" value="Submit"> </form> Xem Kết quả	text	Chỉ định một gợi ý ngắn mô tả giá trị kỳ vọng của một phần tử <input>
readonly	? ♦ Các thuộc tính chỉ đọc được hỗ trợ trong tất cả các trình duyệt chính. ♦ Các thuộc tính chỉ đọc là một thuộc tính boolean. ♦ Khi hiện nay, nó xác định rằng một lĩnh vực đầu vào là chỉ đọc. ♦ Một lĩnh vực đầu vào chỉ đọc không thể được sửa đổi (tuy nhiên, người dùng có thể tab vào nó, làm nổi bật nó, và sao chép văn bản từ nó). ♦ Các thuộc tính chỉ đọc có thể được thiết lập để giữ một người sử dụng thay đổi giá trị cho đến khi đã được đáp ứng một số điều kiện khác (như chọn một ô trống, vv). Sau đó, một JavaScript có thể loại bỏ các giá trị chỉ đọc, và làm cho các lĩnh vực đầu vào có thể chỉnh sửa. ♦ Trong XHTML, <input readonly="readonly" />. ♦ Cú pháp HTML <input readonly> Xem ví dụ <form action="#"> <input type="text" name="country" value="chỉ đọc, bạn không viết trực tiếp được gì lên đây!" size="50" readonly> <input type="submit"> </form> Xem Kết quả	readonly	Chỉ định rằng một trường đầu vào là chỉ đọc
required	? □ Thẻ <required> được hỗ trợ trong Internet Explorer 10, Firefox, Opera, và Chrome. Không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước đó, hoặc trong Safari. □ Thuộc tính bắt buộc là một thuộc tính boolean. □ Quy định giá trị phải được điền trước khi gửi đi. □ Lưu ý: Các thuộc tính required làm việc với các loại: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file. □ Thuộc tính required mới trong HTML5. □ Trong XHTML <input required="required" />. □ Cú pháp HTML <input required> Xem ví dụ <form action="#"> Nếu bạn không nhập gì vào đây thì nhấn submit không có tác dụng <br/> <input type="text" name="usrname" required> <input type="submit"> </form> Xem Kết quả Nếu bạn không nhập gì vào đây thì nhấn submit không có tác dụng	required	Chỉ định rằng một trường đầu vào phải được điền trước khi submit
size	? ○ Các thuộc tính kích thước được hỗ trợ trong tất cả các trình duyệt chính. ○ Các thuộc tính size chỉ định chiều rộng có thể nhìn thấy của một phần tử <input>. ○ Lưu ý: Các thuộc tính kích thước làm việc với các loại đầu vào sau đây: text, search, tel, url, email, and password. ○ Mẹo: Để xác định số lượng tối đa ký tự cho phép trong các yếu tố <input>, sử dụng thuộc tính maxlength . ○ Cú pháp <input size="number"> ► Xem bảng chú thích thuộc tính (di chuột vào đây!) Giá trị Mô tả number Xác định chiều rộng của một phần tử <input>, bằng ký tự. Default value là 20 Xem ví dụ <form action="#"> size=25 <input type="text" name="s25" size="25"><br> size=05 <input type="text" name="s05" size="05"><br> <input type="submit"> </form> Xem Kết quả size=25 size=05	number	Xác định chiều rộng trong nhân vật, của một phần tử <input>
src	? → Thuộc tính src được hỗ trợ trong tất cả các trình duyệt chính. → Các thuộc tính src chỉ định URL của hình ảnh để sử dụng như một nút submit. → Lưu ý: thuộc tính src chỉ sử dụng với <input type="image">. → Cú pháp <input src="URL"> ► Xem bảng chú thích thuộc tính (di chuột vào đây!) Giá trị Mô tả URL Chỉ định URL của hình ảnh để sử dụng như một nút submit Xem ví dụ <form action="http://www.google.com/search" method="get" target="_blank"> Tìm kiếm: <input type="text" value="" name="q"/> <input type="image" src="hinh_anh.png" alt="Submit" width="24" height="24"> </form> Xem Kết quả Tìm kiếm:	URL	Chỉ định URL của hình ảnh để sử dụng như một nút submit (only for type="image")
step	? → Thuộc tính step được hỗ trợ trong Internet Explorer 10, Opera, Chrome, và Safari. Không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước đó, hoặc trong Firefox. → Thuộc tính step xác định khoảng thời gian số lượng pháp lý cho một yếu tố <input>. → Mẹo: Các thuộc tính step có thể được sử dụng cùng với các thuộc tính max và min để tạo ra một loạt các giá trị pháp lý. → Lưu ý: Các thuộc tính step làm việc với các loại đầu vào sau đây: number, range, date, datetime, datetime-local, month, time and week. → Cú pháp <input step="number"> ► Xem bảng chú thích thuộc tính (di chuột vào đây!) Giá trị Mô tả URL Chỉ định bội số hợp lệ cho giá triđầu vào Xem ví dụ <form action="#"> Chỉ nhận bội số của 3. Tức là 3 x N với N là số nguyên, ví dụ -6,-3,0,3,6,9,...<br/> <input type="number" name="points" step="3"> <input type="submit"> </form> Xem Kết quả Chỉ nhận bội số của 3. Tức là 3 x N với N là số nguyên, ví dụ -6,-3,0,3,6,9,...	number	Chỉ định khoảng thời gian pháp lý cho một trường đầu vào (thời gian nhập liệu có tác dụng)
type → Các loại thuộc tính hoạt động trong tất cả các trình duyệt chính. Tuy nhiên, không phải tất cả các loại đầu vào khác nhau hoạt động trong tất cả các trình duyệt chính. → Các loại thuộc tính quy định cụ thể các loại của phần tử <input> để hiển thị. → Kiểu mặc định là: văn bản. → HTML5 có các loại đầu vào mới như sau: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel, and url. → Cú pháp <input type="value">	? Xem ví dụ <form> <input type="button" value="contact" onclick="lienlac()"> </form> Xem Kết quả	buttonIE,CH,F,S,O	Định nghĩa một nút bấm (chủ yếu được sử dụng với một JavaScript để kích hoạt một kịch bản)
	? Xem ví dụ <input type="checkbox" name="ax" value="001" id="aaax"> <label for="aaax">aaaaa</label><br> <input type="checkbox" name="bx" value="002" id="bbbx"> <label for="bbbx">bbbbb</label><br> Xem Kết quả aaaaa bbbbb	checkboxIE,CH,F,S,O	Định nghĩa một hộp kiểm
	? Xem ví dụ <form action="#"> Nút chọn màu: <input type="color" name="favcolor"> <input type="submit"> </form> Xem Kết quả Nút chọn màu:	colorCH,O	Định nghĩa một bảng chọn màu
	? Xem ví dụ <input type="date" name="Birthday"> Xem Kết quả	date CH,S,O	Định nghĩa một điều khiển ngày (năm, tháng, ngày (không có thời gian))
	? Xem ví dụ <form action="#"> Birthday (date and time): <input type="datetime" name="bdaytime"> <input type="submit"> </form> Xem Kết quả Birthday (date and time):	datetimeIE,F,CH,S,O	Định nghĩa một ngày và thời gian kiểm soát (năm, tháng, ngày, giờ, phút, giây, và phần nhỏ của một giây, dựa vào múi giờ UTC)
	? Xem ví dụ <form action="#"> <input type="datetime-local" name="bdaytime"> <input type="submit"> </form> Xem Kết quả	datetime-local	Định nghĩa một ngày và thời gian kiểm soát (năm, tháng, ngày, giờ, phút, giây, và phần nhỏ của một giây (không có múi giờ)
	? Xem ví dụ <form action="#"> E-mail: <input type="email" name="usremail"> <input type="submit"> </form> Xem Kết quả E-mail:	email	Định nghĩa một lĩnh vực cho một địa chỉ e-mail
	? Xem ví dụ <form action="#"> <input type="file" name="img"> <input type="submit"> </form> Xem Kết quả	file	Định nghĩa một lĩnh vực tập tin chọn "Browse ..." nút (cho các tập tin tải lên)
	? Xem ví dụ <form action="search" method="get" target="_blank"> <input type="text" value="" name="q" size="25"> <input type="hidden" value="bendoi.vn" checked="checked" name="sitesearch"> <input type="submit" value=" Tìm kiếm "> </form> Xem Kết quả	hidden	Định nghĩa một lĩnh vực đầu vào ẩn
	? Ví dụ: <input type="image" src="img_submit.gif" alt="Submit">	image	Định nghĩa một hình ảnh như là nút submit
	? Xem ví dụ <form action="#"> <input type="month" name="thang-nam"> <input type="submit"> </form> Xem Kết quả	month	Định nghĩa một tháng và kiểm soát năm (không có múi giờ)
	? Xem ví dụ <form action="#"> chỉ nhập số <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> Xem Kết quả chỉ nhập số NUMBER Có thể sử dụng cùng với MAX, MIN, STEP, VALUE	number	Định nghĩa một lĩnh vực để nhập một số
	? Xem ví dụ <form action="#"> Email: <input type="text" name="email"> Password: <input type="password" name="pwd" maxlength="8"> <input type="submit"> </form> Xem Kết quả Email: Password:	password	Định nghĩa một lĩnh vực mật khẩu (ký tự thật được che giấu)
	? Xem ví dụ <form action="#"> <input type="radio" name="gender" value="male" id="male"> <label for="male">Male</label><br> <input type="radio" name="gender" value="female" id="Female"> <label for="Female">Female</label> <br> <input type="submit" value="Submit"> </form> Xem Kết quả Male Female	radio	Định nghĩa một nút radio (chọn 1 trong nhiều)
	? Xem ví dụ <form action="#" method="get"> Points: <input type="range" name="points" min="1" max="10"> <input type="submit"> </form> Xem Kết quả Points: RANGE Có thể sử dụng cùng với MAX, MIN, STEP, VALUE	range	Định nghĩa một kiểm soát để nhập một số có giá trị chính xác (như một điều khiển thanh trượt)
	? Xem ví dụ <form action="#"> Gõ vài chữ vào đây <input type="text" name="typing"> <input type="reset" value="rồi nhấn Reset"> <input type="submit" value="Submit"> </form> Xem Kết quả Gõ vài chữ vào đây	reset	Định nghĩa một nút đặt lại (reset tất cả các giá trị hình thức giá trị mặc định)
	? Xem ví dụ <form action="#" target="_blank"> Search Google: <input type="search" name="googlesearch"> <input type="submit"> </form> Xem Kết quả Search Google:	search	Định nghĩa một trường văn bản để nhập vào một chuỗi tìm kiếm
	? Xem ví dụ <form action="#"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" onclick="lienlac()"> </form> Xem Kết quả First name: Last name:	submit	Định nghĩa một nút submit
	? Xem ví dụ <form action="#"> Telephone: <input type="tel" name="usertel"><br> <input type="submit"> </form> Xem Kết quả Telephone: Không nên dùng cái này vì hiện tại chưa thấy tiện ích nào, thà cứ dùng NUMBER kết hợp với (MAX+MIN)LENGTH	tel	Định nghĩa một lĩnh vực để tham gia vào một số điện thoại
	? Xem ví dụ <form action="#"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit"> </form> Xem Kết quả First name: Last name:	text	Mặc định. Định nghĩa một trường văn bản đơn dòng (mặc định chiều rộng là 20 ký tự)
	? Xem ví dụ <form action="#"> GIỜ:PHÚT: <input type="time" name="time"> <input type="submit"> </form> Xem Kết quả GIỜ:PHÚT:	time	Xác định một điều khiển vào một thời gian (không có múi giờ)
	? Xem ví dụ <form action="#"> Add your homepage: <input type="url" name="homepage"><br> <input type="submit"> </form> Xem Kết quả Chỉ nhận URL:	url	Định nghĩa một lĩnh vực để nhập một URL
	? Xem ví dụ <form action="#"> Chọn tuần: <input type="week" name="year_week"> <input type="submit"> </form> Xem Kết quả Chọn tuần:	week	Định nghĩa một tuần và kiểm soát năm (không có múi giờ)
value	? → Thuộc tính giá trị được hỗ trợ trong tất cả các trình duyệt chính. → Các giá trị thuộc tính xác định giá trị của một phần tử <input>. → Thuộc tính giá trị sử dụng khác nhau cho các loại đầu vào khác nhau: → Đối với "button", "reset", và "submit" - nó định nghĩa các văn bản trên nút → Đối với "text" "pas", và "hidden" - xác định giá trị ban đầu (mặc định) của lĩnh vực đầu vào → Đối với "checkbox" "radio", "image" - xác định giá trị kết hợp với các đầu vào (đây cũng là giá trị được gửi trên trình) → Lưu ý: Các giá trị thuộc tính được yêu cầu với <input type="checkbox"> và <input type="radio">. → Lưu ý: Các giá trị thuộc tính không thể được sử dụng với <input type="file">. → Cú pháp <input value="text"> ► Xem bảng thuộc tính (di chuột vào đây!) Giá trị Mô tả text Chỉ định giá trị của các yếu tố <input> Xem ví dụ <form action="#"> <input type="text" name="a" value="bến đợi"> <input type="text" name="b" value="bên đời"> <input type="submit" value="bến đợi"> </form> Xem Kết quả	text	Chỉ định giá trị của một phần tử <input>
width	? Chiều rộng sử dụng tương tự như chiều cao và bạn xem lại phần HEIGHT đã trình bày ở trên!	pixels	Xác định chiều rộng của một yếu tố <input> (only for type="image")

Chú thích

Tại cột value:
Nếu là chữ nghiêng thì giá trị đó được thay thế. Ví dụ size='number' trong code sẽ viết là size='5'.
Nếu chữ đứng thì dùng nguyên giá trị đó. Ví dụ formmethod='post'
Nếu cột Attribute = cột value, ví dụ như checked thì không cần viết checked='checked' mà chỉ cần viết checked là đủ
IE,CH,F,S,O: là cách viết tắt các chữ cái đầu trong tên các trình duyệt phổ biến . Tuy nhiên chiếm tuyệt đại đa số là hiển thị tốt nhất trên Chrome, các trình duyệt khác cũng đang bổ sung dần. Vì tôi không thể hằng ngày kiểm tra tính tương thích của các trình duyệt, trong khi các trình duyệt luôn đổi mới và âm thầm bổ sung những thứ còn thiếu. Do vậy việc chú thích tên các trình duyệt chỉ mang tính chất tham khảo tương đối.

---

Xem tất cả thuộc tính của CSS
Thư góp ý

Thanks: ... | w3.org | w3schools.com
( 2013-02-22 11:51)

Lần đăng thứ nhất!