今天学习表单
首先,了解一下表单的一些属性
name——表单命名,不是必需属性,但是为了防止表单信息在提交到后台处理程序时出现混乱,一般要设置一个与表单功能符合的名称。
method——传送方法,post或者get
enctype——编码方式,有 “text/plain(纯文本)”“application/x-www-form-urlencoded”(默认编码)“multipart/form-data“(MIMe编码,上传文件必须用)
target——目标显示方式
…
然后,了解一下控件
输入类:input标签
菜单列表类:select标签
基本语法:
<form> <input name="input_name" type="input_type"/> </form>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
input_name的选项有很多,基本使用的有:
text password radio(单选) checkbox(复选框) button submit(提交按钮)
reset(重置按钮) image(图像提交按钮) hidden(隐藏域) file(文件域)
除了输入类型的控件,有一些控件,例如文字区域、菜单列表不用input标记,比如文字区域用textarea,菜单用select与option等等
看效果不说话:
代码:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>表单</title> 6 </head> 7 <!--text password--> 8 <h1>用户测试</h1> 9 <form action="mailto:[email protected]" method="post" name="showitems" enctype="application/x-www-form-urlencoded"> 10 姓名:<input type="text" name="username" size="20" id="username"/> 11 <br/><br/> 12 密码:<input type="password" name="pwd" size="30" maxlength="15" id="pwd"/> 13 <br><br> 14 寄语:<input type="text" name="URL" size="40" maxlength="50" value="写下你要说的话"/> 15 <hr size="3" color="#9900CC"> 16 <!--radio--> 17 <p><font size="+2" color="#3333FF">你最喜欢的漫画是:</font></p> 18 <input type="radio" value="ansA" name="test"/>火影忍者 19 <input type="radio" value="ansB" name="test"/>犬夜叉 20 <input type="radio" value="ansC" name="test"/>海贼王 21 <input type="radio" value="ansD" name="test"/>其他<br/> 22 <br> 23 <hr size="3" color="#9900CC"> 24 <!--checkbox--> 25 <p><font size="+2" color="#3333FF">你喜欢的场景:</font></p> 26 <input type="checkbox" value="ansA2" name="test"/>春日微风 27 <input type="checkbox" value="ansB2" name="test"/>夏日微凉夜晚 28 <input type="checkbox" value="ansC2" name="test"/>秋日枫叶林 29 <input type="checkbox" value="ansD2" name="test"/>冬日暖阳天 30 <br><br><br> 31 <!--提交 重置按钮,不用自己编写onclick,自动响应--> 32 <input type="submit" name="sub" value="提交" /> 33 <input type="reset" name="rst" value="重置"/> 34 <br><br><br> 35 <!--普通按钮--> 36 <input align="middle" alt="相当于空按钮" type="button" value="没啥用" name="btn1"/> 37 <input align="left" type="button" value="关了你" name="closeyou" onclick="window.close()"/> 38 <input align="left" type="button" value="没啥用" name="opennew" onclick="window.open()"/> 39 <br><br> 40 <!--图片按钮--> 41 <input width="80" align="bottom" type="image" src="images/yes.jpg" name="image1" onclick="window.open()"/> 42 <!--隐藏域--> 43 <input type="hidden" name="from"/><br/><br> 44 <!--文件域 file--> 45 文件域,请选择文件: 46 <input type="file" name="filee"/> 47 </form> 48 <!--列表/菜单标记--> 49 <!--表单是使用id标记最多的一类元素--> 50 <form action="[email protected]" method="post" name="invest" id="invset"> 51 选择性别:<br/><br/> 52 <select name="sex" size="4" multiple="multiple"> 53 <option value="boy" selected="selected">男</option> 54 <option value="woman" selected="selected">女</option> 55 <option value="bw" selected="selected">男/女</option> 56 </select> 57 <br/><br/> 58 <select name="city"> 59 <option value="beijing" selected="selected">北京 60 <option value="shanghai">上海 61 <option value="nanjing">南京 62 <option value="changchun">长春 63 </select> 64 <br/><br/> 65 留言:<textarea name="liuyan" rows="5" cols="40">留言区 66 </textarea><br/><br/> 67 </form> 68 <body> 69 </body> 70 </html> 71
表单