1. <html>
  2. 	<head>
  3. 		<title>HTML表单的应用</title>
  4. 	</head>
  5.  
  6. 	<body>
  7. 		<!-- border:边框 cellspacing：单元格与边框的距离 cellpadding:文本与边框的距离-->
  8. 		<table border="1" cellspacing="0" cellpadding="0" width="600" align="center">
  9. 			<caption><h1>表单的全部应用</h1></caption>
  10. 			<!--
  11. 				用户向服务器提交的方式有： get & post
  12. 				get: url get  默认的提交方式
  13. 					1. 在地址栏上会以明文显示
  14. 					2. 空间有限
  15. 				post: http post
  16. 					首选的方式使用post
  17.  
  18. 				<form action="form.html?id=5&page=6" method="post">
  19.  
  20. 				就是文件上传时必须将enctype="multipart/form-data"
  21. 				第二个就是 传的方法必须是 method="post"
  22.  
  23. 					form 中可以使用三种标签 input textarea select
  24.  
  25. 			-->
  26. 			<form action=""  target="_blank" method="get">
  27. 				<input type="hidden" name="id" value="5">
  28. 				<input type="hidden" name="page" value="100">
  29.  
  30. 				<tr>
  31. 					<th>输入框(<u>U</u>)</th>
  32. 					<td><input tabindex="2" accesskey="u" type="text" size="8" maxlength="8" name="username" value="admin"></td>
  33. 				</tr>
  34. 				<tr>
  35. 					<th>密码框(<u>P</u>)</th>
  36. 					<td><input tabindex="1" accesskey="p" type="password" name="userpwd" value="123"></td>
  37. 				</tr>
  38. 				<tr>
  39. 					<th>文件上传</th>
  40. 					<td><input type="file"  name="imgname"></td>
  41. 				</tr>
  42. 				<tr>
  43. 					<th>按钮</th>
  44. 					<td>
  45.  
  46. 						<input type="button" onclick="alert(new Date())"  name="hello" value="确定">
  47. 						<input type="button"  name="world" value="hello">
  48.  
  49. 					</td>
  50. 				</tr>
  51. 				<tr>
  52. 					<th>复选框</th>
  53. 					<td>
  54. 							<label for="chi"><input id="chi" type="checkbox" name="ah[]" checked value="1"> 吃</label> <br>
  55. 							<input type="checkbox" name="ah[]" value="2"> 喝 <br>
  56. 							<input type="checkbox" name="ah[]" value="3"> 玩 <br>
  57. 							<input type="checkbox" name="ah[]" value="4"> 乐 <br>
  58.  
  59. 					</td>
  60. 				</tr>
  61.  
  62. 					<tr>
  63. 					<th>单选框</th>
  64. 					<td>
  65. 							<label for="chi1"><input id="chi1" type="radio" name="sex" checked value="1"> 男</label> <br>
  66. 							<label for="chi2"><input id="chi2" type="radio" name="sex" value="2"> 女</label> <br>
  67. 							<label for="chi3"><input id="chi3" type="radio" name="sex" value="3"> 保密</label> <br>
  68.  
  69. 					</td>
  70. 				</tr>
  71. 				<tr>
  72. 					<th>单选框</th>
  73. 					<td>
  74. 							<label for="chi1"><input id="chi1" type="radio" name="sex1" checked value="1"> 男</label> <br>
  75. 							<label for="chi2"><input id="chi2" type="radio" name="sex1" value="2"> 女</label> <br>
  76. 							<label for="chi3"><input id="chi3" type="radio" name="sex1" value="3"> 保密</label> <br>
  77.  
  78. 					</td>
  79. 				</tr>
  80. 				<tr>
  81. 					<th>多行文本</th>
  82. 					<td>
  83. 							<textarea rows="6" cols="50" name="article"></textarea>
  84. 					</td>
  85. 				</tr>
  86. 				<tr>
  87. 					<th>下拉列表</th>
  88. 					<td>
  89. 							<select name="shuaige">
  90. 								<option value="0">--请选择帅哥--</option>
  91. 								<option value="1">刘德华</option>
  92. 								<option value="2">张学友</option>
  93. 								<option value="3">郭富城</option>
  94. 								<option selected value="4">高洛峰</option>
  95. 							</select>
  96. 					</td>
  97. 				</tr>
  98. 				<tr>
  99. 				<th>列表</th>
  100. 					<td>
  101. 							<select size="8" multiple name="shuaige">
  102. 								<option value="0">--请选择帅哥--</option>
  103. 								<option selected value="1">刘德华</option>
  104. 								<option value="2">张学友</option>
  105. 								<option selected value="3">郭富城</option>
  106. 								<option value="4">高洛峰</option>
  107. 							</select>
  108. 					</td>
  109. 				</tr>
  110. 				<tr>
  111.  
  112. 					<td colspan="2" align="center">
  113. 						<input type="reset" name="reset" value="重置">
  114. 						<input type="submit" name="delete" value="删除">
  115. 						<input type="submit" name="remove" value="转移">
  116. 						<input type="submit" name="zd" value="置顶">
  117. 						<input type="image"  name="but" alt="this is a submit" src="but.jpg">
  118. 					</td>
  119. 				</tr>
  120. 			</form>
  121. 			<!--
  122. 			form 标签 -- 代表HTML表单
  123. 				form标签是成对出现的,以<form>开始,以</form>结束
  124. 				常用属性.
  125. 					action -- 浏览者输入的数据被传送到的地方,如一个PHP页面(dofm.php)
  126. 					method -- 数据传送的方法
  127. 						get -- 此方式传递数据量少,但是传递的信息显示在网址上。
  128. 						post --此方式传送信息多,而且不会把传递信息显示在网址上
  129. 					enctype -- 表示将数据发送到服务器时浏览器使用的编码类型
  130. 						application/x-www-form-urlencoded -- 窗体数据被编码为名称/值对.这是标准的编码格式.默认的。
  131. 						multipart/form-data -- 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分.
  132. 						text/plain -- 以纯文本形式进行编码,其中不含任何控件或格式字符
  133. 			input 标签 -- 代表HTML表单的单行输入域
  134. 				input标签是单独出现的,<input />
  135. 				属性.
  136. 					type -- 代表一个输入域的显示方式(分为输入型,选择型,点击型)
  137. 					name – 此表单项名称
  138. 					value -- 输入域的值
  139. 					size -- 输入域的长度
  140. 					maxlength -- 输入域最多可以输入文字的长度
  141. 					checked -- 如果是选择型的输入域,代表已经被选择，值为checked
  142. 					readonly -- 输入域可以选择,但是无法修改 ，值为readonly
  143. 					disabled -- 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用。如：disabled="disabled"
  144. 					accesskey -- 表单的快捷键访问方式，如值为h即按Alt+h快捷键。
  145. 					tabindex -- 输入域的"tab"键遍历顺序
  146. 					src -- 当使用图片来表示按钮时,代表图片的位置(URI)
  147. 					alt -- 用来替换提交按钮的图片(当在input的src属性定义的图片无法显示时)提示信息。
  148. 			type属性 -- 代表HTML表单,单行输入域(框)的表现方式
  149. 			type属性取值:
  150. 				text -- 文字输入域(输入型)
  151. 				password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)
  152. 				file -- 可以输入一个文件路径(输入型)
  153. 				checkbox -- 复选框.可以选择零个或多个(选择型)
  154. 				radio -- 单选框.只可以选择一个而且必须选择一个(选择型)
  155. 				hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器
  156. 				button -- 按钮(点击型)
  157. 				image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src属性)(点击型)
  158. 				submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性来显示按钮上的文字(点击型)
  159. 				reset -- 重置按钮,可以把表单中的信息清空(点击型)
  160. 			textarea 标签 -- 代表HTML表单多行输入域
  161. 				此标签是成对出现的,即以<textarea>开始,以</textarea>结束
  162. 				属性：
  163. 					cols -- 多行输入域的列数
  164. 					rows -- 多行输入域的行数
  165. 					name – 此表单项名称
  166. 					accesskey -- 表单的快捷键访问方式
  167. 					disabled 无法获得焦点,无法选择,
  168. 							   灰色显示,表单中无效
  169. 					readonly 输入域可以选择,但是无法修改
  170. 					tabindex 输入域,使用"tab"键的遍历顺序
  171. 			select 标签 -- 选择列表标签
  172. 				select标签是成对出现的,以<select>开始,以</select>结束
  173. 				此标签中的每对option标签代表一个选择项
  174. 				属性:
  175. 					name – 表单项名称
  176. 					size -- 选择域的高度
  177. 					multiple -- 可以有多个选择
  178. 					disabled -- 以灰色显示,在表单中不起任何作用
  179. 					tabindex -- 使用"tab"键的遍历顺序
  180. 			option 标签 -- 代表选择列表的一个选择项
  181. 				option标签是成对出现的,以<option>开始,以</option>结束
  182. 				属性:
  183. 					label -- 说明选择项
  184. 					value -- 说明选择项的值
  185. 					selected -- 此选择项已经被选择
  186. 					disabled -- 输入框无法获得焦点,以灰色显示,在表单中表示禁用
  187. 					tabindex -- 使用"tab"键的遍历顺序
  188.  
  189. 			-->
  190. 		</table>
  191. 		<a href="HTML的设计与应用.html#来吧来吧" name="碗里来">快到碗里来</a>
  192. 	</body>
  193. </html>

