[HTML/HTML5] Phần 32: Các dạng Input

Bài này sẽ mô tả 1 số dạng input của phần tử input.

Dạng input văn bản
Bạn có thể dùng input type=”text” để định nghĩa trường văn bản 1 dòng. Ví dụ sau định nghĩa 2 trường văn bản nhập vào tên và họ.

<p>Dạng input văn bản --- dammio.com</p>
<form>
  Tên:<br>
  <input type="text" name="firstname"><br>
  Họ:<br>
  <input type="text" name="lastname">
</form>

Dạng input mật khẩu
Để định nghĩa input dạng mật khẩu, hãy dùng cú pháp input type=”password”.

<p>Dạng input mật khẩu --- dammio.com</p>
<form>
  Họ tên:<br>
  <input type="text" name="username"><br>
  Mật khẩu:<br>
  <input type="password" name="psw">
</form>

Dạng input submit
Dùng input type=”submit” để định nghĩa nút nhấn cho việc gửi (submit) dữ liệu form đến một xử lý form (form-handler). Form-handler điển hình là một trang web server với một đoạn mã kịch bản để xử lý dữ liệu đầu vào và được đặc tả ở thuộc tính action của form. Ví dụ gửi dữ liệu Họ và Tên đến trang form_action.php để xử lý dữ liệu form.

<p>Dạng input submit --- dammio.com</p>
<form action="/form_action.php">
  Tên:<br>
  <input type="text" name="firstname" value="Dammio"><br>
   Họ:<br>
  <input type="text" name="lastname" value="Ta"><br><br>
  <input type="submit" value="Gửi">
</form>

Nếu bạn bỏ qua thuộc tính giá trị nút submit, nút sẽ tự động nhận một giá trị mặc định.

Dạng input reset
Bạn hãy dùng input type=”reset” để định nghĩa một nút thiết lập lại tất cả dữ liệu form về giá trị mặc định.

<p>Dạng input reset --- dammio.com</p>
<form action="/action_page.php">
  Họ:<br>
  <input type="text" name="firstname" value="Dammio"><br>
  Tên:<br>
  <input type="text" name="lastname" value="Ta"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

Dạng input radio
Để định nghĩa kiểu nút radio thì chúng ta có thể dùng input type=”radio”. Các nút radio cho phép người dùng chọn 1 trong các lựa chọn. Ví dụ, chọn giới tính nam, nữ hoặc khác.

<p>Dạng input radio -- dammio.com</p>
<form>
  <input type="radio" name="gender" value="nam" checked> Male<br>
  <input type="radio" name="gender" value="nữ"> Female<br>
  <input type="radio" name="gender" value="les/gay"> Khác
</form>

Dạng input checkbox
Tương tự như các phần trước, đoạn mã input type=”checkbox” để định nghĩa 1 checkbox. Checkbox cho phép người không chọn hoặc nhiều lựa chọn.

<p>Dạng input checkbox -- dammio.com</p>
<form>
  <input type="checkbox" name="color1" value="blue"> Blue color<br>
  <input type="checkbox" name="color2" value="red"> Red color 
</form>

Dạng input button
Để định nghĩa một nút nhấn, bạn có thể dùng input type=”button”:

<p>Dạng input checkbox -- dammio.com</p>
<input type="button" onclick="alert('Xin chào!')" value="Nhấn nút này!">

Các dạng input HTML5
Trong HTML5, có một vài dạng input mới như sau:

• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Lưu ý một số dạng input sẽ không được hỗ trợ bởi các trình duyệt phiên bản cũ, do đó nó được xem là dạng input type=”text” ở các trình duyệt này.

Dạng input color
Dạng input này được dùng cho các trường nhập liệu chứa một màu sắc nào đó. Tùy theo trình duyệt, một trường chọn màu có thể hiển thị ở trường nhập liệu.

<form>
  Chọn màu bạn ưa thích --- dammio.com:
  <input type="color" name="favcolor">
</form>

Dạng input date
Để hiển thị ngày, bạn hãy dùng đoạn mã input type=”date”. Tùy theo trình duyệt, trường chọn ngày có thể hiển thị hay không.

