Trong bài này chúng ta sẽ tìm hiểu cách sử dụng thẻ input trong HTML, đây là thẻ dùng để lấy dữ liệu mà người dùng nhập vào.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Thẻ input có chức năng tạo một trường để người dùng có thể nhập dữ liệu đầu vào.

Thẻ input được sử dụng cùng với thẻ form để khai báo điều khiển đầu vào cho phép người dùng nhập dữ liệu.

Một trường input có thể thay đổi theo nhiều cách, phụ thuộc vào thuộc tính truyền vào.

Bài viết này được đăng tại [free tuts .net]

1. Cách sử dụng thẻ input

Ví dụ: Form đăng nhập với các trường input.

Code RUN

    
 Login 
    Username: 
    

    Password: 
    

    

Chúng ta có thể thấy rằng, với các giá trị khác nhau của thuộc tính type, trường input được hiển thị theo nhiều cách khác nhau.

2. Một số thuộc tính của thẻ input

Thuộc tính type

Type là thuộc tính quan trọng nhất của thẻ input, nó sẽ quy định tính năng của thẻ input đó.

Một số giá trị của type:

• text: trường nhập văn bản.
• password: trường nhập mật khẩu, các kí tự nhập sẽ bị che đi bằng các kí tự *.
• checkbox: ô checkbox.
• radio: Ô radio button
• submit: nút nhấn để submit form.

Một số giá trị trong HTML5:

• number: Kiểu number
• url: Kiểu đường dẫn trang web
• email: Kiểu email

Còn nhiều giá trị nữa nhưng ở đây mình chỉ liệt kê một số giá trị hay sử dụng nhất.

Thuộc tính value

Value cũng là một thuộc tính rất quan trọng của thẻ input, nó quy định giá trị của thẻ input.

Ví dụ: thuộc tính value của thẻ input

Code RUN

	
 Login 
	Username: 
	

	Password: 
	

	

Thuộc tính pattern:

Đây là thuộc tính rất hay, được thêm vào kể từ phiên bản HTML5.

Thuộc tính này giúp ta tạo ra các chuỗi pattern dùng để validate dữ liệu khi submit form. Xem thêm trong bài viết validate form bằng HTML5 để hiểu rõ hơn.

Hiển thị dạng ngày tháng theo vùng, giúp cho việc lựa chọn ngày tháng theo vùng thuận tiện và chính xác hơn.

Trình duyệt hỗ trợ

Hệ điều hành của thiết bị di động và máy tính bảng

Các thuộc tính Global

Thẻ này hỗ trợ tất cả các thuộc tính Global được miêu tả trong chương: Tổng hợp thuộc tính trong HTML

Ví dụ và cách sử dụng thẻ input với tất cả các kiểu type: text, submit, radio, checkbox, number, date, color, range, month... trong HTML.

Thẻ input trong HTML

« Bài TrướcBài Tiếp »

Thuộc tính type trong thẻ input

Bài này sẽ đề cập đến tất cả các giá trị của thuộc tính type trong thẻ input.

Kiểu text

tạo ra một dòng giúp người dùng nhập liệu:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

 

Họ:

Tên:

 

Lưu ý: mặc định bản thân form không hiển thị ra bên ngoài, chỉ các thành phần trong form hiển thị.

 

Chiều dài khung nhập liệu kiểu text mặc định là 20 ký tự.

 

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Họ:

Tên:

Kiểu password

tạo ra một dòng để người dùng nhập mật khẩu:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

 

Tên đăng nhập:

Mật khẩu:

 

Những ký tự trong ô mật khẩu sẽ được che đi [bằng dấu hoa thị hoặc chấm tròn].

 

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Tên đăng nhập:

Mật khẩu:

Những ký tự trong ô mật khẩu sẽ được che đi [bằng dấu hoa thị hoặc chấm tròn].

Kiểu submit

giúp bạn tạo một nút nhấn để gửi thông tin mà người dùng đã nhập vào.

Những thông tin này sau đó sẽ được gửi tới máy chủ để xử lý và trả về kết quả.

Thuộc tính action của form sẽ quyết định thông tin được gửi đi đâu:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

 

Họ:

Tên:

 

Nếu bạn nhấn vào nút "Gửi", dữ liệu trong form sẽ được chuyển tới trang "action_page.php".

 

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Họ:
Tên:

Nếu thiếu giá trị value trong thẻ input subit, nút sẽ lấy giá trị mặc định:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

 

Họ:

Tên:

 

Demo

Kiểu radio

giúp bạn tạo một nút nhấn radio.

