表单一:
利用后台控件实现的
包括姓名(文本),年龄(文本),生日(时间选择控件),性别(radio单选控件),爱好(复选控件)。将填写的这些信息传入到后台
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testForm.aspx.cs" Inherits="WebApplication1.testForm" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <title></title> 8 </head> 9 <body> 10 <form id="form1" runat="server"> 11 <div> 12 <label for="txtname">姓名:</label><asp:TextBox ID="txtname" runat="server"></asp:TextBox><br /> 13 <label for="txtage">年龄:</label><asp:TextBox ID="txtage" runat="server"></asp:TextBox><br /> 14 <label>生日:</label> 15 <asp:Calendar ID="calbirth" runat="server"></asp:Calendar><br /> 16 <label for="radlistsex">性别:</label> 17 <asp:RadioButtonList ID="radlistsex" runat="server" v> 18 <asp:ListItem Text="男" Selected="True" Value="男"></asp:ListItem> 19 <asp:ListItem Text="女" Value="女"></asp:ListItem> 20 </asp:RadioButtonList><br /> 21 <label for="">爱好:</label><br /> 22 <asp:CheckBoxList ID="cblhobby" runat="server"> 23 <asp:ListItem Text="足球" Value="足球" /> 24 <asp:ListItem Text="排球" Value="排球" /> 25 <asp:ListItem Text="篮球" Value="篮球" /> 26 <asp:ListItem Text="橄榄球" Value="橄榄球" /> 27 </asp:CheckBoxList><br /> 28 <asp:Button ID="subbuton" Text="提交" runat="server" onclick="subbuton_Click1" /> 29 </div> 30 </form> 31 </body> 32 </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 8 namespace WebApplication1 9 { 10 public partial class testForm : System.Web.UI.Page 11 { 12 protected void Page_Load(object sender, EventArgs e) 13 { 14 15 //subbuton.Click += new EventHandler(subbuton_Click); 16 } 17 18 //void subbuton_Click(object sender, EventArgs e) 19 //{ 20 21 //} 22 23 protected void subbuton_Click1(object sender, EventArgs e) 24 { 25 string name = "姓名:" + txtname.Text.Trim(); 26 string age = "年龄:" + txtage.Text.Trim(); 27 string birth = "生日:" + calbirth.SelectedDate.ToString(); 28 string sex = "性别:" + radlistsex.SelectedValue; 29 string hobby = "爱好:"; 30 for (int i = 0; i < cblhobby.Items.Count; i++) 31 { 32 if (cblhobby.Items[i].Selected) 33 { 34 hobby += "," + cblhobby.Items[i].Value; 35 } 36 } 37 //Response.Redirect("testSubmit.aspx?name=" + name + "&age=" + age + "&birth=" + birth + "&sex=" + sex + "&hobby=" + hobby); 38 Response.Write("<script>alert('"+name+"\\n"+age+"\\n"+birth+"\\n"+sex+"\\n"+hobby+"');</script>"); 39 } 40 } 41 }
第二个表单 和第一个表单一样 不过除了提交按钮用后台空间外 其它都用html标记
日期选择 使用 js
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="WebApplicationTestForm.index" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <title></title> 8 <!--实现日期联动的js--> 9 <script type="text/javascript"> 10 function load() { 11 var i = -1; 12 //添加年份,从1900年开始 13 var nowyear = new Date().getFullYear(); 14 var nowmonth = new Date().getMonth() + 1; 15 //var nowday = new Date().getDate(); 16 for (i = 1900; i <= nowyear; i++) { 17 addOption(form1.Year, i, i - 0); 18 //默认选中当前年份 19 if (i == nowyear) { 20 form1.Year.options[i - 1900].selected = true; 21 } 22 } 23 //添加月份 24 for (i = 1; i <= 12; i++) { 25 addOption(form1.Month, i, i); 26 //默认选中当前月份 27 if (i == nowmonth) { 28 form1.Month.options[i - 1].selected = true; 29 } 30 } 31 //添加日期 32 for (i = 1; i <= 31; i++) { 33 addOption(form1.Day, i, i); 34 } 35 } 36 37 //设置每个月份的天数 38 function setDays(year, month, day) { 39 var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 40 var yea = year.options[year.selectedIndex].text; 41 var mon = month.options[month.selectedIndex].text; 42 var num = monthDays[mon - 1]; 43 if (mon == 2 && isLeapYear(yea)) { 44 num++; 45 } 46 for (var i = day.options.length - 1; i >= num; i--) { 47 day.remove(i); 48 } 49 for (var i = 1; i <= num; i++) { 50 addOption(form1.Day, i, i); 51 } 52 } 53 54 //判断是否闰年 55 function isLeapYear(year) { 56 return (year % 4 == 0 || (year % 100 == 0 && year % 400 == 0)); 57 } 58 59 //向select尾部添加option 60 function addOption(selectbox, text, value) { 61 var option = document.createElement("option"); 62 option.text = text; 63 option.value = value; 64 selectbox.options.add(option); 65 } 66 </script> 67 </head> 68 <body onload="load()"> 69 <form id="form1" runat="server"> 70 <div> 71 <label>姓名:<input type="text" id="txtname" name="name" /></label><br /> 72 <label>年龄:<input type="text" id="txtage" name="age" /></label><br /> 73 出生:<select name="year" id="Year" 74 onchange="setDays(this,form1.Month,form1.Day)"></select> 75 <label>年</label> 76 <select name="month" id="Month" 77 onchange="setDays(form1.Year,this,form1.Day)" ></select> 78 <label>月</label> 79 <select name="day" id="Day"></select> 80 <label>日</label><br /> 81 性别: 82 <label><input type="radio" id="radsex1" name="sex" value="男" checked="checked"/>男</label> 83 <label><input type="radio" id="radsex2" name="sex" value="女"/>女</label><br /> 84 爱好:<br /> 85 <label><input type="checkbox" id="checkbox1" name="zuqiu" value="足球" />足球</label> 86 <label><input type="checkbox" id="checkbox2" name="paiqiu" value="排球" />排球</label> 87 <label><input type="checkbox" id="checkbox3" name="lanqiu" value="篮球" />篮球</label> 88 <label><input type="checkbox" id="checkbox4" name="bangqiu" value="棒球" />棒球</label><br /> 89 <asp:Button ID="submit" Text="提交" runat="server" onclick="submit_Click" /> 90 </div> 91 </form> 92 </body> 93 </html>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 8 namespace WebApplicationTestForm 9 { 10 public partial class index : System.Web.UI.Page 11 { 12 protected void Page_Load(object sender, EventArgs e) 13 { 14 15 } 16 17 protected void submit_Click(object sender, EventArgs e) 18 { 19 //Request["表单中元素的name至"].ToString; 20 string name ="姓名:"+ Request["name"].ToString(); 21 string age ="年龄:" + Request["age"].ToString(); 22 string birth = "出生日期:" + Request["year"].ToString() + 23 "年" + Request["month"].ToString() + "月" + Request["day"].ToString(); 24 string sex = "性别:" + Request["sex"].ToString(); 25 string hobby = "爱好:" + Request["zuqiu"] + " " + Request["paiqiu"] + " " + Request["lanqiu"] + " " + Request["bangqiu"]; 26 Response.Write("<script>alert('"+name+"\\n"+age+"\\n"+birth+"\\n"+sex+"\\n"+hobby+"');</script>"); 27 } 28 } 29 30 31 }