Bài 07: Các thẻ Input trong HTML

• Thẻ input text: Cho phép người dùng nhập văn bản trên một dòng.
• Thẻ input file: Cho phép người dùng chọn một hoặc nhiều file để tải nên server-side.
• Thẻ input radio: Cho phép người dùng lựa chọn một trong nhiều lựa chọn được cung cấp.
• Thẻ input checkbox: Cho phép người dùng chọn nhiều lựa chọn được cung cấp.
• Thẻ input button: Cho phép người dùng click vào.
• Thẻ input password: Cho phép người dùng nhập một chuỗi và nó được che đi bởi các ký hiệu mà người dùng không thể thấy.
• Thẻ input number: Cho phép người dùng nhập vào một số.
• Thẻ input email cho phép người dùng nhập vào địa chỉ email
• Thẻ input color: Cho phép người dùng chọn màu sắc.

1. Cấu trúc của thẻ input.

<input type="" name="" value="" />

Trong đó:

• Thẻ input là thẻ khuyết.
• type: Thuộc tính quy định thẻ input này thuộc loại nào trong số dánh sách thẻ input trên.
• name: Thuộc tính này quy định tên của thẻ input.
• value: Giá trị của thẻ input đó(Một chuỗi, một số...)

Lưu ý:

Thông thường thì những thẻ Input sẽ đi cùng với một nhãn <label>. Khi chúng ta click vào label này thì tự động con trỏ sẽ focus vào thẻ input. Để làm được điều này bạn cần sử dụng một id cho thẻ input và sử dụng thuộc tính for của <label> liên kết với thuộc tính id đó.

<label for="txt_username">Họ và tên</label>
<br />
<input type="text" name="username" id="txt_username" />

Xem kết quả

2. Các thẻ input thông dụng

2.1 Thẻ input text

Cho phép người dùng nhập văn bản trên một dòng.

Họ và tên đệm
<br />
<input type="text" name="firstName" value="Nguyễn Văn" />
<br />
Tên
<br />
<input type="text" name="lastName" value="A" />

Xem kết quả

2.2 Thẻ input password.

Nó cũng giống với thẻ input text, Thẻ này cho phép người dùng nhập một chuỗi và nó được che đi bởi các ký hiệu mà người dùng không thể thấy.

Password<br />
<input type="password" name="password" value="123456" />

Xem kết quả

2.3 Thẻ input radio.

 Thẻ input radio cho phép người dùng chọn một trong nhiều sự lựa chọn.

Giới tính:
<br />
<input type="radio" name="gender" value="male" checked /> Nam
<br />
<input type="radio" name="gender" value="female" /> Nữ

Xem kết quả

2.4 Thẻ input checkbox

Cũng giống với thẻ radio thì thẻ checkbox cho phép người dùng chọn nhiều lựa chọn được cung cấp.

Lựa chọn ngôn ngữ:
<br />
<input type="checkbox" name="language[]" value="php"  /> Học PHP
<br />
<input type="checkbox" name="language[]" value="mysql"  /> Học MySQL
<br />
<input type="checkbox" name="language[]" value="js" /> Học Javascript
<br />
<input type="checkbox" name="language[]" value="html" /> Học HTML

Xem kết quả

2.5 Thẻ input file.

Cho phép người dùng chọn một hoặc nhiều file để tải nên server-side.

Lựa chọn File.<br />
<input type="file" name="attachments" />

Xem kết quả

2.6 Thẻ input number.

Cũng giống như thẻ input text, Thẻ input number sẽ hiển thị bộ bàn phím cho phép người dùng nhập vào số khi sử dụng điện thoại, máy tính bảng.

Tổng tiền thành toán.<br />
<input type="number" name="totalgrand" value="100" />

Xem kết quả

2.7 Thẻ input email.

Cũng giống như thẻ input text, Thẻ input email sẽ hiển thị bộ bàn phím cho phép người dùng nhập vào địa chỉ email khi sử dụng điện thoại, máy tính bảng.

Địa chỉ email.<br />
<input type="email" name="email" value="info@chiasephp.net" />

Xem kết quả

2.8 Thẻ input color:

Cho phép người dùng chọn màu sắc.

Chọn màu nền <br />
<input type="color" name="backgroundcolor" />

Xem kết quả

2.9 Thẻ input button và thẻ <button>

Cho phép người dùng click vào để bắt đầu thực hiện một số hành động gửi dữ liệu nên server-side hay xóa dữ liệu trên các điều khiển.

Trong HTML có 3 loại button như sau:

• button: Không có hành động gì, xây dựng những hành động tự định nghĩa
• submit: Gửi dữ liệu nên server-side.
• reset: Xóa dũ liệu đã nhập có trong các điều khiển nhập liệu của FORM

<style type="text/css">
	label{ display:inline-block; awidth:80px;}
</style>
<form method="post" action="/xu_ly_login.php">
	<label for="txt_username">Tài khoản</label>
    <input type="text" maxlength="255" name="username" id="txt_username" />
    <br />
    <label for="txt_username">Mật khẩu</label>
    <input type="password" maxlength="25" name="password" id="txt_password" />
    <br />
    <input type="submit" name="submit" value="Gửi" />
    <input type="reset" name="reset" value="Xóa" />
</form>

Xem kết quả

Tổng kết.

Qua bài viết này mình đã giới thiệu tới các bạn các thẻ Input trong HTML. Bài viết tiếp theo mình sẽ hướng dẫn cho các bạn thẻ FORM trong HTML.