Nút radio chỉ cho phép người dùng chọn MỘT trong số các lựa chọn:

1

2

3

4

5

6

7

8

9

10

11

12

 

Nam

Nữ

 

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Nam

Nữ

Kiểu checkbox

giúp bạn tạo một ô tích giá trị.

Người dùng có thể chọn nhiều hơn một giá trị hoặc không chọn giá trị nào.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

 

Tôi có một chiếc xe đạp

Tôi có một chiếc ô tô

 

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Tôi có một chiếc xe đạp

Tôi có một chiếc ô tô

Thẻ

Thẻ được sử dụng để tạo nút nhấn:

1

2

3

4

5

6

7

8

 

Nhấn vào đây!

 

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Nhấn vào đây!

Các kiểu input trong HTML5

HTML5 đã thêm những kiểu input sau:

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

Những kiểu input không được hỗ trợ trong những trình duyệt cũ sẽ trở thành kiểu input text.

Kiểu number

Thẻ tạo ô nhập liệu chỉ có giá trị là số.

Bạn có thể thiết lập điều kiện các số được nhập vào.

Những điều kiện của bạn có được áp dụng hay không thì còn tùy thuộc vào sự hỗ trợ của trình duyệt.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

 

Phụ thuộc vào sự hỗ trợ của trình duyệt:

Mà những điều kiện của bạn có được áp dụng hay không.

 

Nhập vào số từ 1 đến 5:

 

Lưu ý: type="number" không được hỗ trợ trong trình duyệt từ IE9 trở về trước.

 

Demo

Điều kiện trong thẻ input

Dưới đây là danh sách các điều kiện phổ biến được sử dụng trong thẻ input [có một vài điều kiện mới thuộc HTML5]:

Thuộc tínhMiêu tảdisabledKhóa thẻ inputmax Giá trị lớn nhất có thể nhập vào trong thẻ inputmaxlengthSố ký tự tối đa có thể nhập vào trong thẻ inputmin Giá trị nhỏ nhất có thể nhập vào trong thẻ inputpattern Kiểm tra dự liệu nhập vào có đúng theo định dạng mẫu hay khôngreadonlyDữ liệu chỉ có tác dụng hiển thị [không thể thay đổi]required Ô nhập liệu bắt buộc [không được bỏ trống]sizeQuy định chiều dài của khung nhập liệu [đơn vị là ký tự, không phải px]step Quy định mức nhảy cho ô nhập liệu [dự liệu nhập vào phải là bội số của step]valueThiết lập giá trị mặc định của ô nhập liệu

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

 

Phụ thuộc vào sự hỗ trợ của trình duyệt:

Các bước nhảy số có được áp dụng hay không.

 

Nhập số:

 

Lưu ý: type="number" không được hỗ trợ trong trình duyệt từ IE9 trở về trước.

 

Demo

Kiểu date

Thẻ tạo ô nhập liệu chỉ có giá trị là ngày tháng.

Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn ngày tháng trong phần nhập liệu.

Kiểu date chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

 

Nếu trình duyệt hỗ trợ:

Bạn sẽ nhìn thấy khung chọn ngày tháng trong phần nhập liệu.

 

Ngày sinh:

 

Lưu ý: type="date" chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

 

Demo

Ngoài ra, bạn có thể thêm một số điều kiện khi nhập ngày tháng:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

 

Nhập ngày sinh trước 01/01/1980:

Nhập ngày sinh sau 01/01/2000:

 

Lưu ý: type="date" chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

 

Demo

Kiểu color

Thẻ tạo ô nhập liệu chỉ chứa giá trị là màu.

Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn màu trong phần nhập liệu.

Kiểu color chưa được hỗ trợ trong trình duyệt Internet Explorer và Safari.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

 

Nếu trình duyệt hỗ trợ:

Bạn sẽ nhìn thấy khung chọn màu trong phần nhập liệu.

 

Chọn màu yêu thích của bạn:

 

Lưu ý: type="color" chưa được hỗ trợ trong trình duyệt Internet Explorer và Safari.

 

Demo

Kiểu range

Thẻ tạo ô nhập liệu chỉ chứa giá trị trong một khoảng nhất định.

Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy thanh kéo thay vì ô nhập liệu.

Kiểu range không được hỗ trợ trong các trình duyệt Internet Explorer 9 trở về trước.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

 

Nếu trình duyệt hỗ trợ:

bạn sẽ nhìn thấy thanh kéo thay vì ô nhập liệu.

 

Điểm:

 

Lưu ý:

