Ngôn ngữ HTML - Thẻ input
10 thẻ input thường dùng trong HTML
Các thẻ input type chuyên dụng trong các form, dùng để nhập liệu, kiểu như: đăng ký, đăng nhập, liên hệ, gửi file…
Các input đều giống nhau về cấu trúc, chỉ khác nhau về type. Chính type này quyết định kiểu của input. Có đến hơn 20 type khác nhau. Một số type input chỉ được hỗ trợ trong HTML5
a. Hộp văn bản – Text box
<input Type="Text" Name="Tên" Value="Trị mặc định" Size="n" Maxlength="m">
n: chiều di Textbox tính bằng số ký tự.
m: Số ký tự tối đa có thể nhập.
b. Hộp văn bản – Password
<input Type="Password" Name="Tên" Value="Trị mặc định" Size="n" Maxlength="m">
n: chiều di Textbox tính bằng số ký tự.
m: Số ký tự tối đa có thể nhập.
c. Nút gửi dữ liệu – Submit Button
<Input Type="Submit" Value="Nhãn"> Hoặc <Button Type="Submit" Value="Nhãn">
Hoặc
</Button><Button Type="Submit"> <img="ảnh"> </Button>.
d. Nút hủy dữ liệu vừa nhập - Reset Button
<Input Type="Reset" Value="Nhãn" >
Ví dụ: Tạo trang đăng nhập:
<form>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center"><p><strong>ĐĂNG NHẬP DIỄN ĐÀN</strong></p></td>
</tr>
<tr>
<td width="156">Username: </td>
<td width="832"><input type="text" size="40" name="txtusername" maxlength="40"/></td>
</tr>
<tr>
<td>Mật khẩu:</td>
<td><input type="text" size="40" name="txtpassword" maxlength="50"/></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Đăng nhập" name="btnlogin"/>
<input type="reset" value="Làm lại" name="btnreset"/></td>
</tr>
</table>
</form>
</body>
Ví dụ : Tạo trang tìm kiếm :
<html><head><title></title></head>
<body>
<fORM name=f action="http://www.google.com.vn/search?+q">
<img src="images/google.jpg" Width=80> <INPUT size=20 name=q>
<input type="submit" value="Tìm kiếm">
</form>
</body></html>
e. Nút chọn – Radio Button
<Input Type="Radio" Name="Tên" Value="Tri" Checked>
f. Hộp kiểm Checkbox
<Input Type="CheckBox" Name="Tên" Value="Tri" Checked>
Value="Trị" : Giá trị On/ Off khi gửi lên Server.
Ví dụ: Tạo trang thăm dò ý kiến
<h3 align="center">PHIẾU THĂM DỊ Ý KIẾN</h3>
<form>
Tên đăng nhập:<input type="text" name="Ten" size="20">
Giới tính :
<input type="radio" value="1" name="phai" checked >Nam
<input type="radio" value="0" name="phai" >Nữ
<input type="radio" value="0" name="phai" >Khác<BR><BR>
Những mục bạn thường quan tâm trên Internet :
<input type="checkbox" name="C1" value="1">Tin tức<br>
<input type="checkbox" name="C3" value="1">Giải trí<br>
<input type="checkbox" name="C2" value="1">Học tập<br>
<input type="checkbox" name="C4" value="1">Mục khác<br>
<input type="submit" value="Gửi đi">
<input type="reset" value="Phục Hồi">
</form>
g. File đính kèm
<input type="file" name="txtfile">
h. Thẻ ẩn thông tin
<input type="hidden" name="txtname" >
i. Thẻ Email
Type này chỉ được hỗ trợ trong HTML5 – tuy nhiên nói là vậy thôi, chứ chúng ta cũng không phải lo gì cả, vì input email đã được support tốt bới các trình duyệt.
<input name="email" type="email" />
K. Thẻ number
Number là input cho phép người dùng chọn lựa những giá trị số trong khoảng xác định.
<input type="number" name="quality" min="0" max="10" />
Với min là giới hạn dưới, max là giới hạn trên, giá trị mà người dùng chọn chỉ có thể nằm trong khoảng mix -> max.