Các thuộc tính nhập vào trong HTML

Thuộc tính value

Thuộc tính value xác định giá trị ban đầu cho trường nhập vào:

<form action=””>
First name:<br>
<input type=”text” name=”firstname” value=”John”>
</form>

Thuộc tính readonly

Thuộc tính readonly xác định trường nhập vào chỉ được đọc (không thể thay đổi):

<form action=””>
First name:<br>
<input type=”text” name=”firstname” value=”John” readonly>
</form>

Thuộc tính disabled

Thuộc tính disabled chỉ định rằng trường nhập vào bị vô hiệu hóa. Trường nhập vào bị vô hiệu không sử dụng được và không thể nhấp được, và giá trị của nó sẽ không được gửi khi gửi form:

<form action=””>
First name:<br>
<input type=”text” name=”firstname” value=”John” disabled>
</form>

Thuộc tính size

Thuộc tính size xác định kích thước (theo ký tự) cho trường nhập liệu:

<form action=””>
First name:<br>
<input type=”text” name=”firstname” value=”John” size=”40″>
</form>

Thuộc tính maxlength

Thuộc tính maxlength xác định chiều dài tối đa cho phép của trường nhập vào:

<form action=””>
First name:<br>
<input type=”text” name=”firstname” maxlength=”10″>
</form>

Với thuộc tính maxlength, trường nhập vào sẽ không chấp nhận nếu vượt quá số ký tự cho phép. Thuộc tính maxlength không cung cấp bất kỳ thông tin phản hồi. Nếu bạn muốn cảnh báo người dùng, bạn phải viết mã JavaScript.

Lưu ý: giới hạn nhập vào không phải là không thể chấp nhận được, và JavaScript cung cấp nhiều cách để thêm vào dữ liệu hợp lệ. Để giới hạn nhập vào một cách an toàn, người nhận (máy chủ) cần kiểm tra kỹ càng.

Các thuộc tính trong HTML5

HTML5 đã thêm các thuộc tính sau cho <input>:

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and awidth
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

và các thuộc tính sau cho <form>:

• autocomplete
• novalidate

Thuộc tính autocomplete

Thuộc tính autocomplete chỉ định xem một mẫu hoặc trường nhập vào có nên tự động hoàn thành hay không. Khi tự động hoàn thành, trình duyệt tự động hoàn thành các giá trị nhập vào dựa theo người dùng đã nhập trước đó.

Mẹo: có thể tự động hoàn thành “on” cho biểu mẫu, và “off” cho các trường nhập vào cụ thể, hoặc ngược lại.

Thuộc tính autocomplete hoạt động với <form> và <input> các loại sau: văn bản, tìm kiếm, url, điện thoại, email, mật khẩu, datepickers, phạm vi và màu sắc.

Một biểu mẫu HTML tự động điền vào (và tắt cho một trường nhập):

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

Mẹo: Ở một số trình duyệt bạn có thể cần phải kích hoạt chức năng tự động hoàn thành để làm việc.

Thuộc tính novalidate

Thuộc tính novalidate là thuộc tính <form>. Khi có mặt, việc xác nhận tính hợp lệ xác định rằng dữ liệu biểu mẫu không được xác nhận khi gửi đi.

Ví dụ dưới đây chỉ ra rằng biểu mẫu không được xác nhận khi gửi:

<form action=”/action_page.php” novalidate>
E-mail: <input type=”email” name=”user_email”>
<input type=”submit”>
</form>

Thuộc tính autofocus

Thuộc tính autofocus xác định trường nhập vào tự động lấy nét khi load trang. Ví dụ dưới đây là trường “First name” tự động lấy nét khi tải trang:

First name:<input type=”text” name=”fname” autofocus>

Thuộc tính form

Thuộc tính form xác định một hoặc nhiều hình thức mà một phần tử <input> thuộc về.

Mẹo: để tham khảo nhiều hơn một mẫu, sử dụng một danh sách space-separated của mẫu id.

Ví dụ về trường nhập vào nằm bên ngoài biểu mẫu HTML (nhưng vẫn là một phần của biểu mẫu):

<form action=”/action_page.php” id=”form1″>
First name: <input type=”text” name=”fname”><br>
<input type=”submit” value=”Submit”>
</form>

Last name: <input type=”text” name=”lname” form=”form1″>

Thuộc tính formaction

Thuộc tính formaction xác định URL của một tệp sẽ xử lý kiểm soát đầu vào khi biểu mẫu được gửi. Thuộc tính formaction ghi đè thuộc tính action của phần tử <form>.

Thuộc tính formaction được sử dụng với type = “submit” và type = “image”. Ví dụ một biểu mẫu HTML với hai nút gửi, với các hành động khác nhau:

<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=”/action_page2.php”
value=”Submit as admin”>
</form>

Thuộc tính formenctype

Thuộc tính formenctype chỉ định cách dữ liệu biểu mẫu phải được mã hóa khi được gửi (chỉ cho các form có method = “post”). Thuộc tính formenctype ghi đè thuộc tính enctype của phần tử <form>.

Thuộc tính formenctype được sử dụng với type = “submit” và type = “image”. Ví dụ gửi dữ liệu biểu mẫu được mã hoá mặc định (nút gửi đầu tiên), và được mã hoá dưới dạng “multipart / form-data” (nút gửi lần thứ hai):

