[HTML/HTML5] Phần 33: Các thuộc tính Input

Trong bài này, chúng ta sẽ tìm hiểu các thuộc tính input được sử dụng trong thiết kế Form trong HTML. Một số thuộc tính có thể bạn đã biết, tuy nhiên bài học này cung cấp các thuộc tính HTML5 mới giúp bạn củng cố kiến thức HTML của mình.

Thuộc tính value
Thuộc tính value (giá trị) dùng để đặc tả giá trị ban đầu của 1 trường input.

<form action="">
<h4> Giá trị ban đầu của trường Tên là Dammio</h4>
Tên:<br>
<input type="text" name="ten" value="Dammio">
</form>

Thuộc tính readonly
Thuộc tính này đặc tả trường input chỉ đọc hoặc chỉ xem (không được thay đổi giá trị).

<form action="">
<h4> Giá trị của trường Tên là Dammio không thể thay đổi giá trị được. --- dammio.com</h4>
Tên:<br>
<input type="text" name="ten" value="Dammio" readonly>
</form>

Thuộc tính disabled
Trường input sẽ bị vô hiệu hóa nếu dùng thuộc tính disabled, nghĩa là trường này không thể sử dụng hay nhấn chuột vào được cũng như giá trị của nó không được gửi đi khi submit form.

<h4>Giá trị của trường Tên là Dammio bị vô hiệu hóa. --- dammio.com</h4>
<form action="">
Tên:<br>
<input type="text" name="ten" value="Dammio" disabled>
</form>

Thuộc tính size
Thuộc tính size dùng để thay đổi kích thước (tính theo số lượng ký tự) của 1 trường nhập liệu nào đó.

<form action="">
<h4>Trường nhập liệu có kích thước là 40 ký tự. --- dammio.com</h4>
Tên:<br>
<input type="text" name="ten" value="Dammio" size="40">
</form>

Thuộc tính maxlength
Thuộc tính này xác định chiều dài tối đa của trường nhập liệu.

<h4>Trường nhập liệu có chiều dài tối đa là 10. --- dammio.com</h4>
<form action="">
Tên:<br>
<input type="text" name="ten" maxlength="10">
</form>

Lưu ý nếu bạn dùng thuộc tính maxlength, trường nhập liệu sẽ không chấp nhận thêm bất cứ ký tự nào vượt quá độ dài tối đa.

Các thuộc tính HTML5
HTML5 chứa một số thuộc tính input mới như:

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

Thuộc tính autocomplete
Thuộc tính này mô tả lúc nào một form hay trường nhập liệu nên tự động điền dữ liệu hay tắt đi tính năng này. Ví dụ, khi bạn nhập tên của bạn, bạn chỉ cần gõ chữ cái đầu tiên thì một danh sách gợi ý sẽ xuất hiện xổ xuống do được lưu trữ ở các lần nhập trước.

Bạn có thể dùng thuộc tính autocomplete “on” cho toàn bộ form, và “off” cho một trường nhập liệu nào đó, hoặc ngược lại. Thuộc tính autocomplete hoạt động với form và các dạng input như: text, search, url, tel, email, password, datepickers, range, và color.

Lưu ý, đối với trường nhập mật khẩu, để bảo mật, một số hệ thống (ngân hàng) đều thiết lập autocomplete “off” (tắt).

<h4>Một HTML form với thuộc tính autocomplete được bật lên (và chỉ tắt với 1 trường) --- dammio.com</h4>
<form action="/action_page.php" autocomplete="on">
  Tên (on): <input type="text" name="ten"><br>
  Họ (on): <input type="text" name="ho"><br>
  E-mail (off): <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Thuộc tính novalidate
Thuộc tính này đặc tả dữ liệu form không cần phải kiểm tra tính chính xác dữ liệu khi gửi đi.

<h4>Thuộc tính novaldate --- dammio.com</h4>
<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 này mô tả một trường dữ liệu nên được tự động tập trung chú ý của người dùng khi trang hiển thị lên. Ví dụ khi trang mới tải lên, trường dữ liệu sẽ hiển thị con trỏ chuột nhấp nháy để người dùng nhập dữ liệu vào.

Trường username sẽ nhận được sự chú ý (tập trung) khi trang vừa tải lên: <br/>
Username :<input type="text" name="usename" autofocus>

Thuộc tính form
Thuộc tính form dùng để mô tả các phần tử input thuộc về form nào (nếu sử dụng các phần tử này ngoài form). Để sử dụng nhiều form, bạn có thể dùng nhiều phần tử form với các id khác nhau.

Trường "họ" nằm ngoài phần tử form nhưng vẫn thuộc về form này do đặt thuộc tính id="form1". --- dammio.com <br/>

<form action="/action_page.php" id="form1">
  Tên: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Họ: <input type="text" name="lname" form="form1">

Thuộc tính formaction
Thuộc tính này mô tả 1 đường dẫn URL sẽ xử lý điều khiển input khi form được submit. Thuộc tính formaction sẽ ghi đè lên thuộc tính action và được dùng với hai kiểu: type=”submit” và type=”image”.

