BÀI 2 : THIẾT KẾ WEB TĨNH
6.2.Các thành phần trong FORM
6. Khung nhập (Form)
6.2.Các thành phần trong FORM
Như đã nêu trên, có nhiều loại thành phần khác nhau trong một Form. Dưới đây sẽ trình bày lần lượt những điểm cơ bản nhất.
Hộp văn bản – TextBox
Hộp văn bản là nơi để gõ vào một dữ liệu kiểu xâu kí tự. Hộp văn bản sẽ được hiển thị như sau:
Mã lệnh khởi tạo:
<asp:TextBox id="textboxid" TextMode=="attribute" runat="server" /> Trong đó
id là tên của hộp văn bản này. Textboxid phải duy nhất trong trang, không được trùng nhau.
TextMode: là thuộc tính của hộp văn bản có thể là dạng văn bản (text), mật khẩu (password), vùng văn bản (multiline) v..v.
Ví dụ:
<form runat="server">
A basic TextBox: <asp:TextBox id="tb1" runat="server" <br /> A password TextBox:
<asp:TextBox id="tb2" TextMode="password" runat="server" /><br /> A TextBox with text:
<asp:TextBox id="tb3" Text="Hello World!" runat="server" /><br /> A multiline TextBox:
<asp:TextBox id="tb4" TextMode="multiline" runat="server" /><br /> A TextBox with height:
<asp:TextBox id="tb5" rows="5" TextMode="multiline" runat="server"/> <br /><br />
</form>
Kết quả:
Các lựa chọn – Radio Button
Các nút chọn radio là một nhóm nút tròn, chỉ cho phép bạn được chọn một trong nhiều nút.
Mã lệnh khởi tạo:
<asp:RadioButton id="radiobuttonid" Text="text" Checked="True" GroupName="groupname" AutoPostBack=”True” runat="server"/>
Trong đó
Radiobutton là từ khoá ứng với kiểu nút chọn Radio, Text là nhãn nút sẽ xuất hiện cạnh nút.
Groupname là tên nhóm nút.
Checked là giá trị mặc định có được chọn (True) hay không chọn (False) khi trang web được mở lên.
AutoPostBack cho phép tự động phản hồi khi có sự kiện lựa chọn xảy ra Ví dụ:
<form runat="server">
Select your favorite color: <br />
<asp:RadioButton id="red" Text="Red" Checked="True" GroupName="colors" runat="server"/> <br /> <asp:RadioButton id="green" Text="Green"
GroupName="colors" runat="server"/> <br /> <asp:RadioButton id="blue" Text="Blue"
GroupName="colors" runat="server"/> <br />
<asp:Button text="Submit" OnClick="submit" runat="server"/> <p><asp:Label id="Label1" runat="server"/></p> (adsbygoogle = window.adsbygoogle || []).push({});
</form>
Ô đánh dấu – CheckBoxes
Mã lệnh khởi tạo:
<asp:CheckBox id="check1" Text="Same as home phone" TextAlign="Right"
AutoPostBack="True" OnCheckedChanged="Check" runat="server" /> Trong đó
Checkbox là từ khoá ứng với kiểu nút chọn CheckBox, Text là nhãn nút sẽ xuất hiện cạnh nút chọn.
TextAlign canh lề cho đoạn text
OnCheckedChanged: giá trị cho phép thực thi mã lệnh khi có sự thay đổi
AutoPostBack cho phép tự động phản hồi khi có sự kiện lựa chọn xảy ra Ví dụ:
<script runat="server">
Sub Check(sender As Object, e As EventArgs)
if check1.Checked then work.Text=home.Text else work.Text=""
end if End Sub </script>
<form runat="server">
<p>Home Phone: <asp:TextBox id="home" runat="server" /> <br /> Work Phone: <asp:TextBox id="work" runat="server" />
<asp:CheckBox id="check1" Text="Same as home phone"
TextAlign="Right" AutoPostBack="True" OnCheckedChanged="Check" runat="server" /></p>
</form>
Danh sách lựa chọn – ListBox
Mã lệnh khởi tạo: <asp:ListBox runat="server">
<asp:ListItem Text="Item1" Selected="True"/> <asp:ListItem Text="Item2" /> … <asp:ListItem Text="ItemN" /> </asp:ListBox> Ví dụ: Mã: <form runat="server"> <asp:ListBox runat="server">
<asp:ListItem Text="Item2" /> </asp:ListBox>
</form>
HTML Select
Mã lệnh khởi tạo:
<select id="select1" runat="server">
<option value=" url">text1</option> <option value=" url">text2</option>
….
<option value=" url">textN</option> </select>
Nút nhấn – Button (adsbygoogle = window.adsbygoogle || []).push({});
Mã lệnh khởi tạo:
<asp:Button id="buttonid" Text="textbutton" runat="server" OnClick="submit" />
Trong đó: buttonid để tham chiếu, còn textbutton là nhãn sẽ hiển thị trên nút. Nếu muốn trang trí một biểu tượng hay hình ảnh trên nút chỉ cần thay thế phần nhãn nút bằng hình ảnh.
Ví dụ:
<form runat="server">
<asp:Button id="button1" Text="Click me!"runat="server" OnClick="submit"/> </form>
Kết quả:
Nhãn - Label
Mã lệnh khởi tạo:
<asp:Label id="labelid" runat="server" /> Ví dụ:
<script runat="server">
lbl1.Text="Your name is " & txt1.Text End Sub
</script>
<form runat="server">
Enter your name: <asp:TextBox id="txt1" runat="server" /> <asp:Button OnClick="submit" Text="Submit" runat="server" /> <p><asp:Label id="lbl1" runat="server" /></p>
</form>
Kết quả: