Mục tiêu:Trình bày cú pháp, chức năng Form và các thành phần trong Form.
6.1. Form
Chức năng của Form
Form là một cách để chuyển dữ liệu từ người sử dụng đến cho Web Server xử lý. Forms được sử dụng rộng rãi trên WWW. Các forms rất tiện lợi cho người dùng điền các yêu cầu tìm kiếm, các biểu mẫu điều tra, nhập dữ liệu đầu vào cho các ứng dụng..
Có nhiều thành phần khác nhau (gọi là các điều khiển control) trong một form.
Khi tạo form bạn cũng cần phải chỉ rõ cho máy chủ dịch vụ biết cách xử lý form. Có nhiều loại chương trình ứng dụng khác nhau trong máy chủ dịch vụ để làm việc này: các chương trình CGI, ISAPI, các script ASP, JSP, Java Bean, Servlet...
Thành phần của Form
Cặp thẻ để tạo Form là <FORM...>...</FORM>.
Mọi thành phần của form như sẽ trình bày dưới đây đều phải nằm trong phạm vi giới hạn bởi cặp thẻ này.
Công thức tạo form là:
<FORM METHOD=POST ACTION="URL">
Toàn bộ các thành phần khác bên trong form nằm ở đây </FORM>
Thuộc tính METHOD chỉ ra phương thức trao đổi dữ liệu giữa trình duyệt Web và máy chủ Web. Có 2 phương thức là POST, GET. Đối với form phương thức thường là POST.
Thuộc tính ACTION để thiết lập địa chỉ URL của chương trình sẽ nhận và xử lý dữ liệu gửi từ form.
Ví dụ:
<form action="demo_classicasp.aspx" method="post">
Your name: <input type="text" name="fname" size="20"> <input type="submit" value="Submit">
</form> <% dim fname
fname=Request.Form("fname")
If fname<>"" Then Response.Write("Hello " & fname & "!") End If %>
Kết quả:
Khi nhấn nút Submit ta có được kết quả sau
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 đó
idlà 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 />
A TextBox with width:<asp:TextBox id="tb6" columns="30" runat="server"/> </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.
Groupnamelà 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
<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>
</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útsẽ xuất hiện cạnh nút chọn.
TextAligncanh 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="Item1" Selected="True"/> <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
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">
Sub submit(sender As Object, e As EventArgs) 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>