INPUT
Input dạng text
<input type="text" name="" value="" size="30" />
Sử dụng để nhập giá trị text.
Input dạng text - sử dụng maxlength
<input type="text" name="" value="" size="30" maxlength="20" />
Xác định số ký tự nhiều nhất được phép nhập của một trường text hay password.
Input dạng text - sử dụng readonly
<input type="text" name="" value="" size="30" readonly="readonly" />
Sử dụng khi giá trị text chỉ dùng để đọc, không được thay đổi.
Input dạng password
<input type="password" name="" value="" size="30" />
Text hiển thị bên trong dưới dạng password.
<input type="password" name="" value="myPasssword" size="30" />
Input dạng hidden
<input type="hidden" name="" value="" size="30" />
Dạng này sẽ không hiển thì ra trình duyệt.
Được sử dụng khi không muốn dữ liệu bị thay đổi.
Input dạng checkbox
<input type="checkbox" name="" value="" />
<input type="checkbox" name="" value="" />
Được sử dụng cho nhiều lựa chọn khác nhau.
Input dạng checkbox - sử dụng checked
<input type="checkbox" name="" value="" checked="checked" />
<input type="checkbox" name="" value="" />
Được sử dụng cho nhiều lựa chọn khác nhau.
Input dạng checkbox - sử dụng disabled
<input type="checkbox" name="" value="" disabled="disabled" />
<input type="checkbox" name="" value="" />
Dạng này không cho click hay tác động tới input.
Được sử dụng khi không muốn dữ liệu bị thay đổi.
Input dạng radio
<input type="radio" name="checkbox" value="" />
<input type="radio" name="checkbox" value="" />
Được sử dụng cho một chọn lựa duy nhất.
Các <input /> phải cùng "name", nếu không sẽ không chọn được.
Input dạng radio - sử dụng checked
<input type="radio" name="checkbox" value="" checked="checked" />
<input type="radio" name="checkbox" value="" />
Được sử dụng cho một chọn lựa mặc định.
Input dạng radio - sử dụng disabled
<input type="radio" name="checkbox" value="" disabled="disabled" />
<input type="radio" name="checkbox" value="" />
Dạng này không cho click hay tác động tới input.
Được sử dụng khi không muốn dữ liệu bị thay đổi.
Input dạng button
<input type="button" name="" value="Click" />
Sử dụng như một nút nhấn.
Input dạng button reset
<input type="reset" name="" value="Reset" />
Dùng để reset lại giá trị trong <form>.
Input dạng button submit
<input type="submit" name="" value="Submit" />
Dùng để gửi dữ liệu lên server, dữ liệu được gửi thông qua thuộc tính action trong <form>.
Input dạng button image
<input type="image" src="images/btn_submit.jpeg" alt="SUBMIT" name="" />
Sử dụng như một nút nhấn bằng hình.
Input dạng file upload
<input type="file" name="" />
Sử dụng để upload file.
BUTTON
<button type="button">Click me!</button>
<button type="button" disabled="disabled">Disabled</button>
<button type="button" name="tênButton">Name</button>
<button type="reset">Reset</button>
<button type="submit">Submit</button>
<button type="button" value="Gửi">Value</button>
LABEL
Label - input dạng text
<label for="email">Email</label>: <input type="text" id="email" name="email" size="30" />
Hãy click vào nhãn Email để hiểu rõ hơn.
:
Label - input dạng checkbox
<label for="label01">Nhãn 01</label>: <input type="checkbox" id="label01" name="label01"
value="" /><br />
<label for="label02">Nhãn 02</label>: <input type="checkbox" id="label02" name="label02" value="" />
Hãy click vào nhãn 01 và 02 để hiểu rõ hơn.
:
:
Label - input dạng radio
<label for="male">Nam</label>: <input type="radio" id="male" name="sex" value="" />
<br />
<label for="female">Nữ</label>: <input type="radio" id="female" name="sex" value="" />
Hãy click vào nhãn Nam và Nữ để hiểu rõ hơn (chú ý: giá trị của "name" trong 2 <input /> phải như nhau).
:
:
TEXTAREA
rows - cols
<textarea rows="5" cols="20">Bạn đang xem tag html textarea, là text có thể nhập được văn bản, và có thể chứa rất nhiều dòng...</textarea>
disabled
<textarea rows="5" cols="20" disabled="disabled">Bạn đang xem tag html textarea, là text có thể nhập được văn bản, và có thể chứa rất nhiều dòng...</textarea>
Dạng này sẽ không hiển thì ra trình duyệt.
Được sử dụng khi không muốn dữ liệu bị thay đổi.
readonly
<textarea rows="5" cols="20" readonly="readonly">Bạn đang xem tag html textarea, là text có thể nhập được văn bản, và có thể chứa rất nhiều dòng...</textarea>
Sử dụng khi giá trị textarea chỉ dùng để đọc, không được thay đổi.
SELECT - OPTION
select - option
<select>
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>
select - sử dụng name
<select name="TenDanhSach">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>
select - sử dụng disabled
<select disabled="disabled">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>
Xác định danh sách thả xuống không hiển thị.
select - sử dụng multiple
<select multiple="multiple">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>
Hiển thị nhiều tùy chọn.
select - sử dụng size
<select size="3">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>
Xác định số tùy chọn có thể thấy trong danh sách lựa chọn.
option - sử dụng disabled
<select>
<option disabled="disabled">Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>
Xác định danh sách thả xuống không hiển thị.
option - sử dụng label
<select>
<option label="label01">Danh sách 01</option>
<option label="label02">Danh sách 02</option>
<option label="label03">Danh sách 03</option>
<option label="label04">Danh sách 04</option>
</select>
Xác định nhãn cho tùy chon.
option - sử dụng selected
<select>
<option>Danh sách 01</option>
<option selected="selected">Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 04</option>
</select>
Xác định một tùy chọn được chọn mặc định.
option - sử dụng value
<select>
<option value="value01">Danh sách 01</option>
<option value="value02">Danh sách 02</option>
<option value="value03">Danh sách 03</option>
<option value="value04">Danh sách 04</option>
</select>
Xác định giá trị của tùy chọn (sẽ được gửi tới server khi submit).
OPTGROUP
optgroup - sử dụng label
<select>
<optgroup label="Danh sách số">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 03</option>
</optgroup>
<optgroup label="Danh sách chữ">
<option>Danh sách A</option>
<option>Danh sách B</option>
<option>Danh sách C</option>
</optgroup>
</select>
optgroup - sử dụng disabled
<select>
<optgroup label="Danh sách số" disabled="disabled">
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 03</option>
</optgroup>
<optgroup label="Danh sách chữ">
<option>Danh sách A</option>
<option>Danh sách B</option>
<option>Danh sách C</option>
</optgroup>
</select>
FIELDSET - LEGEND
<form action="#">
<fieldset>
<legend>Thông tin cá nhân:</legend>
Họ tên: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Ngày sinh: <input type="text" size="10" />
</fieldset>
</form>
Thuộc tính disabled="disabled"
Khi sử dụng thuộc tính này, chúng ta không thể nào thao tác các chức năng trong form được, ví dụ như không thể click checkbox, radio, không thể điền trường text cho input hay khu vực textarea.
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<form action="#">
<fieldset disabled="disabled">
<legend>Thông tin cá nhân:</legend>
Họ tên: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Ngày sinh: <input type="text" size="10" />
</fieldset>
</form>
</body>
</html>