<form>
  Chọn ngày sinh nhật --- dammio.com:
  <input type="date" name="bday">
</form>

Bạn có thể thêm các giới hạn trong việc lựa chọn ngày như sau.

<form>
  <p>Dạng input date --- dammio.com</p>
  Chọn ngày trước 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Chọn ngày trước 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

Dạng input datetime-local
Để đặc tả trường nhập liệu chứa ngày và giờ mà không có múi giờ, bạn hãy dùng input type=”datetime-local”. Tùy theo trình duyệt, trường này có thể hiển thị đúng hay không.

<form>
  Sinh nhật (ngày và giờ) --- dammio.com:
  <input type="datetime-local" name="bdaytime">
</form>

Dạng input email
Để định nghĩa một trường nhập liệu chỉ chứa địa chỉ email, hãy dùng input type=”email”. Tùy theo trình duyệt, trường này có thể hiển thị đúng hay không.

<form>
  E-mail --- dammio.com:
  <input type="email" name="email">
</form>

Dạng input month
Tương tự ngày, đoạn mã input type=”month” cho phép người dùng chọn tháng và năm.

<form>
  Ngày sinh nhật (tháng và năm) --- dammio.com:
  <input type="month" name="bdaymonth">
</form>

Dạng input number
Nếu muốn trường nhập liệu chỉ là kiểu số (number), bạn có thể định nghĩa input type=”number”. Bạn cũng có thể thiết lập các giới hạn vùng số được chấp nhận. Ví dụ chỉ cho phép người dùng nhập các số từ 1 đến 10.

<form>
  Nhập số (từ 1 đến 10) --- dammmio.com:
  <input type="number" name="quantity" min="1" max="10">
</form>

Các giới hạn nhập liệu
Sau đây là danh sách một số giới hạn (restriction) nhập liệu phổ biến (một số mới ở HTML5):

• disabled: vô hiệu hóa trường nhập liệu
• max: giá trị tối đa của trường nhập liệu
• maxlength: số ký tự tối đa của trường nhập liệu
• min: giá trị tối thiểu của trường nhập liệu
• pattern: đặc tả 1 biểu thức chính quy để kiểm tra giá trị input
• readonly: đặc tả trường nhập liệu chỉ đọc (không được thay đổi)
• required: đặc tả trường nhập liệu phải có dữ liệu
• size: đặc tả chiều rộng (số ký tự) của trường nhập liệu
• step: đặc tả khoảng số hợp lệ của trường nhập liệu
• value: đặc tả giá trị mặc định

Ví dụ sau hiển thị một trường nhập liệu số với giá trị từ 0 đến 100, mỗi bước cách nhau 10 đơn vị. Giá trị mặc định là 30.

<form>
  Nhập dữ liệu số --- dammio.com:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Dạng input range
Đoạn mã input type=”range” định nghĩa một điều khiển để nhập một số không cần chính xác giá trị (giống như một thanh trượt).

<form>
 <p>Dạng input range với giá trị tối thiểu là 0, tối đa là 100. --- dammio.com</p>
  <input type="range" name="points" min="0" max="100">
</form>

Dạng input search
Để định nghĩa trường nhập liệu tìm kiếm, hãy dùng đoạn mã input type=”search”.

<form>
   Tìm kiếm Google --- dammio.com:
  <input type="search" name="googlesearch">
</form>

Dạng input tel
Đoạn mã input type=”tel” để định nghĩa trường nhập liệu chứa số điện thoại. Dạng tel hiện chỉ hỗ trợ ở trình duyệt Safari 8.

<form>
  Số điện thoại --- dammio.com:
  <input type="tel" name="usrtel">
</form>

Ngoài ra, còn có các kiểu khác như dạng input time, url, week dùng để hiển thị thời gian, địa chỉ url, và tuần.

Kết luận: Bài viết này trình bày khá đầy đủ về các dạng input trong HTML/HTML5. Hi vọng bạn nắm vững để áp dụng cho việc thiết kế giao diện website, đặc biệt làm form nhập liệu tốt hơn.