Java EE WEB工程师培训-JDBC+Servlet+JSP整合开发之33.HTML表单-阿里云开发者社区

开发者社区> 安全> 正文

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

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

– Hidden 
• Hidden 元素提供一个隐藏数据,也成为“隐藏域”,该值不显示在页面中,供程 
序内部使用,例如: 
<input name=“id" value=“1" type="hidden">
image
image 
– 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 
– 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 
– File 
• File元素提供了文件浏览选择的能力,例如要选择、上传文件等 
<input type=“file” name=“f” >
image
image 
– Button 
• Button 元素提供一个普通按钮,不产生任何动作,例如 
<input type=“button” name=“b1” value=“Click me!”>
image
image
image
image 
– Reset 
• Reset提供了清空表单数据的功能,例如要重新添加数据 
<input type=“reset” name=“r1” value=“重填”>
image
image 
– Submit 
• Submit提供了提交表单的能力,当点击submit按钮时,表单的action属性会被调用 
<input type=“submit” name=“s1” value=“保存”>
image
image
image
• Select 
–Option 
• 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
–Textarea 
• Textarea 提供了输入大文本的能力,例如:要输入用户的简历,内容很多就可以使用之 
<textarea name="comments" rows="15" cols="80" style="background:rgb(200,200,255)">    
Enter Comments here:    
</textarea>
image
image 
###############Michael分割线#####################




本文转自redking51CTO博客,原文链接:http://blog.51cto.com/redking/150096,如需转载请自行联系原作者

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
+ 订阅

云安全开发者的大本营

其他文章