Java EE WEB工程师培训-JDBC+Servlet+JSP整合开发之33.HTML表单

• 本季内容提要
�CHTML 表单(Form)简介
• 表单简介
�CInput
• Text
• Password
• hidden
• Checkbox
• Radio
• File
• Button
• Reset
• submit
�CSelect
• Option
�CTextarea
###############Michael分割线#####################
• HTML 表单(Form)简介
�C表单简介
• 表单的作用
�C表单用来收集用户信息,到服务器处理或保存,是用户交互的主要工具。例如:用户登录需要输入用户名称和密码、注册会员需要输入会员信息等。
• 表单的格式
image
image
image
image
• Input
�C Text
• Text 元素为用户提供了输入文本的能力,例如: 
< input type=“TEXT” name ="NAME" value ="VALUE" size=15 >
 
�C Password
• Password 元素为用户提供输入密码的能力,输入的数据被显示为“*”,例如:
password: < input name ="pw" value=“amaker" type ="password" >

�C Hidden
• Hidden 元素提供一个隐藏数据,也成为“隐藏域”,该值不显示在页面中,供程
序内部使用,例如:
< input name=“id" value=“1" type ="hidden" >
image
image
�C Checkbox
• Checkbox 元素提供用户一种多项选择的功能,例如,要收集用户的爱好信息
< ul >    
< li > box a < input name ="checkb" value ="a" type ="checkbox" > </li>    
< li > box b < input name ="checkb" value ="b" type ="checkbox" > </li>    
</ul>
image
image
�C Radio
• Radio元素提供了一种单项选择的能力,例如选择用户的性别
< ul >    
< li > radio a < input name=“gender" value ="1" type ="radio" > </li>    
< li > radio b < input name=“gender" value=“2" type ="radio" > </li>    
</ul>
image
image
�C File
• File元素提供了文件浏览选择的能力,例如要选择、上传文件等
< input type=“file” name=“f” >
image
image
�C Button
• Button 元素提供一个普通按钮,不产生任何动作,例如
< input type=“button” name=“b1” value=“Click me!” >
image
image
image
image
�C Reset
• Reset提供了清空表单数据的功能,例如要重新添加数据
< input type=“reset” name=“r1” value=“重填” >
image
image
�C Submit
• Submit提供了提交表单的能力,当点击submit按钮时,表单的action属性会被调用
< input type=“submit” name=“s1” value=“保存” >
image
image
image
• Select
�COption
• Select 提供了多项选择的功能,option是用来构造选择项,例如:
< select name=NAME size=SIZE multiple >    
< option value=V1 > A1 </option>    
< option value=V2 > A2 </option>    
...    
< option value=Vn > An </option>    
</select>
image
image
�CTextarea
• Textarea 提供了输入大文本的能力,例如:要输入用户的简历,内容很多就可以使用之
< textarea name ="comments" rows ="15" cols ="80" style ="background:rgb(200,200,255)" >    
Enter Comments here:    
</textarea>
image
image 
###############Michael分割线#####################

本文出自 “王乾De技术博客” 博客,谢绝转载!

你可能感兴趣的:(java,servlet,jdbc,表单,WEB工程师培训)