Bài 28: Các thuộc tính của thẻ Input
Nội dung
- Thuộc tính value
- Thuộc tính readonly
- Thuộc tính disabled
- Thuộc tính size
- Thuộc tính maxlength
- Các thuộc tính HTML5
- Thuộc tính autocomplete
- Thuộc tính novalidate
- Thuộc tính autofocus
- Thuộc tính form
- Thuộc tính formaction
- Thuộc tính formenctype
- Thuộc tính formmethod
- Thuộc tính formnovalidate
- Thuộc tính formtarget
- Thuộc tính height và width
- Thuộc tính list
- Thuộc tính min và max
- Thuộc tính multiple
- Thuộc tính pattern
- Thuộc tính placeholder
- Thuộc tính required
- Thuộc tính step
- Bài tập thực hành!
Thuộc tính value
Thuộc tính value chỉ định một giá trị khởi tạo cho phần tử input:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
Kết quả
Thuộc tính readonly
Thuộc tính readonly chỉ đinh phần tử input chỉ có thể đọc (không thể thay đổi dữ liệu trên phần tử đó):
Ví dụ
<!DOCTYPE html>
<html>
<body>
<form action="">
First name:<br>
<input type="text" name="firstname" value ="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
Kết quả
Thuộc tính readonly không cần khởi gán giá trị. Sẽ giống nhau nếu viết readonly=”readonly”.
Thuộc tính disabled
Thuộc tính disabled chỉ định trường input sẽ bị ẩn. Phần tử disabled sẽ không được sử dụng và không kích được trên nó. Các phần tử disabled sẽ không được gửi đi (submit).
Ví dụ
<!DOCTYPE html>
<html>
<body>
<form action="">
First name:<br>
<input type="text" name="firstname" value ="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
Kết quả
Thuộc tính disabled cũng không cần khởi gán giá trị. Sẽ giống nhau nếu viết disabled=”disabled”.
Thuộc tính size
Thuộc tính size chỉ định kích thước của trường input (số ký tự):
Ví dụ
<!DOCTYPE html>
<html>
<body>
<form action="">
First name:<br>
<input type="text" name="firstname" value ="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
Kết quả
Thuộc tính maxlength
Thuộc tính maxlength chỉ định độ dài tối đa cho phép của trường input:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
Kết quả
Với thuộc tính maxlength, control input sẽ không chấp nhận nhiều hơn số ký tự được cho phép. Thuộc tính này không cung cấp bất kỳ phản hồi nào khi nhập quá số ký tự cho phép. Nếu bạn muốn thông báo nhận thông báo, bạn phải viết code JavaScript.
 |
