Thuộc Tính Của Thẻ Input Trong HTML - WebVN

Trang chủ » Trong Html Thuộc Tính Nào Xác định ô Text Nhập Dữ Liệu Không được để Trống » Thuộc Tính Của Thẻ Input Trong HTML - WebVN

Có thể bạn quan tâm

« Bài TrướcBài Tiếp »

Thuộc tính value

Thuộc tính value được sử dụng để thiết lập giá trị cho thẻ input:

1234567891011121314 <!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):

1234567891011121314 <!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.

1234567891011121314 <!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:

1234567891011121314 <!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:

1234567891011121314 <!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 thêm các điều kiện vào thẻ chỉ hạn một phần những dữ liệu không hợp lệ. Để 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.

12345678910111213141516 <!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ềnthông tinvàoformvànhấn"Gửi",sauđómởlạitrangvàthửnháykép(hoặcđiềnmộtvàikýtự)vàoônhậpliệuđểthấythuộctính autocomplete hoạtđộng nhưthếnào.</p><p>Lưuýrằng thuộctính autocompletecógiátrị"on"vớiform nhưnglại"off"ởphầne-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.

12345678910111213 <!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ộctính novalidate khôngđượchỗtrợtrêntrình duyệtInternet Explorer9(cùngvớicácphiênbảntrướ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.

1234567891011121314 <!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ộctính autofocus trong thẻinput khôngđượchỗtrợtrong Internet Explorer9vàcácphiênbảntrướ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.

1234567891011121314 <!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ặcdùnằmởngoàiform nhưngvẫnlàmộtphầncủaform.</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.

123456789101112131415 <!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ộctính formaction trong thẻinput khôngđượchỗtrợtrong Internet Explorer9vàcácphiênbảntrướ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.

1234567891011121314 <!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ộctính formenctype trong thẻinput khôngđượchỗtrợtrong Internet Explorer9vàcácphiênbảntrước.</p> </body></html>

Demo

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.

123456789101112131415 <!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ộctính formmethod trong thẻinput khôngđượchỗtrợtrong Internet Explorer9vàcácphiênbảntrước.</p> </body></html>

Demo

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.

1234567891011121314 <!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ộctính formnovalidate trong thẻinput khôngđượchỗtrợtrong Internet Explorer9vàcácphiênbảntrước.</p> </body></html>

Demo

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.

123456789101112131415 <!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ộctính formtarget trong thẻinput khôngđượchỗtrợtrong Internet Explorer9vàcácphiênbảntrước.</p> </body></html>

Demo

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

Hãy luôn nhớ quy định kích thước khi sử dụng ảnh. Nếu trình duyệt không biết kích thước ảnh, trang sẽ bị co giãn trong khi tải.
1234567891011121314 <!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ửitọađộXvàYcủachuộttrênảnh khi ngườidùng nhấnsubmit.</p> </body></html>

Demo

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

123456789101112131415161718192021 <!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đượchỗtrợtrênSafarivàIE9(gồmcảcácphiênbảntrướcđó).</p> </body></html>

Demo

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.

123456789101112131415161718192021222324 <!DOCTYPE html><html><body> <form action="/demo/action_page.php"> Nhậpngàytrước1980-01-01:<input type="date"name="bday"max="1979-12-31"><br> Nhậpngàysau2000-01-01:<input type="date"name="bday"min="2000-01-02"><br> Sốlượng(từ1tới5):<input type="number"name="quantity"min="1"max="5"><br> <input type="submit"value="Gửi"> </form> <p><strong>Lưuý:</strong>Thuộctính maxvàmin khôngđượchỗtrợtrongcácphiênbảntừInternet Explorer9trởvềtrước.</p><p><strong>Lưuý:</strong>Internet Explorer10cóhỗtrợthẻinputvớigiátrịtypelàdatevàtime nhưng khônghỗtrợthuộctính min,max.IE10trởđikhônghỗtrợnhững thẻinputnày.</p> </body></html>

Demo

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.

123456789101112131415 <!DOCTYPE html><html><body> <form action="/demo/action_page.php">Chọntệptin:<input type="file"name="img"multiple><input type="submit"value="Gửi"></form> <p>Bạncóthểchọnnhiềutệptincùnglúc.</p> <p><strong>Lưuý:</strong>Thuộctính multiple trong thẻinput khôngđượchỗtrợtrong Internet Explorer9vàcácphiênbảntrước.</p> </body></html>

Demo

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.

12345678910111213 <!DOCTYPE html><html><body> <form action="/demo/action_page.php">Nhậpmãquốcgia:<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ộctính pattern trong thẻinput khôngđượchỗtrợtrongcácphiênbảnInternet Explorer9trởvềtrướcvàtrong Safari.</p> </body></html>

Demo

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.

1234567891011121314 <!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ộctính placeholder trong thẻinput khôngđượchỗtrợtrong Internet Explorer9vàcácphiênbảntrước.</p> </body></html>

Demo

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.

12345678910111213 <!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ộctính required trong thẻinput khôngđượchỗtrợtrongcácphiênbảnInternet Explorer9trởvềtrướcvàtrong Safari.</p> </body></html>

Demo

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.

12345678910111213 <!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ộctính step trong thẻinput khôngđượchỗtrợtrongcácphiênbảnInternet Explorer9trởvềtrướcvàtrong Firefox.</p> </body></html>

Demo

Bài tập

Bài tập 1 Bài tập 2 Bài tập 3 Bài tập 4 « Bài TrướcBài Tiếp »

Từ khóa » Trong Html Thuộc Tính Nào Xác định ô Text Nhập Dữ Liệu Không được để Trống