Các tag nhập liệu

II.2.1. Tag <input>

Hầu hết các điều khiển cơ bản trong <form> đều được tạo bằng tag <input>, cấu trúc của tag

<input> như sau:

<input type="loại_điều_khiển" name="…" value="…">

type : loại điều khiển muốn tạo. Cĩ 5 loại điều khiển là:

ƒ TextBox – "text"

ƒ CheckBox – "checkbox"

ƒ OptionBox – "radio"

ƒ Button – "button"

ƒ Submit/Reset – "submit"/"reset"

name: Tên của điều khiển. Tương tự như các form bạn lập trình trên Windows, mỗi điều khiển nên

cĩ một tên riêng biệt. Riêng với trường hợp OptionBox, để gom nhiều option thành một nhĩm, các OptionBox sẽ cĩ giá trị của thuộc tính name giống nhau.

value: Chuỗi văn bản hiển thị trên điều khiển. Với TextBox là nội dung của TextBox, với Button (kể

cả Submit và Reset) là tiêu đề của điều khiển.

Ví dụ:

<tr>

<td width="13%">Tên đăng nhập</td>

<td><input type="text" name="txtUsername"></td> </tr>

<tr>

<td width="13%">Mật khẩu</td>

<td><input type="text" name="txtPassword"></td> </tr>

<tr>

<td width="13%">&nbsp;</td>

<td><input type="checkbox" name="chkNewUser"> Tạo người dùng mới</td>

</tr> </table><p>

<input type="submit" value="Đăng nhập" name="cmdSubmit"> <input type="reset" value="Xố trắng" name="cmdReset"> </form>

Kết quả:

Qua ví dụ trên, cĩ thể thấy rằng trong <form></form> bạn được phép sử dụng các tag định dạng

để trình bày form như <table>, <p>,…

Chú ý:

Với CheckBox và OptionBox, thuộc tính checked dùng để đánh dấu chọn vào CheckBox hay

OptionBox khi trang web hiển thị.

Thuộc tính size của textbox dùng để chỉ định chiều rộng của textbox, đơn vị của size là số ký tự.

Tuy nhiên, nội dung của textbox khơng bị giới hạn bởi size.

II.2.2. Vùng nhập liệu – tag <textarea>

Điều khiển TextBox mà bạn tạo bằng tag <input> chỉ cĩ khả năng nhận vào một dịng văn bản. Để

cĩ một TextBox cho phép nhập nhiều dịng bạn sử dụng tag <textarea></textarea>. <textarea rows="…" cols="…" name="…">Nội dung…</textarea>

Khác với tag <input>, tag <textarea> cần kết thúc bởi </textarea>. Nội dung của TextBox tạo bằng <textarea> cũng khơng định bởi giá trị của thuộc tính value, thay vào đĩ, phần nội dung này nằm giữa cặp tag.

chiều rộng của TextBox tính bằng số ký tự. Thuộc tính rows cho biết chiều cao của TextBox.

Ví dụ:

<form name="form1">

<input type="text" name="T1" value="Xin chào"><p> <textarea rows="3" name="S1" cols="50">Hello </textarea>

</form> Kết quả:

II.2.3. ComboBox và ListBox

Điều khiển ComboBox và ListBox phức tạp hơn so với các điều khiển cơ bản vì cần định nghĩa các

mục chọn. HTML sử dụng tag <select> để khai báo cả hai loại điều khiển này:

Ví dụ:

Mơn học:<br>

<select size="3" name="lstMonHoc" multiple> <option value="1">Visual Basic</option>

<option selected value="2">Visual C++</option> <option value="3">Java</option>

</select> Kết quả:

ƒ Thuộc tính size giúp web browser xác định điều khiển là một ComboBox (size="1") hay

ListBox (size>1).

ƒ Tag <option>, như bạn thấy trong ví dụ, được đặt trong cặp tag <select> để định nghĩa các mục chọn.

ƒ Tên mục chọn được đặt trong trong cặp tag <option>…</option>

ƒ Mục chọn mặc định được biểu thị qua thuộc tính selected.

ƒ Thuộc tính value cho biết giá trị của mục chọn. Bạn sẽ cần biết giá trị của mục chọn khi xử lý dữ liệu nhập của form.

ƒ Nếu bạn muốn ListBox cĩ thể được chọn nhiều mục cùng một lúc, hãy sử dụng thuộc tính