<form action=”/action_page_binary.asp” 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>

Thuộc tính formmethod

Thuộc tính formmethod định nghĩa phương thức HTTP để gửi mẫu-dữ liệu đến URL hành động. Thuộc tính formmethod ghi đè thuộc tính method của phần tử <form>.

Thuộc tính formmethod có thể được sử dụng với type=”submit” và type=”image”. Ví dụ nút submit thứ hai sẽ ghi đè lên phương thức HTTP của biểu mẫu:

<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=”action_page_post.asp”
value=”Submit using POST”>
</form>

Thuộc tính formnovalidate

Thuộc tính formnovalidate ghi đè thuộc tính novalidate của phần tử <form>. Thuộc tính formnovalidate có thể được sử dụng với type = “submit”.

Ví dụ biểu mẫu có hai nút gửi (có và không có xác nhận):

<form action=”/action_page.php”>
E-mail: <input type=”email” name=”userid”><br>
<input type=”submit” value=”Submit”><br>
<input type=”submit” formnovalidate value=”Submit without validation”>
</form>

Thuộc tính formtarget

Thuộc tính formtarget chỉ định tên hoặc từ khóa cho biết nơi để hiển thị phản hồi nhận được sau khi gửi biểu mẫu. Thuộc tính formtarget ghi đè thuộc tính target của phần tử <form>.

Thuộc tính định dạng có thể được sử dụng với type = “submit” và type=”image”. Ví dụ một mẫu với hai nút gửi, với cửa sổ mục tiêu khác nhau:

<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”>
</form>

Thuộc tính height và awidth

Thuộc tính height và awidth xác định chiều cao và chiều rộng của phần tử <input type = “image”>. Luôn chỉ định kích thước của hình ảnh. Nếu trình duyệt không biết kích thước, trang sẽ nhấp nháy trong khi tải hình ảnh.

Ví dụ xác định hình ảnh như nút submit, với các thuộc tính height và awidth:

<input type=”image” src=”img_submit.gif” alt=”Submit” awidth=”48″ height=”48″>

Thuộc tính list

Thuộc tính list đề cập đến một phần tử <datalist> có chứa các tùy chọn được xác định trước cho một phần tử <input>.

Ví dụ một phần tử <input> với giá trị được xác định trước trong một <datalist>:

<input list=”browsers”>

<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>

Thuộc tính min và max

Các thuộc tính min và max chỉ định các giá trị cực tiểu và cực đại 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 nhập sau: số, phạm vi, ngày, datetime-local, tháng, thời gian và tuần.

Ví dụ các phần tử <input> với giá trị min và max:

Enter a date before 1980-01-01:
<input type=”date” name=”bday” max=”1979-12-31″>

Enter a date after 2000-01-01:
<input type=”date” name=”bday” min=”2000-01-02″>

Quantity (between 1 and 5):
<input type=”number” name=”quantity” min=”1″ max=”5″>

Thuộc tính multiple

Thuộc tính multiple chỉ định rằng người dùng được phép nhập nhiều giá trị trong phần tử <input>. Thuộc tính multiple hoạt động với các loại nhập sau: email và tệp.

Ví dụ:

Select images: <input type=”file” name=”img” multiple>

Thuộc tính pattern

Thuộc tính pattern xác định một biểu thức chính quy mà giá trị của phần tử <input> được kiểm tra lại. Thuộc tính pattern hoạt động với các loại nhập sau: văn bản, tìm kiếm, url, điện thoại, email và mật khẩu.

Mẹo: sử dụng thuộc tính global title để mô tả mẫu để giúp người dùng.

Ví dụ trường nhập vào có thể chứa chỉ ba chữ cái (không có số hoặc ký tự đặc biệt):

Country code: <input type=”text” name=”country_code” pattern=”[A-Za-z]{3}” title=”Three letter country code”>

Thuộc tính placeholder

Thuộc tính placeholder chỉ định một gợi ý mô tả giá trị dự kiến của một trường nhập vào (một giá trị mẫu hoặc một mô tả ngắn về định dạng). Gợi ý được hiển thị trong trường nhập vào trước khi người dùng nhập một giá trị.

Thuộc tính placeholder hoạt động với các loại nhập sau: văn bản, tìm kiếm, url, điện thoại, email và mật khẩu.

<input type=”text” name=”fname” placeholder=”First name”>

Thuộc tính required

Thuộc tính required xác định rằng một trường nhập vào phải được điền trước khi gửi biểu mẫu. Thuộc tính required hoạt động với các loại nhập sau: văn bản, tìm kiếm, url, điện thoại, email, mật khẩu, bộ chọn ngày, số, hộp kiểm, radio và tệp.

Username: <input type=”text” name=”usrname” required>

Thuộc tính step

Thuộc tính step xác định khoảng cách số hợp lệ cho một phần tử <input>. Ví dụ: nếu bước = “3”, số pháp lý có thể là -3, 0, 3, 6, v.v …

Mẹo: 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ý.

Thuộc tính bước hoạt động với các loại nhập sau: số, phạm vi, ngày, datetime-local, tháng, thời gian và tuần.

<input type=”number” name=”points” step=”3″>

Biểu mẫu trong HTML và phần tử input