第三讲 Form表单
目标:
掌握常用表单项
★语法:
<form action="表单提交地址" method="提交方法">
… 文本框、按钮等表单元素…
</form>
说明:
表单提交地址：指定提交后，由服务器上哪个处理程序处理
提交方法:指定向服务器提交的方法，一般为post或get方法, post方法比较安全
案例:
<form action="login.jsp" method="post">
<p><img src="user.gif"/>用户名:<input type="text" name="username" size="20" maxlength="15"/></p>
<p><img src="pass.gif"/>密 码:<input type="password" name="password"/></p>
<p>
<input type="submit" name="b1" value="提交数据"/>
<input type="reset" name="b2" value="取消重填"/>
</p>
</form>
★常见表单元素
input表单元素的基本格式
<input name="表单元素名称" type="类型" value="值" size="显示宽度"
maxlength="对大长度" checked="是否选中" />
说明；其中的属性并不会都要写，处理type必须要写，其他的都可有可无，一般至少有name和type
●文本框
语法:
<input name= "名称" type= "text" value= "初值" size= "数字" maxlength="数字"/>
案例:
<form action="login.jsp" method="post">
用户名:<input name="username" type="text"/><br />
用户名:<input name="username" type="text" size="20" maxlength="5" value="abc"/>
</form>
说明: 文本框没有指名size默认为20
●密码框
语法:
<input name= "名称" type= "password" value= "初值" size= "数字" maxlength="数字"/>
●按钮
语法:
<input name= "名称" type= "按钮类型" value="按钮文字" src="图片按钮的图片url">
说明:
按钮类型分为四种:
button:普通按钮
submit:提交按钮
reset :重置按钮
image :图片提交按钮
案例:
<form action="login.jsp" method="post">
用户名:<input name="username" type="text"/><br />
密 码:<input name="pd" type="password"/><br />
<input name="b1" type="submit" value="提交按钮"/>
<input name="b2" type="reset" value="重置按钮"/>
<input name="b3" type="button" value="普通按钮"/>
<input name="b4" type="image" src="user.gif"/>
</form>
●单选框
语法:
<input name= “组名" type= "radio" value= "… " checked= " … " >
说明:
如果是一组几个单选框name要一致。 checked= "checked" 默认选择这一个
案例:
性 别:<input name="sex" type="radio" value="男" checked="checked"/>男
<input name="sex" type="radio" value="女"/>女<br />
●复选框
语法:
<input type="checkbox" name= " … " value= " … " checked= " … " >
案例:
<form action="login.jsp" method="post">
爱好:<input type="checkbox" name="hobby1" checked="checked"/>运动
<input type="checkbox" name="hobby2"/>学习
<input type="checkbox" name="hobby3"/>游戏
<input type="checkbox" name="hobby4" checked="checked"/>旅游<br />
</form>
综合案例:
<BODY>
<h1>贵美商城会员登陆</h1>
<form action="www.baidu.com" method="post">
<p>贵美网站邮箱:<input type="text" name="email" size="30" /></p>
<p>输 入 密 码:<input type="password" name="pass1" size="30"/></p>
<p>再次输入密码:<input type="password" name="pass2" size="30"/></p>
<p>
<input type="radio" name="type" checked="checked"/>豪华版
<input type="radio" name="type" />简洁版
</p>
<p>
<input type="checkbox" name="a" />自动登陆
<input type="checkbox" name="a" />安全登陆
</p>
<p>
<input type="reset" name="cz" value="重置" />
<input type="submit" name="dl" value="登陆" />
</p>
<p><input type="image" src="images/reg.gif"/></p>
</form>
</BODY>
●文件域
语法:
<input type="file" name= " … " >
案例:
<input type="file" name="file"/>
其他表单
●列表框
语法:
<select name="指定列表名称" size="行数">
<option value="选项值" selected="selected">…</option>
… …
</select>
注意:
select既可以做下拉列，也可以做列表框，
如果没有写size属性，则默认size为1，此时是下拉列，
如果写了size属性，且size>1，此时是列表框
案例:
<BODY>
出生日期:<input name="year" type="text" size="4" maxlength="4" value="yyyy"/>年
<select name="month">
<option value="0" selected="selected">选择月份</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>月
<input name="day" type="text" size="2" maxlength="2" value="dd"/>日
</BODY>
●多行文本框
语法:
<textarea name="... " cols="列宽" rows="行宽">
文本内容
</textarea>
●隐藏域
方便服务器端“记住”客户端的信息、但又不希望客户看到的数据
语法:
<input type="hidden" name="…." value="…" />
案例:
<input type="hidden" name="userid" value="666" />
只读和禁用属性
readonly：希望某个框内的内容只允许用户看，不能修改
disabled：因没达到使用的条件，限制用户使用
案例:
<textarea name="content" cols="60" rows="8" readonly="readonly">
欢迎阅读服务条款协议，贵美的权利和义务......
</textarea><br /><br />
同意以上协议<input name="agree" type="checkbox" />
<input name="btn" type="submit" value="注册" disabled="disabled" />
综合案例:
<body>
<form action="login.jsp" method="get">
<h3>申请表</h3>
<p>姓名:<input type="text" name="username" size="20"/></p>
<p>密码:<input type="password" name="mm" size="20"/></p>
照片:
<p><input type="file" name="photo"/></p>
感兴趣的职位；
<p>
<input type="radio" name="job" checked="checked"/>Web设计
<input type="radio" name="job"/>Web开发
</p>
<p>
向往城市:
<select name="city">
<option value="1" selected="selected">请选择</option>
<option value="2">武汉</option>
<option value="3">上海</option>
<option value="4">深圳</option>
<option value="5">杭州</option>
</select>
</p>
协议:
<p>
<textarea clos="30" rows="5">求职信息必须真实、准确、本网站只负责向企业推荐。
</textarea>
</p>
<p><input type="checkbox" name="read"/>我已认真阅读协议</p>
经验:
<p>
<select name="year">
<option value="1" selected="selected">无经验</option>
<option value="2">1-2年</option>
<option value="3">3年以上</option>
</select>
</p>
<p>
<input type="submit" name="tj" value="提交" disabled="disabled"/>
<input type="reset" name="cz" value="重置"/>
</p>
</form>
</body>
补充lable标签
label主要用于在表单中定义标签。
<form action="login.jsp" method="post">
<!--label的显示关联-->
<p><label>账 号:<input type="text" name="username" size="20"/></label></p>
<!--label的隐式关联 通过id-->
<p><label for="1">密 码:</label><input type="password" id="1" name="mm1" size="20"/></p>
</form>
使用label和不使用label界面是一样，但是是用来label，点击文字时可以将光标移动到该文字关联的组件中
