NTM Solutions

Thứ Hai, 5 tháng 12, 2016

Khóa học HTML - Bài 24 - Xử lý kiểu nhập liệu

Bài này mô tả các kiểu nhập liệu khác nhau trong thẻ <input>.

Kiểu nhập liệu văn bản

<input type="text"> xác định 01 vùng nhập liệu có 01 dòng:

Ví dụ:
<form>
  First name:
<br>
  
<input type="text" name="firstname"><br>
  Last name:
<br>
  
<input type="text" name="lastname">
</form>
Đây là hình ảnh hiển thị trên trình duyệt:



Kiểu nhập liệu Password

<input type="password"> xác định 01 ô nhập mật khẩu.

Ví dụ:
<form>
  User name:
<br>
  
<input type="text" name="username"><br>
  User password:
<br>
  
<input type="password" name="psw">
</form>
Trên trình duyệt đoạn mã trên sẽ hiển thị như sau:

User name:

User password:
The characters in a password field are masked (shown as asterisks or circles).

Kiểu nhập liệu Submit

<input type="submit"> xác định 01 nút để gửi dữ liệu đến trang xử lý.

Trang xử lý thông thường là 01 trang đặt trên máy chủ có 01 đoạn mã xử lý dữ liệu của form.

Trang xử lý được xác định trong thuộc tính action.

Ví dụ:
<form action="action_page.php">
  First name:
<br>
  
<input type="text" name="firstname" value="Mickey"><br>
  Last name:
<br>
  
<input type="text" name="lastname" value="Mouse"><br><br>
  
<input type="submit" value="Submit">
</form>
Sau đây là hình ảnh trên trình duyệt:
First name:

Last name:



Nếu ta không nhập gì vào thuộc tính value của thẻ submit, thì nút sẽ lấy giá trị mặc định.

Ví dụ:
<form action="action_page.php">
  First name:
<br>
  
<input type="text" name="firstname" value="Mickey"><br>
  Last name:
<br>
  
<input type="text" name="lastname" value="Mouse"><br><br>
  
<input type="submit">
</form>

Kiểu nhập liệu Reset

<input type="reset"> xác định 01 nút reset sẽ reset tất cả giá trị trong form về mặc định.

Ví dụ:
<form action="action_page.php">
  First name:
<br>
  
<input type="text" name="firstname" value="Mickey"><br>
  Last name:
<br>
  
<input type="text" name="lastname" value="Mouse"><br><br>
  
<input type="submit" value="Submit">
  
<input type="reset">
</form>
Sau đây là hình ảnh hiển thị trên trình duyệt:
First name:

Last name:





Kiểu nhập liệu Radio

<input type="radio"> xác định 01 nút radio.

Các nút Radio cho phép người dùng chọn lựa chỉ 01 trong số các tùy chọn.

Ví dụ:
<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>
Sau đây là hình ảnh hiển thị trên trình duyệt:


Kiểu nhập liệu Checkbox

<input type="checkbox"> xác định 01 checkbox.
Các checkbox cho phép người dùng không chọn gì cả hoặc nhiều chọn lựa trong số các tùy chọn.

Ví dụ:
<form>
  
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  
<input type="checkbox" name="vehicle2" value="Car"> I have a car </form>
Sau đây là hình ảnh hiển thị trên trình duyệt:

 I have a bike 
 I have a car

Kiểu nhập liệu Button

<input type="button"> xác định 01 nút nhấn.

Ví dụ:
<input type="button" onclick="alert('Xin chào!!')" value="Bấm vào đây!!">
Sau đây là hình ảnh hiển thị trên trình duyệt:

Các kiểu nhập liệu trong HTML5

HTML5 bổ sung 01 vài kiểu nhập liệu mới:
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
Các kiểu nhập liệu mới không được các trình duyệt đời cũ hỗ trợ sẽ chuyển sang hiển thị dạng nhập liệu text <input type="text">.

Kiểu nhập liệu Số

Thẻ <input type="number"> xác định 01 ô nhập liệu kiểu số.

Bạn cũng có thể thiết lập giới hạn các con số được phép nhập.

Ví dụ sau hiển thị 01 ô nhập số , nơi bạn có thể nhập từ 1 đến 5.
<form>
  Quantity (between 1 and 5):
  
<input type="number" name="quantity" min="1" max="5">
</form>

Giới hạn giá trị nhập liệu

Đây là danh sách 01 vài thuộc tính dùng để giới hạn dữ liệu nhập (bao gồm cả HTML5):

Thuộc tính
Mô tả
disabled
Xác định rằng 01 ô nhập liệu sẽ bị vô hiệu.
max
Xác định giá trị tối đa cho ô nhập liệu.
maxlength
Xác định độ dài ký tự tối đa cho ô nhập liệu.
min
Xác định giá trị nhỏ nhất cho ô nhập liệu.
pattern
Xác định 01 biểu thức để kiểm tra giá trị nhập vào 01 lần nữa.
readonly
Xác định 01 ô nhập liệu chỉ đọc (không thể thay đổi)
required
Xác định rằng 01 ô nhập liệu là bắt buộc (phải điền vào)
size
Xác định bề rộng của 01 ô nhập liệu (tính bằng số ký tự)
step
Xác định số bước nhảy cho 01 ô nhập liệu.
value
Xác định giá trị mặc định của ô nhập liệu.

