Thẻ input trong HTML

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.

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 [kiso.vn]

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

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

<form>
    <h1> Login </h1>
    Username: <input type="text" name="username">
    <br />
    Password: <input type="passwword" name="passwword">
    <br />
    <input type="submit" name="submit" value="Login">
</form>

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

<form>
	<h1> Login </h1>
	Username: <input type="text" name="username" value="Nhập username" >
	<br />
	Password: <input type="passwword" name="passwword" value="Nhập password">
	<br />
	<input type="submit" name="submit" value="Đăng Nhập">
</form>

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.

Trình duyệt hỗ trợ:

• Chrome
• Firefox
• IE
• Safari
• Opera