type="range" không được hỗ trợ trong các trình duyệt Internet Explorer 9 trở về trước.

 

Demo

Bạn có thể thêm một số điều kiện trong thẻ input range như: min, max, step, value.

Kiểu month

Thẻ tạo ô nhập liệu cho phép người dùng chọn tháng và năm.

Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn tháng năm trong phần nhập liệu.

Kiểu month chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

 

Nếu trình duyệt hỗ trợ:

Bạn sẽ nhìn thấy khung chọn tháng năm.

 

Nhập ngày sinh [tháng và năm]:

 

Lưu ý:

type="month" chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

 

Demo

Kiểu week

Thẻ tạo ô nhập liệu cho phép người dùng chọn tuần trong năm.

Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn tuần trong năm ở phần nhập liệu.

Kiểu week chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

 

Nếu trình duyệt hỗ trợ:

Bạn sẽ nhìn thấy khung tuần và năm.

 

Chọn tuần:

 

Lưu ý:

type="week" chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

 

Demo

Kiểu time

Thẻ tạo ô nhập liệu cho phép người dùng chọn thời gian [không có múi giờ].

Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn thời gian trong phần nhập liệu.

Kiểu time chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

 

Nếu trình duyệt hỗ trợ:

Bạn sẽ nhìn thấy khung chọn thời gian.

 

Chọn thời gian:

 

Lưu ý:

type="time" chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

 

Demo

Kiểu datetime

Thẻ tạo ô nhập liệu cho phép người dùng chọn thời gian và ngày tháng [có múi giờ].

Kiểu input datetime đã bị gỡ bỏ khỏi chuẩn HTML. Bạn sử dụng kiểu datetime-local để thay thế.

Kiểu datetime-local

Thẻ tạo ô nhập liệu cho phép người dùng chọn thời gian và ngày tháng [không có múi giờ].

Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn thời gian và ngày tháng trong phần nhập liệu.

Kiểu datetime-local chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

 

Nếu trình duyệt hỗ trợ:

Bạn sẽ nhìn thấy khung chọn thời gian và ngày tháng.

 

Chọn ngày sinh [thời gian và ngày tháng]:

 

Lưu ý:

type="datetime-local" chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

 

Demo

Kiểu email

Thẻ tạo ô nhập liệu chỉ chứa giá trị là email.

Nếu trình duyệt hỗ trợ, địa chỉ email sẽ tự động được kiểm tra khi nhấn submit.

Một số điện thoại thông minh có thể nhận dạng kiểu email  và thêm nút “.com” trên bàn phím ảo.

Kiểu email không được hỗ trợ trong trình duyệt Internet Explorer 9 [cùng các phiên bản trước đó] và Safari.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

 

Nhập E-mail:

 

Lưu ý:type="email" không được hỗ trợ trong trình duyệt Internet Explorer 9 [cùng các phiên bản trước đó] và Safari.

 

Demo

Kiểu search

Thẻ  tạo ô nhập liệu tìm kiếm.

Kiểu search không được hỗ trợ trong trình duyệt Internet Explorer, Firefox và Opera.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

 

Từ khóa tìm kiếm:

 

Lưu ý:

type="search" chưa được hỗ trợ trong trình duyệt Internet Explorer, Firefox và Opera.

 

Demo

Kiểu tel

Thẻ tạo ô nhập liệu chỉ chứa giá trị là số điện thoại.

Hiện tại kiểu tel chỉ được hỗ trợ trên trình duyệt Safari 8.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

 

Số điện thoại:

 

Lưu ý: type="tel" chỉ được hỗ trợ trên trình duyệt Safari 8.

 

Demo

Kiểu url

Thẻ tạo ô nhập liệu chỉ chứa giá trị là địa chỉ web.

Nếu trình duyệt hỗ trợ, địa chỉ sẽ tự động được kiểm tra khi nhấn submit.

Một số điện thoại thông minh có thể nhận dạng kiểu url và thêm nút “.com” trên bàn phím ảo.

Kiểu url không được hỗ trợ trong trình duyệt Internet Explorer 9 [cùng các phiên bản trước đó] và Safari.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

 

Địa chỉ website của bạn:

 

Lưu ý:

type="url" không được hỗ trợ trong trình duyệt Internet Explorer 9 [cùng các phiên bản trước đó] và Safari.

 

Demo

Bài tập

Bài tập 1 Bài tập 2 Bài tập 3 Bài tập 4 Bài tập 5

« Bài TrướcBài Tiếp »

button checkbox color date datetime datetime-local email input month number password radio range search submit tel time url week