HTML表单的应用的更多相关文章

  1. ASP.NET Aries 入门开发教程9：业务表单的开发

    前言: 经过前面那么多篇的列表的介绍,终于到了大伙期待的表单开发了. 也是本系列的最后一篇文章了! 1:表单页面的权限设置与继承 对于表单页面,权限的设置有两种: 1:你可以选择添加菜单(设置为不显示 ...

  2. 探索ASP.NET MVC5系列之~~~3.视图篇（下）---包含常用表单和暴力解猜防御

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  3. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  4. jQuery学习之路（5）- 简单的表单应用

    ▓▓▓▓▓▓ 大致介绍 接下来的这几个博客是对前面所学知识的一个简单的应用,来加深理解 ▓▓▓▓▓▓ 单行文本框 只介绍一个简单的样式:获取和失去焦点改变样式 基本结构: <form actio ...

  5. 12、Struts2表单重复提交

    什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...

  6. .net erp（办公oa）开发平台架构概要说明之表单设计器

    背景:搭建一个适合公司erp业务的开发平台.   架构概要图: 表单设计开发部署示例图    表单设计开发部署示例说明1)每个开发人员可以自己部署表单设计至本地一份(当然也可以共用一套开发环境,但是如 ...

  7. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

  8. 玩转spring boot——AOP与表单验证

    AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...

  9. from表单提交数据之后，后台对象接受不到值

    如果SSH框架下,前段页面通过from表单提交数据之后,在后台对象显示空值,也就是接收不到值得情况下.首先保证前段输入框有值,这个可以在提交的时候用jQuery的id或者name选择器alert弹出测 ...

  10. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

随机推荐

  1. Spark的性能调优

    下面这些关于Spark的性能调优项,有的是来自官方的,有的是来自别的的工程师,有的则是我自己总结的. Data Serialization,默认使用的是Java Serialization,这个程序员 ...

  2. How to merge Scala Lists

    Scala List FAQ: How do I merge a List in Scala? NOTE: I wrote the solutions shown below a long time ...

  3. solr学习之一 搜索基本知识

    学习了一段时间的solr了,用自己的方式总结下目前学到的内容,这是个系列文章,这里面的有些说法可能不准确,也可能有问题 欢迎大家指正. 一.搜索引擎目的 搜索引擎在我们的生活中,已经无处不在,除了我们 ...

  4. Spring Boot干货系列：（二）配置文件解析

    Spring Boot干货系列:(二)配置文件解析 2017-02-28 嘟嘟MD 嘟爷java超神学堂   前言 上一篇介绍了Spring Boot的入门,知道了Spring Boot使用“习惯优于 ...

  5. PLSQL Developer新手使用教程（图文教程）

    PLSQL Developer是Oracle数据库开发工具,很牛也很好用,PLSQL Developer功能很强大,可以做为集成调试器,有SQL窗口,命令窗口,对象浏览器和性能优化等功能,下面简单的介 ...

  6. 复习，关于server.xml的一点理解

    刚才在思考,我所写的一些java代码存放在了eclipse的一个workspace的目录下,这个目录下还包含我的web-project的所有html和jsp文件,以及/WEB-ROOT/WEB-INF ...

  7. LeetCode: solveSudoku 解题报告

    Sudoku SolverWrite a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are in ...

  8. eclipse 修改java代码不重启服务器 生效配置

    1.本文目的:用tomcat进行web开发时,修改Java代码往往要重启代码,当工程较大启动较慢时,严重影响效率,本文通过eclipse下tomcat开发和发布web程序时,对一些Java代码一般修改 ...

  9. eclipse 启动报share library load faild

      eclipse 与 jdk 版本要一致 *32 - 对应32位 *64 - 对应64位

  10. Android开发日记（四）

    在服务器端数据库新建一个表ad 在DataInfo.edxm模型中点击从数据库更新模型,发布. 就新建了一个实体ad 然后新建cs文件 using System; using System.Colle ...