Một form HTML với 2 nút submit chứa 2 hành động đến 2 trang khác nhau (action1.php và action2.php) --- dammio.com: </br>

<form action="/action1.php">
  Tên: <input type="text" name="fname"><br>
  Họ: <input type="text" name="lname"><br>
  <input type="submit" value="Submit 1"><br>
  <input type="submit" formaction="/action2.php"
  value="Submit 2">
</form>

Thuộc tính formenctype
Để dữ liệu form được mã hóa khi sumbmit, bạn có thể dùng thuộc tính formenctype. Thuộc tính này sẽ ghi đè lên thuộc tính enctype và dùng với hai kiểu: type=”submit” và type=”image”.

Gửi dữ liệu form được mã hóa mặc định (nút đầu tiên) và mã hóa dưới dạng "multipart/form-data" (nút thứ hai) --- dammio.com: </br>

<form action="/action_page_binary.asp" method="post">
  Tên: <input type="text" name="fname"><br>
  <input type="submit" value="Nút đầu tiên">
  <input type="submit" formenctype="multipart/form-data"
  value="Nút thứ hai: Multipart/form-data">
</form>

Thuộc tính formmethod
Thuộc tính formmethod định nghĩa phương thức HTML để gửi dữ liệu. Thuộc tính này sẽ ghi đè lên thuộc tính method với 2 kiểu: type=”submit” và type=”image”.

Nút "Submit dùng POST" sẽ submit form dạng POST (bảo mật hơn) và ghi đè phương thức HTTP của form --- dammio.com: <br/>

<form action="/action_page.php" method="get">
  Tên: <input type="text" name="fname"><br>
  Họ: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" value="Submit dùng POST">
</form>

Ngoài ra, chúng ta còn nhiều thuộc tính khác như formnovalidate, formtarget,… Các bạn có thể tham khảo thêm trên Internet.

Thuộc tính list
Thuộc tính list tham chiếu một phần tử datalist chứa các lựa chọn được định nghĩa trước cho 1 phần tử input.

Phần tử input với các giá trị được định nghĩa trước trong một datalist --- dammio.com: <br/>

Chọn trình duyệt bạn thích: <input list="trinhduyet">
<datalist id="trinhduyet">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Thuộc tính min, max
Hai thuộc tính này đặc tả giá trị tối thiểu và tối đa của một phần tử input. Thuộc tính min, max có thể áp dụng các dạng input sau: number, range, date, datetime-local, month, time và week.

Các dạng input dùng thuộc tính min, max --- dammio.com <br/>
Nhập ngày trước 1985-01-01: <br/>
<input type="date" name="bday" max="1984-12-31">

Nhập ngày sau 2001-01-01: </br>
<input type="date" name="bday" min="2001-01-02">

Số lượng (giữa 1 và 10): </br>
<input type="number" name="quantity" min="1" max="10">

Thuộc tính multiple
Để cho phép người dùng thêm một hay nhiều giá trị trong trường input, bạn có thể dùng thuộc tính multiple. Thuộc tính này dùng cho các dạng input như: email và file.

Một form tải ảnh lên chứa nhiều tập tin --- dammio.com: <br/>

Chọn ảnh: <input type="file" name="img" multiple>

Thuộc tính pattern
Để mô tả một biểu thức chính quy (regular expression), bạn có thể dùng thuộc tính pattern. Thuộc tính này dùng cho các dạng input: text, search, url, tel, email, và password.

Nhập mã quốc gia chỉ chứa 3 ký tự (không có số và ký tự đặc biệt) --- dammio.com: </br>
Mã quốc gia: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="3 ý tự mã quốc gia">

Thuộc tính placeholder
Thuộc tính này mô tả gợi ý mô tả giá trị mong đợi của 1 trường input trước khi người dùng nhập dữ liệu. Thuộc tính này áp dụng cho text, search, url, tel, email, và password.

Một trường dữ liệu với đoạn văn bản placeholder "Nhập tên": <br/>

<input type="text" name="fname" placeholder="Nhập tên">

Thuộc tính required
Để mô tả một trường nhập liệu bắt buộc phải có dữ liệu, bạn hãy dùng thuộc tính required. Thuộc tính này hoạt động với: text, search, url, tel, email, password, date pickers, number, checkbox, radio, và file.

Một trường nhập liệu dùng required --- dammio.com: <br/>
Tên: <input type="text" name="name" required>

Thuộc tính step
Thuộc tính này mô tả bước nhảy số của một phần tử input, ví dụ nếu step là 3, thì các bước nhảy là -4, 0, 4, 8, 12,…

Nhập dữ liệu hợp lệ với bước nhảy là 4 --- dammio.com
<input type="number" name="points" step="4">

Kết luận: Bài viết trình bày chi tiết các thuộc tính input kèm theo ví dụ. Mời bạn tiếp tục theo dõi bài tiếp theo để nghiên cứu hơn về HTML5.