Chúng ta sẽ học thêm về các giới hạn nhập liệu trong bài tiếp theo.

Ví dụ sau hiển thị 01 ô nhập số , nơi bạn có thể nhập từ 0 đến 100, bước nhảy là 10.

Giá trị mặc định là 30.
<form>
  Quantity:
  
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Kiểu nhập liệu Ngày Tháng

Thẻ <input type="date"> được dùng để nhập ngày tháng.

Tùy thuộc vào trình duyệt hỗ trợ, 01 đối tượng date picker có thể hiện ra để nhập liệu.

Ví dụ:
<form>
  Birthday:
  
<input type="date" name="bday">
</form>
Bạn cũng có thể giới hạn khoảng ngày tháng nhập liệu.

Ví dụ:
<form>
  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>
</form>

Kiểu nhập liệu Bảng màu

Thẻ <input type="color"> được dùng để nhập liệu màu sắc.

Tùy thuộc vào trình duyệt hỗ trợ, 01 đối tượng color picker sẽ hiện ra cho người sử dụng chọn.

Ví dụ:
<form>
  Select your favorite color:
  
<input type="color" name="favcolor">
</form>

Kiểu nhập liệu dãy các giá trị

Thẻ <input type="range"> được dùng để nhập 01 giá trị trong 01 khoảng nào đó.

Tùy thuộc vào trình duyệt hỗ trợ, 01 đối trượng dạng thanh trượt sẽ được hiển thị cho người dùng thao tác.

Ví dụ:
<form>
  
<input type="range" name="points" min="0" max="10">
</form>
Bạn cũng có thể sử dụng các thuộc tính giới hạn dữ liệu: min, max, step, value.

Kiểu nhập liệu Tháng

Thẻ <input type="month"> cho phép người dùng chọn 01 tháng trong năm.

Tùy thuộc vào trình duyệt hỗ trợ, 01 đối tượng date picker sẽ hiển ra cho người dùng chọn tháng.

Ví dụ:
<form>
  Birthday (month and year):
  
<input type="month" name="bdaymonth">
</form>

Kiểu nhập liệu Tuần

Thẻ <input type="week"> cho phép người dùng chọn 01 tuần trong năm.

Tùy thuộc vào trình duyệt hỗ trợ, 01 đối tượng date picker sẽ hiển thị cho người dùn g chọn.

Ví dụ:
<form>
  Select a week:
  
<input type="week" name="week_year">
</form>

Kiểu nhập liệu Giờ

Thẻ <input type="time"> cho phép người dùng chọn thời gian (không có múi giờ).

Tùy thuộc vào trình duyệt hỗ trợ, 01 đối tượng time picker sẽ hiển thị để người dùng thao tác.

Ví dụ:
<form>
  Select a time:
  
<input type="time" name="usr_time">
</form>

Kiểu nhập liệu Datetime-local

Thẻ <input type="datetime-local"> xác định 01 ô nhập liệu ngày và giờ, không bao gồm múi giờ.

Tùy vào trình duyệt hỗ trợ, 01 đối tượng date picker sẽ hiển thị cho người dùng chọn.

Ví dụ:
<form>
  Birthday (date and time):
  
<input type="datetime-local" name="bdaytime">
</form>

Kiểu nhập liệu Email

Thẻ <input type="email"> được dùng để nhập 01 địa chỉ mail.

Tùy vào trình duyệt hỗ trợ, địa chỉ mail sẽ tự động được kiểm tra tính hợp lệ khi form submit.

Vài smartphones tự nhận biết kiểu dữ liệu email, và thêm ".com" vào bàn phím nhập liệu.

Ví dụ:
<form>
  E-mail:
  
<input type="email" name="email">
</form>

Kiểu nhập liệu Search

Thẻ <input type="search"> được dùng cho ô tìm kiếm (01 ô tìm kiếm được hiển thị như là 01 ô văn bản thông thường).

Ví dụ:
<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

Kiểu nhập liệu Số điện thoại

Thẻ <input type="tel"> được dùng để nhập số điện thoại.

Thẻ này hiện nay chỉ được hỗ trợ bởi trình duyệt Safari 8.

Ví dụ:
<form>
  Telephone:
  
<input type="tel" name="usrtel">
</form>

Kiểu nhập liệu Url

Thẻ <input type="url"> được dùng để nhập điạ chỉ URL.

Tùy thuộc vào trình duyệt hỗ trợ, giá trị url có thể tự động được kiểm tra tính hợp lệ khi form submit.

Vài smartphones tự nhận biết kiểu url, và tự thêm ".com" vào bàn phím nhập liệu.

Ví dụ:
<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

Tác giả : #drM

Nguồn: Sưu Tầm

1 nhận xét:

Facebook Youtube RSS