Dùng các thuộc tính của thẻ input để giới hạn việc nhập dữ liệu là không đơn giản. JavaScript cung cấp nhiều cách để thêm vào dữ liệu không hợp lệ cho thẻ input. Để hạn chế đầu vào một cách an toàn, cũng cần phải kiểm tra dữ liệu tại nơi nhận (phía server). |
|---|
Các thuộc tính HTML5
HTML5 thêm 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 cho thẻ <form>:
- autocomplete
- novalidate
Thuộc tính autocomplete
Thuộc tính autocomplete được sử dụng trường form hoặc input có thể tự động điền dữ liệu vào đó hay không. Khi thiết lập autocomplete = “on”, trình duyệt sẽ tự động điền giá trị dựa trên các giá trị mà người dùng đã nhập trước đây. Mách nhỏ: Cũng có thể sử dụng autocomplete là “on” cho form, và “off” cho các trường input, và ngược lại. Thuộc tính autocomplete làm việc với thẻ <form> và các loại thẻ <input> sau: text, search, url, tel, email, password, datepickers, range, và color.
Ví dụ
Một form HTML với autocomplete on (và có thể off cho một vài trường input):
<!DOCTYPE html>
<html>
<body>
<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>
<p>Nhập vào form rồi submit, sau đó load lại trang để xem cách hoạt động của autocomplete.</p>
<p>Chú ý rằng là "on" cho form, nhưng "off" cho địa chỉ email.</p>
</body>
</html>
Kết quả
Thuộc tính novalidate
Thuộc tính novalidate là một thuộc tính của <form>. Sử dụng novalidate khi dữ liệu trong form không cần phải kiểm tra tính hợp lệ khi gửi đi (submit).
Ví dụ
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
<p><strong>Chú ý:</strong> Thuộc tính novalidate của thẻ input không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE hoặc trong Safari.</p>
</body>
</html>
Kết quả
Thuộc tính autofocus
Thuộc tính autofocus là một thuốc tính boolean. Khi xuất hiện nó chỉ định rằng một phần tử <input> nhận focus khi trang được load.
Ví dụ
Trường “First name” sẽ tự động nhận con trỏ nhấp nháy khi trang được load:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
First name:<input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
<p><strong>Chú ý:</strong> Thuộc tính autofocus của thẻ input không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE.</p>
</body>
</html>
Kết quả
Thuộc tính form
Thuộc tính form form để chỉ định một hay nhiều form mà chứa phần tử <input> này. Mách nhỏ: Để ám chỉ nhiều hơn một form, sử dụng khoảng trắng để phân tách danh sách các id của form.
Ví dụ
Trường Last name được đặt bên ngoài form HTML (nhưng vẫn là một phần của form):
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
<p>Trường "Last name" bên dưới là ở bên ngoài phần tử form nhưng nó vẫn là một phần của form.</p>
Last name: <input type="text" name="lname" form="form1">
</body>
</html>
Kết quả
Last name:
Thuộc tính formaction
Thuộc tính formaction chỉ định tới đường dẫn của một file mà sẽ xử lý dữ liệu của các control input khi form được submit. Thuộc tính formaction viết chồng với thuộc tính action của phần tử <form>. Thuộc tính formaction được sử dụng cho các thẻ input kiểu type=”submit” và type=”image”.
Ví dụ
Một form HTML với hai nút submit, thực hiện hai hành động khác nhau:
<!DOCTYPE html>
<html>
<body>
<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.php" value="Submit as admin">
</form>
<p><strong>Chú ý:</strong> Thuộc tính formaction của thẻ input không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE.</p>
</body>
</html>
Kết quả
Thuộc tính formenctype
Thuộc tính formenctype xác định cách dữ liệu form nên được mã hoá khi gửi dữ liệu tới server (chỉ cho form với method=”post”). Thuộc tính formenctype viết chồng với thuộc tính enctype của thẻ <form>. Thuộc tính formenctype được sử dụng với các thẻ input kiểu type=”submit” và type=”image”.
Ví dụ
Gửi dữ liệu của form với mã hoá mặc định (cho nút submit thứ nhất) và mã hoá kiểu “multipart/form-data” (cho nút submit thứ hai):
<!DOCTYPE html>
<html>
<body>
<form action="demo_post.php" 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>
<p><strong>Chú ý:</strong> Thuộc tính formenctype của thẻ input không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE.</p>
</body>
</html>
Kết quả
Thuộc tính formmethod
Thuộc tính formmethod định nghĩa phương thức HTTP cho gửi dữ liệu của form tới một URL thực hiện nó (đường dẫn file chứa code server). Thuộc tính formmethod viết chồng thuộc tính method của phần tử <form>. Thuộc tính formmethod có thể được sử dụng với <input> kiểu type=”submit” and type=”image”.
Ví dụ
Nút submit thứ hai viết chồng method HTTP của form:
<!DOCTYPE html>
<html>
<body>
<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.php" value="Submit using POST">
</form>
<p><strong>Chú ý:</strong> Thuộc tính formmethod của thẻ input không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE.</p>
</body>
</html>
Kết quả
Thuộc tính formnovalidate
Thuộc tính novalidate là một thuộc tính kiểu boolean. Khi xuất hiện trong phần tử <input> thì phần tử đó sẽ không bị kiểm tra tính hợp lệ khi gửi dữ liệu. Thuộc tính formnovalidate viết chồng thuộc tính novalidate của phần tử <form>. Thuộc tính formnovalidate có thể được sử dụng với thẻ <input> kiểu type=”submit”.
Ví dụ
Một form với hai nút submit (với việc có và không có kiểm tra dữ liệu hợp lệ):
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
E-mail: <input type="email" name="email"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
<p><strong>Chú ý:</strong> Thuộc tính formnovalidate của thẻ input không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE hoặc Safari.</p>
</body>
</html>
Kết quả
Thuộc tính formtarget
Thuộc tính formtarget chỉ định một tên hoặc một từ khoá mà cho biết nơi để hiển thị kết quả khi nhận được sau khi submit form. Thuộc tính formtarget viết đề thuộc tính target của phần tử <form>. Thuộc tính formtarget có thể được sử dụng với thẻ <input> kiểu type=”submit” và type=”image”.
Ví dụ
<!DOCTYPE html>
<html>
<body>
<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/tab">
</form>
<p><strong>Chú ý:</strong> Thuộc tính formtarget không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE.</p>
</body>
</html>
Kết quả
Thuộc tính height và width
Thuộc tính height và width chỉ định chiều rộng và cao của phần tử <input>. Thuộc tính height và width chỉ được sử dụng với <input type=”image”>.
|
Luôn luôn chỉ định kích thước của ảnh. Nếu trình duyệt không biết kích thước, trang nhấp nháy khi loạt các ảnh. |
|---|
Ví dụ
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
</body>
</html>
Kết quả
Thuộc tính list
Thuộc tính list tham chiếu đến phần tử <datalist> mà chứa các giá trị trị tuỳ chọn định nghĩa trước cho một phần tử <input>.
Ví dụ
Phần tử <input> với các giá trị định nghĩa trước trong một <datalist>:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" method="get">
<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">
</form>
<p><b>Chú ý:</b> Thẻ datalist không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE hoặc Safari.</p>
</body>
</html>
Kết quả
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 cho một phần tử <input>. Các thuộc tính min và max làm việc với các kiểu thẻ <input> sau: number, range, date, datetime, datetime-local, month, time and week.
Ví dụ
Các phần tử <input> với các giá trị min và max, xem lại bài 27:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
<p><strong>Chú ý:</strong> Thuộc tính max và min của thẻ input không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE hoặc Firefox.</p>
<p><strong>Chú ý:</strong> Thuộc tính max và min sẽ không làm việc với ngày tháng và thời gian trong Internet Explorer 10.</p>
</body>
</html>
Kết quả
Enter a date before 1980-01-01:
Enter a date after 2000-01-01:
Quantity (between 1 and 5):
Thuộc tính multiple
Thuộc tính multiple là một thuộc tính kiểu boolean. Khi xuất hiện, phần tử sẽ cho người sử dụng nhập hơn một giá trị trong phần tử<input>. Thuộc tính multiple làm việc với các kiểu input sau: email và file.
Ví dụ
Một trường upload file chấp nhận nhiều giá trị:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Select images: <input type="file" name="img" multiple>
<input type="submit">
</form>
<p>Thử chọn nhiều hơn một file khi browser các file.</p>
<p><strong>Chú ý:</strong> Thuộc tính multiple của thẻ input không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE.</p>
</body>
</html>
Kết quả
Select images:
Thuộc tính pattern
Thuộc tính pattern chỉ định một biểu thức chính quy (regular expression) mà giá trị của phần tử <input> sẽ được kiểm tra lại. Thuộc tính pattern làm việc với các loại thẻ <input> sau: text, search, url, tel, email, và password. Mách nhỏ: Sử dụng thuộc tính title để trợ giúp thông tin pattern cho người sử dụng.
Ví dụ
Một trường input có thể chỉ chứa 3 ký tự (không phải kiểu số hoặc các ký tự đặc biệt):
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
<p><strong>Chú ý:</strong> Thuộc tính pattern của thẻ input không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE hoặc Safari.</p>
</body>
</html>
Kết quả
Country code:
Thuộc tính placeholder
Thuộc tính placeholder xác định một gợi ý mà miêu tả giá trị mong đợi cho trường input (một giá trị ví dụ hoặc một mô tả ngắn của định dạng). Gợi ý này được hiển thị trong trường input trước khi người sử dụng nhập giá trị vào đó. Thuộc tính placeholder làm việc với các thẻ <input> kiểu: text, search, url, tel, email, and password.
Ví dụ
Một trường input với mô tả ngắn trong placeholder:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
<p><strong>Chú ý:</strong> Thuộc tính placeholder không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE.</p>
</body>
</html>
Kết quả
Thuộc tính required
Thuộc tính required là một thuộc tính kiểu boolean. Khi xuất hiện nó xác định rằng trường input không được để trống trước khi submit form. Thuộc tính required làm việc với thẻ <input> kiểu: text, search, url, tel, email, password, date pickers, number, checkbox, radio, và file.
Ví dụ
Một yêu cầu bắt buộc nhập cho trường input:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>
<p><strong>Chú ý:</strong> Thuộc tính required của thẻ input không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE hoặc Safari.</p>
</body>
</html>
Kết quả
Thuộc tính step
Thuộc tính step xác định bước nhảy của một giá trị số cho phần tử <input>. Ví dụ: nếu step=”3″, các số có thể là -3, 0, 3, 6, v.v.
Mách nhỏ: 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 khoảng các giá trị hợp lệ. Thuộc tính step làm việc với các thẻ <input> kiểu: number, range, date, datetime, datetime-local, month, time và week.
Ví dụ
Trường input với chỉ định bước nhảy của một giá trị số:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<input type="number" name="points" step="3">
<input type="submit">
</form>
<p><strong>Chú ý:</strong> Thuộc tính step của thẻ input không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE.</p>
</body>
</html>
Kết quả
Bài tập thực hành!
- Bài 1: Tạo một form với một trường input kiểu text để nhập họ tên và khởi tạo giá trị mặc định cho trường này là “Nguyễn Văn A”
- Bài 2: Không cho phép nhập ở trường input ở bài 1
- Bài 3: Thay đổi độ rộng của trường input ở bài 1 để hiển thị được 40 ký tự
- Bài 4: Hiện thị gợi ý trong trường input bài 1 là “Nhập vào Họ và Tên” để trợ giúp thông tin cho người sử dụng.
Xem thêm bảng tổng hợp tất cả thẻ trong HTML.
Xem thêm bảng tổng hợp tất cả các thuộc tính trong HTML.
1 phản hồi
[…] Bạn có thể tìm hiểu tất cả các thuộc tính Input cũ và mới trong HTML tại đây. […]